@mkbabb/glass-ui 6.0.0 → 7.0.0

package/dist/styles/tokens/scheme-spring.css

@@ -1 +1 @@
-:root { --spring-smooth: linear(0, 0.00287 2.041%, 0.01102 4.082%, 0.02379 6.122%, 0.04057 8.163%, 0.06079 10.204%, 0.08395 12.245%, 0.10956 14.286%, 0.13721 16.327%, 0.16649 18.367%, 0.19705 20.408%, 0.22858 22.449%, 0.26077 24.490%, 0.29338 26.531%, 0.32617 28.571%, 0.35893 30.612%, 0.39149 32.653%, 0.42368 34.694%, 0.45536 36.735%, 0.48642 38.776%, 0.51676 40.816%, 0.54628 42.857%, 0.57492 44.898%, 0.60262 46.939%, 0.62933 48.980%, 0.65501 51.020%, 0.67965 53.061%, 0.70322 55.102%, 0.72571 57.143%, 0.74713 59.184%, 0.76748 61.224%, 0.78677 63.265%, 0.80501 65.306%, 0.82223 67.347%, 0.83844 69.388%, 0.85367 71.429%, 0.86796 73.469%, 0.88132 75.510%, 0.89379 77.551%, 0.90541 79.592%, 0.91621 81.633%, 0.92623 83.673%, 0.93549 85.714%, 0.94404 87.755%, 0.95190 89.796%, 0.95912 91.837%, 0.96574 93.878%, 0.97177 95.918%, 0.97726 97.959%, 1); --spring-snappy: linear(0, 0.00652 2.041%, 0.02458 4.082%, 0.05211 6.122%, 0.08725 8.163%, 0.12834 10.204%, 0.17392 12.245%, 0.22268 14.286%, 0.27350 16.327%, 0.32540 18.367%, 0.37757 20.408%, 0.42929 22.449%, 0.47998 24.490%, 0.52916 26.531%, 0.57646 28.571%, 0.62156 30.612%, 0.66426 32.653%, 0.70440 34.694%, 0.74187 36.735%, 0.77662 38.776%, 0.80866 40.816%, 0.83800 42.857%, 0.86471 44.898%, 0.88887 46.939%, 0.91058 48.980%, 0.92996 51.020%, 0.94713 53.061%, 0.96223 55.102%, 0.97539 57.143%, 0.98677 59.184%, 0.99649 61.224%, 1.00471 63.265%, 1.01156 65.306%, 1.01716 67.347%, 1.02166 69.388%, 1.02516 71.429%, 1.02778 73.469%, 1.02964 75.510%, 1.03082 77.551%, 1.03142 79.592%, 1.03153 81.633%, 1.03122 83.673%, 1.03057 85.714%, 1.02963 87.755%, 1.02847 89.796%, 1.02713 91.837%, 1.02566 93.878%, 1.02410 95.918%, 1.02249 97.959%, 1); --spring-bouncy: linear(0, 0.00706 2.041%, 0.02686 4.082%, 0.05738 6.122%, 0.09674 8.163%, 0.14321 10.204%, 0.19517 12.245%, 0.25116 14.286%, 0.30987 16.327%, 0.37010 18.367%, 0.43083 20.408%, 0.49115 22.449%, 0.55028 24.490%, 0.60757 26.531%, 0.66248 28.571%, 0.71458 30.612%, 0.76353 32.653%, 0.80908 34.694%, 0.85107 36.735%, 0.88940 38.776%, 0.92404 40.816%, 0.95502 42.857%, 0.98241 44.898%, 1.00631 46.939%, 1.02688 48.980%, 1.04428 51.020%, 1.05870 53.061%, 1.07035 55.102%, 1.07945 57.143%, 1.08621 59.184%, 1.09087 61.224%, 1.09364 63.265%, 1.09474 65.306%, 1.09439 67.347%, 1.09278 69.388%, 1.09011 71.429%, 1.08656 73.469%, 1.08230 75.510%, 1.07749 77.551%, 1.07226 79.592%, 1.06675 81.633%, 1.06106 83.673%, 1.05531 85.714%, 1.04958 87.755%, 1.04394 89.796%, 1.03846 91.837%, 1.03320 93.878%, 1.02820 95.918%, 1.02348 97.959%, 1); --spring-gentle: linear(0, 0.00653 2.041%, 0.02415 4.082%, 0.05029 6.122%, 0.08283 8.163%, 0.12000 10.204%, 0.16036 12.245%, 0.20272 14.286%, 0.24614 16.327%, 0.28983 18.367%, 0.33320 20.408%, 0.37576 22.449%, 0.41716 24.490%, 0.45712 26.531%, 0.49544 28.571%, 0.53199 30.612%, 0.56669 32.653%, 0.59948 34.694%, 0.63037 36.735%, 0.65936 38.776%, 0.68650 40.816%, 0.71183 42.857%, 0.73542 44.898%, 0.75735 46.939%, 0.77768 48.980%, 0.79650 51.020%, 0.81390 53.061%, 0.82995 55.102%, 0.84474 57.143%, 0.85835 59.184%, 0.87086 61.224%, 0.88235 63.265%, 0.89288 65.306%, 0.90253 67.347%, 0.91136 69.388%, 0.91944 71.429%, 0.92682 73.469%, 0.93356 75.510%, 0.93970 77.551%, 0.94531 79.592%, 0.95041 81.633%, 0.95506 83.673%, 0.95929 85.714%, 0.96313 87.755%, 0.96663 89.796%, 0.96980 91.837%, 0.97268 93.878%, 0.97530 95.918%, 0.97767 97.959%, 1); --spring-dock: linear(0, 0.00315 2.041%, 0.01207 4.082%, 0.02597 6.122%, 0.04414 8.163%, 0.06595 10.204%, 0.09081 12.245%, 0.11817 14.286%, 0.14757 16.327%, 0.17856 18.367%, 0.21076 20.408%, 0.24381 22.449%, 0.27740 24.490%, 0.31127 26.531%, 0.34517 28.571%, 0.37888 30.612%, 0.41222 32.653%, 0.44503 34.694%, 0.47717 36.735%, 0.50853 38.776%, 0.53901 40.816%, 0.56854 42.857%, 0.59705 44.898%, 0.62449 46.939%, 0.65083 48.980%, 0.67603 51.020%, 0.70010 53.061%, 0.72301 55.102%, 0.74478 57.143%, 0.76540 59.184%, 0.78490 61.224%, 0.80330 63.265%, 0.82062 65.306%, 0.83688 67.347%, 0.85213 69.388%, 0.86638 71.429%, 0.87969 73.469%, 0.89207 75.510%, 0.90358 77.551%, 0.91425 79.592%, 0.92411 81.633%, 0.93322 83.673%, 0.94160 85.714%, 0.94930 87.755%, 0.95635 89.796%, 0.96279 91.837%, 0.96865 93.878%, 0.97398 95.918%, 0.97881 97.959%, 1); --spring-press: linear(0, 0.00284 2.041%, 0.01090 4.082%, 0.02354 6.122%, 0.04014 8.163%, 0.06017 10.204%, 0.08311 12.245%, 0.10850 14.286%, 0.13590 16.327%, 0.16495 18.367%, 0.19528 20.408%, 0.22657 22.449%, 0.25855 24.490%, 0.29095 26.531%, 0.32354 28.571%, 0.35613 30.612%, 0.38852 32.653%, 0.42057 34.694%, 0.45213 36.735%, 0.48309 38.776%, 0.51333 40.816%, 0.54279 42.857%, 0.57137 44.898%, 0.59903 46.939%, 0.62572 48.980%, 0.65141 51.020%, 0.67605 53.061%, 0.69965 55.102%, 0.72219 57.143%, 0.74366 59.184%, 0.76407 61.224%, 0.78343 63.265%, 0.80175 65.306%, 0.81906 67.347%, 0.83537 69.388%, 0.85070 71.429%, 0.86509 73.469%, 0.87857 75.510%, 0.89116 77.551%, 0.90290 79.592%, 0.91382 81.633%, 0.92395 83.673%, 0.93333 85.714%, 0.94200 87.755%, 0.94999 89.796%, 0.95733 91.837%, 0.96406 93.878%, 0.97020 95.918%, 0.97581 97.959%, 1); --spring-transient: linear(0, 0.00427 2.041%, 0.01615 4.082%, 0.03434 6.122%, 0.05769 8.163%, 0.08520 10.204%, 0.11598 12.245%, 0.14927 14.286%, 0.18439 16.327%, 0.22076 18.367%, 0.25789 20.408%, 0.29534 22.449%, 0.33275 24.490%, 0.36982 26.531%, 0.40630 28.571%, 0.44196 30.612%, 0.47666 32.653%, 0.51024 34.694%, 0.54261 36.735%, 0.57369 38.776%, 0.60342 40.816%, 0.63176 42.857%, 0.65871 44.898%, 0.68425 46.939%, 0.70840 48.980%, 0.73117 51.020%, 0.75259 53.061%, 0.77270 55.102%, 0.79153 57.143%, 0.80913 59.184%, 0.82554 61.224%, 0.84083 63.265%, 0.85503 65.306%, 0.86820 67.347%, 0.88039 69.388%, 0.89166 71.429%, 0.90206 73.469%, 0.91163 75.510%, 0.92043 77.551%, 0.92851 79.592%, 0.93591 81.633%, 0.94268 83.673%, 0.94886 85.714%, 0.95449 87.755%, 0.95961 89.796%, 0.96427 91.837%, 0.96849 93.878%, 0.97230 95.918%, 0.97575 97.959%, 1); --spring-eyeglass: linear(0, 0.00696 2.041%, 0.02640 4.082%, 0.05625 6.122%, 0.09463 8.163%, 0.13978 10.204%, 0.19012 12.245%, 0.24422 14.286%, 0.30080 16.327%, 0.35875 18.367%, 0.41708 20.408%, 0.47495 22.449%, 0.53163 24.490%, 0.58652 26.531%, 0.63915 28.571%, 0.68911 30.612%, 0.73612 32.653%, 0.77996 34.694%, 0.82048 36.735%, 0.85763 38.776%, 0.89137 40.816%, 0.92174 42.857%, 0.94882 44.898%, 0.97270 46.939%, 0.99352 48.980%, 1.01144 51.020%, 1.02663 53.061%, 1.03928 55.102%, 1.04957 57.143%, 1.05772 59.184%, 1.06392 61.224%, 1.06835 63.265%, 1.07123 65.306%, 1.07272 67.347%, 1.07301 69.388%, 1.07227 71.429%, 1.07066 73.469%, 1.06832 75.510%, 1.06538 77.551%, 1.06198 79.592%, 1.05823 81.633%, 1.05423 83.673%, 1.05007 85.714%, 1.04582 87.755%, 1.04156 89.796%, 1.03735 91.837%, 1.03324 93.878%, 1.02927 95.918%, 1.02547 97.959%, 1); --spring-smooth-settle: 0.35s; --spring-snappy-settle: 0.44s; --spring-bouncy-settle: 0.57s; --spring-gentle-settle: 0.76s; --spring-dock-settle: 0.19s; --spring-press-settle: 0.12s; --spring-transient-settle: 0.46s; --spring-eyeglass-settle: 0.34s; --spring-smooth-duration: calc(var(--spring-smooth-settle) * var(--motion-tempo)); --spring-snappy-duration: calc(var(--spring-snappy-settle) * var(--motion-tempo)); --spring-bouncy-duration: calc(var(--spring-bouncy-settle) * var(--motion-tempo)); --spring-gentle-duration: calc(var(--spring-gentle-settle) * var(--motion-tempo)); --spring-dock-duration: calc(var(--spring-dock-settle) * var(--motion-tempo)); --spring-press-duration: calc(var(--spring-press-settle) * var(--motion-tempo)); --spring-transient-duration: calc(var(--spring-transient-settle) * var(--motion-tempo)); --spring-eyeglass-duration: calc(var(--spring-eyeglass-settle) * var(--motion-tempo)); --transition-liquid-spatial: var(--spring-smooth); --deck-goo-flow: linear( 0, 0.02206 4.167%, 0.07922 8.333%, 0.15799 12.5%, 0.24486 16.667%, 0.32632 20.833%, 0.38889 25%, 0.41905 29.167%, 0.43667 33.333%, 0.4575 37.5%, 0.47833 41.667%, 0.49917 45.833%, 0.52 50%, 0.54083 54.167%, 0.56167 58.333%, 0.58373 62.5%, 0.64 66.667%, 0.71 70.833%, 0.78 75%, 0.85 79.167%, 0.91 83.333%, 0.96 87.5%, 0.985 91.667%, 0.997 95.833%, 1 ); --deck-goo-duration: 1.1s; --deck-goo-max-stretch: 1.1; --pager-worm-max-stretch: 1.2; --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --motion-ease-out: cubic-bezier(0, 0, 0.2, 1); --motion-ease-in: cubic-bezier(0.4, 0, 1, 1); --motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: var(--motion-ease-standard); --ease-out: var(--motion-ease-out); --ease-in: var(--motion-ease-in); --ease-out-expo: var(--motion-ease-out-expo); --motion-ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-apple: var(--motion-ease-apple); --ease-spring: var(--spring-snappy); --ease-decelerate: var(--ease-out); --ease-accelerate: var(--ease-in); --ease-convergence: var(--spring-gentle); } @media (prefers-reduced-motion: reduce) { :root { --transition-liquid-spatial: var(--ease-standard); } }
+:root { --spring-smooth: linear(0, 0.00287 2.041%, 0.01102 4.082%, 0.02379 6.122%, 0.04057 8.163%, 0.06079 10.204%, 0.08395 12.245%, 0.10956 14.286%, 0.13721 16.327%, 0.16649 18.367%, 0.19705 20.408%, 0.22858 22.449%, 0.26077 24.490%, 0.29338 26.531%, 0.32617 28.571%, 0.35893 30.612%, 0.39149 32.653%, 0.42368 34.694%, 0.45536 36.735%, 0.48642 38.776%, 0.51676 40.816%, 0.54628 42.857%, 0.57492 44.898%, 0.60262 46.939%, 0.62933 48.980%, 0.65501 51.020%, 0.67965 53.061%, 0.70322 55.102%, 0.72571 57.143%, 0.74713 59.184%, 0.76748 61.224%, 0.78677 63.265%, 0.80501 65.306%, 0.82223 67.347%, 0.83844 69.388%, 0.85367 71.429%, 0.86796 73.469%, 0.88132 75.510%, 0.89379 77.551%, 0.90541 79.592%, 0.91621 81.633%, 0.92623 83.673%, 0.93549 85.714%, 0.94404 87.755%, 0.95190 89.796%, 0.95912 91.837%, 0.96574 93.878%, 0.97177 95.918%, 0.97726 97.959%, 1); --spring-snappy: linear(0, 0.00652 2.041%, 0.02458 4.082%, 0.05211 6.122%, 0.08725 8.163%, 0.12834 10.204%, 0.17392 12.245%, 0.22268 14.286%, 0.27350 16.327%, 0.32540 18.367%, 0.37757 20.408%, 0.42929 22.449%, 0.47998 24.490%, 0.52916 26.531%, 0.57646 28.571%, 0.62156 30.612%, 0.66426 32.653%, 0.70440 34.694%, 0.74187 36.735%, 0.77662 38.776%, 0.80866 40.816%, 0.83800 42.857%, 0.86471 44.898%, 0.88887 46.939%, 0.91058 48.980%, 0.92996 51.020%, 0.94713 53.061%, 0.96223 55.102%, 0.97539 57.143%, 0.98677 59.184%, 0.99649 61.224%, 1.00471 63.265%, 1.01156 65.306%, 1.01716 67.347%, 1.02166 69.388%, 1.02516 71.429%, 1.02778 73.469%, 1.02964 75.510%, 1.03082 77.551%, 1.03142 79.592%, 1.03153 81.633%, 1.03122 83.673%, 1.03057 85.714%, 1.02963 87.755%, 1.02847 89.796%, 1.02713 91.837%, 1.02566 93.878%, 1.02410 95.918%, 1.02249 97.959%, 1); --spring-bouncy: linear(0, 0.00706 2.041%, 0.02686 4.082%, 0.05738 6.122%, 0.09674 8.163%, 0.14321 10.204%, 0.19517 12.245%, 0.25116 14.286%, 0.30987 16.327%, 0.37010 18.367%, 0.43083 20.408%, 0.49115 22.449%, 0.55028 24.490%, 0.60757 26.531%, 0.66248 28.571%, 0.71458 30.612%, 0.76353 32.653%, 0.80908 34.694%, 0.85107 36.735%, 0.88940 38.776%, 0.92404 40.816%, 0.95502 42.857%, 0.98241 44.898%, 1.00631 46.939%, 1.02688 48.980%, 1.04428 51.020%, 1.05870 53.061%, 1.07035 55.102%, 1.07945 57.143%, 1.08621 59.184%, 1.09087 61.224%, 1.09364 63.265%, 1.09474 65.306%, 1.09439 67.347%, 1.09278 69.388%, 1.09011 71.429%, 1.08656 73.469%, 1.08230 75.510%, 1.07749 77.551%, 1.07226 79.592%, 1.06675 81.633%, 1.06106 83.673%, 1.05531 85.714%, 1.04958 87.755%, 1.04394 89.796%, 1.03846 91.837%, 1.03320 93.878%, 1.02820 95.918%, 1.02348 97.959%, 1); --spring-gentle: linear(0, 0.00653 2.041%, 0.02415 4.082%, 0.05029 6.122%, 0.08283 8.163%, 0.12000 10.204%, 0.16036 12.245%, 0.20272 14.286%, 0.24614 16.327%, 0.28983 18.367%, 0.33320 20.408%, 0.37576 22.449%, 0.41716 24.490%, 0.45712 26.531%, 0.49544 28.571%, 0.53199 30.612%, 0.56669 32.653%, 0.59948 34.694%, 0.63037 36.735%, 0.65936 38.776%, 0.68650 40.816%, 0.71183 42.857%, 0.73542 44.898%, 0.75735 46.939%, 0.77768 48.980%, 0.79650 51.020%, 0.81390 53.061%, 0.82995 55.102%, 0.84474 57.143%, 0.85835 59.184%, 0.87086 61.224%, 0.88235 63.265%, 0.89288 65.306%, 0.90253 67.347%, 0.91136 69.388%, 0.91944 71.429%, 0.92682 73.469%, 0.93356 75.510%, 0.93970 77.551%, 0.94531 79.592%, 0.95041 81.633%, 0.95506 83.673%, 0.95929 85.714%, 0.96313 87.755%, 0.96663 89.796%, 0.96980 91.837%, 0.97268 93.878%, 0.97530 95.918%, 0.97767 97.959%, 1); --spring-dock: linear(0, 0.00315 2.041%, 0.01207 4.082%, 0.02597 6.122%, 0.04414 8.163%, 0.06595 10.204%, 0.09081 12.245%, 0.11817 14.286%, 0.14757 16.327%, 0.17856 18.367%, 0.21076 20.408%, 0.24381 22.449%, 0.27740 24.490%, 0.31127 26.531%, 0.34517 28.571%, 0.37888 30.612%, 0.41222 32.653%, 0.44503 34.694%, 0.47717 36.735%, 0.50853 38.776%, 0.53901 40.816%, 0.56854 42.857%, 0.59705 44.898%, 0.62449 46.939%, 0.65083 48.980%, 0.67603 51.020%, 0.70010 53.061%, 0.72301 55.102%, 0.74478 57.143%, 0.76540 59.184%, 0.78490 61.224%, 0.80330 63.265%, 0.82062 65.306%, 0.83688 67.347%, 0.85213 69.388%, 0.86638 71.429%, 0.87969 73.469%, 0.89207 75.510%, 0.90358 77.551%, 0.91425 79.592%, 0.92411 81.633%, 0.93322 83.673%, 0.94160 85.714%, 0.94930 87.755%, 0.95635 89.796%, 0.96279 91.837%, 0.96865 93.878%, 0.97398 95.918%, 0.97881 97.959%, 1); --spring-press: linear(0, 0.00284 2.041%, 0.01090 4.082%, 0.02354 6.122%, 0.04014 8.163%, 0.06017 10.204%, 0.08311 12.245%, 0.10850 14.286%, 0.13590 16.327%, 0.16495 18.367%, 0.19528 20.408%, 0.22657 22.449%, 0.25855 24.490%, 0.29095 26.531%, 0.32354 28.571%, 0.35613 30.612%, 0.38852 32.653%, 0.42057 34.694%, 0.45213 36.735%, 0.48309 38.776%, 0.51333 40.816%, 0.54279 42.857%, 0.57137 44.898%, 0.59903 46.939%, 0.62572 48.980%, 0.65141 51.020%, 0.67605 53.061%, 0.69965 55.102%, 0.72219 57.143%, 0.74366 59.184%, 0.76407 61.224%, 0.78343 63.265%, 0.80175 65.306%, 0.81906 67.347%, 0.83537 69.388%, 0.85070 71.429%, 0.86509 73.469%, 0.87857 75.510%, 0.89116 77.551%, 0.90290 79.592%, 0.91382 81.633%, 0.92395 83.673%, 0.93333 85.714%, 0.94200 87.755%, 0.94999 89.796%, 0.95733 91.837%, 0.96406 93.878%, 0.97020 95.918%, 0.97581 97.959%, 1); --spring-transient: linear(0, 0.00427 2.041%, 0.01615 4.082%, 0.03434 6.122%, 0.05769 8.163%, 0.08520 10.204%, 0.11598 12.245%, 0.14927 14.286%, 0.18439 16.327%, 0.22076 18.367%, 0.25789 20.408%, 0.29534 22.449%, 0.33275 24.490%, 0.36982 26.531%, 0.40630 28.571%, 0.44196 30.612%, 0.47666 32.653%, 0.51024 34.694%, 0.54261 36.735%, 0.57369 38.776%, 0.60342 40.816%, 0.63176 42.857%, 0.65871 44.898%, 0.68425 46.939%, 0.70840 48.980%, 0.73117 51.020%, 0.75259 53.061%, 0.77270 55.102%, 0.79153 57.143%, 0.80913 59.184%, 0.82554 61.224%, 0.84083 63.265%, 0.85503 65.306%, 0.86820 67.347%, 0.88039 69.388%, 0.89166 71.429%, 0.90206 73.469%, 0.91163 75.510%, 0.92043 77.551%, 0.92851 79.592%, 0.93591 81.633%, 0.94268 83.673%, 0.94886 85.714%, 0.95449 87.755%, 0.95961 89.796%, 0.96427 91.837%, 0.96849 93.878%, 0.97230 95.918%, 0.97575 97.959%, 1); --spring-smooth-settle: 0.35s; --spring-snappy-settle: 0.44s; --spring-bouncy-settle: 0.57s; --spring-gentle-settle: 0.76s; --spring-dock-settle: 0.19s; --spring-press-settle: 0.12s; --spring-transient-settle: 0.46s; --spring-smooth-duration: calc(var(--spring-smooth-settle) * var(--motion-tempo)); --spring-snappy-duration: calc(var(--spring-snappy-settle) * var(--motion-tempo)); --spring-bouncy-duration: calc(var(--spring-bouncy-settle) * var(--motion-tempo)); --spring-gentle-duration: calc(var(--spring-gentle-settle) * var(--motion-tempo)); --spring-dock-duration: calc(var(--spring-dock-settle) * var(--motion-tempo)); --spring-press-duration: calc(var(--spring-press-settle) * var(--motion-tempo)); --spring-transient-duration: calc(var(--spring-transient-settle) * var(--motion-tempo)); --transition-liquid-spatial: var(--spring-smooth); --pager-worm-max-stretch: 1.2; --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --motion-ease-out: cubic-bezier(0, 0, 0.2, 1); --motion-ease-in: cubic-bezier(0.4, 0, 1, 1); --motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: var(--motion-ease-standard); --ease-out: var(--motion-ease-out); --ease-in: var(--motion-ease-in); --ease-out-expo: var(--motion-ease-out-expo); --motion-ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-apple: var(--motion-ease-apple); --ease-spring: var(--spring-snappy); --ease-decelerate: var(--ease-out); --ease-accelerate: var(--ease-in); } @media (prefers-reduced-motion: reduce) { :root { --transition-liquid-spatial: var(--ease-standard); } }

package/dist/styles/tokens/scroll-tokens.css

@@ -1 +1 @@
-:root { --scroll-reveal-rise: 6px; --scroll-reveal-range-end: 60%; --scroll-cascade-rise: 1.25rem; --scroll-cascade-range-end: 45%; --scroll-cascade-column-stagger: 6%; --scroll-pin-stage-height: 320vh; --scroll-pin-lift: 2.5rem; --top-layer-enter-scale: var(--enter-overlay-scale); --top-layer-enter-blur: var(--enter-overlay-blur); --top-layer-backdrop-blur: 8px; --top-layer-backdrop-dim: 0.5; --vt-duration: var(--duration-normal); --vt-ease: var(--spring-bouncy); --vt-rise: 8px; --dock-resize-spring: var(--spring-dock); --dock-press-spring: var(--spring-smooth-duration) var(--spring-smooth); }
+:root { --scroll-reveal-rise: 6px; --scroll-reveal-range-end: 60%; --scroll-cascade-rise: 1.25rem; --scroll-cascade-range-end: 45%; --scroll-cascade-column-stagger: 6%; --scroll-pin-stage-height: 320vh; --scroll-pin-lift: 2.5rem; --top-layer-enter-scale: var(--enter-overlay-scale); --top-layer-enter-blur: var(--enter-overlay-blur); --top-layer-backdrop-blur: 7px; --top-layer-backdrop-dim: 0.5; --vt-duration: var(--duration-normal); --vt-ease: var(--spring-bouncy); --vt-rise: 8px; --dock-resize-spring: var(--spring-dock); --dock-press-spring: var(--spring-smooth-duration) var(--spring-smooth); }

package/dist/styles/tokens/shadow.css

@@ -1 +1 @@
-:root { --shadow-cartoon: -3px 3px 0px 0px var(--cartoon-ink-lead); --shadow-cartoon-hover: -4px 4px 0px 0px var(--cartoon-ink-lead); --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-modal: -4px 4px 0px 0px var(--cartoon-ink-lead), 0 24px 64px color-mix(in srgb, var(--foreground) 12%, transparent); --cartoon-shadow: var(--shadow-cartoon); --cartoon-shadow-hover: var(--shadow-cartoon-hover); --soft-shadow: var(--shadow-soft); --elevated-shadow: var(--shadow-elevated); --modal-shadow: var(--shadow-modal); --shadow-sm: 0 2px 8px color-mix(in srgb, var(--shadow-color) 6%, transparent); --shadow-md: 0 4px 16px color-mix(in srgb, var(--shadow-color) 8%, transparent); --shadow-lg: 0 4px 20px color-mix(in srgb, var(--shadow-color) 12%, transparent); --shadow-xl: 0 8px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent); --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--shadow-color) 25%, transparent); --shadow-card: var(--shadow-md); --card-shadow: var(--shadow-card); --shadow-dock: 0 0 20px color-mix(in srgb, var(--shadow-color) 14%, transparent); --shadow-dock-collapsed: 0 0 12px color-mix(in srgb, var(--shadow-color) 12%, transparent); --dock-shadow: var(--shadow-dock); --dock-shadow-collapsed: var(--shadow-dock-collapsed); --glass-material-rim: 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent); --shadow-dock-wrap: var(--shadow-xl), var(--glass-material-rim), var(--glass-under-shadow-vivid); --shadow-cartoon-color: rgb(0 0 0 / 0.12); --shadow-cartoon-color-soft: rgb(0 0 0 / 0.06); --cartoon-ink: oklch(from var(--foreground) clamp(0.28, l, 0.34) clamp(0.030, c, 0.050) h); --cartoon-ink-lead: color-mix(in oklab, var(--cartoon-ink) 32%, transparent); --cartoon-ink-mid: color-mix(in oklab, var(--cartoon-ink) 26%, transparent); --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 18%, transparent); --cartoon-ink-fallback: #34251a; --shadow-cartoon-sm: -2px 2px 0 var(--cartoon-ink-lead), -3px 3px 0 var(--cartoon-ink-mid), -4px 4px 0 var(--cartoon-ink-contact); --shadow-cartoon-md: -3px 3px 0 var(--cartoon-ink-lead), -5px 5px 0 var(--cartoon-ink-mid), -7px 7px 0 var(--cartoon-ink-contact); --shadow-cartoon-lg: -4px 4px 0 var(--cartoon-ink-lead), -7px 7px 0 var(--cartoon-ink-mid), -11px 11px 0 var(--cartoon-ink-contact); --cartoon-shadow-sm: var(--shadow-cartoon-sm); --cartoon-shadow-md: var(--shadow-cartoon-md); --cartoon-shadow-lg: var(--shadow-cartoon-lg); --blob-shadow-offset: 0 4px; --blob-shadow-blur: 14px; --blob-shadow-color: color-mix(in srgb, var(--blob-color, var(--shadow-color)) 22%, var(--shadow-color)); --blob-shadow-strength: 20%; --blob-shadow-ambient: var(--blob-shadow-offset) var(--blob-shadow-blur) color-mix(in srgb, var(--blob-shadow-color) var(--blob-shadow-strength), transparent); --blob-shadow-contact-offset: 0 1px; --blob-shadow-contact-blur: 3px; --blob-shadow-contact-strength: 38%; --blob-shadow-contact: var(--blob-shadow-contact-offset) var(--blob-shadow-contact-blur) color-mix(in srgb, var(--blob-shadow-color) var(--blob-shadow-contact-strength), transparent); --blob-shadow-hover: 0 6px 20px color-mix(in srgb, var(--blob-shadow-color) 26%, transparent); --blob-shadow-contact-hover: 0 1px 4px color-mix(in srgb, var(--blob-shadow-color) 44%, transparent); } @supports not (color: oklch(from white l c h)) { :root { --cartoon-ink: var(--cartoon-ink-fallback); } } @media (prefers-contrast: more), (prefers-reduced-transparency: reduce) { :root { --cartoon-ink-lead: color-mix(in oklab, var(--cartoon-ink) 42%, transparent); --cartoon-ink-mid: color-mix(in oklab, var(--cartoon-ink) 34%, transparent); --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 24%, transparent); } }
+:root { --shadow-cartoon: -3px 3px 0px 0px var(--cartoon-ink-lead); --shadow-cartoon-hover: -4px 4px 0px 0px var(--cartoon-ink-lead); --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-modal: -4px 4px 0px 0px var(--cartoon-ink-lead), 0 24px 64px color-mix(in srgb, var(--foreground) 12%, transparent); --shadow-sm: 0 2px 8px color-mix(in srgb, var(--shadow-color) 6%, transparent); --shadow-md: 0 4px 16px color-mix(in srgb, var(--shadow-color) 8%, transparent); --shadow-lg: 0 4px 20px color-mix(in srgb, var(--shadow-color) 12%, transparent); --shadow-xl: 0 8px 24px color-mix(in srgb, var(--shadow-color) 14%, transparent); --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--shadow-color) 25%, transparent); --shadow-card: var(--shadow-md); --shadow-dock: 0 0 20px color-mix(in srgb, var(--shadow-color) 14%, transparent); --shadow-dock-collapsed: 0 0 12px color-mix(in srgb, var(--shadow-color) 12%, transparent); --glass-material-rim: 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) 5%, transparent); --cartoon-ink: oklch(from var(--foreground) clamp(0.28, l, 0.34) clamp(0.030, c, 0.050) h); --cartoon-ink-lead: color-mix(in oklab, var(--cartoon-ink) 32%, transparent); --cartoon-ink-mid: color-mix(in oklab, var(--cartoon-ink) 26%, transparent); --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 18%, transparent); --cartoon-ink-fallback: #34251a; --shadow-cartoon-sm: -2px 2px 0 var(--cartoon-ink-lead), -3px 3px 0 var(--cartoon-ink-mid), -4px 4px 0 var(--cartoon-ink-contact); --shadow-cartoon-md: -3px 3px 0 var(--cartoon-ink-lead), -5px 5px 0 var(--cartoon-ink-mid), -7px 7px 0 var(--cartoon-ink-contact); --shadow-cartoon-lg: -4px 4px 0 var(--cartoon-ink-lead), -7px 7px 0 var(--cartoon-ink-mid), -11px 11px 0 var(--cartoon-ink-contact); --blob-shadow-offset: 0 4px; --blob-shadow-blur: 14px; --blob-shadow-color: color-mix(in srgb, var(--blob-color, var(--shadow-color)) 22%, var(--shadow-color)); --blob-shadow-strength: 20%; --blob-shadow-ambient: var(--blob-shadow-offset) var(--blob-shadow-blur) color-mix(in srgb, var(--blob-shadow-color) var(--blob-shadow-strength), transparent); --blob-shadow-contact-offset: 0 1px; --blob-shadow-contact-blur: 3px; --blob-shadow-contact-strength: 38%; --blob-shadow-contact: var(--blob-shadow-contact-offset) var(--blob-shadow-contact-blur) color-mix(in srgb, var(--blob-shadow-color) var(--blob-shadow-contact-strength), transparent); --blob-shadow-hover: 0 6px 20px color-mix(in srgb, var(--blob-shadow-color) 26%, transparent); --blob-shadow-contact-hover: 0 1px 4px color-mix(in srgb, var(--blob-shadow-color) 44%, transparent); } @supports not (color: oklch(from white l c h)) { :root { --cartoon-ink: var(--cartoon-ink-fallback); } } @media (prefers-contrast: more), (prefers-reduced-transparency: reduce) { :root { --cartoon-ink-lead: color-mix(in oklab, var(--cartoon-ink) 42%, transparent); --cartoon-ink-mid: color-mix(in oklab, var(--cartoon-ink) 34%, transparent); --cartoon-ink-contact: color-mix(in oklab, var(--cartoon-ink) 24%, transparent); } }

package/dist/styles/tokens/sizing-config.css

@@ -1 +1 @@
-:root { --metric-badge-min-height-stacked: 2.625rem; --metric-badge-padding-block-stacked: 0.375rem; --configurator-row-gap-mobile: 0.25rem; --configurator-row-gap-compact: 0.3125rem; --configurator-row-gap-comfortable: 0.375rem; --configurator-row-gap-spacious: 0.75rem; --configurator-row-py-mobile: 0.25rem; --configurator-row-py-compact: 0.375rem; --configurator-row-py-comfortable: 0.5rem; --configurator-row-py-spacious: 0.875rem; --configurator-section-size: var(--type-subheading); --configurator-section-weight: 600; --configurator-stage-min: 18rem; --configurator-preset-row-weight: 0.625rem; --configurator-preset-row-gap: 0.5rem; --configurator-divider: light-dark( color-mix(in srgb, var(--border) 55%, transparent), color-mix(in srgb, var(--foreground) 22%, transparent) ); --configurator-divider-section: light-dark( color-mix(in srgb, var(--border) 70%, transparent), color-mix(in srgb, var(--foreground) 30%, transparent) ); --configurator-section-tint: light-dark( transparent, color-mix(in srgb, var(--foreground) 3%, transparent) ); --select-font: inherit; }
+:root { --configurator-row-gap-compact: 0.3125rem; --configurator-row-gap-comfortable: 0.375rem; --configurator-row-gap-spacious: 0.75rem; --configurator-row-py-compact: 0.375rem; --configurator-row-py-comfortable: 0.5rem; --configurator-row-py-spacious: 0.875rem; --configurator-section-size: var(--type-subheading); --configurator-section-weight: 600; --configurator-stage-min: 18rem; --configurator-preset-row-weight: 0.625rem; --configurator-preset-row-gap: 0.5rem; --configurator-divider: light-dark( color-mix(in srgb, var(--border) 55%, transparent), color-mix(in srgb, var(--foreground) 22%, transparent) ); --configurator-divider-section: light-dark( color-mix(in srgb, var(--border) 70%, transparent), color-mix(in srgb, var(--foreground) 30%, transparent) ); --configurator-section-tint: light-dark( transparent, color-mix(in srgb, var(--foreground) 3%, transparent) ); }

package/dist/styles/tokens/sizing.css

@@ -1 +1 @@
-:root { --ui-scale: 1; --ui-coarse-scale: 1.5; --control-floor: 0px; --control-h-xs: max(calc(1.75rem * var(--ui-scale)), var(--control-floor)); --control-h-sm: max(calc(2.25rem * var(--ui-scale)), var(--control-floor)); --control-h-md: max(calc(2.5rem * var(--ui-scale)), var(--control-floor)); --control-h-lg: max(calc(2.75rem * var(--ui-scale)), var(--control-floor)); --control-text: calc(var(--type-small) * var(--ui-scale)); --control-text-sm: calc(var(--type-caption) * var(--ui-scale)); --ui-glyph: calc(1rem * var(--ui-scale)); --ui-glyph-sm: calc(0.875rem * var(--ui-scale)); --dropdown-text: var(--control-text); --dropdown-text-secondary: var(--control-text-sm); --dropdown-input-height: var(--control-h-md); --search-icon-size: var(--ui-glyph-sm); --search-button-size: var(--control-h-xs); --search-result-text: var(--control-text); --search-result-text-secondary: var(--control-text-sm); --size-icon-btn: 2.5rem; --icon-xs: 0.75rem; --icon-sm: 0.875rem; --icon-md: 1rem; --icon-lg: 1.25rem; --icon-xl: 1.5rem; --icon-2xl: 2rem; --icon-3xl: var(--size-icon-btn); --icon-hero: 3.5rem; --space-phi-5: 2.618rem; --space-phi-6: 4.236rem; --dock-h: calc(var(--size-icon-btn) + 0.75rem + 3px); --dock-margin: 0.5rem; --dock-menubar-reserve: 4rem; --dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1)); --dock-local-scale: 1; --dock-mobile-scale: initial; --dock-coarse-scale: 0.78; --dock-icon-glyph-ratio: 0.5; --dock-icon-glyph-floor: 1rem; --dock-icon-glyph: max( calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); --dock-collapsed-summary-min-size: calc(var(--dock-layer-height, 2.5rem) * 0.85); --dock-collapsed-padding: calc(0.25rem * var(--dock-scale)); --dock-pill-h: calc( var(--dock-layer-height, 2.5rem) + 2 * var(--dock-padding-block, 0.375rem) ); --dock-scroll-safe-inset: calc(var(--focus-ring-width, 2px) + 1px); --dock-scroll-gutter: var(--dock-scroll-safe-inset); --dock-fisheye-amp: 0.6; --dock-fisheye-sigma: 64; --dock-fisheye-duration: 80ms; --dock-control-hover-bg: var(--glass-bg-resting); --dock-control-active-bg: var(--glass-bg-floating); --dock-control-specular-size: 22%; --dock-layer-rail-bg: transparent; --dock-layer-rail-divider: color-mix(in srgb, var(--border) 40%, transparent); --dock-layer-rail-hover: color-mix(in srgb, var(--accent) 30%, transparent); --dock-layer-rail-active: var(--glass-bg-floating); --dock-layer-tab-size: calc(1.75rem * var(--dock-scale)); --dock-section-zone-gap: var(--dock-gap, 0.25rem); --dock-active-bg: var(--dock-control-active-bg); --dock-active-color: var(--foreground); --dock-active-scale: 1; --dock-active-border: none; --dock-active-shadow: none; --dock-selected-accent: color-mix(in oklab, var(--foreground) 14%, transparent); --dock-ring: var(--focus-ring-shadow); --dock-control-press-bg: color-mix( in oklab, var(--glass-bg-resting), var(--foreground) 7% ); --dock-touch-target: 2.75rem; --dock-label-ratio: 0.5088; --touch-target: 2.75rem; }
+:root { --ui-scale: 1; --ui-coarse-scale: 1.5; --control-floor: 0px; --control-h-xs: max(calc(1.75rem * var(--ui-scale)), var(--control-floor)); --control-h-sm: max(calc(2.25rem * var(--ui-scale)), var(--control-floor)); --control-h-md: max(calc(2.5rem * var(--ui-scale)), var(--control-floor)); --control-h-lg: max(calc(2.75rem * var(--ui-scale)), var(--control-floor)); --control-text: calc(var(--type-small) * var(--ui-scale)); --control-text-sm: calc(var(--type-caption) * var(--ui-scale)); --ui-glyph: calc(1rem * var(--ui-scale)); --ui-glyph-sm: calc(0.875rem * var(--ui-scale)); --dropdown-text: var(--control-text); --dropdown-text-secondary: var(--control-text-sm); --dropdown-input-height: var(--control-h-md); --search-icon-size: var(--ui-glyph-sm); --search-button-size: var(--control-h-xs); --search-result-text: var(--control-text); --search-result-text-secondary: var(--control-text-sm); --size-icon-btn: 2.5rem; --icon-xs: 0.75rem; --icon-sm: 0.875rem; --icon-md: 1rem; --icon-lg: 1.25rem; --icon-xl: 1.5rem; --icon-2xl: 2rem; --icon-3xl: var(--size-icon-btn); --icon-hero: 3.5rem; --space-phi-5: 2.618rem; --space-phi-6: 4.236rem; --dock-h: calc(var(--size-icon-btn) + 0.75rem + 3px); --dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1)); --dock-local-scale: 1; --dock-mobile-scale: initial; --dock-coarse-scale: 0.78; --dock-icon-glyph-ratio: 0.5; --dock-icon-glyph-floor: 1rem; --dock-icon-glyph: max( calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); --dock-collapsed-summary-min-size: calc(var(--dock-layer-height, 2.5rem) * 0.85); --dock-collapsed-padding: calc(0.25rem * var(--dock-scale)); --dock-scroll-safe-inset: calc(var(--focus-ring-width, 2px) + 1px); --dock-scroll-gutter: var(--dock-scroll-safe-inset); --dock-control-hover-bg: var(--glass-bg-resting); --dock-control-active-bg: var(--glass-bg-floating); --dock-control-specular-size: 22%; --dock-layer-rail-bg: transparent; --dock-layer-rail-divider: color-mix(in srgb, var(--border) 40%, transparent); --dock-layer-rail-hover: color-mix(in srgb, var(--accent) 30%, transparent); --dock-layer-rail-active: var(--glass-bg-floating); --dock-layer-tab-size: calc(1.75rem * var(--dock-scale)); --dock-active-bg: var(--dock-control-active-bg); --dock-active-color: var(--foreground); --dock-active-scale: 1; --dock-active-border: none; --dock-active-shadow: none; --dock-selected-accent: color-mix(in oklab, var(--foreground) 14%, transparent); --dock-ring: var(--focus-ring-shadow); --dock-control-press-bg: color-mix( in oklab, var(--glass-bg-resting), var(--foreground) 7% ); --dock-touch-target: 2.75rem; --dock-label-ratio: 0.5088; --touch-target: 2.75rem; }

package/dist/styles/tokens.d.ts

@@ -5,7 +5,7 @@
  * (echarts configs, Canvas 2D, WebGL, canvas-rendered charts) cannot resolve
  * CSS variables at render time — they need literal numbers and strings.
  *
- * This module mirrors the CSS tokens for those consumers. Keep in sync.
+ * This module provides literal runtime values and the public semantic manifest.
  */
 /** Chart container heights (px). Match `--chart-height-*` in tokens.css. */
 export declare const chartHeights: {
@@ -28,13 +28,10 @@ export declare const chartColors: {
 /** Default form-select minimum width (px). Matches `--input-min-width-sm`. */
 export declare const minWidthInputSm = 80;
 /**
- * Stagger increments (ms) — TS mirror of the `--motion-stagger-*` canon
- * promoted at AJ-W4-κ. Use these for animation cascades driven from JS
+ * Stagger increments (ms) for animation cascades driven from JS
  * (e.g. echarts `animationDelay: (idx) => idx * motionStagger.default`,
  * Vue inline-style binding) so the JS-driven cascade and CSS-driven
- * cascade resolve to the same value. The three named tiers correspond
- * to `--motion-stagger-tight | --motion-stagger-default | --motion-stagger-relaxed`
- * in `styles/tokens.css`:
+ * while CSS keeps only the default shared rung:
  *
  *   - `tight` (40ms)    — dense row cascades (StatsCards row strip,
  *                         results-table `:nth-child` delays)
@@ -42,12 +39,10 @@ export declare const minWidthInputSm = 80;
  *                         entrance, useStaggerReveal default)
  *   - `relaxed` (120ms) — wider series cascades (TimeSeriesChart)
  *
- * Retires per-consumer constants (SERIES_STAGGER_MS, BAR_STAGGER_MS,
- * STATS_CARD_STAGGER_MS) into single-source token reads. Per A5 §8.9 +
- * AJ-W4-κ.
  */
 export declare const motionStagger: {
     readonly tight: 40;
     readonly default: 80;
     readonly relaxed: 120;
 };
+export * from "./tokens/manifest";

package/dist/styles/tokens.ts

@@ -5,7 +5,7 @@
  * (echarts configs, Canvas 2D, WebGL, canvas-rendered charts) cannot resolve
  * CSS variables at render time — they need literal numbers and strings.
  *
- * This module mirrors the CSS tokens for those consumers. Keep in sync.
+ * This module provides literal runtime values and the public semantic manifest.
  */
 
 /** Chart container heights (px). Match `--chart-height-*` in tokens.css. */
@@ -33,13 +33,10 @@ export const chartColors = {
 export const minWidthInputSm = 80;
 
 /**
- * Stagger increments (ms) — TS mirror of the `--motion-stagger-*` canon
- * promoted at AJ-W4-κ. Use these for animation cascades driven from JS
+ * Stagger increments (ms) for animation cascades driven from JS
  * (e.g. echarts `animationDelay: (idx) => idx * motionStagger.default`,
  * Vue inline-style binding) so the JS-driven cascade and CSS-driven
- * cascade resolve to the same value. The three named tiers correspond
- * to `--motion-stagger-tight | --motion-stagger-default | --motion-stagger-relaxed`
- * in `styles/tokens.css`:
+ * while CSS keeps only the default shared rung:
  *
  *   - `tight` (40ms)    — dense row cascades (StatsCards row strip,
  *                         results-table `:nth-child` delays)
@@ -47,12 +44,11 @@ export const minWidthInputSm = 80;
  *                         entrance, useStaggerReveal default)
  *   - `relaxed` (120ms) — wider series cascades (TimeSeriesChart)
  *
- * Retires per-consumer constants (SERIES_STAGGER_MS, BAR_STAGGER_MS,
- * STATS_CARD_STAGGER_MS) into single-source token reads. Per A5 §8.9 +
- * AJ-W4-κ.
  */
 export const motionStagger = {
     tight: 40,
     default: 80,
     relaxed: 120,
 } as const;
+
+export * from "./tokens/manifest";

package/dist/styles/transitions.css

@@ -1 +1 @@
-@layer components { .fade-enter-active, .fade-leave-active { transition: opacity var(--duration-fast) var(--ease-standard); } .fade-enter-from, .fade-leave-to { opacity: 0; } .route-enter { animation: gl-route-enter var(--spring-snappy-duration) var(--spring-snappy) backwards; } .tab-fade-enter-active, .tab-fade-leave-active { transition: opacity var(--duration-fast) var(--ease-standard); } .tab-fade-enter-from, .tab-fade-leave-to { opacity: 0; } .pane-swap-enter-active { transition: opacity var(--duration-normal) var(--ease-out), transform var(--spring-smooth-duration) var(--spring-smooth); } .pane-swap-leave-active { transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } .pane-swap-enter-from { opacity: 0; transform: translateX(0.75rem); } .pane-swap-leave-to { opacity: 0; transform: translateX(-0.75rem); } .metric-swap-enter-active { transition: opacity var(--duration-normal) var(--ease-out), transform var(--spring-smooth-duration) var(--spring-smooth); } .metric-swap-leave-active { transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .metric-swap-enter-from, .metric-swap-leave-to { opacity: 0; transform: translateY(0.375rem) scale(0.95); } .dock-in { animation: dock-in var(--spring-snappy-duration) var(--spring-snappy) both; transform-origin: center bottom; } @media (prefers-reduced-motion: reduce) { .fade-enter-active, .fade-leave-active, .tab-fade-enter-active, .tab-fade-leave-active, .pane-swap-enter-active, .pane-swap-leave-active, .metric-swap-enter-active, .metric-swap-leave-active { transition-duration: 0.1s !important; } .pane-swap-enter-active, .pane-swap-leave-active, .metric-swap-enter-active, .metric-swap-leave-active { transition-property: opacity !important; transition-duration: 0.15s !important; animation-duration: 0.01ms !important; } .pane-swap-enter-from, .pane-swap-leave-to, .metric-swap-enter-from, .metric-swap-leave-to { transform: none !important; } .dock-in { animation-duration: 0.01ms !important; transform: none !important; } .route-enter { animation: gl-route-fade var(--duration-fast) var(--ease-out) backwards; } } } @keyframes gl-route-enter { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } } @keyframes gl-route-fade { from { opacity: 0; } to { opacity: 1; } }
+@layer components { .fade-enter-active, .fade-leave-active { transition: opacity var(--duration-fast) var(--ease-standard); } .fade-enter-from, .fade-leave-to { opacity: 0; } .tab-fade-enter-active, .tab-fade-leave-active { transition: opacity var(--duration-fast) var(--ease-standard); } .tab-fade-enter-from, .tab-fade-leave-to { opacity: 0; } .pane-swap-enter-active { transition: opacity var(--duration-normal) var(--ease-out), transform var(--spring-smooth-duration) var(--spring-smooth); } .pane-swap-leave-active { transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } .pane-swap-enter-from { opacity: 0; transform: translateX(0.75rem); } .pane-swap-leave-to { opacity: 0; transform: translateX(-0.75rem); } .metric-swap-enter-active { transition: opacity var(--duration-normal) var(--ease-out), transform var(--spring-smooth-duration) var(--spring-smooth); } .metric-swap-leave-active { transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .metric-swap-enter-from, .metric-swap-leave-to { opacity: 0; transform: translateY(0.375rem) scale(0.95); } .dock-in { animation: dock-in var(--spring-snappy-duration) var(--spring-snappy) both; transform-origin: center bottom; } @media (prefers-reduced-motion: reduce) { .fade-enter-active, .fade-leave-active, .tab-fade-enter-active, .tab-fade-leave-active, .pane-swap-enter-active, .pane-swap-leave-active, .metric-swap-enter-active, .metric-swap-leave-active { transition-duration: 0.1s !important; } .pane-swap-enter-active, .pane-swap-leave-active, .metric-swap-enter-active, .metric-swap-leave-active { transition-property: opacity !important; transition-duration: 0.15s !important; animation-duration: 0.01ms !important; } .pane-swap-enter-from, .pane-swap-leave-to, .metric-swap-enter-from, .metric-swap-leave-to { transform: none !important; } .dock-in { animation-duration: 0.01ms !important; transform: none !important; } } }

package/dist/styles/typography/scale.css

@@ -1 +1 @@
-@font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("System Font"), local(".SFNS-Regular"), local(".SFNSText-Regular"), local("-apple-system"); ascent-override: 92.3784%; descent-override: 19.7572%; size-adjust: 112.3639%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Segoe UI"), local("SegoeUI"); ascent-override: 98.3348%; descent-override: 21.0311%; size-adjust: 105.5577%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Roboto Regular"), local("Roboto-Regular"); ascent-override: 98.6597%; descent-override: 21.1006%; size-adjust: 105.2101%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"), local("ArialMT"); ascent-override: 98.8763%; descent-override: 21.147%; line-gap-override: 0%; size-adjust: 104.9796%; } @font-face { font-family: "Fira Code Fallback"; src: local("SF Mono"), local("SFMono-Regular"), local("Menlo"), local("Consolas"), local("Courier New"), local("Roboto Mono Regular"); ascent-override: 99.0161%; descent-override: 32.2052%; size-adjust: 99.9837%; } :root { --type-admin-label: 0.625rem; --type-micro: 0.6875rem; --type-caption: clamp( 0.75rem, 0.71rem + 0.21vw, 1rem ); --type-small: clamp( 0.875rem, 0.8rem + 0.25vw, 1.25rem ); --type-body: clamp( 1rem, 0.92rem + 0.27vw, 1.375rem ); --type-prose: clamp( 1.125rem, 1.04rem + 0.28vw, 1.5rem ); --type-subheading: 1.272rem; --type-heading: 1.618rem; --type-title: 2.058rem; --type-display-1: clamp(1.618rem, 1.2rem + 1.6vw, 2.618rem); --type-display-2: clamp(2.058rem, 1.5rem + 2.2vw, 3.33rem); --type-display-3: clamp(2.618rem, 2rem + 3vw, 4.236rem); --type-display-4: clamp(3.33rem, 2.5rem + 4vw, 5.382rem); --type-display-5: clamp(4.236rem, 3.5rem + 6vw, 6.854rem); --type-display-mega: clamp( 5.382rem, 4rem + 9vw, 11.089rem ); --type-display-hero: clamp( 6.854rem, 4.5rem + 12vw, 17.942rem ); --type-display-audacious: clamp( 8.728rem, 5rem + 16vw, 22rem ); --font-display-weight: 600; --type-weight-display: var(--font-display-weight); --type-weight-heading: 700; --type-weight-title: 700; }
+@font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("System Font"), local(".SFNS-Regular"), local(".SFNSText-Regular"), local("-apple-system"); ascent-override: 92.3784%; descent-override: 19.7572%; size-adjust: 112.3639%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Segoe UI"), local("SegoeUI"); ascent-override: 98.3348%; descent-override: 21.0311%; size-adjust: 105.5577%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Roboto Regular"), local("Roboto-Regular"); ascent-override: 98.6597%; descent-override: 21.1006%; size-adjust: 105.2101%; } @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"), local("ArialMT"); ascent-override: 98.8763%; descent-override: 21.147%; line-gap-override: 0%; size-adjust: 104.9796%; } @font-face { font-family: "Fira Code Fallback"; src: local("SF Mono"), local("SFMono-Regular"), local("Menlo"), local("Consolas"), local("Courier New"), local("Roboto Mono Regular"); ascent-override: 99.0161%; descent-override: 32.2052%; size-adjust: 99.9837%; } :root { --type-admin-label: 0.625rem; --type-micro: 0.6875rem; --type-caption: clamp( 0.75rem, 0.71rem + 0.21vw, 1rem ); --type-small: clamp( 0.875rem, 0.8rem + 0.25vw, 1.25rem ); --type-body: clamp( 1rem, 0.92rem + 0.27vw, 1.375rem ); --type-prose: clamp( 1.125rem, 1.04rem + 0.28vw, 1.5rem ); --type-subheading: 1.272rem; --type-heading: 1.618rem; --type-title: 2.058rem; --type-display-1: clamp(1.618rem, 1.2rem + 1.6vw, 2.618rem); --type-display-2: clamp(2.058rem, 1.5rem + 2.2vw, 3.33rem); --type-proportional-ratio: 0.7861513777574233; --type-proportional-headline-size: var(--type-display-2); --type-proportional-kicker-size: calc( var(--type-proportional-headline-size) * var(--type-proportional-ratio) ); --type-proportional-leading: 1; --type-display-3: clamp(2.618rem, 2rem + 3vw, 4.236rem); --type-display-4: clamp(3.33rem, 2.5rem + 4vw, 5.382rem); --type-display-5: clamp(4.236rem, 3.5rem + 6vw, 6.854rem); --type-display-mega: clamp( 5.382rem, 4rem + 9vw, 11.089rem ); --type-display-hero: clamp( 6.854rem, 4.5rem + 12vw, 17.942rem ); --type-display-audacious: clamp( 8.728rem, 5rem + 16vw, 22rem ); --font-display-weight: 600; --type-weight-display: var(--font-display-weight); --type-weight-heading: 700; --type-weight-title: 700; }

package/dist/styles/typography/semantic.css

@@ -1 +1 @@
-body { font-family: var(--font-text); color: var(--foreground); font-size: var(--type-body); line-height: var(--type-leading-body); } @utility text-display-audacious { font-family: var(--font-display); font-size: var(--type-display-audacious); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-hero { font-family: var(--font-display); font-size: var(--text-hero-size, var(--type-display-audacious)); line-height: var(--text-hero-leading, 0.84); letter-spacing: var(--text-hero-tracking, -0.03em); font-weight: 300; font-feature-settings: "ss01", "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; font-optical-sizing: auto; display: inline-block; max-inline-size: 100%; white-space: nowrap; text-wrap: nowrap; } @utility text-display-hero { font-family: var(--font-display); font-size: var(--type-display-hero); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-mega { font-family: var(--font-display); font-size: var(--type-display-mega); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-5 { font-family: var(--font-display); font-size: var(--type-display-5); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-4 { font-family: var(--font-display); font-size: var(--type-display-4); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-3 { font-family: var(--font-display); font-size: var(--type-display-3); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-2 { font-family: var(--font-display); font-size: var(--type-display-2); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display { font-family: var(--font-display); font-size: var(--type-display-1); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-title { font-family: var(--font-text); font-size: var(--type-title); line-height: var(--type-leading-heading); letter-spacing: var(--type-tracking-tight); font-weight: var(--type-weight-title); text-wrap: balance; } @utility text-heading { font-family: var(--font-text); font-size: var(--type-heading); line-height: var(--type-leading-heading); font-weight: var(--type-weight-heading); text-wrap: balance; } @utility text-subheading { font-family: var(--font-text); font-size: var(--type-subheading); line-height: var(--type-leading-body); font-weight: 600; text-wrap: balance; } @utility dock-label { font-family: var(--font-text); font-size: var( --dock-label-size, calc(var(--dock-control-size, 2.5rem) * var(--dock-label-ratio)) ); line-height: var(--type-leading-body); font-weight: 400; letter-spacing: var(--type-tracking-normal); } @utility text-prose { font-family: var(--font-text); font-size: var(--type-prose); line-height: var(--type-leading-prose); font-weight: 400; text-wrap: pretty; } @utility text-body { font-family: var(--font-text); font-size: var(--type-body); line-height: var(--type-leading-body); font-weight: 400; text-wrap: pretty; } @utility text-small { font-family: var(--font-text); font-size: var(--type-small); line-height: var(--type-leading-small); font-weight: 400; } @utility text-caption { font-family: var(--font-text); font-size: var(--type-caption); line-height: var(--type-leading-caption); font-style: italic; font-weight: 400; } @utility text-micro { font-size: var(--type-micro); line-height: 1.25; } @utility text-admin-label { font-family: var(--font-mono); font-size: var(--type-admin-label); line-height: 1; text-transform: uppercase; letter-spacing: var(--type-tracking-caps); font-weight: 500; }
+body { font-family: var(--font-text); color: var(--foreground); font-size: var(--type-body); line-height: var(--type-leading-body); } @utility text-proportional-headline { font-size: var(--type-proportional-headline-size); line-height: var(--type-proportional-leading); } @utility text-proportional-kicker { font-size: var(--type-proportional-kicker-size); line-height: var(--type-proportional-leading); } @utility text-display-audacious { font-family: var(--font-display); font-size: var(--type-display-audacious); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-hero { font-family: var(--font-display); font-size: var(--text-hero-size, var(--type-display-audacious)); line-height: var(--text-hero-leading, 0.84); letter-spacing: var(--text-hero-tracking, -0.03em); font-weight: 300; font-feature-settings: "ss01", "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; font-optical-sizing: auto; display: inline-block; max-inline-size: 100%; white-space: nowrap; text-wrap: nowrap; } @utility text-display-hero { font-family: var(--font-display); font-size: var(--type-display-hero); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-mega { font-family: var(--font-display); font-size: var(--type-display-mega); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-5 { font-family: var(--font-display); font-size: var(--type-display-5); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-4 { font-family: var(--font-display); font-size: var(--type-display-4); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-3 { font-family: var(--font-display); font-size: var(--type-display-3); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display-2 { font-family: var(--font-display); font-size: var(--type-display-2); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-display { font-family: var(--font-display); font-size: var(--type-display-1); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-optical-sizing: auto; font-weight: var(--type-weight-display); text-wrap: balance; } @utility text-title { font-family: var(--font-text); font-size: var(--type-title); line-height: var(--type-leading-heading); letter-spacing: var(--type-tracking-tight); font-weight: var(--type-weight-title); text-wrap: balance; } @utility text-heading { font-family: var(--font-text); font-size: var(--type-heading); line-height: var(--type-leading-heading); font-weight: var(--type-weight-heading); text-wrap: balance; } @utility text-subheading { font-family: var(--font-text); font-size: var(--type-subheading); line-height: var(--type-leading-body); font-weight: 600; text-wrap: balance; } @utility dock-label { font-family: var(--font-text); font-size: var( --dock-label-size, calc(var(--dock-control-size, 2.5rem) * var(--dock-label-ratio)) ); line-height: var(--type-leading-body); font-weight: 400; letter-spacing: var(--type-tracking-normal); } @utility text-prose { font-family: var(--font-text); font-size: var(--type-prose); line-height: var(--type-leading-prose); font-weight: 400; text-wrap: pretty; } @utility text-body { font-family: var(--font-text); font-size: var(--type-body); line-height: var(--type-leading-body); font-weight: 400; text-wrap: pretty; } @utility text-small { font-family: var(--font-text); font-size: var(--type-small); line-height: var(--type-leading-small); font-weight: 400; } @utility text-caption { font-family: var(--font-text); font-size: var(--type-caption); line-height: var(--type-leading-caption); font-style: italic; font-weight: 400; } @utility text-micro { font-size: var(--type-micro); line-height: 1.25; } @utility text-admin-label { font-family: var(--font-mono); font-size: var(--type-admin-label); line-height: 1; text-transform: uppercase; letter-spacing: var(--type-tracking-caps); font-weight: 500; }

package/dist/styles/typography/utilities.css

@@ -1 +1 @@
-@utility text-math { font-family: var(--font-text); font-style: italic; } @utility text-math-body { font-family: var(--font-text); font-size: var(--type-prose); line-height: var(--type-leading-prose); font-style: italic; } @utility text-mono-caption { font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--type-tracking-caps); text-transform: uppercase; } @utility text-mono-small { font-family: var(--font-mono); font-size: var(--type-small); line-height: var(--type-leading-small); } @utility text-mono-prose { font-family: var(--font-mono); font-size: var(--type-prose); line-height: var(--type-leading-prose); letter-spacing: 0.02em; } @utility text-mono-micro { font-family: var(--font-mono); font-size: var(--type-micro); line-height: 1.25; letter-spacing: 0.025em; } @utility cm-serif { font-family: var(--font-serif-math, serif); } @utility fira-code { font-family: var(--font-mono); font-feature-settings: "liga", "calt"; } @utility fourier-f { font-family: var(--font-display); font-style: italic; font-size: 1.35em; line-height: 1; vertical-align: -0.05em; font-weight: 700; display: inline-block; } @layer components { .text-pane-title { font-family: var(--font-display); font-size: var(--type-display-2); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-weight: var(--type-weight-display); font-optical-sizing: auto; } @container (min-width: 40rem) { .text-pane-title { font-size: var(--type-display-3); } } .section-label { @apply text-mono-caption; color: var(--muted-foreground); } .section-label--tinted { color: var(--section-label-accent, var(--section-color-7)); } :root:not(.dark) [data-paper-field] .section-label:not(.section-label--tinted) { color: color-mix(in oklab, var(--neutral-5), var(--foreground) 22%); } .tabular-nums { font-variant-numeric: tabular-nums lining-nums; } .char-stagger > .char { display: inline-block; animation: fade-in var(--spring-smooth-duration) var(--spring-smooth, ease) backwards; animation-delay: calc(var(--char-index, 0) * var(--char-stagger-step)); } .text-engraved { color: var(--muted-foreground); text-shadow: var(--text-shadow-engraved); } }
+@utility text-math { font-family: var(--font-text); font-style: italic; } @utility text-math-body { font-family: var(--font-text); font-size: var(--type-prose); line-height: var(--type-leading-prose); font-style: italic; } @utility text-mono-caption { font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--type-tracking-caps); text-transform: uppercase; } @utility text-mono-small { font-family: var(--font-mono); font-size: var(--type-small); line-height: var(--type-leading-small); } @utility text-mono-prose { font-family: var(--font-mono); font-size: var(--type-prose); line-height: var(--type-leading-prose); letter-spacing: 0.02em; } @utility text-mono-micro { font-family: var(--font-mono); font-size: var(--type-micro); line-height: 1.25; letter-spacing: 0.025em; } @utility cm-serif { font-family: var(--font-serif-math, serif); } @utility fira-code { font-family: var(--font-mono); font-feature-settings: "liga", "calt"; } @utility fourier-f { font-family: var(--font-display); font-style: italic; font-size: 1.35em; line-height: 1; vertical-align: -0.05em; font-weight: 700; display: inline-block; } @layer components { .text-pane-title { font-family: var(--font-display); font-size: var(--type-display-2); line-height: var(--type-leading-display); letter-spacing: var(--type-tracking-display); font-weight: var(--type-weight-display); font-optical-sizing: auto; } @container (min-width: 40rem) { .text-pane-title { font-size: var(--type-display-3); } } .section-label { @apply text-mono-caption; color: var(--muted-foreground); } .section-label--tinted { color: var(--section-label-accent, var(--section-color-7)); } :root:not(.dark) [data-paper-field] .section-label:not(.section-label--tinted) { color: color-mix(in oklab, var(--neutral-5), var(--foreground) 22%); } .tabular-nums { font-variant-numeric: tabular-nums lining-nums; } .text-engraved { color: var(--muted-foreground); text-shadow: var(--text-shadow-engraved); } }

package/dist/styles/utilities/a11y-overrides.css

@@ -1 +1 @@
-@media (prefers-reduced-motion: reduce) { *:not([data-allow-motion]) { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } *:not([data-allow-motion]) { transition-duration: 0.1s !important; transition-property: opacity, color, background-color, border-color, box-shadow !important; } [data-allow-motion] { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } html.no-transition, html.no-transition *:not([data-allow-motion]), html.no-transition *:not([data-allow-motion])::before, html.no-transition *:not([data-allow-motion])::after { transition-duration: 0s !important; } @media (forced-colors: active) { .focus-ring:focus-visible, .glass-btn:focus-visible, .interactive-item:focus-visible, .btn-pill:focus-visible, .dock-icon-button:focus-visible, .dock-tab-button:focus-visible, .dock-select-trigger:focus-visible, .dock-dropdown-trigger:focus-visible, .input-pill:focus, .input-pill:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } .hairline-accent, .glass-dock { border: 1px solid CanvasText; } } @media (pointer: coarse) { [data-icon-only], [data-part="trigger"], .segmented-tabs__trigger { min-block-size: var(--touch-target, 2.75rem); min-inline-size: var(--touch-target, 2.75rem); } } @utility touch-hit-area { position: relative; @media (pointer: coarse) { &::before { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; min-width: var(--touch-target, 2.75rem); min-height: var(--touch-target, 2.75rem); pointer-events: none; } } }
+@media (prefers-reduced-motion: reduce) { *:not([data-allow-motion]) { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } *:not([data-allow-motion]) { transition-duration: 0.1s !important; transition-property: opacity, color, background-color, border-color, box-shadow !important; } [data-allow-motion] { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } html.no-transition, html.no-transition *:not([data-allow-motion]), html.no-transition *:not([data-allow-motion])::before, html.no-transition *:not([data-allow-motion])::after { transition-duration: 0s !important; } @media (forced-colors: active) { .focus-ring:focus-visible, .interactive-item:focus-visible, .dock-icon-button:focus-visible, .dock-tab-button:focus-visible, .dock-select-trigger:focus-visible, .dock-dropdown-trigger:focus-visible, .dark-mode-toggle-button:focus-visible, .field-control:focus-visible, .input-pill:focus, .input-pill:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } .hairline-accent, .glass-dock { border: 1px solid CanvasText; } } @utility touch-hit-area { position: relative; @media (pointer: coarse) { &::before { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; min-width: var(--touch-target, 2.75rem); min-height: var(--touch-target, 2.75rem); pointer-events: none; } } }

package/dist/styles/utilities/base-misc.css

@@ -1 +1 @@
-@layer components { .status-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); flex-shrink: 0; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .depth-text { --depth-color-primary: var(--primary); color: var(--depth-color-primary); text-shadow: var(--text-shadow-depth); } .preserve-3d { transform-style: preserve-3d; } .ios input, .ios select, .ios textarea, .ios [contenteditable] { font-size: max(1rem, 1em); } .fading-scroll { mask-image: linear-gradient( to right, transparent 0, black var(--fade-start), black calc(100% - var(--fade-end)), transparent 100% ); } .fading-scroll--x { overflow-x: auto; mask-image: linear-gradient( to right, transparent 0, black var(--fade-start), black calc(100% - var(--fade-end)), transparent 100% ); } .fading-scroll--y { overflow-y: auto; mask-image: linear-gradient( to bottom, transparent 0, black var(--fade-start), black calc(100% - var(--fade-end)), transparent 100% ); } @supports (animation-timeline: scroll()) { @keyframes gl-fade-start-in { from { --fade-start: 0px; } to { --fade-start: var(--fade-scroll-width); } } @keyframes gl-fade-end-out { from { --fade-end: var(--fade-scroll-width); } to { --fade-end: 0px; } } .fading-scroll--x[data-fade-start] { animation: gl-fade-start-in linear both; animation-timeline: scroll(self inline); animation-range: 0 var(--fade-scroll-width); } .fading-scroll--x[data-fade-end] { animation: gl-fade-end-out linear both; animation-timeline: scroll(self inline); animation-range: calc(100% - var(--fade-scroll-width)) 100%; } .fading-scroll--x[data-fade-start][data-fade-end] { animation: gl-fade-start-in linear both, gl-fade-end-out linear both; animation-timeline: scroll(self inline), scroll(self inline); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } .fading-scroll--y[data-fade-start] { animation: gl-fade-start-in linear both; animation-timeline: scroll(self block); animation-range: 0 var(--fade-scroll-width); } .fading-scroll--y[data-fade-end] { animation: gl-fade-end-out linear both; animation-timeline: scroll(self block); animation-range: calc(100% - var(--fade-scroll-width)) 100%; } .fading-scroll--y[data-fade-start][data-fade-end] { animation: gl-fade-start-in linear both, gl-fade-end-out linear both; animation-timeline: scroll(self block), scroll(self block); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } } .deferred-section { content-visibility: auto; contain-intrinsic-size: auto var(--deferred-section-size, 30rem); } .deferred-section--cached { content-visibility: hidden; contain-intrinsic-size: auto var(--deferred-section-size, 30rem); } .card-scroll-host { contain: layout style paint; scroll-timeline: --card-scroll block; } .scroll-gutter-stable { scrollbar-gutter: stable; } .gold-shimmer { --metal-shimmer-color: gold; background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark)); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; } @media (prefers-reduced-motion: no-preference) { .gold-shimmer { animation: metal-shimmer-sweep var(--duration-shimmer) linear infinite; } } .kbd { display: inline-flex; align-items: center; justify-content: center; min-height: 1.5rem; min-width: 1.5rem; padding: 0 0.375rem; font-family: var(--font-mono); font-size: var(--type-micro); background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 1px 0 1px color-mix(in srgb, var(--border) 30%, transparent); line-height: 1; } } @utility ghost-slot { border: 1px dashed color-mix(in srgb, var(--foreground) 22%, transparent); border-radius: var(--radius-card); background: color-mix(in oklab, var(--glass-bg-wash), transparent 40%); color: var(--muted-foreground); }
+@layer components { .depth-text { --depth-color-primary: var(--primary); color: var(--depth-color-primary); text-shadow: var(--text-shadow-depth); } .preserve-3d { transform-style: preserve-3d; } .ios input, .ios select, .ios textarea, .ios [contenteditable] { font-size: max(1rem, 1em); } .fading-scroll { mask-image: linear-gradient( to right, transparent 0, black var(--fade-start), black calc(100% - var(--fade-end)), transparent 100% ); } .fading-scroll--x { overflow-x: auto; mask-image: linear-gradient( to right, transparent 0, black var(--fade-start), black calc(100% - var(--fade-end)), transparent 100% ); } .fading-scroll--y { overflow-y: auto; mask-image: linear-gradient( to bottom, transparent 0, black var(--fade-start), black calc(100% - var(--fade-end)), transparent 100% ); } @supports (animation-timeline: scroll()) { @keyframes gl-fade-start-in { from { --fade-start: 0px; } to { --fade-start: var(--fade-scroll-width); } } @keyframes gl-fade-end-out { from { --fade-end: var(--fade-scroll-width); } to { --fade-end: 0px; } } .fading-scroll--x[data-fade-start] { animation: gl-fade-start-in linear both; animation-timeline: scroll(self inline); animation-range: 0 var(--fade-scroll-width); } .fading-scroll--x[data-fade-end] { animation: gl-fade-end-out linear both; animation-timeline: scroll(self inline); animation-range: calc(100% - var(--fade-scroll-width)) 100%; } .fading-scroll--x[data-fade-start][data-fade-end] { animation: gl-fade-start-in linear both, gl-fade-end-out linear both; animation-timeline: scroll(self inline), scroll(self inline); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } .fading-scroll--y[data-fade-start] { animation: gl-fade-start-in linear both; animation-timeline: scroll(self block); animation-range: 0 var(--fade-scroll-width); } .fading-scroll--y[data-fade-end] { animation: gl-fade-end-out linear both; animation-timeline: scroll(self block); animation-range: calc(100% - var(--fade-scroll-width)) 100%; } .fading-scroll--y[data-fade-start][data-fade-end] { animation: gl-fade-start-in linear both, gl-fade-end-out linear both; animation-timeline: scroll(self block), scroll(self block); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } } .deferred-section { content-visibility: auto; contain-intrinsic-size: auto var(--deferred-section-size, 30rem); } .deferred-section--cached { content-visibility: hidden; contain-intrinsic-size: auto var(--deferred-section-size, 30rem); } .card-scroll-host { contain: layout style paint; } .scroll-gutter-stable { scrollbar-gutter: stable; } .gold-shimmer { background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark)); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; } @media (prefers-reduced-motion: no-preference) { .gold-shimmer { animation: metal-shimmer-sweep var(--duration-shimmer) linear infinite; } } .kbd { display: inline-flex; align-items: center; justify-content: center; min-height: 1.5rem; min-width: 1.5rem; padding: 0 0.375rem; font-family: var(--font-mono); font-size: var(--type-micro); background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 1px 0 1px color-mix(in srgb, var(--border) 30%, transparent); line-height: 1; } } @utility ghost-slot { border: 1px dashed color-mix(in srgb, var(--foreground) 22%, transparent); border-radius: var(--radius-card); background: color-mix(in oklab, var(--glass-bg-wash), transparent 40%); color: var(--muted-foreground); }

package/dist/styles/utilities/base.css

@@ -1 +1 @@
-@property --fade-start { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; } @property --fade-end { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; } @layer components { .section-description { font-size: var(--type-body); color: var(--muted-foreground); line-height: 1.5; text-wrap: pretty; } .labeled-field-label { font-family: var(--font-display); font-size: var(--type-body); color: var(--field-label-color, var(--muted-foreground)); cursor: help; } .labeled-field { --field-label-color: var(--muted-foreground); display: flex; flex-direction: column; inline-size: 100%; min-inline-size: 0; } .labeled-field:has(:where(:user-invalid, [aria-invalid="true"])), .labeled-field.has-error { --field-label-color: var(--destructive); } .labeled-field-error { display: none; font-size: var(--type-small); color: var(--destructive); margin-block-start: 0.25rem; } .labeled-field:has(:where(:user-invalid, [aria-invalid="true"])) .labeled-field-error, .labeled-field.has-error .labeled-field-error { display: block; } .labeled-field:has(:where(:user-valid, [aria-invalid="false"])) .labeled-field-error, .labeled-field.has-valid .labeled-field-error { display: none; } .popover-content { border-radius: var(--radius-panel); color: var(--popover-foreground); outline: none; } .scrollbar-hidden { scrollbar-width: none; } .scrollbar-hidden::-webkit-scrollbar { display: none; } .scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } @supports not (scrollbar-color: auto) { .scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; } .scrollbar-thin::-webkit-scrollbar-track { background: var(--scrollbar-track); } .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); } } .focus-ring:focus-visible { outline: none; border-radius: var(--radius-pill); box-shadow: var(--focus-ring-shadow); } .hairline-accent { box-shadow: var(--border-hairline); } .interactive-item { scale: 1; border-radius: var(--radius-lg); user-select: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--transition-liquid-spatial); } .interactive-item:hover { background-color: color-mix(in srgb, var(--accent) 50%, transparent); } .interactive-item:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .interactive-item:active { scale: var(--scale-press-sm); } .interactive-item:disabled, .interactive-item[data-disabled] { pointer-events: none; opacity: var(--opacity-disabled); cursor: not-allowed; } .tap-squish { scale: 1; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--transition-liquid-spatial); transform-origin: center center; } .tap-squish:not([data-press-armed]):active { scale: var(--scale-press); } @media (prefers-reduced-motion: reduce) { .tap-squish:not([data-press-armed]):active { scale: 1; } } .glass-press { cursor: pointer; min-block-size: max(0px, var(--control-floor, 0px)); filter: brightness(calc(1 + var(--card-press-t, 0) * 0.04)); } @property --card-press-t { syntax: "<number>"; inherits: true; initial-value: 0; } }
+@property --fade-start { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; } @property --fade-end { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; } @layer components { .section-description { font-size: var(--type-body); color: var(--muted-foreground); line-height: 1.5; text-wrap: pretty; } .popover-content { border-radius: var(--radius-panel); color: var(--popover-foreground); outline: none; } .scrollbar-hidden { scrollbar-width: none; } .scrollbar-hidden::-webkit-scrollbar { display: none; } .scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } @supports not (scrollbar-color: auto) { .scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; } .scrollbar-thin::-webkit-scrollbar-track { background: var(--scrollbar-track); } .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); } } .focus-ring:focus-visible { outline: none; border-radius: var(--radius-pill); box-shadow: var(--focus-ring-shadow); } .hairline-accent { box-shadow: var(--border-hairline); } .interactive-item { scale: 1; border-radius: var(--radius-lg); user-select: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--transition-liquid-spatial); } .interactive-item:hover { background-color: color-mix(in srgb, var(--accent) 50%, transparent); } .interactive-item:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .interactive-item:active { scale: var(--scale-press-sm); } .interactive-item:disabled, .interactive-item[data-disabled] { pointer-events: none; opacity: var(--opacity-disabled); cursor: not-allowed; } .tap-squish { scale: 1; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--transition-liquid-spatial); transform-origin: center center; } .tap-squish:not([data-press-armed]):active { scale: var(--scale-press); } @media (prefers-reduced-motion: reduce) { .tap-squish:not([data-press-armed]):active { scale: 1; } } }

package/dist/styles/utilities/btn.css

@@ -1 +1 @@
-@utility scale-on-hover { scale: 1; transition: scale var(--spring-smooth-duration) var(--spring-smooth); &:hover { scale: var(--scale-hover); } } @utility twin-line-divider { --twin-line-catch: rgb(255 255 255 / 0.10); --twin-line-shadow: rgb(0 0 0 / 0.12); :where(.dark) & { --twin-line-catch: rgb(255 255 255 / 0.06); --twin-line-shadow: rgb(0 0 0 / 0.18); } } @utility transition-control { transition-property: background-color, color, box-shadow, border-color; transition-duration: var(--duration-control); transition-timing-function: var(--ease-standard); } @utility transition-collapse { transition-property: height, opacity; } @utility transition-disclosure { transition: rotate var(--spring-snappy-duration) var(--ease-cartoon-punch); } @utility sheet-animate { @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in data-[state=closed]:fade-out data-[state=open]:duration-[calc(var(--duration-panel)*var(--motion-tempo))] data-[state=closed]:duration-[calc(var(--duration-fast)*var(--motion-tempo))]; } .btn-punch { position: relative; --motion-weight: 1; --cartoon-press-t: 0; transition: scale var(--spring-smooth-duration) var(--ease-cartoon-punch); } .btn-punch > :not(.cartoon-cast) { --btn-glyph-pop: 0.05; transition: scale var(--duration-fast) var(--ease-cartoon-punch) var(--duration-fast); } .btn-punch:active > :not(.cartoon-cast) { scale: calc(1 + var(--btn-glyph-pop) * var(--motion-weight)); } @media (prefers-reduced-motion: reduce) { .btn-punch { --motion-weight: 0; transition: scale var(--spring-smooth-duration) var(--ease-standard); } .btn-punch > :not(.cartoon-cast) { transition: none; } } @utility table-cell { padding-inline: var(--table-cell-px, 1rem); padding-block: var(--table-cell-py, 1rem); } @utility table-head { height: var(--table-head-h, 3rem); padding-inline: var(--table-head-px, 1rem); } @utility rainbow-vivid { background: linear-gradient( to right, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-indigo), var(--rainbow-violet) ); } @utility rainbow-pastel { background: linear-gradient( to right, var(--rainbow-pastel-red), var(--rainbow-pastel-orange), var(--rainbow-pastel-yellow), var(--rainbow-pastel-green), var(--rainbow-pastel-blue), var(--rainbow-pastel-indigo), var(--rainbow-pastel-violet) ); } @utility btn-interactive { scale: 1; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), scale var(--spring-smooth-duration) var(--transition-liquid-spatial), opacity var(--duration-fast) var(--ease-standard); &:hover { scale: var(--scale-hover-btn); } &:active { scale: var(--scale-press); } &:disabled { opacity: var(--opacity-disabled); pointer-events: none; } &:focus-visible { box-shadow: var(--focus-ring-shadow); outline: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), scale var(--spring-smooth-duration) var(--transition-liquid-spatial), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } }
+@utility scale-on-hover { scale: 1; transition: scale var(--spring-smooth-duration) var(--spring-smooth); &:hover { scale: var(--scale-hover); } } @utility transition-control { transition-property: background-color, color, box-shadow, border-color; transition-duration: var(--duration-control); transition-timing-function: var(--ease-standard); } @utility transition-disclosure { transition: rotate var(--spring-snappy-duration) var(--ease-cartoon-punch); } @utility sheet-animate { @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in data-[state=closed]:fade-out data-[state=open]:duration-[calc(var(--duration-panel)*var(--motion-tempo))] data-[state=closed]:duration-[calc(var(--duration-fast)*var(--motion-tempo))]; } @utility table-cell { padding-inline: var(--table-cell-px, 1rem); padding-block: var(--table-cell-py, 1rem); } @utility table-head { height: var(--table-head-h, 3rem); padding-inline: var(--table-head-px, 1rem); } @utility rainbow-vivid { background: linear-gradient( to right, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-indigo), var(--rainbow-violet) ); } @utility rainbow-pastel { background: linear-gradient( to right, var(--rainbow-pastel-red), var(--rainbow-pastel-orange), var(--rainbow-pastel-yellow), var(--rainbow-pastel-green), var(--rainbow-pastel-blue), var(--rainbow-pastel-indigo), var(--rainbow-pastel-violet) ); }

package/dist/styles/utilities/components.css

@@ -1 +1 @@
-@layer components { .metric-badge { display: inline-flex; align-items: center; justify-content: center; text-align: center; scale: 1; gap: var(--metric-badge-gap, 0.125rem); max-width: var(--metric-badge-max-width, 8rem); min-height: var(--metric-badge-min-height, 1.5rem); padding: var(--metric-badge-padding-block, 0.125rem) var(--metric-badge-padding-inline, 0.5rem); overflow: hidden; flex-shrink: 0; line-height: 1; border: 1px solid var(--metric-badge-border, var(--glass-border-quiet)); border-radius: var(--metric-badge-radius, var(--radius-badge, var(--radius-pill))); background: var(--metric-badge-bg, var(--glass-bg-quiet)); -webkit-backdrop-filter: var(--metric-badge-blur, var(--glass-blur-quiet)); backdrop-filter: var(--metric-badge-blur, var(--glass-blur-quiet)); box-shadow: var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight)); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), translate var(--spring-smooth-duration) var(--spring-smooth), scale var(--spring-smooth-duration) var(--spring-smooth); } .metric-badge > span { line-height: 1; overflow-wrap: anywhere; } .metric-badge:hover { border-color: var(--metric-badge-hover-border, var(--glass-border-resting)); background: var(--metric-badge-hover-bg, var(--glass-bg-resting)); box-shadow: var(--metric-badge-hover-shadow, var(--shadow-cartoon-sm), var(--glass-highlight)); translate: 0 var(--metric-badge-hover-translate, -2px); scale: var(--metric-badge-hover-scale, 1.04); } .metric-badge:active { scale: var(--metric-badge-press-scale, 0.96); } .metric-badge:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .metric-badge[data-just-resolved="true"] { box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.18), var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight)); } .metric-badge--label-inline { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: var(--metric-badge-label-gap, 0.375rem); max-width: var(--metric-badge-label-max-width, none); text-align: left; } .metric-badge--label-stacked { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--metric-badge-label-gap-stacked, 0.0625rem); max-width: var(--metric-badge-label-max-width, none); text-align: left; min-height: var(--metric-badge-min-height-stacked, 2.625rem); padding-block: var(--metric-badge-padding-block-stacked, 0.375rem); } .metric-badge--label-stacked .metric-badge__row { display: inline-flex; align-items: baseline; gap: var(--metric-badge-row-gap-stacked, 0.25rem); } .metric-pill:not([data-dense]).metric-badge--label-stacked { --metric-badge-padding-block-stacked: 0.5rem; --metric-badge-padding-inline: 0.75rem; } .metric-pill[data-dense].metric-badge--label-stacked { --metric-badge-padding-block-stacked: 0.25rem; --metric-badge-padding-inline: 0.5rem; } .metric-badge__label { letter-spacing: 0.18em; line-height: 1; } .metric-badge__label--full + .metric-badge__label--abbr { display: none; } .metric-badge[data-size="sm"] .metric-badge__label { letter-spacing: 0.1em; } .input-bar { display: flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-2xl); border: 1px solid var(--glass-border-floating); background: var(--glass-bg-floating); -webkit-backdrop-filter: var(--glass-blur-floating); backdrop-filter: var(--glass-blur-floating); padding: 0 0.75rem; height: var(--control-pill-h, var(--control-h-sm)); max-width: var(--max-width-input); width: 100%; transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .input-bar:focus-within { box-shadow: var(--focus-ring-shadow); border-color: var(--border); } .input-bar-field { font-family: var(--input-bar-font, var(--font-mono, monospace)); font-size: var(--control-pill-text, var(--control-text)); background: transparent; border: none; outline: none; flex: 1; min-width: 0; } .input-bar-field::placeholder { color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); } :where(.hover-lift, .hover-lift-md, .hover-lift-lg) { translate: 0; transition-property: translate, box-shadow; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-standard); } .hover-lift:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-sm); box-shadow: var(--shadow-md); } .hover-lift-md:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-md); box-shadow: var(--shadow-md); } .hover-lift-lg:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-lg); box-shadow: var(--shadow-lg); } :where(.shadow-cartoon-sm, .shadow-cartoon-md, .shadow-cartoon-lg) { border: 2px solid var(--border); } .shadow-cartoon-sm { box-shadow: var(--shadow-cartoon-sm); translate: 0 -1px; } .shadow-cartoon-md { box-shadow: var(--shadow-cartoon-md); translate: 0 -1px; } .shadow-cartoon-lg { box-shadow: var(--shadow-cartoon-lg); translate: 0 -2px; } .divider-h { height: 2px; background: linear-gradient( to right, transparent 1%, var(--border) 8%, var(--border) 92%, transparent 99% ); } .divider-h-tapered { height: 2px; background: linear-gradient( to right, transparent 3%, var(--border) 15%, var(--border) 85%, transparent 97% ); } }
+@layer components { .input-bar { display: flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-2xl); border: 1px solid var(--glass-border-floating); background: var(--glass-bg-floating); -webkit-backdrop-filter: var(--glass-blur-floating); backdrop-filter: var(--glass-blur-floating); padding: 0 0.75rem; height: var(--control-pill-h, var(--control-h-sm)); max-width: var(--max-width-input); width: 100%; transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .input-bar:focus-within { box-shadow: var(--focus-ring-shadow); border-color: var(--border); } .input-bar-field { font-family: var(--input-bar-font, var(--font-mono, monospace)); font-size: var(--control-pill-text, var(--control-text)); background: transparent; border: none; outline: none; flex: 1; min-width: 0; } .input-bar-field::placeholder { color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); } :where(.hover-lift, .hover-lift-md, .hover-lift-lg) { translate: 0; transition-property: translate, box-shadow; transition-duration: var(--duration-normal); transition-timing-function: var(--ease-standard); } .hover-lift:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-sm); box-shadow: var(--shadow-md); } .hover-lift-md:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-md); box-shadow: var(--shadow-md); } .hover-lift-lg:hover:not(:disabled):not([aria-disabled='true']) { translate: 0 var(--lift-lg); box-shadow: var(--shadow-lg); } :where(.shadow-cartoon-sm, .shadow-cartoon-md, .shadow-cartoon-lg) { border: 2px solid var(--border); } .shadow-cartoon-sm { box-shadow: var(--shadow-cartoon-sm); translate: 0 -1px; } .shadow-cartoon-md { box-shadow: var(--shadow-cartoon-md); translate: 0 -1px; } .shadow-cartoon-lg { box-shadow: var(--shadow-cartoon-lg); translate: 0 -2px; } .divider-h { height: 2px; background: linear-gradient( to right, transparent 1%, var(--border) 8%, var(--border) 92%, transparent 99% ); } .divider-h-tapered { height: 2px; background: linear-gradient( to right, transparent 3%, var(--border) 15%, var(--border) 85%, transparent 97% ); } } @utility shadow-cartoon { box-shadow: var(--shadow-cartoon); } @utility shadow-cartoon-hover { box-shadow: var(--shadow-cartoon-hover); } @utility shadow-soft { box-shadow: var(--shadow-soft); } @utility shadow-elevated { box-shadow: var(--shadow-elevated); } @utility shadow-modal { box-shadow: var(--shadow-modal); }

package/dist/styles/utilities/metal.css

@@ -1 +1 @@
-@layer components { .metal-gold, .metal-silver, .metal-bronze { --metal-stop-dark: var(--color-gold-dark); --metal-stop-light: var(--color-gold-light); --metal-stop-base: var(--color-gold); background: linear-gradient( 90deg, var(--metal-stop-dark), var(--metal-stop-light), var(--metal-stop-base), var(--metal-stop-light), var(--metal-stop-dark) ); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; --metal-glow-blur: var(--metal-glow-blur-default, 0.5em); --metal-glow-opacity: var(--metal-glow-opacity-default, 0.35); filter: drop-shadow( 0 0 var(--metal-glow-blur) color-mix( in srgb, var(--metal-stop-base) calc(var(--metal-glow-opacity) * 100%), transparent ) ); } .metal-gold { --metal-shimmer-color: gold; --metal-stop-dark: var(--color-gold-dark); --metal-stop-light: var(--color-gold-light); --metal-stop-base: var(--color-gold); } .metal-silver { --metal-shimmer-color: silver; --metal-stop-dark: var(--color-silver-dark); --metal-stop-light: var(--color-silver-light); --metal-stop-base: var(--color-silver); } .metal-bronze { --metal-shimmer-color: bronze; --metal-stop-dark: var(--color-bronze-dark); --metal-stop-light: var(--color-bronze-light); --metal-stop-base: var(--color-bronze); } .metal-gold-border, .metal-silver-border, .metal-bronze-border { --metal-stop-dark: var(--color-gold-dark); --metal-stop-light: var(--color-gold-light); --metal-stop-base: var(--color-gold); } @supports (mask-composite: exclude) { .metal-gold-border, .metal-silver-border, .metal-bronze-border { position: relative; } .metal-gold-border::before, .metal-silver-border::before, .metal-bronze-border::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--metal-border-width, 2px) solid transparent; pointer-events: none; background: linear-gradient( 90deg, var(--metal-stop-dark), var(--metal-stop-light), var(--metal-stop-base), var(--metal-stop-light), var(--metal-stop-dark) ); background-size: 250% 100%; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; mask-composite: exclude; } } @supports not (mask-composite: exclude) { .metal-gold-border, .metal-silver-border, .metal-bronze-border { box-shadow: inset 0 0 0 var(--metal-border-width, 2px) var(--metal-stop-base); } } .metal-gold-border { --metal-shimmer-color: gold; --metal-stop-dark: var(--color-gold-dark); --metal-stop-light: var(--color-gold-light); --metal-stop-base: var(--color-gold); } .metal-silver-border { --metal-shimmer-color: silver; --metal-stop-dark: var(--color-silver-dark); --metal-stop-light: var(--color-silver-light); --metal-stop-base: var(--color-silver); } .metal-bronze-border { --metal-shimmer-color: bronze; --metal-stop-dark: var(--color-bronze-dark); --metal-stop-light: var(--color-bronze-light); --metal-stop-base: var(--color-bronze); } .metal-rainbow-rim { --glass-accent: var(--color-gold); --glass-accent-strength: 45%; --metal-shimmer-color: rainbow; background-image: linear-gradient( 90deg, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-indigo), var(--rainbow-violet), var(--rainbow-red) ); background-size: 250% 100%; background-clip: border-box; } @media (prefers-reduced-motion: no-preference) { .metal-gold, .metal-silver, .metal-bronze, .metal-rainbow-rim, .metal-gold-border::before, .metal-silver-border::before, .metal-bronze-border::before { animation: metal-shimmer-sweep var(--duration-metal) linear infinite; } } }
+@layer components { .metal-gold, .metal-silver, .metal-bronze { --metal-stop-dark: var(--color-gold-dark); --metal-stop-light: var(--color-gold-light); --metal-stop-base: var(--color-gold); background: linear-gradient( 90deg, var(--metal-stop-dark), var(--metal-stop-light), var(--metal-stop-base), var(--metal-stop-light), var(--metal-stop-dark) ); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; --metal-glow-blur: var(--metal-glow-blur-default, 0.5em); --metal-glow-opacity: var(--metal-glow-opacity-default, 0.35); filter: drop-shadow( 0 0 var(--metal-glow-blur) color-mix( in srgb, var(--metal-stop-base) calc(var(--metal-glow-opacity) * 100%), transparent ) ); } .metal-gold { --metal-stop-dark: var(--color-gold-dark); --metal-stop-light: var(--color-gold-light); --metal-stop-base: var(--color-gold); } .metal-silver { --metal-stop-dark: var(--color-silver-dark); --metal-stop-light: var(--color-silver-light); --metal-stop-base: var(--color-silver); } .metal-bronze { --metal-stop-dark: var(--color-bronze-dark); --metal-stop-light: var(--color-bronze-light); --metal-stop-base: var(--color-bronze); } .metal-gold-border, .metal-silver-border, .metal-bronze-border { --metal-stop-dark: var(--color-gold-dark); --metal-stop-light: var(--color-gold-light); --metal-stop-base: var(--color-gold); } @supports (mask-composite: exclude) { .metal-gold-border, .metal-silver-border, .metal-bronze-border { position: relative; } .metal-gold-border::before, .metal-silver-border::before, .metal-bronze-border::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--metal-border-width, 2px) solid transparent; pointer-events: none; background: linear-gradient( 90deg, var(--metal-stop-dark), var(--metal-stop-light), var(--metal-stop-base), var(--metal-stop-light), var(--metal-stop-dark) ); background-size: 250% 100%; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box; mask-composite: exclude; } } @supports not (mask-composite: exclude) { .metal-gold-border, .metal-silver-border, .metal-bronze-border { box-shadow: inset 0 0 0 var(--metal-border-width, 2px) var(--metal-stop-base); } } .metal-gold-border { --metal-stop-dark: var(--color-gold-dark); --metal-stop-light: var(--color-gold-light); --metal-stop-base: var(--color-gold); } .metal-silver-border { --metal-stop-dark: var(--color-silver-dark); --metal-stop-light: var(--color-silver-light); --metal-stop-base: var(--color-silver); } .metal-bronze-border { --metal-stop-dark: var(--color-bronze-dark); --metal-stop-light: var(--color-bronze-light); --metal-stop-base: var(--color-bronze); } .metal-rainbow-rim { --glass-accent: var(--color-gold); --glass-accent-strength: 45%; background-image: linear-gradient( 90deg, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-indigo), var(--rainbow-violet), var(--rainbow-red) ); background-size: 250% 100%; background-clip: border-box; } @media (prefers-reduced-motion: no-preference) { .metal-gold, .metal-silver, .metal-bronze, .metal-rainbow-rim, .metal-gold-border::before, .metal-silver-border::before, .metal-bronze-border::before { animation: metal-shimmer-sweep var(--duration-metal) linear infinite; } } }

package/dist/styles/utilities/responsive.css

@@ -0,0 +1 @@
+@media (pointer: coarse) { [data-control-target] { min-block-size: var(--touch-target, 2.75rem); min-inline-size: var(--touch-target, 2.75rem); } }

package/dist/styles/view-transition.css

@@ -1 +1 @@
-@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } ::view-transition-group(.gl-list-item) { animation-duration: var(--vt-duration, var(--spring-bouncy-duration)); animation-timing-function: var(--vt-ease, var(--spring-bouncy)); } ::view-transition-new(.gl-list-item):only-child { animation-name: gl-vt-slide-in; } ::view-transition-old(.gl-list-item):only-child { animation-name: gl-vt-slide-out; } @keyframes gl-vt-slide-in { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } } @keyframes gl-vt-slide-out { to { opacity: 0; translate: 0 var(--vt-rise, 8px); } } ::view-transition { pointer-events: none; }
+@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } ::view-transition-group(.gl-list-item) { animation-duration: var(--vt-duration, var(--spring-bouncy-duration)); animation-timing-function: var(--vt-ease, var(--spring-bouncy)); } html:active-view-transition-type(route)::view-transition-old(root), html:active-view-transition-type(route)::view-transition-new(root) { animation-duration: var(--spring-snappy-duration); animation-timing-function: var(--spring-snappy); } html:active-view-transition-type(route)::view-transition-old(root) { animation-name: gl-vt-route-out; } html:active-view-transition-type(route)::view-transition-new(root) { animation-name: gl-vt-route-in; } ::view-transition-new(.gl-list-item):only-child { animation-name: gl-vt-slide-in; } ::view-transition-old(.gl-list-item):only-child { animation-name: gl-vt-slide-out; } @keyframes gl-vt-slide-in { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } } @keyframes gl-vt-slide-out { to { opacity: 0; translate: 0 var(--vt-rise, 8px); } } @keyframes gl-vt-route-in { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } } @keyframes gl-vt-route-out { to { opacity: 0; } } ::view-transition { pointer-events: none; }

package/dist/{supportsCssTimeline-Dz-GVxXM.js → supportsCssTimeline-C2zyWpl8.js}

@@ -1,4 +1,4 @@
-//#region src/composables/motion/supportsCssTimeline.ts
+//#region src/composables/motion/scroll/supportsCssTimeline.ts
 function e(e, t) {
 	return typeof CSS > "u" || typeof CSS.supports != "function" ? !1 : CSS.supports("animation-timeline", e) && !CSS.supports("animation-timeline", t);
 }

package/dist/surface.js

@@ -1,3 +1,2 @@
-import { n as e, t } from "./useSurfaceAxis-DudiZVOR.js";
-import { t as n } from "./Surface-BWRfwyn8.js";
-export { n as Surface, t as decorationClass, e as surfaceClass };
+import { t as e } from "./Surface-kFQeYrYv.js";
+export { e as Surface };

package/dist/switch-DZjQuFLa.js

@@ -0,0 +1,54 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { computed as t, createBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, mergeProps as o, openBlock as s, unref as c, withCtx as l } from "vue";
+import { SwitchRoot as u, SwitchThumb as d, useForwardPropsEmits as f } from "reka-ui";
+//#region src/components/switch/Switch.vue?vue&type=script&setup=true&lang.ts
+var p = {
+	class: "switch__track glass-wash",
+	"aria-hidden": "true"
+}, m = /* @__PURE__ */ a({
+	__name: "Switch",
+	props: {
+		modelValue: { type: [Boolean, null] },
+		defaultValue: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {},
+		value: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		size: { default: "md" },
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		name: {},
+		required: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(a, { emit: m }) {
+		let h = a, g = m, _ = f(t(() => {
+			let { class: e, size: t, invalid: n, ...r } = h;
+			return r;
+		}), g);
+		return (t, a) => (s(), n(c(u), o({ "data-slot": "switch" }, c(_), {
+			class: c(e)("switch tap-squish", h.class),
+			"data-size": h.size,
+			"data-invalid": h.invalid || void 0,
+			"aria-invalid": h.invalid || void 0
+		}), {
+			default: l(() => [r("span", p, [i(c(d), { class: "switch__thumb" })])]),
+			_: 1
+		}, 16, [
+			"class",
+			"data-size",
+			"data-invalid",
+			"aria-invalid"
+		]));
+	}
+});
+//#endregion
+export { m as t };

package/dist/switch.js

@@ -1,2 +1,2 @@
-import { t as e } from "./switch-Boj4Ucn5.js";
+import { t as e } from "./switch-DZjQuFLa.js";
 export { e as Switch };