actual-css 0.11.1 → 0.13.0

package/docs/brand/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><title>Actual</title>
+  <rect width="32" height="32" rx="7" fill="#52396F"/>
+  <path fill="#F4EFFA" fill-rule="evenodd" d="M10.0,26.5 L27.6,26.5 L18.8,7.5ZM22.7,23.4 L14.9,23.4 L18.8,14.9Z"/>
+  <path fill="#C4A8E8" d="M4.4,26.5 L7.6,26.5 L15.7,9.0 L14.1,5.5Z"/>
+</svg>

package/docs/brand/lockup.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-226 -82 7688 1067" width="1922" height="267" role="img" aria-label="Actual·css"><title>Actual·css</title>
+  <!-- Docs adaptation: fills follow the site theme via --text/--primary, with the
+       brand hex as fallback for standalone rendering. The OS-scheme override
+       is dropped on purpose: the docs theme picker owns the scheme. -->
+  <style>
+    .t { fill: var(--text, #52396F); }
+    .d { fill: var(--primary, #9B7BCB); }
+  </style>
+  <path class="t" d="M698 800H42L370 89ZM100 763H640L370 177ZM1117 778Q1185 778 1240 751Q1295 724 1326.5 676Q1358 628 1359 568H1395Q1395 637 1358.5 693.5Q1322 750 1258.5 782.5Q1195 815 1117 815Q1041 815 976 777Q911 739 873 674.5Q835 610 835 534V370Q835 294 872.5 229.5Q910 165 974.5 127Q1039 89 1115 89Q1192 89 1255.5 121.5Q1319 154 1356 210.5Q1393 267 1393 336H1357Q1356 276 1324 228Q1292 180 1237.5 153Q1183 126 1115 126Q1049 126 993 159Q937 192 904 248Q871 304 871 370V534Q871 600 904.5 656Q938 712 994.5 745Q1051 778 1117 778ZM2131 104V141H1868V800H1832V141H1569V104ZM2309 104H2346V534Q2346 600 2379 656Q2412 712 2468 745Q2524 778 2590 778Q2656 778 2712 745Q2768 712 2801 656Q2834 600 2834 534V104H2871V534Q2871 610 2833 674.5Q2795 739 2730.5 777Q2666 815 2590 815Q2514 815 2449.5 777Q2385 739 2347 674.5Q2309 610 2309 534ZM3311 104H3350L3636 800H3596L3502 570H3159L3064 800H3025ZM3174 534H3487L3330 152ZM3855 800V104H3892V763H4377V800ZM5557 778Q5625 778 5680 751Q5735 724 5766.5 676Q5798 628 5799 568H5835Q5835 637 5798.5 693.5Q5762 750 5698.5 782.5Q5635 815 5557 815Q5481 815 5416 777Q5351 739 5313 674.5Q5275 610 5275 534V370Q5275 294 5312.5 229.5Q5350 165 5414.5 127Q5479 89 5555 89Q5632 89 5695.5 121.5Q5759 154 5796 210.5Q5833 267 5833 336H5797Q5796 276 5764 228Q5732 180 5677.5 153Q5623 126 5555 126Q5489 126 5433 159Q5377 192 5344 248Q5311 304 5311 370V534Q5311 600 5344.5 656Q5378 712 5434.5 745Q5491 778 5557 778ZM6052 282Q6052 224 6082.5 180Q6113 136 6168.5 112Q6224 88 6297 88Q6367 88 6425.5 117.5Q6484 147 6518 200Q6552 253 6552 321H6515Q6515 262 6486 217Q6457 172 6407 147.5Q6357 123 6296 123Q6242 123 6195 140Q6148 157 6118.5 192Q6089 227 6089 280Q6089 328 6117 356.5Q6145 385 6190 400Q6235 415 6316 432Q6398 449 6443.5 464.5Q6489 480 6520.5 516Q6552 552 6552 617Q6552 682 6517.5 726.5Q6483 771 6426 793Q6369 815 6302 815Q6219 815 6156 784Q6093 753 6059.5 696.5Q6026 640 6026 567H6063Q6063 631 6091.5 679Q6120 727 6174 753.5Q6228 780 6302 780Q6394 780 6454.5 736Q6515 692 6515 616Q6515 564 6489 536Q6463 508 6423.5 495.5Q6384 483 6305 467Q6220 450 6166.5 429.5Q6113 409 6082.5 373.5Q6052 338 6052 282ZM6792 282Q6792 224 6822.5 180Q6853 136 6908.5 112Q6964 88 7037 88Q7107 88 7165.5 117.5Q7224 147 7258 200Q7292 253 7292 321H7255Q7255 262 7226 217Q7197 172 7147 147.5Q7097 123 7036 123Q6982 123 6935 140Q6888 157 6858.5 192Q6829 227 6829 280Q6829 328 6857 356.5Q6885 385 6930 400Q6975 415 7056 432Q7138 449 7183.5 464.5Q7229 480 7260.5 516Q7292 552 7292 617Q7292 682 7257.5 726.5Q7223 771 7166 793Q7109 815 7042 815Q6959 815 6896 784Q6833 753 6799.5 696.5Q6766 640 6766 567H6803Q6803 631 6831.5 679Q6860 727 6914 753.5Q6968 780 7042 780Q7134 780 7194.5 736Q7255 692 7255 616Q7255 564 7229 536Q7203 508 7163.5 495.5Q7124 483 7045 467Q6960 450 6906.5 429.5Q6853 409 6822.5 373.5Q6792 338 6792 282Z"/>
+  <path class="d" d="M-56.0,800.0 L-15.3,800.0 L288.9,140.7 L268.5,96.5Z"/>
+  <path class="d" d="M4810 367Q4848 367 4874.5 393.5Q4901 420 4901 457Q4901 494 4874.5 521Q4848 548 4810 548Q4773 548 4746 521Q4719 494 4719 457Q4719 420 4745.5 393.5Q4772 367 4810 367Z"/>
+</svg>

package/docs/brand/logo-dark.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-128 -82 7590 1067" width="1898" height="267" role="img" aria-label="Actual·css"><title>Actual·css</title>
+  <style>
+    .t { fill: #F4EFFA; }
+    .d { fill: #B292DB; }
+    @media (prefers-color-scheme: dark) { .t { fill: #F4EFFA; } .d { fill: #B292DB; } }
+  </style>
+  <path class="t" d="M698 800H42L370 89ZM100 763H640L370 177ZM1117 778Q1185 778 1240 751Q1295 724 1326.5 676Q1358 628 1359 568H1395Q1395 637 1358.5 693.5Q1322 750 1258.5 782.5Q1195 815 1117 815Q1041 815 976 777Q911 739 873 674.5Q835 610 835 534V370Q835 294 872.5 229.5Q910 165 974.5 127Q1039 89 1115 89Q1192 89 1255.5 121.5Q1319 154 1356 210.5Q1393 267 1393 336H1357Q1356 276 1324 228Q1292 180 1237.5 153Q1183 126 1115 126Q1049 126 993 159Q937 192 904 248Q871 304 871 370V534Q871 600 904.5 656Q938 712 994.5 745Q1051 778 1117 778ZM2131 104V141H1868V800H1832V141H1569V104ZM2309 104H2346V534Q2346 600 2379 656Q2412 712 2468 745Q2524 778 2590 778Q2656 778 2712 745Q2768 712 2801 656Q2834 600 2834 534V104H2871V534Q2871 610 2833 674.5Q2795 739 2730.5 777Q2666 815 2590 815Q2514 815 2449.5 777Q2385 739 2347 674.5Q2309 610 2309 534ZM3311 104H3350L3636 800H3596L3502 570H3159L3064 800H3025ZM3174 534H3487L3330 152ZM3855 800V104H3892V763H4377V800ZM5557 778Q5625 778 5680 751Q5735 724 5766.5 676Q5798 628 5799 568H5835Q5835 637 5798.5 693.5Q5762 750 5698.5 782.5Q5635 815 5557 815Q5481 815 5416 777Q5351 739 5313 674.5Q5275 610 5275 534V370Q5275 294 5312.5 229.5Q5350 165 5414.5 127Q5479 89 5555 89Q5632 89 5695.5 121.5Q5759 154 5796 210.5Q5833 267 5833 336H5797Q5796 276 5764 228Q5732 180 5677.5 153Q5623 126 5555 126Q5489 126 5433 159Q5377 192 5344 248Q5311 304 5311 370V534Q5311 600 5344.5 656Q5378 712 5434.5 745Q5491 778 5557 778ZM6052 282Q6052 224 6082.5 180Q6113 136 6168.5 112Q6224 88 6297 88Q6367 88 6425.5 117.5Q6484 147 6518 200Q6552 253 6552 321H6515Q6515 262 6486 217Q6457 172 6407 147.5Q6357 123 6296 123Q6242 123 6195 140Q6148 157 6118.5 192Q6089 227 6089 280Q6089 328 6117 356.5Q6145 385 6190 400Q6235 415 6316 432Q6398 449 6443.5 464.5Q6489 480 6520.5 516Q6552 552 6552 617Q6552 682 6517.5 726.5Q6483 771 6426 793Q6369 815 6302 815Q6219 815 6156 784Q6093 753 6059.5 696.5Q6026 640 6026 567H6063Q6063 631 6091.5 679Q6120 727 6174 753.5Q6228 780 6302 780Q6394 780 6454.5 736Q6515 692 6515 616Q6515 564 6489 536Q6463 508 6423.5 495.5Q6384 483 6305 467Q6220 450 6166.5 429.5Q6113 409 6082.5 373.5Q6052 338 6052 282ZM6792 282Q6792 224 6822.5 180Q6853 136 6908.5 112Q6964 88 7037 88Q7107 88 7165.5 117.5Q7224 147 7258 200Q7292 253 7292 321H7255Q7255 262 7226 217Q7197 172 7147 147.5Q7097 123 7036 123Q6982 123 6935 140Q6888 157 6858.5 192Q6829 227 6829 280Q6829 328 6857 356.5Q6885 385 6930 400Q6975 415 7056 432Q7138 449 7183.5 464.5Q7229 480 7260.5 516Q7292 552 7292 617Q7292 682 7257.5 726.5Q7223 771 7166 793Q7109 815 7042 815Q6959 815 6896 784Q6833 753 6799.5 696.5Q6766 640 6766 567H6803Q6803 631 6831.5 679Q6860 727 6914 753.5Q6968 780 7042 780Q7134 780 7194.5 736Q7255 692 7255 616Q7255 564 7229 536Q7203 508 7163.5 495.5Q7124 483 7045 467Q6960 450 6906.5 429.5Q6853 409 6822.5 373.5Q6792 338 6792 282Z"/>
+  <path class="d" d="M4810 367Q4848 367 4874.5 393.5Q4901 420 4901 457Q4901 494 4874.5 521Q4848 548 4810 548Q4773 548 4746 521Q4719 494 4719 457Q4719 420 4745.5 393.5Q4772 367 4810 367Z"/>
+</svg>

package/docs/brand/logo-light.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-128 -82 7590 1067" width="1898" height="267" role="img" aria-label="Actual·css"><title>Actual·css</title>
+  <style>
+    .t { fill: #52396F; }
+    .d { fill: #9B7BCB; }
+    @media (prefers-color-scheme: dark) { .t { fill: #52396F; } .d { fill: #9B7BCB; } }
+  </style>
+  <path class="t" d="M698 800H42L370 89ZM100 763H640L370 177ZM1117 778Q1185 778 1240 751Q1295 724 1326.5 676Q1358 628 1359 568H1395Q1395 637 1358.5 693.5Q1322 750 1258.5 782.5Q1195 815 1117 815Q1041 815 976 777Q911 739 873 674.5Q835 610 835 534V370Q835 294 872.5 229.5Q910 165 974.5 127Q1039 89 1115 89Q1192 89 1255.5 121.5Q1319 154 1356 210.5Q1393 267 1393 336H1357Q1356 276 1324 228Q1292 180 1237.5 153Q1183 126 1115 126Q1049 126 993 159Q937 192 904 248Q871 304 871 370V534Q871 600 904.5 656Q938 712 994.5 745Q1051 778 1117 778ZM2131 104V141H1868V800H1832V141H1569V104ZM2309 104H2346V534Q2346 600 2379 656Q2412 712 2468 745Q2524 778 2590 778Q2656 778 2712 745Q2768 712 2801 656Q2834 600 2834 534V104H2871V534Q2871 610 2833 674.5Q2795 739 2730.5 777Q2666 815 2590 815Q2514 815 2449.5 777Q2385 739 2347 674.5Q2309 610 2309 534ZM3311 104H3350L3636 800H3596L3502 570H3159L3064 800H3025ZM3174 534H3487L3330 152ZM3855 800V104H3892V763H4377V800ZM5557 778Q5625 778 5680 751Q5735 724 5766.5 676Q5798 628 5799 568H5835Q5835 637 5798.5 693.5Q5762 750 5698.5 782.5Q5635 815 5557 815Q5481 815 5416 777Q5351 739 5313 674.5Q5275 610 5275 534V370Q5275 294 5312.5 229.5Q5350 165 5414.5 127Q5479 89 5555 89Q5632 89 5695.5 121.5Q5759 154 5796 210.5Q5833 267 5833 336H5797Q5796 276 5764 228Q5732 180 5677.5 153Q5623 126 5555 126Q5489 126 5433 159Q5377 192 5344 248Q5311 304 5311 370V534Q5311 600 5344.5 656Q5378 712 5434.5 745Q5491 778 5557 778ZM6052 282Q6052 224 6082.5 180Q6113 136 6168.5 112Q6224 88 6297 88Q6367 88 6425.5 117.5Q6484 147 6518 200Q6552 253 6552 321H6515Q6515 262 6486 217Q6457 172 6407 147.5Q6357 123 6296 123Q6242 123 6195 140Q6148 157 6118.5 192Q6089 227 6089 280Q6089 328 6117 356.5Q6145 385 6190 400Q6235 415 6316 432Q6398 449 6443.5 464.5Q6489 480 6520.5 516Q6552 552 6552 617Q6552 682 6517.5 726.5Q6483 771 6426 793Q6369 815 6302 815Q6219 815 6156 784Q6093 753 6059.5 696.5Q6026 640 6026 567H6063Q6063 631 6091.5 679Q6120 727 6174 753.5Q6228 780 6302 780Q6394 780 6454.5 736Q6515 692 6515 616Q6515 564 6489 536Q6463 508 6423.5 495.5Q6384 483 6305 467Q6220 450 6166.5 429.5Q6113 409 6082.5 373.5Q6052 338 6052 282ZM6792 282Q6792 224 6822.5 180Q6853 136 6908.5 112Q6964 88 7037 88Q7107 88 7165.5 117.5Q7224 147 7258 200Q7292 253 7292 321H7255Q7255 262 7226 217Q7197 172 7147 147.5Q7097 123 7036 123Q6982 123 6935 140Q6888 157 6858.5 192Q6829 227 6829 280Q6829 328 6857 356.5Q6885 385 6930 400Q6975 415 7056 432Q7138 449 7183.5 464.5Q7229 480 7260.5 516Q7292 552 7292 617Q7292 682 7257.5 726.5Q7223 771 7166 793Q7109 815 7042 815Q6959 815 6896 784Q6833 753 6799.5 696.5Q6766 640 6766 567H6803Q6803 631 6831.5 679Q6860 727 6914 753.5Q6968 780 7042 780Q7134 780 7194.5 736Q7255 692 7255 616Q7255 564 7229 536Q7203 508 7163.5 495.5Q7124 483 7045 467Q6960 450 6906.5 429.5Q6853 409 6822.5 373.5Q6792 338 6792 282Z"/>
+  <path class="d" d="M4810 367Q4848 367 4874.5 393.5Q4901 420 4901 457Q4901 494 4874.5 521Q4848 548 4810 548Q4773 548 4746 521Q4719 494 4719 457Q4719 420 4745.5 393.5Q4772 367 4810 367Z"/>
+</svg>

package/docs/brand/logo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-128 -82 7590 1067" width="1898" height="267" role="img" aria-label="Actual·css"><title>Actual·css</title>
+  <!-- Docs adaptation: fills follow the site theme via --text/--primary, with the
+       brand hex as fallback for standalone rendering. The OS-scheme override
+       is dropped on purpose: the docs theme picker owns the scheme. -->
+  <style>
+    .t { fill: var(--text, #52396F); }
+    .d { fill: var(--primary, #9B7BCB); }
+  </style>
+  <path class="t" d="M698 800H42L370 89ZM100 763H640L370 177ZM1117 778Q1185 778 1240 751Q1295 724 1326.5 676Q1358 628 1359 568H1395Q1395 637 1358.5 693.5Q1322 750 1258.5 782.5Q1195 815 1117 815Q1041 815 976 777Q911 739 873 674.5Q835 610 835 534V370Q835 294 872.5 229.5Q910 165 974.5 127Q1039 89 1115 89Q1192 89 1255.5 121.5Q1319 154 1356 210.5Q1393 267 1393 336H1357Q1356 276 1324 228Q1292 180 1237.5 153Q1183 126 1115 126Q1049 126 993 159Q937 192 904 248Q871 304 871 370V534Q871 600 904.5 656Q938 712 994.5 745Q1051 778 1117 778ZM2131 104V141H1868V800H1832V141H1569V104ZM2309 104H2346V534Q2346 600 2379 656Q2412 712 2468 745Q2524 778 2590 778Q2656 778 2712 745Q2768 712 2801 656Q2834 600 2834 534V104H2871V534Q2871 610 2833 674.5Q2795 739 2730.5 777Q2666 815 2590 815Q2514 815 2449.5 777Q2385 739 2347 674.5Q2309 610 2309 534ZM3311 104H3350L3636 800H3596L3502 570H3159L3064 800H3025ZM3174 534H3487L3330 152ZM3855 800V104H3892V763H4377V800ZM5557 778Q5625 778 5680 751Q5735 724 5766.5 676Q5798 628 5799 568H5835Q5835 637 5798.5 693.5Q5762 750 5698.5 782.5Q5635 815 5557 815Q5481 815 5416 777Q5351 739 5313 674.5Q5275 610 5275 534V370Q5275 294 5312.5 229.5Q5350 165 5414.5 127Q5479 89 5555 89Q5632 89 5695.5 121.5Q5759 154 5796 210.5Q5833 267 5833 336H5797Q5796 276 5764 228Q5732 180 5677.5 153Q5623 126 5555 126Q5489 126 5433 159Q5377 192 5344 248Q5311 304 5311 370V534Q5311 600 5344.5 656Q5378 712 5434.5 745Q5491 778 5557 778ZM6052 282Q6052 224 6082.5 180Q6113 136 6168.5 112Q6224 88 6297 88Q6367 88 6425.5 117.5Q6484 147 6518 200Q6552 253 6552 321H6515Q6515 262 6486 217Q6457 172 6407 147.5Q6357 123 6296 123Q6242 123 6195 140Q6148 157 6118.5 192Q6089 227 6089 280Q6089 328 6117 356.5Q6145 385 6190 400Q6235 415 6316 432Q6398 449 6443.5 464.5Q6489 480 6520.5 516Q6552 552 6552 617Q6552 682 6517.5 726.5Q6483 771 6426 793Q6369 815 6302 815Q6219 815 6156 784Q6093 753 6059.5 696.5Q6026 640 6026 567H6063Q6063 631 6091.5 679Q6120 727 6174 753.5Q6228 780 6302 780Q6394 780 6454.5 736Q6515 692 6515 616Q6515 564 6489 536Q6463 508 6423.5 495.5Q6384 483 6305 467Q6220 450 6166.5 429.5Q6113 409 6082.5 373.5Q6052 338 6052 282ZM6792 282Q6792 224 6822.5 180Q6853 136 6908.5 112Q6964 88 7037 88Q7107 88 7165.5 117.5Q7224 147 7258 200Q7292 253 7292 321H7255Q7255 262 7226 217Q7197 172 7147 147.5Q7097 123 7036 123Q6982 123 6935 140Q6888 157 6858.5 192Q6829 227 6829 280Q6829 328 6857 356.5Q6885 385 6930 400Q6975 415 7056 432Q7138 449 7183.5 464.5Q7229 480 7260.5 516Q7292 552 7292 617Q7292 682 7257.5 726.5Q7223 771 7166 793Q7109 815 7042 815Q6959 815 6896 784Q6833 753 6799.5 696.5Q6766 640 6766 567H6803Q6803 631 6831.5 679Q6860 727 6914 753.5Q6968 780 7042 780Q7134 780 7194.5 736Q7255 692 7255 616Q7255 564 7229 536Q7203 508 7163.5 495.5Q7124 483 7045 467Q6960 450 6906.5 429.5Q6853 409 6822.5 373.5Q6792 338 6792 282Z"/>
+  <path class="d" d="M4810 367Q4848 367 4874.5 393.5Q4901 420 4901 457Q4901 494 4874.5 521Q4848 548 4810 548Q4773 548 4746 521Q4719 494 4719 457Q4719 420 4745.5 393.5Q4772 367 4810 367Z"/>
+</svg>

package/docs/brand/mark.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512"><title>Actual</title>
+  <!-- Docs adaptation: fills follow the site theme via --text/--primary, with the
+       brand hex as fallback for standalone rendering. The OS-scheme override
+       is dropped on purpose: the docs theme picker owns the scheme. -->
+  <style>
+    .ring { fill: var(--text, #52396F); }
+    .bar { fill: var(--primary, #9B7BCB); }
+  </style>
+  <path class="ring" fill-rule="evenodd" d="M124.7,451.9 L475.4,451.9 L300.1,71.9ZM406.6,407.9 L193.5,407.9 L300.1,177.0Z"/>
+  <path class="bar" d="M36.6,451.9 L85.1,451.9 L241.7,112.6 L217.4,60.1Z"/>
+</svg>

package/docs/design-notes/architecture.md

@@ -0,0 +1,67 @@
+# Architecture
+
+How to decide what belongs in Actual, and where. The rules an application
+author follows are in [Philosophy](../pages/foundations/philosophy.md) and
+[Building with Actual CSS](../pages/guides/integrating-actual-css.md); naming is
+in [Naming conventions](naming.md), behavior in
+[Enhancement contract](enhancement-contract.md).
+
+The test for where a rule goes: if it changes how someone writes their
+application CSS, it belongs in the guide; if it only decides how Actual is
+built, it belongs here.
+
+## Ownership
+
+- **A component owns its intrinsic anatomy, not page composition.** Padding,
+  surface, slots and states are the component's; outer margins and sibling
+  spacing are not.
+- **A layout primitive on a component replaces its default layout without
+  specificity tricks.** The component's own box layout sits in `:where()`
+  (`.card`, its header and footer slots). `components/` loads after `layout/`,
+  so a plain class declaration would win on source order and flatten
+  `class="card media"` into a column.
+- **Structural anatomy never lends a class's weight to a bare element.**
+  `:where(dialog).modal > :where(form, .stack)`, not `> :is(form, .stack)`,
+  which would give `<form>` the specificity of `.stack`.
+
+## Utilities
+
+A utility makes one reusable adjustment. A class that sets a surface, a border,
+padding and type together has become a component, whatever file it lives in.
+
+## Abstraction
+
+- **Duplication beats an abstraction that couples unrelated components.** Every
+  file under `components/` is a public export (`actual-css/css/components/*`).
+  A shared file imported only by the index would break a single-component
+  import, so `.modal` and `.drawer` each keep the declarations they share.
+- **No generic primitive because two examples look alike.** A primitive names a
+  relationship that recurs across unrelated applications. When the existing
+  answer was hard to find, improve the docs instead.
+- **Bytes do not justify specificity.** A selector is not merged or raised to
+  save a few compressed bytes when it changes who can override it.
+
+## Tokens
+
+A value derived from an overridable token is computed on the element that uses
+it, never as an alias on `:root`: an inherited custom property arrives already
+computed, so an override on a theme island or a region would not reach it. The
+generic focus line (`focus.css`) and the dialog and drawer focus reserves
+follow this rule.
+
+## Decoration
+
+A decorative cue must not dictate geometry, focus or scroll behavior. Scrolling
+strips have no shared edge fade: its mask set their scroll-padding and focus
+reserve, and repeated what a clipped item and the scrollbar already show. The
+strips reserve only their focus line. `.tabs` is the exception: it hides its
+scrollbar, so its fade is the cue, and the fade spans the strip's existing
+scroll-padding instead of setting it.
+
+Starting a strip on its current item is a progressive enhancement, not a
+contract: `scroll-initial-target` on the item, no runtime. One declaration
+replaces a module, its opt-in token and its wait for parsing. Engines without
+the property start at the first item, which the fade or the scrollbar already
+says is not all; do not reintroduce a script fallback for them. `.pagination` does not scroll at all: it wraps, because a
+click on a page navigates instead of moving the strip, so a scrolling row hid
+pages the mouse could not reach.

package/docs/design-notes/steps.md

@@ -82,7 +82,7 @@ and upcoming is the absence of both, because the platform already spells those.
 
 Out of contract — a step name belongs in a `.step-label` — and it degrades in
 the right direction. `:empty` reads an item's own content, so `<li>Account</li>`
-is not empty: it takes the reading width a wrapped label would, and only the
+is not empty: it takes the same authored item floor as a wrapped label, and only the
 placing and aligning that `.step-label` rules provide are missing. It lays out
 and does not fall apart, which is all an out-of-contract markup is owed.
 
@@ -90,11 +90,8 @@ This is the case that makes bare text expensive to support as a first-class
 form, and it is worth stating precisely, because a component that sizes steps
 *per label* pays for it twice.
 
-In behaviour: a row mixing wrapped and unwrapped steps compacts only the
-wrapped ones. Measured at five steps in a 559px region, the unwrapped step
-holds 201px while its four peers shrink to 89px. That skew is what
-`> li:has(.step-label)` produces — bare text has no label, so it takes a
-marker-wide floor while its wrapped peers keep `--step-min`.
+In behaviour: sizing by `> li:has(.step-label)` would give bare text and
+wrapped labels different floors whenever an author sets `--step-min`.
 
 In bytes: the only valid way to express "every step is wrapped" is to enumerate
 positions (see "`:has()` cannot be nested"), which grows the selector for each
@@ -105,7 +102,7 @@ supported count.
 a link and bare text.
 
 The row-level alternative, `.steps-horizontal:not(:has(.step-label)) > li`,
-avoids the skew differently: it makes every step reading-width, so an empty
+avoids the skew differently: it gives every step the authored floor, so an empty
 step in a mixed row becomes a wide gap rather than a marker. It also puts the
 compact form itself behind `:has()`, above the Degraded tier, for a shape that
 needs no modern selector at all.
@@ -156,6 +153,32 @@ stay in the stacked layout.
 property, so overriding `--step-min` moves the scroll budget but not this
 query. Same trade as `--grid-min` in `grid.css`.
 
+## Even marker pitch and wrapping labels
+
+Stacked labelled steps keep an even marker pitch because each outgoing
+connector must reach the next marker's edge. Intrinsic per-label widths would
+move the markers unevenly and make that length depend on a neighbour's width.
+
+The first and last markers align with the row's edges at every width. Each
+end cell takes half a normal share plus half a marker; simply moving the marker
+inside a full cell would stretch the outer connectors. Labels follow the same
+start/end alignment, while the middle steps remain centred. The first connector
+crosses two end-cell widths minus both markers, plus the intervening gap.
+
+It is not behind a viewport query. Edge alignment is the row's geometry, the
+one the compact and inline forms already have, and a breakpoint on the viewport
+would lay out the same 600px row differently on a phone and in a desktop card.
+
+The marker sets the default item floor. A `minmax(0, 1fr)` grid column keeps a
+long label from widening its step; `hyphens: auto` breaks a long word where the
+page's `lang` allows, and `overflow-wrap: anywhere` still lets an unbroken name
+fit when it does not. `--step-gap` separates both the marker from its label and
+one step from the next, so wrapped names cannot run together.
+
+Authors can raise `--step-min` when wrapping costs too much height. The row
+then scrolls once those floors and the intervening gaps outgrow its region.
+This budget changes neither orientation nor the wide inline threshold.
+
 ## The compact form
 
 The whole unlabelled contract, in both orientations:
@@ -235,8 +258,7 @@ having no share to fill — is only as wide as its own marker.
 
 The result is a track flush with both ends of the row, which is what lets it
 line up with the heading or paragraph that names the step. Keeping the centred
-geometry leaves half-cell margins at both ends: measured on five empty steps in
-a 736px row, 60px of dead space on each side, with the first marker floating
+geometry leaves half-cell margins at both ends, with the first marker floating
 inward of a left-aligned heading.
 
 It also matches the inline representation, whose `:last-child { flex: 0 0 auto }`
@@ -244,7 +266,7 @@ is the same declaration for the same reason.
 
 The connector follows from the alignment rather than being tuned to it. The
 base geometry starts a connector at `50% + --step-size / 2` — the right edge of
-a centred marker — and runs it `100% - --step-size`, to the next marker's left
+a centred marker — and runs it `100% - --step-size + --step-gap`, to the next marker's left
 edge. Move the marker to the start of the share and that origin becomes
 `--step-size`; the width is unchanged, and the connector still lands exactly on
 the next marker. Measured at 736px and at 200px: zero gap either side.
@@ -265,7 +287,7 @@ leave in a component whose whole claim is that sizing follows content.
 ### Why `:empty` rather than `:has()`
 
 It says what the markup says, and it reads the item's own content, which is
-what keeps bare text off a marker-wide floor (see "Bare text in an `<li>`").
+what keeps bare text on the same authored floor as labelled peers (see "Bare text in an `<li>`").
 
 It also predates `:has()` by a decade, so the compact form reaches the Degraded
 tier. `:has(.step-label)` appears only in the wide container query, where
@@ -412,7 +434,7 @@ The contract is one sentence. A step label may be a link, a marker never is, and
 anything else focusable in a step is out of contract.
 
 The one `:has(a[href])` in the file is unrelated: a navigable row reserves
-`padding-block` for its focus ring, because the scroll container clips at the
+padding on both axes for its focus ring, because the scroll container clips at the
 padding edge. See "Scrolling on one axis".
 
 A link needs no styling rule of its own to go with it. `color: inherit` sits in
@@ -442,13 +464,9 @@ with `.sr-only` on `.step-label`, so the text stays in the accessibility tree
 while its box disappears. Or the same rules behind a public class, so the author
 picks the representation instead of a width picking it.
 
-The threshold is not the weak part. Items hold at `flex: 1 0 var(--step-min)`,
-so a row's intrinsic width is `count × --step-min` — 35rem for five steps — and
-the query fires exactly where a five-step stacked row starts to scroll. Four
-steps share that threshold rather than getting their own at 28rem, so between
-448px and 560px they compact although stacked would still fit; splitting the
-difference at 32rem is worse, handing five-step rows a scrolling band instead
-(40px of overflow at 520px, 20px at 540px).
+A fixed hiding threshold cannot reflect the authored item floor or the actual
+length of a label. Wrapping uses the available share directly, without removing
+content or introducing a per-count breakpoint.
 
 ### Why the premise fails
 
@@ -469,7 +487,7 @@ So the question is not "how narrow before labels must go?" but "does this
 sequence carry names at all?", and that one is the author's to answer in
 markup. An unlabelled sequence is compact because it has nothing to show; a
 labelled one keeps everything it was given. When a labelled row does not fit,
-the honest answers are scrolling, more space, or `.steps-vertical`.
+the available answers are wrapping, scrolling, more space, or `.steps-vertical`.
 
 ### What the rule is worth, concretely
 
@@ -611,7 +629,7 @@ retuning surface is `--scroller-thumb` and `--scroller-track`, which belong to
 `.scroller`. Copying those into Steps duplicates the primitive; omitting them
 leaves a scrollbar no documented hook reaches.
 
-Measured on a five-step row in a 380px region, the pairing takes the scrollbar
+Measured on a five-step row with an authored `--step-min: 7rem` in a 380px region, the pairing takes the scrollbar
 from 15px to 10px and the row from 69px to 64px, with the thumb on
 `--text-muted` instead of the OS grey.
 
@@ -620,19 +638,18 @@ Its `.stable-gutter` variant, on the other hand, is a trap worth naming.
 scrollbar — and this row sets `overflow-y: hidden`, so there is never one to
 reserve for. It does not steady the row's height across the appearance of the
 horizontal scrollbar, which is what an author would reach for it to do:
-measured, the row is 54px when it fits and 64px when it scrolls either way,
-while the reserved inline gutter takes 10px off the row's width and pushes
-overflow from 36px to 46px. Strictly worse in both directions.
+the reserved inline gutter narrows the row without reserving space for a
+horizontal scrollbar, making horizontal overflow more likely.
 
 What makes the row scroll rather than squash is the item floor:
 `min-inline-size: max(var(--step-size), var(--step-min))`. The `max()` is there
-so an author who lowers `--step-min` below `--step-size` narrows the scroll
-budget without collapsing items behind their own markers.
+so an author who lowers `--step-min` below `--step-size` cannot collapse items
+behind their own markers.
 
 The cost of scrolling is that clipping happens at the padding edge, and a focus
-ring is drawn outside its element's border box — `--focus-outline` is
+ring is drawn outside its element's border box — the generic outline is
 `--focus-ring-width` wide at `--focus-outline-offset`, so 4px past a label that sits
-flush with the bottom of a stacked row. A navigable row therefore reserves
+flush with the edge of a stacked row. A navigable row therefore reserves
 exactly that much `padding-block`, gated on `.steps-horizontal:has(a[href])`. An
 informational stepper — the common case, with no ring to protect — keeps its
 height, and so does a navigable column: the padding is compensation for the

package/docs/navigation.json

@@ -10,7 +10,8 @@
         "progressive-enhancement",
         "bootstrap",
         "tailwind",
-        "design-tools"
+        "design-tools",
+        "upgrading"
       ]
     },
     {
@@ -82,6 +83,7 @@
         "overview",
         "controls",
         "combobox",
+        "date-picker",
         "rich-text",
         "labels",
         "floating-field",
@@ -104,7 +106,6 @@
       "slug": "patterns",
       "pages": [
         "overview",
-        "actions",
         "navigation-list",
         "icon-input",
         "icon-slot",

package/docs/pages/components/alert.md

@@ -6,7 +6,7 @@
 - Supports longer text and lists.
 - Links inherit alert color by default.
 - Alerts are soft by default. Use `.surface` for neutral chrome with the intent only in the ink, `.solid` or `.outline` when the message needs stronger or quieter emphasis.
-- Use `<menu class="actions cluster">` for alert action lists.
+- Use `<menu class="cluster">` for alert action lists.
 - Use `role="alert"` only when the alert is injected dynamically and should be announced.
 - Not a toast.
 - Could have simple or complex html content.
@@ -90,7 +90,7 @@ intent treatment when the color itself carries the meaning.
       <p>Check your billing details or try another card.</p>
     </div>
 
-    <menu class="actions cluster">
+    <menu class="cluster">
       <li><a class="btn danger sm" href="/billing">Update billing</a></li>
       <li><a href="/support">Contact support</a></li>
     </menu>
@@ -128,14 +128,6 @@ center.
     I'm a surface alert — theme chrome, intent in the ink
   </div>
 
-  <div class="alert danger compact" role="alert">
-    I'm an error in a compact context
-  </div>
-
-  <div class="alert danger spacious" role="alert">
-    I'm an error in a spacious context
-  </div>
-
   <div class="alert danger outline" role="alert">
     I'm an outline error <a href="#">with a link</a>
   </div>

package/docs/pages/components/avatar.md

@@ -12,12 +12,12 @@
 
 ## Class reference
 
-| Class           | Kind        | Description                                  |
-| --------------- | ----------- | -------------------------------------------- |
-| `.avatar`       | Component   | Initials or image in a circular box.         |
-| `.avatar-stack` | Composition | Overlapping avatar group.                    |
-| `.badge:empty`  | Composition | Status dot, at the bottom-end corner.        |
-| `.sm` / `.lg`   | Size        | Optical size; also rescales `.avatar-stack`. |
+| Class           | Kind        | Description                            |
+| --------------- | ----------- | -------------------------------------- |
+| `.avatar`       | Component   | Initials or image in a circular box.   |
+| `.avatar-stack` | Composition | Overlapping avatar group.              |
+| `.badge:empty`  | Composition | Status dot, at the bottom-end corner.  |
+| `.sm` / `.lg`   | Size        | Optical size, on an avatar or a stack. |
 
 `.avatar` works on `div`, `a` and `button`. The status dot is an empty
 `.badge` inside an `.avatar`, and needs an `aria-label` of its own.
@@ -79,6 +79,9 @@ is suppressed inside the avatar.
 
 ## Avatar stack
 
+Set `.sm` or `.lg` on `.avatar-stack` to size the group; its avatars inherit
+that size without their own size classes. Child sizes do not resize the stack.
+
 ```html demo
 <div class="avatar-stack" role="group" aria-label="Team members">
   <div class="avatar" role="img" aria-label="John Doe" style="--avatar-bg:#E5EEE4">
@@ -93,16 +96,19 @@ is suppressed inside the avatar.
 </div>
 ```
 
-## CSS hooks
+### Hooks
 
 - `--avatar-size` — inline and block size.
 - `--avatar-radius` — corner radius; set a smaller value for squared avatars.
+- `--avatar-font-size` — initials size.
 - `--avatar-bg` — background; `data-tone` adjusts the derived foreground.
 - `--avatar-stack-size` — stack-scoped size that each avatar falls back to.
+- `--avatar-stack-font-size` — stack-scoped initials size, paired with `--avatar-stack-size`.
 - `--avatar-stack-overlap` — how far stacked avatars overlap.
 - `--avatar-stack-ring` — separating ring width inside `.avatar-stack`.
 
-Prefer intents for avatar colors. Inside `.avatar-stack`, `--avatar-size` falls
-back to a stack-scoped value so the whole group resizes together with `.sm`/`.lg`;
-set `--avatar-size` on an individual avatar to opt one out.
-`--avatar-stack-overlap` is derived from `--avatar-stack-size`, not `--avatar-size`.
+Prefer intents for avatar colors. Inside `.avatar-stack`, `--avatar-size` and
+`--avatar-font-size` fall back to the stack-scoped pair, which `.sm`/`.lg` on
+the stack set, so the whole group resizes together; set `--avatar-size` on an
+individual avatar to opt one out. `--avatar-stack-overlap` is derived from
+`--avatar-stack-size`, not `--avatar-size`.

package/docs/pages/components/badge.md

@@ -126,15 +126,9 @@ Regular
 <span class="badge success lg">Large</span>
 ```
 
-## Density
-
-Density changes the pill geometry without scaling its label or icon.
-
-```html demo
-<span class="compact"><span class="badge success">Compact</span></span>
-<span><span class="badge success">Default</span></span>
-<span class="spacious"><span class="badge success">Spacious</span></span>
-```
+A badge keeps its size inside a `.compact` or `.spacious` context: its
+geometry is intrinsic to its label. Use `.sm` / `.lg` for a smaller or larger
+badge.
 
 ## With an icon
 

package/docs/pages/components/breadcrumb.md

@@ -4,8 +4,11 @@
 
 - Use a semantic `<nav>` landmark.
 - Put `.breadcrumb` on the ordered list.
-- Use `aria-current="page"` for the current page.
-- Separators are generated with CSS (`li + li::before`).
+- Use `aria-current="page"` for the current page, on its link or on its `<li>`,
+  and keep it last.
+- Separators are generated with CSS (`> li + li::before`).
+- Put each ancestor label in an `<a>` or a `<span>`: that box carries the
+  ellipsis. The current page may be bare text in an `<li aria-current="page">`.
 
 ```html demo
 <nav aria-label="Breadcrumb">
@@ -17,3 +20,14 @@
   </ol>
 </nav>
 ```
+
+## Narrow space
+
+A trail stays on one line and never scrolls. When it does not fit, labels
+truncate with an ellipsis: ancestors first, down to a couple of characters
+each, then the current page. A link keeps its full text as its accessible
+name; add a `title` if pointer users should see it on hover.
+
+Truncation does not remove levels. For a deep hierarchy on a phone, collapse
+it in markup — keep the root and the current page, and replace the middle
+levels with a `…` item, or render only a link to the parent page.

package/docs/pages/components/card.md

@@ -39,7 +39,7 @@ gap.
 
     <p>Using the right HTML tags improves both SEO and accessibility. Lean on landmarks and live lists.</p>
 
-    <ul class="cluster" style="list-style: none; padding: 0; margin: 0; gap: 0.5rem" aria-label="Tags">
+    <ul class="cluster tight" aria-label="Tags">
       <li><span class="badge primary soft secondary">HTML</span></li>
       <li><span class="badge soft primary">Accessibility</span></li>
       <li><span class="badge outline">5 min read</span></li>
@@ -53,6 +53,34 @@ gap.
 </div>
 ```
 
+## Slot rows
+
+A direct `<header>` or `<footer>` is a wrapping split row by default: title and
+badge, date and action, one left one right. A primitive, role or utility on the
+slot replaces that row — `.media` for an avatar beside a title, `.cluster` for a
+start-aligned group, `cluster form-actions` for a form's action row,
+`.justify-content-end` to push actions right. The footer stays anchored to the
+bottom either way.
+
+```html demo
+<div style="max-inline-size: 32rem">
+  <article class="card">
+    <header class="media">
+      <span class="avatar"><abbr>AM</abbr></span>
+      <hgroup>
+        <h3>Ada Meridian</h3>
+        <p class="muted">Design systems</p>
+      </hgroup>
+    </header>
+    <p>Reviews every token change before it ships.</p>
+    <footer class="cluster justify-content-end">
+      <button type="button" class="btn ghost">Dismiss</button>
+      <button type="button" class="btn primary">Follow</button>
+    </footer>
+  </article>
+</div>
+```
+
 ## Bleed
 
 Use `.bleed` on a direct child to bring an image or band to the card edge. See
@@ -155,4 +183,5 @@ treatments on either side of it.
 - `--card-radius` — corner radius.
 - `--card-max-inline-size` — maximum width.
 - `--card-pad` — inner padding, relayed to direct children for `.bleed`. `.compact` lowers it.
-- `--card-gap` — space between direct children of a bare card. A composed layout primitive owns its own gap instead.
+- `--card-gap` — space between direct children of a bare card. `.compact` lowers it; a parent's `--gap` and an inherited density do not reach it. A composed layout primitive owns its own gap instead.
+- `--items-align` — cross-axis alignment of the slot rows, set by the `.items-*` helpers on the card or the slot.