@seed-design/lynx-css 0.14.1 → 1.0.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 (107) hide show
  1. package/all.css +936 -275
  2. package/all.min.css +1 -1
  3. package/base.css +10 -0
  4. package/base.min.css +1 -1
  5. package/package.json +2 -2
  6. package/recipes/alert-dialog.css +11 -0
  7. package/recipes/alert-dialog.d.ts +1 -1
  8. package/recipes/alert-dialog.mjs +8 -0
  9. package/recipes/app-bar.css +7 -3
  10. package/recipes/attachment-input-item.css +7 -0
  11. package/recipes/attachment-input.css +2 -1
  12. package/recipes/avatar-stack.css +69 -0
  13. package/recipes/avatar-stack.d.ts +24 -0
  14. package/recipes/avatar-stack.mjs +55 -0
  15. package/recipes/avatar.css +257 -0
  16. package/recipes/avatar.d.ts +28 -0
  17. package/recipes/avatar.mjs +82 -0
  18. package/recipes/badge.css +1 -9
  19. package/recipes/badge.d.ts +0 -4
  20. package/recipes/badge.mjs +1 -14
  21. package/recipes/bottom-sheet.css +33 -2
  22. package/recipes/bottom-sheet.d.ts +5 -1
  23. package/recipes/bottom-sheet.mjs +28 -2
  24. package/recipes/callout.css +1 -8
  25. package/recipes/checkbox.css +7 -1
  26. package/recipes/checkmark.css +17 -26
  27. package/recipes/checkmark.d.ts +1 -5
  28. package/recipes/checkmark.mjs +7 -60
  29. package/recipes/content-placeholder.css +29 -0
  30. package/recipes/content-placeholder.d.ts +21 -0
  31. package/recipes/content-placeholder.mjs +44 -0
  32. package/recipes/dialog.css +4 -2
  33. package/recipes/{input-button.css → field-button.css} +49 -49
  34. package/recipes/field-button.d.ts +40 -0
  35. package/recipes/{input-button.mjs → field-button.mjs} +20 -20
  36. package/recipes/floating-action-button.css +15 -8
  37. package/recipes/image-frame-icon.css +8 -0
  38. package/recipes/image-frame-icon.d.ts +19 -0
  39. package/recipes/image-frame-icon.mjs +22 -0
  40. package/recipes/image-frame-indicator.css +17 -0
  41. package/recipes/image-frame-indicator.d.ts +21 -0
  42. package/recipes/image-frame-indicator.mjs +36 -0
  43. package/recipes/image-frame-reaction-button.css +20 -0
  44. package/recipes/image-frame-reaction-button.d.ts +21 -0
  45. package/recipes/image-frame-reaction-button.mjs +40 -0
  46. package/recipes/image-frame.css +87 -0
  47. package/recipes/image-frame.d.ts +32 -0
  48. package/recipes/image-frame.mjs +72 -0
  49. package/recipes/list-item.css +0 -4
  50. package/recipes/list-item.d.ts +1 -1
  51. package/recipes/list-item.mjs +0 -4
  52. package/recipes/menu-sheet-item.css +5 -1
  53. package/recipes/menu-sheet.css +5 -0
  54. package/recipes/menu-sheet.d.ts +1 -1
  55. package/recipes/menu-sheet.mjs +4 -0
  56. package/recipes/menu.css +1 -13
  57. package/recipes/menu.d.ts +1 -1
  58. package/recipes/menu.mjs +0 -4
  59. package/recipes/page-banner.css +4 -4
  60. package/recipes/progress-circle.css +38 -4
  61. package/recipes/progress-circle.d.ts +1 -1
  62. package/recipes/progress-circle.mjs +1 -0
  63. package/recipes/pull-to-refresh.css +14 -0
  64. package/recipes/pull-to-refresh.d.ts +21 -0
  65. package/recipes/pull-to-refresh.mjs +40 -0
  66. package/recipes/reaction-button.css +0 -6
  67. package/recipes/reaction-button.d.ts +0 -4
  68. package/recipes/reaction-button.mjs +0 -11
  69. package/recipes/scroll-fog.css +4 -17
  70. package/recipes/scroll-fog.d.ts +1 -1
  71. package/recipes/scroll-fog.mjs +0 -8
  72. package/recipes/segmented-control.css +24 -14
  73. package/recipes/segmented-control.d.ts +4 -4
  74. package/recipes/segmented-control.mjs +8 -8
  75. package/recipes/select-box-checkmark.css +4 -7
  76. package/recipes/select-box.css +10 -4
  77. package/recipes/select-item.css +13 -2
  78. package/recipes/select-item.d.ts +1 -1
  79. package/recipes/select-item.mjs +4 -0
  80. package/recipes/select-trigger.css +13 -2
  81. package/recipes/select-trigger.d.ts +1 -1
  82. package/recipes/select-trigger.mjs +4 -0
  83. package/recipes/select.css +1 -13
  84. package/recipes/select.d.ts +1 -1
  85. package/recipes/select.mjs +0 -4
  86. package/recipes/slider-marker.css +2 -2
  87. package/recipes/slider-tick.css +1 -1
  88. package/recipes/slider.css +2 -5
  89. package/recipes/tabs.css +11 -11
  90. package/recipes/wheel-picker.css +151 -0
  91. package/recipes/wheel-picker.d.ts +32 -0
  92. package/recipes/wheel-picker.mjs +90 -0
  93. package/vars/component/alert-dialog.d.ts +2 -0
  94. package/vars/component/bottom-sheet.d.ts +3 -0
  95. package/vars/component/bottom-sheet.mjs +1 -0
  96. package/vars/component/dialog.d.ts +6 -2
  97. package/vars/component/help-bubble.d.ts +2 -1
  98. package/vars/component/menu-sheet.d.ts +5 -0
  99. package/vars/component/menu-sheet.mjs +1 -0
  100. package/vars/component/menu.d.ts +2 -1
  101. package/vars/component/page-banner-close-button.d.ts +4 -4
  102. package/vars/component/page-banner-close-button.mjs +4 -4
  103. package/vars/component/popover.d.ts +4 -4
  104. package/vars/component/select.d.ts +2 -1
  105. package/vars/component/side-panel.d.ts +10 -7
  106. package/vars/component/snackbar.d.ts +1 -0
  107. package/recipes/input-button.d.ts +0 -40
package/all.css CHANGED
@@ -2,6 +2,16 @@
2
2
  font-size: 16px;
3
3
  }
4
4
 
5
+ :root, :root.seed-user-color-scheme-light, :root.seed-color-mode-light-only, .seed-color-mode-light-only {
6
+ --seed-content-placeholder-preset-light-display: flex;
7
+ --seed-content-placeholder-preset-dark-display: none;
8
+ }
9
+
10
+ :root.seed-user-color-scheme-dark, :root.seed-color-mode-dark-only, .seed-color-mode-dark-only {
11
+ --seed-content-placeholder-preset-light-display: none;
12
+ --seed-content-placeholder-preset-dark-display: flex;
13
+ }
14
+
5
15
  text {
6
16
  background-color: var(--seed-color-bg-transparent);
7
17
  }
@@ -602,6 +612,154 @@ text {
602
612
  --seed-scale-s98: .98;
603
613
  }
604
614
 
615
+ .seed-image-frame__root {
616
+ aspect-ratio: var(--seed-image-frame-ratio);
617
+ flex-shrink: 0;
618
+ position: relative;
619
+ overflow: hidden;
620
+ }
621
+
622
+ .seed-image-frame__content {
623
+ opacity: 0;
624
+ pointer-events: none;
625
+ width: 100%;
626
+ height: 100%;
627
+ position: absolute;
628
+ top: 0;
629
+ bottom: 0;
630
+ left: 0;
631
+ right: 0;
632
+ }
633
+
634
+ .seed-image-frame__fallback {
635
+ position: absolute;
636
+ top: 0;
637
+ bottom: 0;
638
+ left: 0;
639
+ right: 0;
640
+ }
641
+
642
+ .seed-image-frame__stroke {
643
+ border-radius: var(--seed-image-frame-radius);
644
+ pointer-events: none;
645
+ position: absolute;
646
+ top: 0;
647
+ bottom: 0;
648
+ left: 0;
649
+ right: 0;
650
+ }
651
+
652
+ .seed-image-frame__floater {
653
+ display: flex;
654
+ position: absolute;
655
+ }
656
+
657
+ .seed-image-frame__stroke--stroke_true {
658
+ border-style: solid;
659
+ border-width: 1px;
660
+ border-color: var(--seed-color-stroke-neutral-subtle);
661
+ }
662
+
663
+ .seed-image-frame__content--loaded_true {
664
+ opacity: 1;
665
+ pointer-events: auto;
666
+ }
667
+
668
+ .seed-image-frame__floater--placement_top-start {
669
+ top: var(--seed-image-frame-offset-y);
670
+ left: var(--seed-image-frame-offset-x);
671
+ }
672
+
673
+ .seed-image-frame__floater--placement_top-center {
674
+ top: var(--seed-image-frame-offset-y);
675
+ left: calc(50% + var(--seed-image-frame-offset-x));
676
+ transform: translateX(-50%);
677
+ }
678
+
679
+ .seed-image-frame__floater--placement_top-end {
680
+ top: var(--seed-image-frame-offset-y);
681
+ right: var(--seed-image-frame-offset-x);
682
+ }
683
+
684
+ .seed-image-frame__floater--placement_middle-start {
685
+ top: calc(50% + var(--seed-image-frame-offset-y));
686
+ left: var(--seed-image-frame-offset-x);
687
+ transform: translateY(-50%);
688
+ }
689
+
690
+ .seed-image-frame__floater--placement_middle-center {
691
+ top: calc(50% + var(--seed-image-frame-offset-y));
692
+ left: calc(50% + var(--seed-image-frame-offset-x));
693
+ transform: translate(-50%, -50%);
694
+ }
695
+
696
+ .seed-image-frame__floater--placement_middle-end {
697
+ top: calc(50% + var(--seed-image-frame-offset-y));
698
+ right: var(--seed-image-frame-offset-x);
699
+ transform: translateY(-50%);
700
+ }
701
+
702
+ .seed-image-frame__floater--placement_bottom-start {
703
+ bottom: var(--seed-image-frame-offset-y);
704
+ left: var(--seed-image-frame-offset-x);
705
+ }
706
+
707
+ .seed-image-frame__floater--placement_bottom-center {
708
+ bottom: var(--seed-image-frame-offset-y);
709
+ left: calc(50% + var(--seed-image-frame-offset-x));
710
+ transform: translateX(-50%);
711
+ }
712
+
713
+ .seed-image-frame__floater--placement_bottom-end {
714
+ bottom: var(--seed-image-frame-offset-y);
715
+ right: var(--seed-image-frame-offset-x);
716
+ }
717
+
718
+ .seed-image-frame-icon {
719
+ color: var(--seed-color-palette-static-white);
720
+ justify-content: center;
721
+ align-items: center;
722
+ width: 24px;
723
+ height: 24px;
724
+ display: flex;
725
+ }
726
+
727
+ .seed-image-frame-indicator__root {
728
+ background-color: var(--seed-color-palette-static-black-alpha-800);
729
+ border-radius: var(--seed-radius-full);
730
+ padding-left: var(--seed-dimension-x1_5);
731
+ padding-right: var(--seed-dimension-x1_5);
732
+ padding-top: var(--seed-dimension-x0_5);
733
+ padding-bottom: var(--seed-dimension-x0_5);
734
+ justify-content: center;
735
+ align-items: center;
736
+ display: flex;
737
+ }
738
+
739
+ .seed-image-frame-indicator__label {
740
+ color: var(--seed-color-palette-static-white);
741
+ font-size: var(--seed-font-size-t1);
742
+ line-height: var(--seed-line-height-t1);
743
+ font-weight: var(--seed-font-weight-medium);
744
+ }
745
+
746
+ .seed-image-frame-reaction-button__root {
747
+ width: var(--seed-dimension-x6);
748
+ height: var(--seed-dimension-x6);
749
+ background-color: #0000;
750
+ flex-shrink: 0;
751
+ justify-content: center;
752
+ align-items: center;
753
+ display: flex;
754
+ position: relative;
755
+ }
756
+
757
+ .seed-image-frame-reaction-button__fillIcon, .seed-image-frame-reaction-button__lineIcon {
758
+ width: var(--seed-dimension-x6);
759
+ height: var(--seed-dimension-x6);
760
+ pointer-events: none;
761
+ }
762
+
605
763
  .seed-accordion__root, .seed-accordion__item {
606
764
  flex-direction: column;
607
765
  width: 100%;
@@ -1250,6 +1408,7 @@ text {
1250
1408
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
1251
1409
  background-color: var(--seed-color-bg-layer-floating);
1252
1410
  max-width: 272px;
1411
+ max-height: 100%;
1253
1412
  margin-top: var(--seed-dimension-x16);
1254
1413
  margin-right: var(--seed-dimension-x8);
1255
1414
  margin-bottom: var(--seed-dimension-x16);
@@ -1260,6 +1419,7 @@ text {
1260
1419
  transition-property: opacity, transform;
1261
1420
  display: flex;
1262
1421
  position: relative;
1422
+ overflow: hidden;
1263
1423
  transform: scale(1.3);
1264
1424
  }
1265
1425
 
@@ -1283,6 +1443,17 @@ text {
1283
1443
  transform: scale(1);
1284
1444
  }
1285
1445
 
1446
+ .seed-alert-dialog__scrollArea {
1447
+ flex-shrink: 1;
1448
+ width: 100%;
1449
+ min-height: 0;
1450
+ }
1451
+
1452
+ .seed-alert-dialog__scrollContent {
1453
+ flex-direction: column;
1454
+ display: flex;
1455
+ }
1456
+
1286
1457
  .seed-alert-dialog__header {
1287
1458
  gap: var(--seed-dimension-x1_5);
1288
1459
  padding-top: var(--seed-dimension-x5);
@@ -1332,7 +1503,7 @@ text {
1332
1503
  }
1333
1504
 
1334
1505
  .seed-app-bar__root {
1335
- z-index: var(--z-index-app-bar);
1506
+ z-index: 0;
1336
1507
  flex-direction: row;
1337
1508
  align-items: flex-end;
1338
1509
  width: 100%;
@@ -1367,8 +1538,9 @@ text {
1367
1538
  }
1368
1539
 
1369
1540
  .seed-app-bar__iconButton {
1370
- border-radius: var(--seed-radius-r1);
1371
- background: none;
1541
+ border-radius: var(--seed-radius-r2);
1542
+ background-color: var(--seed-color-bg-transparent);
1543
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
1372
1544
  border-width: 0;
1373
1545
  justify-content: center;
1374
1546
  align-items: center;
@@ -1376,6 +1548,10 @@ text {
1376
1548
  display: flex;
1377
1549
  }
1378
1550
 
1551
+ .seed-app-bar__iconButton:active {
1552
+ background-color: var(--seed-color-bg-transparent-pressed);
1553
+ }
1554
+
1379
1555
  .seed-app-bar__iconButton.seed-app-bar__icon-button-edge-leading {
1380
1556
  margin-left: -10px;
1381
1557
  }
@@ -1520,6 +1696,378 @@ text {
1520
1696
  color: var(--seed-color-palette-static-white);
1521
1697
  }
1522
1698
 
1699
+ .seed-avatar__root {
1700
+ border-radius: var(--seed-radius-full);
1701
+ flex-shrink: 0;
1702
+ justify-content: center;
1703
+ align-items: center;
1704
+ display: flex;
1705
+ position: relative;
1706
+ }
1707
+
1708
+ .seed-avatar__imageContainer {
1709
+ clip-path: var(--avatar-badge-clip-none);
1710
+ background-image: linear-gradient(#0000, #0000);
1711
+ width: 100%;
1712
+ height: 100%;
1713
+ overflow: hidden;
1714
+ }
1715
+
1716
+ .seed-avatar__image {
1717
+ border-radius: var(--seed-radius-full);
1718
+ width: 100%;
1719
+ height: 100%;
1720
+ overflow: hidden;
1721
+ }
1722
+
1723
+ .seed-avatar__pendingImageContainer {
1724
+ pointer-events: none;
1725
+ }
1726
+
1727
+ .seed-avatar__pendingImage {
1728
+ opacity: 0;
1729
+ pointer-events: none;
1730
+ }
1731
+
1732
+ .seed-avatar__fallback {
1733
+ clip-path: var(--avatar-badge-clip-none);
1734
+ border-radius: var(--seed-radius-full);
1735
+ background-image: linear-gradient(#0000, #0000);
1736
+ justify-content: center;
1737
+ align-items: center;
1738
+ width: 100%;
1739
+ height: 100%;
1740
+ display: flex;
1741
+ position: absolute;
1742
+ top: 0;
1743
+ left: 0;
1744
+ overflow: hidden;
1745
+ }
1746
+
1747
+ .seed-avatar__stroke {
1748
+ clip-path: var(--avatar-badge-clip-none);
1749
+ border-radius: var(--seed-radius-full);
1750
+ pointer-events: none;
1751
+ background-image: linear-gradient(#0000, #0000);
1752
+ width: 100%;
1753
+ height: 100%;
1754
+ position: absolute;
1755
+ top: 0;
1756
+ left: 0;
1757
+ overflow: hidden;
1758
+ }
1759
+
1760
+ .seed-avatar__badge {
1761
+ justify-content: center;
1762
+ align-items: center;
1763
+ display: flex;
1764
+ position: absolute;
1765
+ }
1766
+
1767
+ .seed-avatar__imageContainer--badgeMask_circle, .seed-avatar__fallback--badgeMask_circle, .seed-avatar__stroke--badgeMask_circle {
1768
+ clip-path: var(--avatar-badge-clip-circle);
1769
+ }
1770
+
1771
+ .seed-avatar__badge--badgeMask_circle {
1772
+ border-radius: 9999px;
1773
+ }
1774
+
1775
+ .seed-avatar__imageContainer--badgeMask_flower, .seed-avatar__fallback--badgeMask_flower, .seed-avatar__stroke--badgeMask_flower {
1776
+ clip-path: var(--avatar-badge-clip-flower);
1777
+ }
1778
+
1779
+ .seed-avatar__imageContainer--badgeMask_shield, .seed-avatar__fallback--badgeMask_shield, .seed-avatar__stroke--badgeMask_shield {
1780
+ clip-path: var(--avatar-badge-clip-shield);
1781
+ }
1782
+
1783
+ .seed-avatar__root--size_20 {
1784
+ --avatar-badge-clip-none: path("M0 0H20V20H0Z");
1785
+ --avatar-badge-clip-circle: path("M0 0H20V20H0Z");
1786
+ --avatar-badge-clip-flower: path("M0 0H20V20H0Z");
1787
+ --avatar-badge-clip-shield: path("M0 0H20V20H0Z");
1788
+ width: 20px;
1789
+ height: 20px;
1790
+ }
1791
+
1792
+ .seed-avatar__stroke--size_20 {
1793
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
1794
+ }
1795
+
1796
+ .seed-avatar__badge--size_20 {
1797
+ display: none;
1798
+ }
1799
+
1800
+ .seed-avatar__root--size_24 {
1801
+ --avatar-badge-clip-none: path("M0 0H24V24H0Z");
1802
+ --avatar-badge-clip-circle: path("M0 0H26V26H0ZM26 20A6 6 0 1 0 14 20A6 6 0 1 0 26 20Z");
1803
+ --avatar-badge-clip-flower: path("M0 0H26V26H0ZM25.21681 17C24.65334 16.03478 23.63075 15.50783 22.58727 15.53913C22.08639 14.6313 21.12639 14 19.99944 14C18.87249 14 17.91249 14.62087 17.41161 15.53913C16.37335 15.51304 15.35074 16.03478 14.78726 17C14.22378 17.96521 14.28639 19.11305 14.82378 20C14.28117 20.88695 14.22378 22.03479 14.78726 23C15.35074 23.96521 16.37335 24.49216 17.41683 24.46089C17.9177 25.36869 18.8777 26 20.00465 26C21.1316 26 22.0916 25.37911 22.59249 24.46089C23.63075 24.48695 24.65334 23.96521 25.21681 23C25.78029 22.03479 25.7177 20.88695 25.18029 20C25.72291 19.11305 25.78029 17.96521 25.21681 17Z");
1804
+ --avatar-badge-clip-shield: path("M0 0V26H26V0ZM20.80138 25.79476C20.79391 25.7981 20.78536 25.80204 20.76991 25.80913C20.76725 25.81036 20.76335 25.81227 20.75829 25.81471C20.68558 25.84985 20.37346 26.00071 20.00004 26C19.6286 26.00075 19.32106 25.85281 19.24475 25.8161L19.19859 25.79476C19.07945 25.74144 18.91396 25.66471 18.71731 25.56635C18.32787 25.37157 17.79774 25.08275 17.25759 24.71285C16.72648 24.3491 16.12829 23.86828 15.64905 23.27461C15.17277 22.68463 14.72279 21.86727 14.72279 20.86921V16.9155C14.72279 16.25992 15.13262 15.67426 15.74854 15.44969L19.46551 14.0944C19.81074 13.96853 20.18926 13.96853 20.53445 14.0944L24.25145 15.44969C24.86735 15.67426 25.27719 16.25992 25.27719 16.9155V20.86921C25.27719 21.86727 24.82722 22.68463 24.35094 23.27461C23.87169 23.86828 23.27352 24.3491 22.74237 24.71285C22.20226 25.08275 21.67209 25.37157 21.28269 25.56635C21.08604 25.66471 20.92051 25.74148 20.80138 25.79476Z");
1805
+ width: 24px;
1806
+ height: 24px;
1807
+ }
1808
+
1809
+ .seed-avatar__stroke--size_24 {
1810
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
1811
+ }
1812
+
1813
+ .seed-avatar__badge--size_24 {
1814
+ width: 10px;
1815
+ height: 10px;
1816
+ top: 15px;
1817
+ left: 15px;
1818
+ }
1819
+
1820
+ .seed-avatar__root--size_36 {
1821
+ --avatar-badge-clip-none: path("M0 0H36V36H0Z");
1822
+ --avatar-badge-clip-circle: path("M0 0H38V38H0ZM38 29A9 9 0 1 0 20 29A9 9 0 1 0 38 29Z");
1823
+ --avatar-badge-clip-flower: path("M0 0H38V38H0ZM36.82522 24.5C35.98001 23.05218 34.44612 22.26174 32.88091 22.3087C32.12958 20.94696 30.68958 20 28.99916 20C27.30873 20 25.86873 20.9313 25.11741 22.3087C23.56002 22.26956 22.02611 23.05218 21.18089 24.5C20.33567 25.94782 20.42959 27.66958 21.23567 29C20.42176 30.33043 20.33567 32.05218 21.18089 33.5C22.02611 34.94782 23.56002 35.73824 25.12524 35.69133C25.87655 37.05303 27.31655 38 29.00698 38C30.6974 38 32.1374 37.06867 32.88873 35.69133C34.44612 35.73042 35.98001 34.94782 36.82522 33.5C37.67043 32.05218 37.57655 30.33043 36.77043 29C37.58437 27.66958 37.67043 25.94782 36.82522 24.5Z");
1824
+ --avatar-badge-clip-shield: path("M0 0V38H38V0ZM30.20206 37.69214C30.19087 37.69715 30.17804 37.70306 30.15487 37.71369C30.15087 37.71554 30.14502 37.71841 30.13743 37.72207C30.02836 37.77477 29.56019 38.00107 29.00006 38C28.4429 38.00113 27.98159 37.77922 27.86713 37.72415L27.79788 37.69214C27.61917 37.61216 27.37094 37.49707 27.07597 37.34952C26.49181 37.05736 25.69661 36.62412 24.88639 36.06927C24.08971 35.52365 23.19243 34.80241 22.47357 33.91192C21.75916 33.02694 21.08418 31.80091 21.08418 30.30382V24.37326C21.08418 23.38988 21.69892 22.51139 22.6228 22.17453L28.19827 20.1416C28.71611 19.9528 29.28389 19.9528 29.80167 20.1416L35.37718 22.17453C36.30102 22.51139 36.91578 23.38988 36.91578 24.37326V30.30382C36.91578 31.80091 36.24084 33.02694 35.52641 33.91192C34.80753 34.80241 33.91029 35.52365 33.11356 36.06927C32.30339 36.62412 31.50813 37.05736 30.92403 37.34952C30.62906 37.49707 30.38077 37.61221 30.20206 37.69214Z");
1825
+ width: 36px;
1826
+ height: 36px;
1827
+ }
1828
+
1829
+ .seed-avatar__stroke--size_36 {
1830
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
1831
+ }
1832
+
1833
+ .seed-avatar__badge--size_36 {
1834
+ width: 14px;
1835
+ height: 14px;
1836
+ top: 22px;
1837
+ left: 22px;
1838
+ }
1839
+
1840
+ .seed-avatar__root--size_42 {
1841
+ --avatar-badge-clip-none: path("M0 0H42V42H0Z");
1842
+ --avatar-badge-clip-circle: path("M0 0H44V44H0ZM44 34A10 10 0 1 0 24 34A10 10 0 1 0 44 34Z");
1843
+ --avatar-badge-clip-flower: path("M0 0H44V44H0ZM42.69469 29C41.75556 27.39131 40.05125 26.51304 38.31213 26.56522C37.47731 25.05217 35.87731 24 33.99906 24C32.12081 24 30.52081 25.03478 29.68601 26.56522C27.95558 26.52174 26.25123 27.39131 25.3121 29C24.37297 30.60869 24.47732 32.52175 25.37297 34C24.46862 35.47825 24.37297 37.39131 25.3121 39C26.25123 40.60869 27.95558 41.48694 29.69471 41.43481C30.5295 42.94781 32.1295 44 34.00775 44C35.886 44 37.486 42.96519 38.32081 41.43481C40.05125 41.47825 41.75556 40.60869 42.69469 39C43.63381 37.39131 43.5295 35.47825 42.63381 34C43.53819 32.52175 43.63381 30.60869 42.69469 29Z");
1844
+ --avatar-badge-clip-shield: path("M0 0V44H44V0ZM35.33563 43.65794C35.32319 43.6635 35.30894 43.67006 35.28319 43.68187C35.27875 43.68394 35.27225 43.68713 35.26381 43.69119C35.14262 43.74975 34.62244 44.00119 34.00006 44C33.381 44.00125 32.86844 43.75469 32.74125 43.6935L32.66431 43.65794C32.46575 43.56906 32.18994 43.44119 31.86219 43.27725C31.21312 42.95262 30.32956 42.47125 29.42932 41.85475C28.54413 41.2485 27.54714 40.44712 26.74841 39.45769C25.95462 38.47437 25.20464 37.11212 25.20464 35.44869V28.85918C25.20464 27.76653 25.88769 26.79044 26.91422 26.41614L33.10919 24.15733C33.68456 23.94756 34.31544 23.94756 34.89075 24.15733L41.08575 26.41614C42.11225 26.79044 42.79531 27.76654 42.79531 28.85918V35.44869C42.79531 37.11212 42.04537 38.47437 41.25156 39.45769C40.45281 40.44712 39.45587 41.2485 38.57062 41.85475C37.67044 42.47125 36.78681 42.95262 36.13781 43.27725C35.81006 43.44119 35.53419 43.56912 35.33563 43.65794Z");
1845
+ width: 42px;
1846
+ height: 42px;
1847
+ }
1848
+
1849
+ .seed-avatar__stroke--size_42 {
1850
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
1851
+ }
1852
+
1853
+ .seed-avatar__badge--size_42 {
1854
+ width: 16px;
1855
+ height: 16px;
1856
+ top: 26px;
1857
+ left: 26px;
1858
+ }
1859
+
1860
+ .seed-avatar__root--size_48 {
1861
+ --avatar-badge-clip-none: path("M0 0H48V48H0Z");
1862
+ --avatar-badge-clip-circle: path("M0 0H50V50H0ZM50 39A11 11 0 1 0 28 39A11 11 0 1 0 50 39Z");
1863
+ --avatar-badge-clip-flower: path("M0 0H50V50H0ZM48.56416 33.5C47.53112 31.73044 45.65637 30.76435 43.74334 30.82174C42.82504 29.15739 41.06504 28 38.99897 28C36.93289 28 35.17289 29.13826 34.25461 30.82174C32.35114 30.77391 30.47635 31.73044 29.44331 33.5C28.41027 35.26956 28.52505 37.37392 29.51027 39C28.51549 40.62608 28.41027 42.73044 29.44331 44.5C30.47635 46.26956 32.35114 47.23563 34.26418 47.17829C35.18245 48.84259 36.94245 50 39.00852 50C41.0746 50 42.8346 48.86171 43.75289 47.17829C45.65637 47.22607 47.53112 46.26956 48.56416 44.5C49.59719 42.73044 49.48245 40.62608 48.49719 39C49.49201 37.37392 49.59719 35.26956 48.56416 33.5Z");
1864
+ --avatar-badge-clip-shield: path("M0 0V50H50V0ZM40.46919 49.62373C40.45551 49.62985 40.43983 49.63707 40.41151 49.65006C40.40662 49.65233 40.39947 49.65584 40.39019 49.66031C40.25689 49.72472 39.68468 50.00131 39.00007 50C38.3191 50.00138 37.75528 49.73016 37.61538 49.66285L37.53074 49.62373C37.31233 49.52597 37.00893 49.38531 36.64841 49.20497C35.93444 48.84789 34.96252 48.31838 33.97225 47.64023C32.99854 46.97335 31.90186 46.09184 31.02325 45.00346C30.15008 43.92181 29.32511 42.42334 29.32511 40.59356V33.34509C29.32511 32.14318 30.07646 31.06948 31.20565 30.65776L38.02011 28.17306C38.65302 27.94231 39.34698 27.94231 39.97982 28.17306L46.79433 30.65776C47.92347 31.06948 48.67484 32.14319 48.67484 33.34509V40.59356C48.67484 42.42334 47.84991 43.92181 46.97672 45.00346C46.09809 46.09184 45.00146 46.97335 44.02769 47.64023C43.03748 48.31838 42.06549 48.84789 41.35159 49.20497C40.99107 49.38531 40.68761 49.52604 40.46919 49.62373Z");
1865
+ width: 48px;
1866
+ height: 48px;
1867
+ }
1868
+
1869
+ .seed-avatar__stroke--size_48 {
1870
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
1871
+ }
1872
+
1873
+ .seed-avatar__badge--size_48 {
1874
+ width: 18px;
1875
+ height: 18px;
1876
+ top: 30px;
1877
+ left: 30px;
1878
+ }
1879
+
1880
+ .seed-avatar__root--size_56 {
1881
+ --avatar-badge-clip-none: path("M0 0H56V56H0Z");
1882
+ --avatar-badge-clip-circle: path("M0 0H58V58H0ZM58 46A12 12 0 1 0 34 46A12 12 0 1 0 58 46Z");
1883
+ --avatar-badge-clip-flower: path("M0 0H58V58H0ZM56.43362 40C55.30667 38.06957 53.2615 37.01565 51.17455 37.07826C50.17278 35.26261 48.25277 34 45.99887 34C43.74497 34 41.82498 35.24174 40.82321 37.07826C38.7467 37.02609 36.70148 38.06957 35.57452 40C34.44757 41.93042 34.57278 44.2261 35.64756 46C34.56235 47.7739 34.44757 50.06958 35.57452 52C36.70148 53.93042 38.7467 54.98432 40.83366 54.92177C41.8354 56.73738 43.7554 58 46.0093 58C48.2632 58 50.1832 56.75822 51.18498 54.92177C53.2615 54.9739 55.30667 53.93042 56.43362 52C57.56058 50.06958 57.4354 47.7739 56.36057 46C57.44582 44.2261 57.56058 41.93042 56.43362 40Z");
1884
+ --avatar-badge-clip-shield: path("M0 0V58H58V0ZM47.60275 57.58953C47.58783 57.5962 47.57072 57.60408 47.53983 57.61825C47.5345 57.62073 47.5267 57.62455 47.51658 57.62942C47.37115 57.6997 46.74692 58.00142 46.00007 58C45.2572 58.0015 44.64213 57.70562 44.4895 57.6322L44.39718 57.58953C44.1589 57.48287 43.82793 57.32943 43.43462 57.1327C42.65575 56.74315 41.59548 56.1655 40.51518 55.4257C39.45295 54.6982 38.25657 53.73655 37.2981 52.54922C36.34554 51.36925 35.44557 49.73455 35.44557 47.73842V39.83101C35.44557 38.51984 36.26523 37.34853 37.49707 36.89937L44.93102 34.1888C45.62148 33.93707 46.37852 33.93707 47.0689 34.1888L54.5029 36.89937C55.7347 37.34853 56.55438 38.51985 56.55438 39.83101V47.73842C56.55438 49.73455 55.65445 51.36925 54.70188 52.54922C53.74338 53.73655 52.54705 54.6982 51.48475 55.4257C50.40452 56.1655 49.34417 56.74315 48.56538 57.1327C48.17207 57.32943 47.84103 57.48295 47.60275 57.58953Z");
1885
+ width: 56px;
1886
+ height: 56px;
1887
+ }
1888
+
1889
+ .seed-avatar__stroke--size_56 {
1890
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
1891
+ }
1892
+
1893
+ .seed-avatar__badge--size_56 {
1894
+ width: 20px;
1895
+ height: 20px;
1896
+ top: 36px;
1897
+ left: 36px;
1898
+ }
1899
+
1900
+ .seed-avatar__root--size_64 {
1901
+ --avatar-badge-clip-none: path("M0 0H64V64H0Z");
1902
+ --avatar-badge-clip-circle: path("M0 0H66V66H0ZM66 53A13 13 0 1 0 40 53A13 13 0 1 0 66 53Z");
1903
+ --avatar-badge-clip-flower: path("M0 0H66V66H0ZM64.30309 46.5C63.08223 44.4087 60.86662 43.26696 58.60576 43.33478C57.52051 41.36783 55.44051 40 52.99878 40C50.55706 40 48.47706 41.34522 47.39182 43.33478C45.14226 43.27826 42.9266 44.4087 41.70573 46.5C40.48486 48.59129 40.62051 51.07827 41.78486 53C40.60921 54.92173 40.48486 57.40871 41.70573 59.5C42.9266 61.59129 45.14226 62.73302 47.40313 62.66526C48.48835 64.63216 50.56835 66 53.01008 66C55.4518 66 57.5318 64.65474 58.61706 62.66526C60.86662 62.72172 63.08223 61.59129 64.30309 59.5C65.52396 57.40871 65.38835 54.92173 64.22396 53C65.39964 51.07827 65.52396 48.59129 64.30309 46.5Z");
1904
+ --avatar-badge-clip-shield: path("M0 0V66H66V0ZM54.73631 65.55532C54.72014 65.56255 54.70162 65.57108 54.66814 65.58644C54.66237 65.58912 54.65393 65.59326 54.64296 65.59854C54.48541 65.67468 53.80917 66.00154 53.00008 66C52.1953 66.00163 51.52897 65.68109 51.36362 65.60155L51.26361 65.55532C51.00547 65.43978 50.64692 65.27354 50.22084 65.06042C49.37706 64.63841 48.22843 64.01262 47.05811 63.21117C45.90736 62.42305 44.61129 61.38126 43.57294 60.09499C42.541 58.81669 41.56604 57.04576 41.56604 54.88329V46.31693C41.56604 44.89649 42.454 43.62757 43.78849 43.14099L51.84194 40.20453C52.58993 39.93182 53.41007 39.93182 54.15798 40.20453L62.21148 43.14099C63.54592 43.62757 64.43391 44.8965 64.43391 46.31693V54.88329C64.43391 57.04576 63.45899 58.81669 62.42703 60.09499C61.38866 61.38126 60.09264 62.42305 58.94181 63.21117C57.77157 64.01262 56.62286 64.63841 55.77916 65.06042C55.35308 65.27354 54.99444 65.43986 54.73631 65.55532Z");
1905
+ width: 64px;
1906
+ height: 64px;
1907
+ }
1908
+
1909
+ .seed-avatar__stroke--size_64 {
1910
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
1911
+ }
1912
+
1913
+ .seed-avatar__badge--size_64 {
1914
+ width: 22px;
1915
+ height: 22px;
1916
+ top: 42px;
1917
+ left: 42px;
1918
+ }
1919
+
1920
+ .seed-avatar__root--size_80 {
1921
+ --avatar-badge-clip-none: path("M0 0H80V80H0Z");
1922
+ --avatar-badge-clip-circle: path("M0 0H84V84H0ZM84 68A16 16 0 1 0 52 68A16 16 0 1 0 84 68Z");
1923
+ --avatar-badge-clip-flower: path("M0 0H84V84H0ZM81.9115 60C80.4089 57.42609 77.682 56.02087 74.8994 56.10435C73.5637 53.68348 71.0037 52 67.9985 52C64.9933 52 62.4333 53.65565 61.09762 56.10435C58.32893 56.03478 55.60197 57.42609 54.09936 60C52.59675 62.5739 52.76371 65.6348 54.19675 68C52.7498 70.3652 52.59675 73.4261 54.09936 76C55.60197 78.5739 58.32893 79.9791 61.11154 79.8957C62.4472 82.3165 65.0072 84 68.0124 84C71.0176 84 73.5776 82.3443 74.9133 79.8957C77.682 79.9652 80.4089 78.5739 81.9115 76C83.4141 73.4261 83.2472 70.3652 81.8141 68C83.2611 65.6348 83.4141 62.5739 81.9115 60Z");
1924
+ --avatar-badge-clip-shield: path("M0 0V84H84V0ZM70.137 83.4527C70.1171 83.4616 70.0943 83.4721 70.0531 83.491C70.046 83.4943 70.0356 83.4994 70.0221 83.5059C69.8282 83.5996 68.9959 84.0019 68.0001 84C67.0096 84.002 66.1895 83.6075 65.986 83.5096L65.8629 83.4527C65.5452 83.3105 65.1039 83.1059 64.5795 82.8436C63.541 82.3242 62.1273 81.554 60.68691 80.5676C59.2706 79.5976 57.67543 78.3154 56.39746 76.7323C55.12739 75.159 53.92743 72.9794 53.92743 70.3179V59.77468C53.92743 58.02645 55.02031 56.4647 56.66276 55.86583L66.5747 52.25173C67.4953 51.91609 68.5047 51.91609 69.4252 52.25173L79.3372 55.86583C80.9796 56.4647 82.0725 58.02646 82.0725 59.77468V70.3179C82.0725 72.9794 80.8726 75.159 79.6025 76.7323C78.3245 78.3154 76.7294 79.5976 75.313 80.5676C73.8727 81.554 72.4589 82.3242 71.4205 82.8436C70.8961 83.1059 70.4547 83.3106 70.137 83.4527Z");
1925
+ width: 80px;
1926
+ height: 80px;
1927
+ }
1928
+
1929
+ .seed-avatar__stroke--size_80 {
1930
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
1931
+ }
1932
+
1933
+ .seed-avatar__badge--size_80 {
1934
+ width: 28px;
1935
+ height: 28px;
1936
+ top: 54px;
1937
+ left: 54px;
1938
+ }
1939
+
1940
+ .seed-avatar__root--size_96 {
1941
+ --avatar-badge-clip-none: path("M0 0H96V96H0Z");
1942
+ --avatar-badge-clip-circle: path("M0 0H100V100H0ZM100 81A19 19 0 1 0 62 81A19 19 0 1 0 100 81Z");
1943
+ --avatar-badge-clip-flower: path("M0 0H100V100H0ZM97.51991 71.5C95.73557 68.44348 92.49738 66.77478 89.19304 66.87392C87.60689 63.99913 84.56689 62 80.99822 62C77.42954 62 74.38954 63.96608 72.80342 66.87392C69.5156 66.7913 66.27734 68.44348 64.49299 71.5C62.70865 74.55651 62.90691 78.19133 64.60864 81C62.89038 83.80867 62.70865 87.44349 64.49299 90.5C66.27734 93.55651 69.5156 95.22518 72.81995 95.12614C74.40605 98.00084 77.44605 100 81.01472 100C84.5834 100 87.6234 98.03386 89.20954 95.12614C92.49738 95.20867 95.73557 93.55651 97.51991 90.5C99.30424 87.44349 99.10605 83.80867 97.40424 81C99.12256 78.19133 99.30424 74.55651 97.51991 71.5Z");
1944
+ --avatar-badge-clip-shield: path("M0 0V100H100V0ZM83.53769 99.35008C83.51406 99.36065 83.48698 99.37312 83.43806 99.39556C83.42963 99.39948 83.41728 99.40554 83.40124 99.41326C83.17099 99.52452 82.18263 100.00226 81.00012 100C79.8239 100.00238 78.85003 99.53391 78.60837 99.41765L78.46219 99.35008C78.08492 99.18122 77.56088 98.93826 76.93816 98.62677C75.70494 98.00999 74.02617 97.09537 72.31571 95.92403C70.63384 94.77215 68.73957 93.24954 67.22198 91.36961C65.71378 89.50131 64.28882 86.91304 64.28882 83.75251V71.23243C64.28882 69.15641 65.58662 67.30183 67.53703 66.59067L79.30746 62.29893C80.40067 61.90036 81.59933 61.90036 82.69243 62.29893L94.46292 66.59067C96.41327 67.30183 97.71109 69.15642 97.71109 71.23243V83.75251C97.71109 86.91304 96.28621 89.50131 94.77797 91.36961C93.26034 93.24954 91.36616 94.77215 89.68419 95.92403C87.97383 97.09537 86.29494 98.00999 85.06184 98.62677C84.43912 98.93826 83.91496 99.18134 83.53769 99.35008Z");
1945
+ width: 96px;
1946
+ height: 96px;
1947
+ }
1948
+
1949
+ .seed-avatar__stroke--size_96 {
1950
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
1951
+ }
1952
+
1953
+ .seed-avatar__badge--size_96 {
1954
+ width: 32px;
1955
+ height: 32px;
1956
+ top: 65px;
1957
+ left: 65px;
1958
+ }
1959
+
1960
+ .seed-avatar__root--size_108 {
1961
+ --avatar-badge-clip-none: path("M0 0H108V108H0Z");
1962
+ --avatar-badge-clip-circle: path("M0 0H114V114H0ZM114 92A22 22 0 1 0 70 92A22 22 0 1 0 114 92Z");
1963
+ --avatar-badge-clip-flower: path("M0 0H114V114H0ZM111.12831 81C109.06224 77.46087 105.31275 75.5287 101.48667 75.64348C99.65009 72.31479 96.13009 70 91.99794 70C87.86579 70 84.34579 72.27652 82.50923 75.64348C78.70228 75.54782 74.95271 77.46087 72.88662 81C70.82054 84.53911 71.0501 88.74785 73.02053 92C71.03097 95.25215 70.82054 99.46089 72.88662 103C74.95271 106.53911 78.70228 108.47126 82.52837 108.35659C84.3649 111.68519 87.8849 114 92.01705 114C96.1492 114 99.6692 111.72341 101.50579 108.35659C105.31275 108.45215 109.06224 106.53911 111.12831 103C113.19439 99.46089 112.9649 95.25215 110.99439 92C112.98401 88.74785 113.19439 84.53911 111.12831 81Z");
1964
+ --avatar-badge-clip-shield: path("M0 0V114H114V0ZM94.93838 113.24746C94.91101 113.2597 94.87966 113.27414 94.82301 113.30013C94.81325 113.30466 94.79895 113.31168 94.78039 113.32061C94.51377 113.44945 93.36936 114.00261 92.00014 114C90.6382 114.00275 89.51056 113.46031 89.23075 113.3257L89.06149 113.24746C88.62465 113.05194 88.01786 112.77061 87.29681 112.40995C85.86888 111.69577 83.92504 110.63675 81.9445 109.28045C79.99707 107.9467 77.80372 106.18367 76.04651 104.00691C74.30016 101.84363 72.65022 98.84668 72.65022 95.18711V80.69018C72.65022 78.28637 74.15293 76.13896 76.41129 75.31552L90.04021 70.34613C91.30604 69.88462 92.69396 69.88462 93.95965 70.34613L107.58865 75.31552C109.84695 76.13896 111.34969 78.28638 111.34969 80.69018V95.18711C111.34969 98.84668 109.69983 101.84363 107.95344 104.00691C106.19619 106.18367 104.00293 107.9467 102.05537 109.28045C100.07496 110.63675 98.13099 111.69577 96.70319 112.40995C95.98214 112.77061 95.37521 113.05208 94.93838 113.24746Z");
1965
+ width: 108px;
1966
+ height: 108px;
1967
+ }
1968
+
1969
+ .seed-avatar__stroke--size_108 {
1970
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
1971
+ }
1972
+
1973
+ .seed-avatar__badge--size_108 {
1974
+ width: 36px;
1975
+ height: 36px;
1976
+ top: 74px;
1977
+ left: 74px;
1978
+ }
1979
+
1980
+ .seed-avatar-stack__root {
1981
+ flex-direction: row;
1982
+ align-items: center;
1983
+ display: flex;
1984
+ }
1985
+
1986
+ .seed-avatar-stack__item {
1987
+ border-radius: var(--seed-radius-full);
1988
+ flex-shrink: 0;
1989
+ }
1990
+
1991
+ .seed-avatar-stack__item--size_20 {
1992
+ box-shadow: 0 0 0 1px var(--seed-color-bg-layer-default);
1993
+ }
1994
+
1995
+ .seed-avatar-stack__overlap--size_20 {
1996
+ margin-left: -5px;
1997
+ }
1998
+
1999
+ .seed-avatar-stack__item--size_24 {
2000
+ box-shadow: 0 0 0 1px var(--seed-color-bg-layer-default);
2001
+ }
2002
+
2003
+ .seed-avatar-stack__overlap--size_24 {
2004
+ margin-left: -6px;
2005
+ }
2006
+
2007
+ .seed-avatar-stack__item--size_36 {
2008
+ box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
2009
+ }
2010
+
2011
+ .seed-avatar-stack__overlap--size_36 {
2012
+ margin-left: -8px;
2013
+ }
2014
+
2015
+ .seed-avatar-stack__item--size_42 {
2016
+ box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
2017
+ }
2018
+
2019
+ .seed-avatar-stack__overlap--size_42 {
2020
+ margin-left: -10px;
2021
+ }
2022
+
2023
+ .seed-avatar-stack__item--size_48 {
2024
+ box-shadow: 0 0 0 2px var(--seed-color-bg-layer-default);
2025
+ }
2026
+
2027
+ .seed-avatar-stack__overlap--size_48 {
2028
+ margin-left: -12px;
2029
+ }
2030
+
2031
+ .seed-avatar-stack__item--size_56 {
2032
+ box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
2033
+ }
2034
+
2035
+ .seed-avatar-stack__overlap--size_56 {
2036
+ margin-left: -13px;
2037
+ }
2038
+
2039
+ .seed-avatar-stack__item--size_64 {
2040
+ box-shadow: 0 0 0 3px var(--seed-color-bg-layer-default);
2041
+ }
2042
+
2043
+ .seed-avatar-stack__overlap--size_64 {
2044
+ margin-left: -16px;
2045
+ }
2046
+
2047
+ .seed-avatar-stack__item--size_80 {
2048
+ box-shadow: 0 0 0 4px var(--seed-color-bg-layer-default);
2049
+ }
2050
+
2051
+ .seed-avatar-stack__overlap--size_80 {
2052
+ margin-left: -20px;
2053
+ }
2054
+
2055
+ .seed-avatar-stack__item--size_96 {
2056
+ box-shadow: 0 0 0 5px var(--seed-color-bg-layer-default);
2057
+ }
2058
+
2059
+ .seed-avatar-stack__overlap--size_96 {
2060
+ margin-left: -24px;
2061
+ }
2062
+
2063
+ .seed-avatar-stack__item--size_108 {
2064
+ box-shadow: 0 0 0 5px var(--seed-color-bg-layer-default);
2065
+ }
2066
+
2067
+ .seed-avatar-stack__overlap--size_108 {
2068
+ margin-left: -27px;
2069
+ }
2070
+
1523
2071
  .seed-badge__root {
1524
2072
  flex-direction: row;
1525
2073
  flex-shrink: 1;
@@ -1560,13 +2108,11 @@ text {
1560
2108
  color: inherit;
1561
2109
  --seed-icon-size: 100%;
1562
2110
  --seed-icon-color: currentColor;
1563
- transition: transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
1564
2111
  flex-direction: row;
1565
2112
  flex-shrink: 0;
1566
2113
  justify-content: center;
1567
2114
  align-items: center;
1568
2115
  display: flex;
1569
- transform: scale(1);
1570
2116
  }
1571
2117
 
1572
2118
  .seed-badge__root--size_medium {
@@ -1779,10 +2325,6 @@ text {
1779
2325
  color: var(--seed-color-fg-critical);
1780
2326
  }
1781
2327
 
1782
- .seed-badge__action--size_medium-pressed_true, .seed-badge__action--size_large-pressed_true {
1783
- transform: scale(var(--seed-scale-s95));
1784
- }
1785
-
1786
2328
  .seed-bottom-sheet__positioner {
1787
2329
  --sheet-z-index: 20;
1788
2330
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
@@ -1825,6 +2367,7 @@ text {
1825
2367
  padding-top: var(--seed-dimension-x6);
1826
2368
  padding-bottom: var(--seed-dimension-x4);
1827
2369
  flex-direction: column;
2370
+ flex-shrink: 0;
1828
2371
  display: flex;
1829
2372
  }
1830
2373
 
@@ -1851,7 +2394,18 @@ text {
1851
2394
  padding-left: var(--seed-dimension-spacing-x-global-gutter);
1852
2395
  padding-right: var(--seed-dimension-spacing-x-global-gutter);
1853
2396
  flex-direction: column;
1854
- flex: 1;
2397
+ flex-shrink: 1;
2398
+ display: flex;
2399
+ }
2400
+
2401
+ .seed-bottom-sheet__scrollArea {
2402
+ flex-shrink: 1;
2403
+ width: 100%;
2404
+ min-height: 0;
2405
+ }
2406
+
2407
+ .seed-bottom-sheet__scrollContent {
2408
+ flex-direction: column;
1855
2409
  display: flex;
1856
2410
  }
1857
2411
 
@@ -1861,16 +2415,30 @@ text {
1861
2415
  padding-top: var(--seed-dimension-x3);
1862
2416
  padding-bottom: var(--seed-dimension-x4);
1863
2417
  flex-direction: column;
2418
+ flex-shrink: 0;
1864
2419
  display: flex;
1865
2420
  }
1866
2421
 
1867
2422
  .seed-bottom-sheet__closeButton {
2423
+ top: var(--seed-dimension-x6);
2424
+ right: var(--seed-dimension-x4);
2425
+ border-radius: var(--seed-radius-full);
2426
+ background-color: var(--seed-color-bg-neutral-weak);
1868
2427
  justify-content: center;
1869
2428
  align-items: center;
2429
+ width: 28px;
2430
+ height: 28px;
1870
2431
  display: flex;
1871
2432
  position: absolute;
1872
2433
  }
1873
2434
 
2435
+ .seed-bottom-sheet__closeButtonIcon {
2436
+ width: 14px;
2437
+ height: 14px;
2438
+ color: var(--seed-color-fg-neutral);
2439
+ flex-shrink: 0;
2440
+ }
2441
+
1874
2442
  .seed-bottom-sheet__header--headerAlign_left {
1875
2443
  justify-content: flex-start;
1876
2444
  }
@@ -1890,6 +2458,16 @@ text {
1890
2458
  padding-right: var(--seed-dimension-spacing-x-global-gutter);
1891
2459
  }
1892
2460
 
2461
+ .seed-bottom-sheet__title--headerAlign_left-closeButton_true {
2462
+ padding-left: var(--seed-dimension-spacing-x-global-gutter);
2463
+ padding-right: 56px;
2464
+ }
2465
+
2466
+ .seed-bottom-sheet__title--headerAlign_center-closeButton_true {
2467
+ padding-left: 56px;
2468
+ padding-right: 56px;
2469
+ }
2470
+
1893
2471
  .seed-attachment-input__root {
1894
2472
  gap: var(--seed-dimension-x2);
1895
2473
  margin-left: calc(var(--seed-attachment-input-extend-x) * -1);
@@ -1923,6 +2501,7 @@ text {
1923
2501
  margin: 0;
1924
2502
  padding: 0;
1925
2503
  display: flex;
2504
+ overflow: visible;
1926
2505
  }
1927
2506
 
1928
2507
  .seed-attachment-input-item__root {
@@ -1931,6 +2510,7 @@ text {
1931
2510
  height: 80px;
1932
2511
  transition: transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
1933
2512
  background-color: #0000;
2513
+ flex-shrink: 0;
1934
2514
  display: flex;
1935
2515
  position: relative;
1936
2516
  overflow: visible;
@@ -2139,7 +2719,7 @@ text {
2139
2719
  transform: scale(var(--seed-scale-s98));
2140
2720
  }
2141
2721
 
2142
- .seed-attachment-input-item__thumbnail--readOnly_true, .seed-attachment-input-item__thumbnailIcon--readOnly_true, .seed-attachment-input-item__name--readOnly_true, .seed-attachment-input-item__size--readOnly_true {
2722
+ .seed-attachment-input-item__thumbnail--readOnly_true, .seed-attachment-input-item__thumbnailIcon--readOnly_true, .seed-attachment-input-item__name--readOnly_true, .seed-attachment-input-item__size--readOnly_true, .seed-attachment-input-item__removeButton--readOnly_true, .seed-attachment-input-item__removeIcon--readOnly_true {
2143
2723
  color: var(--seed-color-fg-disabled);
2144
2724
  }
2145
2725
 
@@ -2278,8 +2858,7 @@ text {
2278
2858
  font-size: var(--seed-font-size-t4);
2279
2859
  line-height: var(--seed-line-height-t4);
2280
2860
  font-weight: var(--seed-font-weight-regular);
2281
- border-bottom-style: solid;
2282
- border-bottom-width: 1px;
2861
+ text-decoration: underline;
2283
2862
  }
2284
2863
 
2285
2864
  .seed-callout__closeButton {
@@ -2314,16 +2893,7 @@ text {
2314
2893
  background-color: var(--seed-color-bg-neutral-weak);
2315
2894
  }
2316
2895
 
2317
- .seed-callout__title--tone_neutral, .seed-callout__description--tone_neutral {
2318
- color: var(--seed-color-fg-neutral);
2319
- }
2320
-
2321
- .seed-callout__link--tone_neutral {
2322
- color: var(--seed-color-fg-neutral);
2323
- border-bottom-color: var(--seed-color-fg-neutral);
2324
- }
2325
-
2326
- .seed-callout__prefixIcon--tone_neutral, .seed-callout__suffixIcon--tone_neutral {
2896
+ .seed-callout__title--tone_neutral, .seed-callout__description--tone_neutral, .seed-callout__link--tone_neutral, .seed-callout__prefixIcon--tone_neutral, .seed-callout__suffixIcon--tone_neutral {
2327
2897
  color: var(--seed-color-fg-neutral);
2328
2898
  }
2329
2899
 
@@ -2331,16 +2901,7 @@ text {
2331
2901
  background-color: var(--seed-color-bg-informative-weak);
2332
2902
  }
2333
2903
 
2334
- .seed-callout__title--tone_informative, .seed-callout__description--tone_informative {
2335
- color: var(--seed-color-fg-informative-contrast);
2336
- }
2337
-
2338
- .seed-callout__link--tone_informative {
2339
- color: var(--seed-color-fg-informative-contrast);
2340
- border-bottom-color: var(--seed-color-fg-informative-contrast);
2341
- }
2342
-
2343
- .seed-callout__prefixIcon--tone_informative, .seed-callout__suffixIcon--tone_informative {
2904
+ .seed-callout__title--tone_informative, .seed-callout__description--tone_informative, .seed-callout__link--tone_informative, .seed-callout__prefixIcon--tone_informative, .seed-callout__suffixIcon--tone_informative {
2344
2905
  color: var(--seed-color-fg-informative-contrast);
2345
2906
  }
2346
2907
 
@@ -2348,16 +2909,7 @@ text {
2348
2909
  background-color: var(--seed-color-bg-positive-weak);
2349
2910
  }
2350
2911
 
2351
- .seed-callout__title--tone_positive, .seed-callout__description--tone_positive {
2352
- color: var(--seed-color-fg-positive-contrast);
2353
- }
2354
-
2355
- .seed-callout__link--tone_positive {
2356
- color: var(--seed-color-fg-positive-contrast);
2357
- border-bottom-color: var(--seed-color-fg-positive-contrast);
2358
- }
2359
-
2360
- .seed-callout__prefixIcon--tone_positive, .seed-callout__suffixIcon--tone_positive {
2912
+ .seed-callout__title--tone_positive, .seed-callout__description--tone_positive, .seed-callout__link--tone_positive, .seed-callout__prefixIcon--tone_positive, .seed-callout__suffixIcon--tone_positive {
2361
2913
  color: var(--seed-color-fg-positive-contrast);
2362
2914
  }
2363
2915
 
@@ -2365,16 +2917,7 @@ text {
2365
2917
  background-color: var(--seed-color-bg-warning-weak);
2366
2918
  }
2367
2919
 
2368
- .seed-callout__title--tone_warning, .seed-callout__description--tone_warning {
2369
- color: var(--seed-color-fg-warning-contrast);
2370
- }
2371
-
2372
- .seed-callout__link--tone_warning {
2373
- color: var(--seed-color-fg-warning-contrast);
2374
- border-bottom-color: var(--seed-color-fg-warning-contrast);
2375
- }
2376
-
2377
- .seed-callout__prefixIcon--tone_warning, .seed-callout__suffixIcon--tone_warning {
2920
+ .seed-callout__title--tone_warning, .seed-callout__description--tone_warning, .seed-callout__link--tone_warning, .seed-callout__prefixIcon--tone_warning, .seed-callout__suffixIcon--tone_warning {
2378
2921
  color: var(--seed-color-fg-warning-contrast);
2379
2922
  }
2380
2923
 
@@ -2382,16 +2925,7 @@ text {
2382
2925
  background-color: var(--seed-color-bg-critical-weak);
2383
2926
  }
2384
2927
 
2385
- .seed-callout__title--tone_critical, .seed-callout__description--tone_critical {
2386
- color: var(--seed-color-fg-critical-contrast);
2387
- }
2388
-
2389
- .seed-callout__link--tone_critical {
2390
- color: var(--seed-color-fg-critical-contrast);
2391
- border-bottom-color: var(--seed-color-fg-critical-contrast);
2392
- }
2393
-
2394
- .seed-callout__prefixIcon--tone_critical, .seed-callout__suffixIcon--tone_critical {
2928
+ .seed-callout__title--tone_critical, .seed-callout__description--tone_critical, .seed-callout__link--tone_critical, .seed-callout__prefixIcon--tone_critical, .seed-callout__suffixIcon--tone_critical {
2395
2929
  color: var(--seed-color-fg-critical-contrast);
2396
2930
  }
2397
2931
 
@@ -2399,16 +2933,7 @@ text {
2399
2933
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
2400
2934
  }
2401
2935
 
2402
- .seed-callout__title--tone_magic, .seed-callout__description--tone_magic {
2403
- color: var(--seed-color-fg-neutral);
2404
- }
2405
-
2406
- .seed-callout__link--tone_magic {
2407
- color: var(--seed-color-fg-neutral);
2408
- border-bottom-color: var(--seed-color-fg-neutral);
2409
- }
2410
-
2411
- .seed-callout__prefixIcon--tone_magic, .seed-callout__suffixIcon--tone_magic {
2936
+ .seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic, .seed-callout__prefixIcon--tone_magic, .seed-callout__suffixIcon--tone_magic {
2412
2937
  color: var(--seed-color-fg-neutral);
2413
2938
  }
2414
2939
 
@@ -2620,7 +3145,7 @@ text {
2620
3145
  background-color: var(--seed-checkmark-pressed-color);
2621
3146
  }
2622
3147
 
2623
- .seed-checkbox__root--disabled_false:active .seed-checkmark__background {
3148
+ .seed-checkbox__root--disabled_false:active .seed-checkmark__background--checked_false.seed-checkmark__background--indeterminate_false, .seed-checkbox__root--disabled_false:active .seed-checkmark__selectedBackground--checked_true, .seed-checkbox__root--disabled_false:active .seed-checkmark__selectedBackground--indeterminate_true {
2624
3149
  opacity: 1;
2625
3150
  }
2626
3151
 
@@ -2638,7 +3163,7 @@ text {
2638
3163
  position: relative;
2639
3164
  }
2640
3165
 
2641
- .seed-checkmark__background {
3166
+ .seed-checkmark__background, .seed-checkmark__selectedBackground {
2642
3167
  opacity: 0;
2643
3168
  transition: opacity var(--seed-duration-color-transition) var(--seed-timing-function-easing);
2644
3169
  position: absolute;
@@ -2674,7 +3199,7 @@ text {
2674
3199
  border-radius: var(--seed-radius-r1);
2675
3200
  }
2676
3201
 
2677
- .seed-checkmark__background--size_medium {
3202
+ .seed-checkmark__background--size_medium, .seed-checkmark__selectedBackground--size_medium {
2678
3203
  border-radius: var(--seed-radius-r1);
2679
3204
  }
2680
3205
 
@@ -2684,7 +3209,7 @@ text {
2684
3209
  border-radius: var(--seed-radius-r1);
2685
3210
  }
2686
3211
 
2687
- .seed-checkmark__background--size_large {
3212
+ .seed-checkmark__background--size_large, .seed-checkmark__selectedBackground--size_large {
2688
3213
  border-radius: var(--seed-radius-r1);
2689
3214
  }
2690
3215
 
@@ -2757,19 +3282,11 @@ text {
2757
3282
  color: var(--seed-color-fg-disabled);
2758
3283
  }
2759
3284
 
2760
- .seed-checkmark__background--variant_ghost-tone_brand-checked_true {
2761
- background-color: var(--seed-color-palette-carrot-200);
2762
- }
2763
-
2764
- .seed-checkmark__background--variant_ghost-tone_neutral-checked_true {
2765
- background-color: var(--seed-color-palette-gray-200);
2766
- }
2767
-
2768
- .seed-checkmark__background--variant_ghost-tone_brand-indeterminate_true {
3285
+ .seed-checkmark__selectedBackground--variant_ghost-tone_brand {
2769
3286
  background-color: var(--seed-color-palette-carrot-200);
2770
3287
  }
2771
3288
 
2772
- .seed-checkmark__background--variant_ghost-tone_neutral-indeterminate_true {
3289
+ .seed-checkmark__selectedBackground--variant_ghost-tone_neutral {
2773
3290
  background-color: var(--seed-color-palette-gray-200);
2774
3291
  }
2775
3292
 
@@ -2793,30 +3310,6 @@ text {
2793
3310
  color: var(--seed-color-fg-disabled);
2794
3311
  }
2795
3312
 
2796
- .seed-checkmark__background--variant_ghost-pressed_true-disabled_false {
2797
- opacity: 1;
2798
- }
2799
-
2800
- .seed-checkmark__root--variant_square-pressed_true-checked_false-indeterminate_false-disabled_false {
2801
- background-color: var(--seed-color-bg-transparent-pressed);
2802
- }
2803
-
2804
- .seed-checkmark__root--variant_square-tone_brand-pressed_true-checked_true-disabled_false {
2805
- background-color: var(--seed-color-bg-brand-solid-pressed);
2806
- }
2807
-
2808
- .seed-checkmark__root--variant_square-tone_neutral-pressed_true-checked_true-disabled_false {
2809
- background-color: var(--seed-color-bg-neutral-solid-pressed);
2810
- }
2811
-
2812
- .seed-checkmark__root--variant_square-tone_brand-pressed_true-indeterminate_true-disabled_false {
2813
- background-color: var(--seed-color-bg-brand-solid-pressed);
2814
- }
2815
-
2816
- .seed-checkmark__root--variant_square-tone_neutral-pressed_true-indeterminate_true-disabled_false {
2817
- background-color: var(--seed-color-bg-neutral-solid-pressed);
2818
- }
2819
-
2820
3313
  .seed-chip__root {
2821
3314
  border-radius: var(--seed-radius-full);
2822
3315
  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);
@@ -3323,9 +3816,43 @@ text {
3323
3816
  background: var(--seed-color-bg-layer-floating-pressed);
3324
3817
  }
3325
3818
 
3819
+ .seed-content-placeholder__root {
3820
+ background-color: var(--seed-color-palette-gray-200);
3821
+ justify-content: center;
3822
+ align-items: center;
3823
+ width: 100%;
3824
+ height: 100%;
3825
+ display: flex;
3826
+ position: relative;
3827
+ overflow: hidden;
3828
+ }
3829
+
3830
+ .seed-content-placeholder__asset {
3831
+ height: 50%;
3832
+ min-width: var(--seed-dimension-x4);
3833
+ aspect-ratio: 1;
3834
+ justify-content: center;
3835
+ align-items: center;
3836
+ max-width: 160px;
3837
+ display: flex;
3838
+ }
3839
+
3840
+ .seed-content-placeholder__presetLight {
3841
+ width: 100%;
3842
+ height: 100%;
3843
+ display: var(--seed-content-placeholder-preset-light-display, flex);
3844
+ }
3845
+
3846
+ .seed-content-placeholder__presetDark {
3847
+ width: 100%;
3848
+ height: 100%;
3849
+ display: var(--seed-content-placeholder-preset-dark-display, none);
3850
+ }
3851
+
3326
3852
  .seed-dialog__positioner {
3327
3853
  --dialog-z-index: 2;
3328
3854
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
3855
+ flex-direction: column;
3329
3856
  justify-content: center;
3330
3857
  align-items: center;
3331
3858
  display: flex;
@@ -3363,13 +3890,14 @@ text {
3363
3890
  .seed-dialog__content {
3364
3891
  box-sizing: border-box;
3365
3892
  opacity: 0;
3366
- width: 90vw;
3893
+ width: 90%;
3894
+ min-height: 0;
3367
3895
  max-height: 80vh;
3368
3896
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
3369
3897
  background-color: var(--seed-color-bg-layer-floating);
3370
3898
  border-radius: var(--seed-radius-r5);
3371
3899
  flex-direction: column;
3372
- flex: none;
3900
+ flex-shrink: 1;
3373
3901
  transition-property: opacity, transform;
3374
3902
  display: flex;
3375
3903
  position: relative;
@@ -3560,15 +4088,16 @@ text {
3560
4088
  }
3561
4089
 
3562
4090
  .seed-floating-action-button__root {
4091
+ justify-content: flex-start;
4092
+ align-items: center;
4093
+ gap: var(--seed-dimension-x1);
3563
4094
  background-color: var(--seed-color-bg-brand-solid);
3564
4095
  border-radius: var(--seed-radius-full);
3565
4096
  max-width: 100%;
3566
4097
  box-shadow: var(--seed-shadow-s3);
3567
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding-left var(--seed-duration-d4) var(--seed-timing-function-easing), padding-right var(--seed-duration-d4) var(--seed-timing-function-easing), gap var(--seed-duration-d4) var(--seed-timing-function-easing);
4098
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding-left var(--seed-duration-d4) var(--seed-timing-function-easing), padding-right var(--seed-duration-d4) var(--seed-timing-function-easing);
3568
4099
  flex-direction: row;
3569
4100
  flex-shrink: 0;
3570
- justify-content: center;
3571
- align-items: center;
3572
4101
  display: flex;
3573
4102
  position: relative;
3574
4103
  overflow: hidden;
@@ -3581,11 +4110,13 @@ text {
3581
4110
  }
3582
4111
 
3583
4112
  .seed-floating-action-button__label {
4113
+ white-space: nowrap;
3584
4114
  width: max-content;
3585
4115
  color: var(--seed-color-fg-on-brand-solid);
3586
4116
  font-size: var(--seed-font-size-t5);
3587
4117
  line-height: var(--seed-line-height-t5);
3588
4118
  font-weight: var(--seed-font-weight-bold);
4119
+ transition: opacity var(--seed-duration-d4) var(--seed-timing-function-easing);
3589
4120
  flex-shrink: 0;
3590
4121
  }
3591
4122
 
@@ -3594,7 +4125,6 @@ text {
3594
4125
  height: 48px;
3595
4126
  padding-left: var(--seed-dimension-x4_5);
3596
4127
  padding-right: var(--seed-dimension-x4_5);
3597
- gap: var(--seed-dimension-x1);
3598
4128
  }
3599
4129
 
3600
4130
  .seed-floating-action-button__icon--extended_true {
@@ -3603,10 +4133,9 @@ text {
3603
4133
  }
3604
4134
 
3605
4135
  .seed-floating-action-button__root--extended_false {
3606
- gap: 0;
3607
4136
  width: 56px;
3608
4137
  height: 56px;
3609
- padding-left: 0;
4138
+ padding-left: calc((56px - var(--seed-dimension-x6)) / 2);
3610
4139
  padding-right: 0;
3611
4140
  }
3612
4141
 
@@ -3615,11 +4144,15 @@ text {
3615
4144
  height: var(--seed-dimension-x6);
3616
4145
  }
3617
4146
 
4147
+ .seed-floating-action-button__label--extended_false {
4148
+ opacity: 0;
4149
+ }
4150
+
3618
4151
  .seed-floating-action-button__root--pressed_true {
3619
4152
  background-color: var(--seed-color-bg-brand-solid-pressed);
3620
4153
  }
3621
4154
 
3622
- .seed-floating-action-button__root--transitionEnabled_false, .seed-floating-action-button__icon--transitionEnabled_false {
4155
+ .seed-floating-action-button__root--transitionEnabled_false, .seed-floating-action-button__icon--transitionEnabled_false, .seed-floating-action-button__label--transitionEnabled_false {
3623
4156
  transition-duration: 0s;
3624
4157
  }
3625
4158
 
@@ -3802,24 +4335,11 @@ text {
3802
4335
  }
3803
4336
 
3804
4337
  .seed-manner-temp-badge__label--level_l10 {
3805
- color: var(--seed-color-manner-temp-l10-text);
3806
- }
3807
-
3808
- .seed-menu__positioner {
3809
- z-index: 0;
3810
- width: 100%;
3811
- height: 100%;
3812
- position: absolute;
3813
- top: 0;
3814
- left: 0;
4338
+ color: var(--seed-color-manner-temp-l10-text);
3815
4339
  }
3816
4340
 
3817
- .seed-menu__backdrop {
3818
- position: absolute;
3819
- top: 0;
3820
- bottom: 0;
3821
- left: 0;
3822
- right: 0;
4341
+ .seed-menu__positioner {
4342
+ z-index: 99;
3823
4343
  }
3824
4344
 
3825
4345
  .seed-menu__content {
@@ -4107,6 +4627,7 @@ text {
4107
4627
  gap: var(--seed-dimension-x1);
4108
4628
  padding-bottom: var(--seed-dimension-x4);
4109
4629
  flex-direction: column;
4630
+ flex-shrink: 0;
4110
4631
  display: flex;
4111
4632
  }
4112
4633
 
@@ -4127,6 +4648,10 @@ text {
4127
4648
  }
4128
4649
 
4129
4650
  .seed-menu-sheet__list {
4651
+ flex-shrink: 1;
4652
+ }
4653
+
4654
+ .seed-menu-sheet__listContent {
4130
4655
  align-items: stretch;
4131
4656
  gap: var(--seed-dimension-x2_5);
4132
4657
  flex-direction: column;
@@ -4144,6 +4669,7 @@ text {
4144
4669
  .seed-menu-sheet__footer {
4145
4670
  padding-top: var(--seed-dimension-x2_5);
4146
4671
  flex-direction: column;
4672
+ flex-shrink: 0;
4147
4673
  align-items: stretch;
4148
4674
  display: flex;
4149
4675
  }
@@ -4191,6 +4717,7 @@ text {
4191
4717
  justify-content: flex-start;
4192
4718
  align-items: center;
4193
4719
  display: flex;
4720
+ position: relative;
4194
4721
  }
4195
4722
 
4196
4723
  .seed-menu-sheet-item__root:active {
@@ -4237,8 +4764,11 @@ text {
4237
4764
 
4238
4765
  .seed-menu-sheet-item__divider {
4239
4766
  background-color: var(--seed-color-stroke-neutral-muted);
4240
- width: 100%;
4241
4767
  height: 1px;
4768
+ position: absolute;
4769
+ bottom: 0;
4770
+ left: 0;
4771
+ right: 0;
4242
4772
  }
4243
4773
 
4244
4774
  .seed-menu-sheet-item__prefixIcon--tone_neutral, .seed-menu-sheet-item__label--tone_neutral {
@@ -4494,6 +5024,23 @@ text {
4494
5024
  background-color: var(--seed-color-bg-transparent-pressed);
4495
5025
  }
4496
5026
 
5027
+ .seed-pull-to-refresh__root {
5028
+ height: 100%;
5029
+ }
5030
+
5031
+ .seed-pull-to-refresh__indicator {
5032
+ padding-top: var(--seed-dimension-x8);
5033
+ padding-bottom: var(--seed-dimension-x8);
5034
+ justify-content: center;
5035
+ align-items: center;
5036
+ display: flex;
5037
+ }
5038
+
5039
+ .seed-pull-to-refresh__content {
5040
+ width: 100%;
5041
+ height: 100%;
5042
+ }
5043
+
4497
5044
  .seed-page-banner__root {
4498
5045
  width: 100%;
4499
5046
  min-height: var(--seed-dimension-x10);
@@ -4683,14 +5230,10 @@ text {
4683
5230
  background-color: var(--seed-color-bg-informative-solid);
4684
5231
  }
4685
5232
 
4686
- .seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid, .seed-page-banner__prefixIcon--tone_informative-variant_solid, .seed-page-banner__suffixIcon--tone_informative-variant_solid {
5233
+ .seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid, .seed-page-banner__prefixIcon--tone_informative-variant_solid, .seed-page-banner__suffixIcon--tone_informative-variant_solid, .seed-page-banner__closeButtonIcon--tone_informative-variant_solid {
4687
5234
  color: var(--seed-color-fg-on-informative-solid);
4688
5235
  }
4689
5236
 
4690
- .seed-page-banner__closeButtonIcon--tone_informative-variant_solid {
4691
- color: var(--seed-color-palette-static-white);
4692
- }
4693
-
4694
5237
  .seed-page-banner__root--tone_positive-variant_weak {
4695
5238
  background-color: var(--seed-color-bg-positive-weak);
4696
5239
  }
@@ -4703,14 +5246,10 @@ text {
4703
5246
  background-color: var(--seed-color-bg-positive-solid);
4704
5247
  }
4705
5248
 
4706
- .seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid, .seed-page-banner__prefixIcon--tone_positive-variant_solid, .seed-page-banner__suffixIcon--tone_positive-variant_solid {
5249
+ .seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid, .seed-page-banner__prefixIcon--tone_positive-variant_solid, .seed-page-banner__suffixIcon--tone_positive-variant_solid, .seed-page-banner__closeButtonIcon--tone_positive-variant_solid {
4707
5250
  color: var(--seed-color-fg-on-positive-solid);
4708
5251
  }
4709
5252
 
4710
- .seed-page-banner__closeButtonIcon--tone_positive-variant_solid {
4711
- color: var(--seed-color-palette-static-white);
4712
- }
4713
-
4714
5253
  .seed-page-banner__root--tone_warning-variant_weak {
4715
5254
  background-color: var(--seed-color-bg-warning-weak);
4716
5255
  }
@@ -4723,14 +5262,10 @@ text {
4723
5262
  background-color: var(--seed-color-bg-warning-solid);
4724
5263
  }
4725
5264
 
4726
- .seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid, .seed-page-banner__prefixIcon--tone_warning-variant_solid, .seed-page-banner__suffixIcon--tone_warning-variant_solid {
5265
+ .seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid, .seed-page-banner__prefixIcon--tone_warning-variant_solid, .seed-page-banner__suffixIcon--tone_warning-variant_solid, .seed-page-banner__closeButtonIcon--tone_warning-variant_solid {
4727
5266
  color: var(--seed-color-fg-on-warning-solid);
4728
5267
  }
4729
5268
 
4730
- .seed-page-banner__closeButtonIcon--tone_warning-variant_solid {
4731
- color: var(--seed-color-palette-static-black-alpha-900);
4732
- }
4733
-
4734
5269
  .seed-page-banner__root--tone_critical-variant_weak {
4735
5270
  background-color: var(--seed-color-bg-critical-weak);
4736
5271
  }
@@ -4743,14 +5278,10 @@ text {
4743
5278
  background-color: var(--seed-color-bg-critical-solid);
4744
5279
  }
4745
5280
 
4746
- .seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid, .seed-page-banner__prefixIcon--tone_critical-variant_solid, .seed-page-banner__suffixIcon--tone_critical-variant_solid {
5281
+ .seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid, .seed-page-banner__prefixIcon--tone_critical-variant_solid, .seed-page-banner__suffixIcon--tone_critical-variant_solid, .seed-page-banner__closeButtonIcon--tone_critical-variant_solid {
4747
5282
  color: var(--seed-color-fg-on-critical-solid);
4748
5283
  }
4749
5284
 
4750
- .seed-page-banner__closeButtonIcon--tone_critical-variant_solid {
4751
- color: var(--seed-color-palette-static-white);
4752
- }
4753
-
4754
5285
  .seed-page-banner__root--tone_magic-variant_weak {
4755
5286
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
4756
5287
  }
@@ -4803,7 +5334,7 @@ text {
4803
5334
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
4804
5335
  }
4805
5336
 
4806
- .seed-input-button__root {
5337
+ .seed-field-button__root {
4807
5338
  flex-direction: row;
4808
5339
  align-items: center;
4809
5340
  width: 100%;
@@ -4812,7 +5343,7 @@ text {
4812
5343
  overflow: hidden;
4813
5344
  }
4814
5345
 
4815
- .seed-input-button__content {
5346
+ .seed-field-button__content {
4816
5347
  pointer-events: none;
4817
5348
  flex-direction: row;
4818
5349
  align-items: center;
@@ -4821,7 +5352,7 @@ text {
4821
5352
  display: flex;
4822
5353
  }
4823
5354
 
4824
- .seed-input-button__button {
5355
+ .seed-field-button__button {
4825
5356
  background-color: var(--seed-color-bg-transparent);
4826
5357
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
4827
5358
  position: absolute;
@@ -4831,7 +5362,7 @@ text {
4831
5362
  right: 0;
4832
5363
  }
4833
5364
 
4834
- .seed-input-button__baseStroke {
5365
+ .seed-field-button__baseStroke {
4835
5366
  border-style: solid;
4836
5367
  border-width: 1px;
4837
5368
  border-color: var(--seed-color-stroke-neutral-weak);
@@ -4843,7 +5374,7 @@ text {
4843
5374
  right: 0;
4844
5375
  }
4845
5376
 
4846
- .seed-input-button__stroke {
5377
+ .seed-field-button__stroke {
4847
5378
  transition: border-color .1s var(--seed-timing-function-easing);
4848
5379
  pointer-events: none;
4849
5380
  border: 2px solid #0000;
@@ -4854,7 +5385,7 @@ text {
4854
5385
  right: 0;
4855
5386
  }
4856
5387
 
4857
- .seed-input-button__value {
5388
+ .seed-field-button__value {
4858
5389
  min-width: 0;
4859
5390
  color: var(--seed-color-fg-neutral);
4860
5391
  font-weight: var(--seed-font-weight-regular);
@@ -4865,7 +5396,7 @@ text {
4865
5396
  overflow: hidden;
4866
5397
  }
4867
5398
 
4868
- .seed-input-button__placeholder {
5399
+ .seed-field-button__placeholder {
4869
5400
  min-width: 0;
4870
5401
  color: var(--seed-color-fg-placeholder);
4871
5402
  font-weight: var(--seed-font-weight-regular);
@@ -4876,39 +5407,39 @@ text {
4876
5407
  overflow: hidden;
4877
5408
  }
4878
5409
 
4879
- .seed-input-button__prefixText {
5410
+ .seed-field-button__prefixText {
4880
5411
  color: var(--seed-color-fg-neutral-subtle);
4881
5412
  font-weight: var(--seed-font-weight-regular);
4882
5413
  pointer-events: none;
4883
5414
  flex-shrink: 0;
4884
5415
  }
4885
5416
 
4886
- .seed-input-button__prefixIcon {
5417
+ .seed-field-button__prefixIcon {
4887
5418
  color: var(--seed-color-fg-neutral-muted);
4888
5419
  pointer-events: none;
4889
5420
  flex-shrink: 0;
4890
5421
  }
4891
5422
 
4892
- .seed-input-button__suffixText {
5423
+ .seed-field-button__suffixText {
4893
5424
  color: var(--seed-color-fg-neutral-subtle);
4894
5425
  font-weight: var(--seed-font-weight-regular);
4895
5426
  pointer-events: none;
4896
5427
  flex-shrink: 0;
4897
5428
  }
4898
5429
 
4899
- .seed-input-button__suffixIcon {
5430
+ .seed-field-button__suffixIcon {
4900
5431
  color: var(--seed-color-fg-neutral-muted);
4901
5432
  pointer-events: none;
4902
5433
  flex-shrink: 0;
4903
5434
  }
4904
5435
 
4905
- .seed-input-button__clearButton {
5436
+ .seed-field-button__clearButton {
4906
5437
  pointer-events: auto;
4907
5438
  color: var(--seed-color-fg-neutral-subtle);
4908
5439
  flex-shrink: 0;
4909
5440
  }
4910
5441
 
4911
- .seed-input-button__root--size_large {
5442
+ .seed-field-button__root--size_large {
4912
5443
  height: var(--seed-dimension-x13);
4913
5444
  gap: var(--seed-dimension-x2_5);
4914
5445
  padding-left: var(--seed-dimension-x4);
@@ -4916,40 +5447,40 @@ text {
4916
5447
  border-radius: var(--seed-radius-r3);
4917
5448
  }
4918
5449
 
4919
- .seed-input-button__content--size_large {
5450
+ .seed-field-button__content--size_large {
4920
5451
  gap: var(--seed-dimension-x2_5);
4921
5452
  }
4922
5453
 
4923
- .seed-input-button__button--size_large, .seed-input-button__baseStroke--size_large, .seed-input-button__stroke--size_large {
5454
+ .seed-field-button__button--size_large, .seed-field-button__baseStroke--size_large, .seed-field-button__stroke--size_large {
4924
5455
  border-radius: var(--seed-radius-r3);
4925
5456
  }
4926
5457
 
4927
- .seed-input-button__value--size_large, .seed-input-button__placeholder--size_large, .seed-input-button__prefixText--size_large {
5458
+ .seed-field-button__value--size_large, .seed-field-button__placeholder--size_large, .seed-field-button__prefixText--size_large {
4928
5459
  font-size: var(--seed-font-size-t5);
4929
5460
  line-height: var(--seed-line-height-t5);
4930
5461
  }
4931
5462
 
4932
- .seed-input-button__prefixIcon--size_large {
5463
+ .seed-field-button__prefixIcon--size_large {
4933
5464
  width: var(--seed-dimension-x5);
4934
5465
  height: var(--seed-dimension-x5);
4935
5466
  }
4936
5467
 
4937
- .seed-input-button__suffixText--size_large {
5468
+ .seed-field-button__suffixText--size_large {
4938
5469
  font-size: var(--seed-font-size-t5);
4939
5470
  line-height: var(--seed-line-height-t5);
4940
5471
  }
4941
5472
 
4942
- .seed-input-button__suffixIcon--size_large {
5473
+ .seed-field-button__suffixIcon--size_large {
4943
5474
  width: var(--seed-dimension-x5);
4944
5475
  height: var(--seed-dimension-x5);
4945
5476
  }
4946
5477
 
4947
- .seed-input-button__clearButton--size_large {
5478
+ .seed-field-button__clearButton--size_large {
4948
5479
  width: 22px;
4949
5480
  height: 22px;
4950
5481
  }
4951
5482
 
4952
- .seed-input-button__root--size_medium {
5483
+ .seed-field-button__root--size_medium {
4953
5484
  height: var(--seed-dimension-x10);
4954
5485
  gap: var(--seed-dimension-x2);
4955
5486
  padding-left: var(--seed-dimension-x3_5);
@@ -4957,68 +5488,68 @@ text {
4957
5488
  border-radius: var(--seed-radius-r2);
4958
5489
  }
4959
5490
 
4960
- .seed-input-button__content--size_medium {
5491
+ .seed-field-button__content--size_medium {
4961
5492
  gap: var(--seed-dimension-x2);
4962
5493
  }
4963
5494
 
4964
- .seed-input-button__button--size_medium, .seed-input-button__baseStroke--size_medium, .seed-input-button__stroke--size_medium {
5495
+ .seed-field-button__button--size_medium, .seed-field-button__baseStroke--size_medium, .seed-field-button__stroke--size_medium {
4965
5496
  border-radius: var(--seed-radius-r2);
4966
5497
  }
4967
5498
 
4968
- .seed-input-button__value--size_medium, .seed-input-button__placeholder--size_medium, .seed-input-button__prefixText--size_medium {
5499
+ .seed-field-button__value--size_medium, .seed-field-button__placeholder--size_medium, .seed-field-button__prefixText--size_medium {
4969
5500
  font-size: var(--seed-font-size-t4);
4970
5501
  line-height: var(--seed-line-height-t4);
4971
5502
  }
4972
5503
 
4973
- .seed-input-button__prefixIcon--size_medium {
5504
+ .seed-field-button__prefixIcon--size_medium {
4974
5505
  width: var(--seed-dimension-x4);
4975
5506
  height: var(--seed-dimension-x4);
4976
5507
  }
4977
5508
 
4978
- .seed-input-button__suffixText--size_medium {
5509
+ .seed-field-button__suffixText--size_medium {
4979
5510
  font-size: var(--seed-font-size-t4);
4980
5511
  line-height: var(--seed-line-height-t4);
4981
5512
  }
4982
5513
 
4983
- .seed-input-button__suffixIcon--size_medium {
5514
+ .seed-field-button__suffixIcon--size_medium {
4984
5515
  width: var(--seed-dimension-x4);
4985
5516
  height: var(--seed-dimension-x4);
4986
5517
  }
4987
5518
 
4988
- .seed-input-button__clearButton--size_medium {
5519
+ .seed-field-button__clearButton--size_medium {
4989
5520
  width: var(--seed-dimension-x4_5);
4990
5521
  height: var(--seed-dimension-x4_5);
4991
5522
  }
4992
5523
 
4993
- .seed-input-button__button--pressed_true {
5524
+ .seed-field-button__button--pressed_true {
4994
5525
  background-color: var(--seed-color-bg-transparent-pressed);
4995
5526
  }
4996
5527
 
4997
- .seed-input-button__stroke--invalid_true {
5528
+ .seed-field-button__stroke--invalid_true {
4998
5529
  border-color: var(--seed-color-stroke-critical-solid);
4999
5530
  }
5000
5531
 
5001
- .seed-input-button__button--disabled_true {
5532
+ .seed-field-button__button--disabled_true {
5002
5533
  background-color: var(--seed-color-bg-disabled);
5003
5534
  }
5004
5535
 
5005
- .seed-input-button__value--disabled_true, .seed-input-button__placeholder--disabled_true, .seed-input-button__prefixText--disabled_true, .seed-input-button__prefixIcon--disabled_true, .seed-input-button__suffixText--disabled_true, .seed-input-button__suffixIcon--disabled_true {
5536
+ .seed-field-button__value--disabled_true, .seed-field-button__placeholder--disabled_true, .seed-field-button__prefixText--disabled_true, .seed-field-button__prefixIcon--disabled_true, .seed-field-button__suffixText--disabled_true, .seed-field-button__suffixIcon--disabled_true {
5006
5537
  color: var(--seed-color-fg-disabled);
5007
5538
  }
5008
5539
 
5009
- .seed-input-button__button--readOnly_true {
5540
+ .seed-field-button__button--readOnly_true {
5010
5541
  background-color: var(--seed-color-bg-disabled);
5011
5542
  }
5012
5543
 
5013
- .seed-input-button__value--readOnly_true {
5544
+ .seed-field-button__value--readOnly_true {
5014
5545
  color: var(--seed-color-fg-neutral);
5015
5546
  }
5016
5547
 
5017
- .seed-input-button__placeholder--readOnly_true {
5548
+ .seed-field-button__placeholder--readOnly_true {
5018
5549
  color: var(--seed-color-fg-placeholder);
5019
5550
  }
5020
5551
 
5021
- .seed-input-button__button--disabled_false-readOnly_false:active {
5552
+ .seed-field-button__button--disabled_false-readOnly_false:active {
5022
5553
  background-color: var(--seed-color-bg-transparent-pressed);
5023
5554
  }
5024
5555
 
@@ -5053,11 +5584,6 @@ text {
5053
5584
  color: var(--seed-color-fg-neutral);
5054
5585
  }
5055
5586
 
5056
- .seed-list-item__interactionRoot {
5057
- width: 100%;
5058
- display: flex;
5059
- }
5060
-
5061
5587
  .seed-list-item__root {
5062
5588
  width: 100%;
5063
5589
  padding-left: var(--seed-dimension-spacing-x-global-gutter);
@@ -5460,10 +5986,6 @@ text {
5460
5986
  color: var(--seed-color-fg-brand);
5461
5987
  }
5462
5988
 
5463
- .seed-reaction-button__root--pressed_true {
5464
- background: var(--seed-color-bg-transparent-pressed);
5465
- }
5466
-
5467
5989
  .seed-reaction-button__root--disabled_true {
5468
5990
  background: var(--seed-color-bg-disabled);
5469
5991
  box-shadow: inset 0 0 0 0px var(--seed-color-stroke-neutral-muted);
@@ -5481,7 +6003,7 @@ text {
5481
6003
  opacity: 0;
5482
6004
  }
5483
6005
 
5484
- .seed-reaction-button__root--selected_true-pressed_true-disabled_false-loading_false, .seed-reaction-button__root--selected_false-disabled_false-loading_false:active, .seed-reaction-button__root--selected_true-disabled_false-loading_false:active {
6006
+ .seed-reaction-button__root--selected_false-disabled_false-loading_false:active, .seed-reaction-button__root--selected_true-disabled_false-loading_false:active {
5485
6007
  background: var(--seed-color-bg-transparent-pressed);
5486
6008
  }
5487
6009
 
@@ -5493,7 +6015,6 @@ text {
5493
6015
  }
5494
6016
 
5495
6017
  .seed-scroll-fog__topMask, .seed-scroll-fog__bottomMask, .seed-scroll-fog__leftMask, .seed-scroll-fog__rightMask {
5496
- pointer-events: none;
5497
6018
  width: 100%;
5498
6019
  height: 100%;
5499
6020
  mask-image: linear-gradient(#000, #000);
@@ -5502,17 +6023,6 @@ text {
5502
6023
  mask-repeat: no-repeat;
5503
6024
  }
5504
6025
 
5505
- .seed-scroll-fog__verticalScroll {
5506
- pointer-events: auto;
5507
- width: 100%;
5508
- height: 100%;
5509
- }
5510
-
5511
- .seed-scroll-fog__horizontalScroll {
5512
- pointer-events: auto;
5513
- width: 100%;
5514
- }
5515
-
5516
6026
  .seed-scroll-fog__topMask--top_true {
5517
6027
  mask-image: linear-gradient(#0000 0%, #00000003 8%, #00000005 16%, #0000000d 22%, #00000014 29%, #00000021 35%, #0000002e 41%, #00000040 47%, #00000052 53%, #0006 59%, #0000007a 65%, #00000094 71%, #000000ab 78%, #000000c7 84%, #000000e3 92%, #000 100%), linear-gradient(#000, #000);
5518
6028
  mask-position: top, bottom;
@@ -5611,6 +6121,7 @@ text {
5611
6121
  padding: var(--seed-dimension-x1);
5612
6122
  border-radius: var(--seed-radius-full);
5613
6123
  background-color: var(--seed-color-bg-neutral-weak-alpha);
6124
+ --segment-min-width: 86px;
5614
6125
  grid-auto-rows: 1fr;
5615
6126
  grid-auto-columns: 1fr;
5616
6127
  grid-auto-flow: column;
@@ -5625,6 +6136,7 @@ text {
5625
6136
  left: var(--seed-dimension-x1);
5626
6137
  z-index: 0;
5627
6138
  width: calc((100% - var(--seed-dimension-x1) * 2) / var(--segment-count, 1));
6139
+ min-width: var(--segment-min-width);
5628
6140
  border-radius: var(--seed-radius-full);
5629
6141
  background-color: var(--seed-color-palette-gray-00);
5630
6142
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
@@ -5637,11 +6149,11 @@ text {
5637
6149
 
5638
6150
  .seed-segmented-control__item {
5639
6151
  z-index: 1;
6152
+ min-width: var(--segment-min-width);
5640
6153
  border-radius: var(--seed-radius-full);
5641
6154
  flex-direction: row;
5642
6155
  justify-content: center;
5643
6156
  align-items: center;
5644
- min-width: 86px;
5645
6157
  height: 100%;
5646
6158
  min-height: 34px;
5647
6159
  display: flex;
@@ -5664,6 +6176,23 @@ text {
5664
6176
 
5665
6177
  .seed-segmented-control__itemBackground {
5666
6178
  border-radius: var(--seed-radius-full);
6179
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
6180
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
6181
+ opacity: 0;
6182
+ transition-property: opacity;
6183
+ transition-duration: var(--seed-duration-color-transition);
6184
+ transition-timing-function: var(--seed-timing-function-easing);
6185
+ position: absolute;
6186
+ top: 0;
6187
+ bottom: 0;
6188
+ left: 0;
6189
+ right: 0;
6190
+ }
6191
+
6192
+ .seed-segmented-control__itemSelectedBackground {
6193
+ border-radius: var(--seed-radius-full);
6194
+ background-color: var(--seed-color-palette-gray-100);
6195
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
5667
6196
  opacity: 0;
5668
6197
  transition-property: opacity;
5669
6198
  transition-duration: var(--seed-duration-color-transition);
@@ -5686,52 +6215,33 @@ text {
5686
6215
  transition-timing-function: var(--seed-timing-function-easing);
5687
6216
  }
5688
6217
 
5689
- .seed-segmented-control__itemBackground--selected_true {
5690
- background-color: var(--seed-color-palette-gray-100);
5691
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
5692
- }
5693
-
5694
6218
  .seed-segmented-control__label--selected_true {
5695
6219
  color: var(--seed-color-fg-neutral);
5696
6220
  }
5697
6221
 
5698
- .seed-segmented-control__itemBackground--selected_false {
5699
- background-color: var(--seed-color-bg-neutral-weak-pressed);
5700
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
5701
- }
5702
-
5703
6222
  .seed-segmented-control__label--disabled_true {
5704
6223
  color: var(--seed-color-fg-disabled);
5705
6224
  }
5706
6225
 
5707
- .seed-segmented-control__item--disabled_false:active .seed-segmented-control__itemBackground, .seed-segmented-control__itemBackground--pressed_true {
6226
+ .seed-segmented-control__item--disabled_false:active .seed-segmented-control__itemBackground--selected_false, .seed-segmented-control__item--disabled_false:active .seed-segmented-control__itemSelectedBackground--selected_true {
5708
6227
  opacity: 1;
5709
6228
  }
5710
6229
 
5711
- .seed-segmented-control__indicator--hasSelection_false, .seed-segmented-control__itemBackground--disabled_true-pressed_true {
6230
+ .seed-segmented-control__indicator--hasSelection_false {
5712
6231
  opacity: 0;
5713
6232
  }
5714
6233
 
6234
+ .seed-segmented-control__indicator--transitionEnabled_false {
6235
+ transition-duration: 0s;
6236
+ }
6237
+
5715
6238
  .seed-segmented-control__item--selected_true-disabled_true {
5716
6239
  background-color: var(--seed-color-bg-disabled);
5717
6240
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
5718
6241
  }
5719
6242
 
5720
6243
  .seed-select__positioner {
5721
- z-index: 0;
5722
- width: 100%;
5723
- height: 100%;
5724
- position: absolute;
5725
- top: 0;
5726
- left: 0;
5727
- }
5728
-
5729
- .seed-select__backdrop {
5730
- position: absolute;
5731
- top: 0;
5732
- bottom: 0;
5733
- left: 0;
5734
- right: 0;
6244
+ z-index: 99;
5735
6245
  }
5736
6246
 
5737
6247
  .seed-select__content {
@@ -5826,6 +6336,14 @@ text {
5826
6336
  position: relative;
5827
6337
  }
5828
6338
 
6339
+ .seed-select-item__scaleContent {
6340
+ flex-direction: row;
6341
+ align-items: center;
6342
+ width: 100%;
6343
+ min-width: 0;
6344
+ display: flex;
6345
+ }
6346
+
5829
6347
  .seed-select-item__pressedOverlay {
5830
6348
  top: 0;
5831
6349
  right: var(--seed-dimension-x2);
@@ -5869,6 +6387,9 @@ text {
5869
6387
  padding-bottom: var(--seed-dimension-x3);
5870
6388
  padding-left: var(--seed-dimension-x4);
5871
6389
  padding-right: var(--seed-dimension-x4);
6390
+ }
6391
+
6392
+ .seed-select-item__scaleContent--size_large {
5872
6393
  gap: var(--seed-dimension-x3);
5873
6394
  }
5874
6395
 
@@ -5897,6 +6418,9 @@ text {
5897
6418
  padding-bottom: var(--seed-dimension-x2_5);
5898
6419
  padding-left: var(--seed-dimension-x4);
5899
6420
  padding-right: var(--seed-dimension-x4);
6421
+ }
6422
+
6423
+ .seed-select-item__scaleContent--size_medium {
5900
6424
  gap: var(--seed-dimension-x2);
5901
6425
  }
5902
6426
 
@@ -5941,6 +6465,14 @@ text {
5941
6465
  overflow: hidden;
5942
6466
  }
5943
6467
 
6468
+ .seed-select-trigger__scaleContent {
6469
+ flex-direction: row;
6470
+ align-items: center;
6471
+ width: 100%;
6472
+ min-width: 0;
6473
+ display: flex;
6474
+ }
6475
+
5944
6476
  .seed-select-trigger__pressedOverlay {
5945
6477
  opacity: 0;
5946
6478
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -5995,12 +6527,15 @@ text {
5995
6527
 
5996
6528
  .seed-select-trigger__root--size_large {
5997
6529
  height: var(--seed-dimension-x13);
5998
- gap: var(--seed-dimension-x2_5);
5999
6530
  padding-left: var(--seed-dimension-x4);
6000
6531
  padding-right: var(--seed-dimension-x4);
6001
6532
  border-radius: var(--seed-radius-r3);
6002
6533
  }
6003
6534
 
6535
+ .seed-select-trigger__scaleContent--size_large {
6536
+ gap: var(--seed-dimension-x2_5);
6537
+ }
6538
+
6004
6539
  .seed-select-trigger__pressedOverlay--size_large {
6005
6540
  border-radius: var(--seed-radius-r3);
6006
6541
  }
@@ -6017,12 +6552,15 @@ text {
6017
6552
 
6018
6553
  .seed-select-trigger__root--size_medium {
6019
6554
  height: var(--seed-dimension-x10);
6020
- gap: var(--seed-dimension-x2);
6021
6555
  padding-left: var(--seed-dimension-x3_5);
6022
6556
  padding-right: var(--seed-dimension-x3_5);
6023
6557
  border-radius: var(--seed-radius-r2);
6024
6558
  }
6025
6559
 
6560
+ .seed-select-trigger__scaleContent--size_medium {
6561
+ gap: var(--seed-dimension-x2);
6562
+ }
6563
+
6026
6564
  .seed-select-trigger__pressedOverlay--size_medium {
6027
6565
  border-radius: var(--seed-radius-r2);
6028
6566
  }
@@ -6109,7 +6647,7 @@ text {
6109
6647
 
6110
6648
  .seed-slider__thumb {
6111
6649
  top: 50%;
6112
- left: calc(var(--slider-thumb-left, 0%) + var(--slider-thumb-offset, 0px));
6650
+ left: calc(var(--slider-thumb-left, 0%) + var(--seed-dimension-x5) * var(--slider-thumb-offset-ratio, 0));
6113
6651
  width: var(--seed-dimension-x5);
6114
6652
  height: var(--seed-dimension-x5);
6115
6653
  background-color: var(--seed-color-bg-neutral-solid);
@@ -6129,6 +6667,7 @@ text {
6129
6667
  left: calc(var(--slider-value-indicator-left, 0%) + var(--slider-value-indicator-offset, 0px));
6130
6668
  opacity: 0;
6131
6669
  width: max-content;
6670
+ height: max-content;
6132
6671
  transform: translate(-50%, calc(-100% - var(--seed-dimension-x5) / 2 - var(--seed-dimension-x3) + 8px)) scale(1);
6133
6672
  transition: opacity var(--seed-duration-d4) var(--seed-timing-function-easing), transform var(--seed-duration-d4) var(--seed-timing-function-easing);
6134
6673
  align-items: flex-start;
@@ -6179,7 +6718,6 @@ text {
6179
6718
  font-size: var(--seed-font-size-t3);
6180
6719
  line-height: var(--seed-line-height-t3);
6181
6720
  font-weight: var(--seed-font-weight-medium);
6182
- white-space: nowrap;
6183
6721
  text-align: center;
6184
6722
  flex-shrink: 0;
6185
6723
  }
@@ -6192,10 +6730,6 @@ text {
6192
6730
  background-color: var(--seed-color-fg-disabled);
6193
6731
  }
6194
6732
 
6195
- .seed-slider__markers--disabled_true {
6196
- --slider-marker-color: var(--seed-color-fg-disabled);
6197
- }
6198
-
6199
6733
  .seed-slider__range--dragging_true, .seed-slider__thumb--dragging_true, .seed-slider__valueIndicatorArrow--dragging_true {
6200
6734
  transition: none;
6201
6735
  }
@@ -6223,8 +6757,8 @@ text {
6223
6757
  width: max-content;
6224
6758
  top: 0;
6225
6759
  bottom: 0;
6226
- left: calc(var(--slider-marker-left, 0%) + var(--slider-marker-offset, 0px));
6227
- color: var(--slider-marker-color, var(--seed-color-fg-neutral-muted));
6760
+ left: calc(var(--slider-marker-left, 0%) + var(--seed-dimension-x5) * var(--slider-marker-offset-ratio, 0));
6761
+ color: var(--seed-color-fg-neutral-muted);
6228
6762
  font-weight: var(--seed-font-weight-regular);
6229
6763
  font-size: var(--seed-font-size-t3);
6230
6764
  line-height: var(--seed-line-height-t3);
@@ -6263,7 +6797,7 @@ text {
6263
6797
  .seed-slider-tick {
6264
6798
  height: 100%;
6265
6799
  top: 50%;
6266
- left: calc(var(--slider-tick-left, 0%) + var(--slider-tick-offset, 0px));
6800
+ left: calc(var(--slider-tick-left, 0%) + var(--seed-dimension-x5) * var(--slider-tick-offset-ratio, 0));
6267
6801
  background-color: var(--seed-color-fg-on-neutral-solid);
6268
6802
  position: absolute;
6269
6803
  transform: translate(-50%, -50%);
@@ -6282,7 +6816,6 @@ text {
6282
6816
  align-items: stretch;
6283
6817
  gap: 0;
6284
6818
  width: 100%;
6285
- height: 100%;
6286
6819
  min-height: 0;
6287
6820
  display: flex;
6288
6821
  }
@@ -6291,10 +6824,10 @@ text {
6291
6824
  border-radius: var(--seed-radius-r3);
6292
6825
  background-color: var(--seed-color-bg-transparent);
6293
6826
  width: 100%;
6294
- height: 100%;
6295
6827
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
6296
6828
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
6297
6829
  flex-direction: column;
6830
+ flex-grow: 1;
6298
6831
  align-items: stretch;
6299
6832
  display: flex;
6300
6833
  position: relative;
@@ -6306,7 +6839,6 @@ text {
6306
6839
  flex-grow: 1;
6307
6840
  align-items: stretch;
6308
6841
  width: 100%;
6309
- height: 100%;
6310
6842
  min-height: 0;
6311
6843
  display: flex;
6312
6844
  }
@@ -6333,6 +6865,8 @@ text {
6333
6865
 
6334
6866
  .seed-select-box__content {
6335
6867
  flex-direction: row;
6868
+ flex-grow: 1;
6869
+ flex-shrink: 1;
6336
6870
  min-width: 0;
6337
6871
  display: flex;
6338
6872
  }
@@ -6364,6 +6898,7 @@ text {
6364
6898
  line-height: var(--seed-line-height-t5);
6365
6899
  font-weight: var(--seed-font-weight-medium);
6366
6900
  flex-direction: row;
6901
+ flex-shrink: 0;
6367
6902
  display: flex;
6368
6903
  }
6369
6904
 
@@ -6372,6 +6907,7 @@ text {
6372
6907
  font-size: var(--seed-font-size-t3);
6373
6908
  line-height: var(--seed-line-height-t3);
6374
6909
  font-weight: var(--seed-font-weight-regular);
6910
+ flex-shrink: 0;
6375
6911
  }
6376
6912
 
6377
6913
  .seed-select-box__footer {
@@ -6405,6 +6941,11 @@ text {
6405
6941
  gap: var(--seed-dimension-x3);
6406
6942
  }
6407
6943
 
6944
+ .seed-select-box__body--layout_horizontal {
6945
+ flex-grow: 1;
6946
+ flex-shrink: 1;
6947
+ }
6948
+
6408
6949
  .seed-select-box__trigger--layout_vertical {
6409
6950
  padding-left: var(--seed-dimension-x4);
6410
6951
  padding-right: var(--seed-dimension-x4);
@@ -6454,20 +6995,17 @@ text {
6454
6995
  width: var(--seed-dimension-x5);
6455
6996
  height: var(--seed-dimension-x5);
6456
6997
  flex-shrink: 0;
6457
- position: relative;
6998
+ justify-content: center;
6999
+ align-items: center;
7000
+ display: flex;
6458
7001
  }
6459
7002
 
6460
7003
  .seed-select-box-checkmark__icon {
6461
7004
  width: 15px;
6462
7005
  height: 15px;
6463
7006
  color: var(--seed-color-fg-placeholder);
6464
- margin: auto;
7007
+ flex-shrink: 0;
6465
7008
  display: flex;
6466
- position: absolute;
6467
- top: 0;
6468
- bottom: 0;
6469
- left: 0;
6470
- right: 0;
6471
7009
  }
6472
7010
 
6473
7011
  .seed-select-box-checkmark__icon--selected_true {
@@ -6779,17 +7317,16 @@ text {
6779
7317
 
6780
7318
  .seed-tabs__list {
6781
7319
  background-color: var(--seed-color-bg-layer-default);
6782
- border-bottom-style: solid;
6783
- border-bottom-width: 1px;
6784
- border-bottom-color: var(--seed-color-stroke-neutral-muted);
6785
7320
  position: relative;
6786
7321
  }
6787
7322
 
6788
7323
  .seed-tabs__listContent {
6789
- flex-flow: row;
6790
- align-items: stretch;
6791
7324
  width: max-content;
6792
7325
  min-width: 100%;
7326
+ box-shadow: inset 0 -1px 0 0 var(--seed-color-stroke-neutral-muted);
7327
+ flex-flow: row;
7328
+ align-items: stretch;
7329
+ padding-bottom: 1px;
6793
7330
  display: flex;
6794
7331
  position: relative;
6795
7332
  }
@@ -6810,13 +7347,13 @@ text {
6810
7347
  }
6811
7348
 
6812
7349
  .seed-tabs__indicator {
6813
- height: 2px;
6814
- width: var(--tabs-indicator-width, 0px);
6815
7350
  background-color: var(--seed-color-fg-neutral);
6816
- transform: translateX(var(--tabs-indicator-x, 0px));
7351
+ box-sizing: border-box;
7352
+ height: 2px;
6817
7353
  transition-property: transform, width;
6818
7354
  transition-duration: var(--seed-duration-d4);
6819
7355
  transition-timing-function: var(--seed-timing-function-easing);
7356
+ background-clip: content-box;
6820
7357
  position: absolute;
6821
7358
  bottom: 0;
6822
7359
  left: 0;
@@ -6846,8 +7383,8 @@ text {
6846
7383
  }
6847
7384
 
6848
7385
  .seed-tabs__indicator--triggerLayout_fill {
6849
- transform: translateX(calc(var(--tabs-indicator-x, 0px) + var(--seed-dimension-spacing-x-global-gutter)));
6850
- width: calc(var(--tabs-indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter));
7386
+ padding-left: var(--seed-dimension-spacing-x-global-gutter);
7387
+ padding-right: var(--seed-dimension-spacing-x-global-gutter);
6851
7388
  }
6852
7389
 
6853
7390
  .seed-tabs__trigger--triggerLayout_fill {
@@ -6860,8 +7397,9 @@ text {
6860
7397
  }
6861
7398
 
6862
7399
  .seed-tabs__indicator--triggerLayout_hug {
6863
- transform: translateX(calc(var(--tabs-indicator-x, 0px) + var(--seed-dimension-spacing-x-global-gutter) + 0px));
6864
- width: calc(var(--tabs-indicator-width, 0px) - 2 * 0px);
7400
+ left: var(--seed-dimension-spacing-x-global-gutter);
7401
+ padding-left: 0;
7402
+ padding-right: 0;
6865
7403
  }
6866
7404
 
6867
7405
  .seed-tabs__root--contentLayout_fill {
@@ -7204,6 +7742,129 @@ text {
7204
7742
  background: var(--seed-color-bg-disabled);
7205
7743
  }
7206
7744
 
7745
+ .seed-wheel-picker__root {
7746
+ z-index: 0;
7747
+ background-color: var(--seed-color-bg-layer-floating);
7748
+ width: 100%;
7749
+ position: relative;
7750
+ overflow: hidden;
7751
+ }
7752
+
7753
+ .seed-wheel-picker__scrollFog {
7754
+ z-index: 1;
7755
+ height: 100%;
7756
+ position: relative;
7757
+ overflow: hidden;
7758
+ }
7759
+
7760
+ .seed-wheel-picker__columns {
7761
+ flex-direction: row;
7762
+ justify-content: center;
7763
+ width: 100%;
7764
+ height: 100%;
7765
+ display: flex;
7766
+ }
7767
+
7768
+ .seed-wheel-picker__column {
7769
+ flex-shrink: 0;
7770
+ width: max-content;
7771
+ height: 100%;
7772
+ position: relative;
7773
+ }
7774
+
7775
+ .seed-wheel-picker__track {
7776
+ color: var(--seed-color-fg-disabled);
7777
+ }
7778
+
7779
+ .seed-wheel-picker__sizingContent {
7780
+ opacity: 0;
7781
+ pointer-events: none;
7782
+ flex-direction: column;
7783
+ align-items: center;
7784
+ width: max-content;
7785
+ height: 0;
7786
+ display: flex;
7787
+ overflow: hidden;
7788
+ }
7789
+
7790
+ .seed-wheel-picker__item {
7791
+ height: 100%;
7792
+ color: var(--seed-color-fg-disabled);
7793
+ flex-direction: row;
7794
+ justify-content: center;
7795
+ align-items: center;
7796
+ display: flex;
7797
+ }
7798
+
7799
+ .seed-wheel-picker__item text {
7800
+ color: var(--seed-color-fg-disabled);
7801
+ }
7802
+
7803
+ .seed-wheel-picker__itemLabel {
7804
+ width: max-content;
7805
+ height: 100%;
7806
+ padding-left: var(--seed-dimension-x4);
7807
+ padding-right: var(--seed-dimension-x4);
7808
+ font-weight: var(--seed-font-weight-medium);
7809
+ color: var(--seed-color-fg-disabled);
7810
+ flex-direction: row;
7811
+ flex-shrink: 0;
7812
+ justify-content: center;
7813
+ align-items: center;
7814
+ display: flex;
7815
+ }
7816
+
7817
+ .seed-wheel-picker__itemText {
7818
+ font-weight: var(--seed-font-weight-medium);
7819
+ color: var(--seed-color-fg-disabled);
7820
+ }
7821
+
7822
+ .seed-wheel-picker__selectionIndicator {
7823
+ z-index: 0;
7824
+ left: var(--seed-dimension-x4);
7825
+ right: var(--seed-dimension-x4);
7826
+ border-radius: var(--seed-radius-r2);
7827
+ background-color: var(--seed-color-bg-neutral-weak);
7828
+ pointer-events: none;
7829
+ position: absolute;
7830
+ top: 50%;
7831
+ transform: translateY(-50%);
7832
+ }
7833
+
7834
+ .seed-wheel-picker__root--size_small {
7835
+ height: var(--seed-wheel-picker-viewport-size, 180px);
7836
+ }
7837
+
7838
+ .seed-wheel-picker__selectionIndicator--size_small {
7839
+ height: var(--seed-wheel-picker-item-size, 36px);
7840
+ }
7841
+
7842
+ .seed-wheel-picker__itemLabel--size_small, .seed-wheel-picker__itemText--size_small {
7843
+ font-size: var(--seed-font-size-t7-static);
7844
+ line-height: var(--seed-line-height-t7-static);
7845
+ }
7846
+
7847
+ .seed-wheel-picker__root--size_medium {
7848
+ height: var(--seed-wheel-picker-viewport-size, 220px);
7849
+ }
7850
+
7851
+ .seed-wheel-picker__selectionIndicator--size_medium {
7852
+ height: var(--seed-wheel-picker-item-size, 44px);
7853
+ }
7854
+
7855
+ .seed-wheel-picker__itemLabel--size_medium, .seed-wheel-picker__itemText--size_medium {
7856
+ font-size: var(--seed-font-size-t10-static);
7857
+ line-height: var(--seed-line-height-t10-static);
7858
+ }
7859
+
7860
+ .seed-wheel-picker__track--selected_true, .seed-wheel-picker__item--selected_true, .seed-wheel-picker__item--selected_true text, .seed-wheel-picker__itemLabel--selected_true, .seed-wheel-picker__itemText--selected_true {
7861
+ color: var(--seed-color-fg-neutral);
7862
+ }
7863
+
7864
+ .seed-wheel-picker__track--disabled_true, .seed-wheel-picker__item--disabled_true, .seed-wheel-picker__item--disabled_true text, .seed-wheel-picker__itemLabel--disabled_true, .seed-wheel-picker__itemText--disabled_true, .seed-wheel-picker__track--selected_true-disabled_true, .seed-wheel-picker__item--selected_true-disabled_true, .seed-wheel-picker__item--selected_true-disabled_true text, .seed-wheel-picker__itemLabel--selected_true-disabled_true, .seed-wheel-picker__itemText--selected_true-disabled_true {
7865
+ color: var(--seed-color-fg-disabled);
7866
+ }
7867
+
7207
7868
  @keyframes seed-enter {
7208
7869
  from {
7209
7870
  opacity: var(--seed-enter-opacity, 1);