actual-css 0.11.1 → 0.12.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/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/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/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.

package/docs/pages/components/dialog.md

@@ -6,13 +6,12 @@
 
 ## Class reference
 
-| Class                  | Kind        | Description                                    |
-| ---------------------- | ----------- | ---------------------------------------------- |
-| `.modal`               | Component   | Centered surface on the native `<dialog>`.     |
-| `.scrollable`          | Variant     | Header and footer stay while the body scrolls. |
-| `.dialog-confirmation` | Variant     | Message above a full-width action band.        |
-| `.dialog-icon`         | Component   | Circular intent-aware icon well.               |
-| `.close`               | Composition | Icon-only close button, at the top end.        |
+| Class          | Kind        | Description                                    |
+| -------------- | ----------- | ---------------------------------------------- |
+| `.modal`       | Component   | Centered surface on the native `<dialog>`.     |
+| `.scrollable`  | Variant     | Header and footer stay while the body scrolls. |
+| `.dialog-icon` | Component   | Circular intent-aware icon well.               |
+| `.close`       | Composition | Icon-only close button, at the top end.        |
 
 ## Anatomy
 
@@ -26,8 +25,10 @@ controls second. The title has the close control's minimum height; its leading
 icon and every trailing control share the same center axis. A wrapped title
 simply makes the row taller.
 
-A direct `dialog > header` is dialog chrome and forms a distinct header band.
-Put an ordinary content heading inside the padded `form` or `.stack` instead.
+A direct `dialog > header` is dialog chrome and forms a distinct header band,
+painted `--surface-subtle`. Change the fill with a surface utility on the header
+(`<header class="background-raised">`). Put an ordinary content heading inside
+the padded `form` or `.stack` instead.
 
 Keep a corner [`.close`](close.md) as a direct child of the dialog and put the
 title in the wrapper's direct `<header>`. The button then stays outside the
@@ -42,9 +43,35 @@ The corner close overlays the panel edge, so a body tall enough to scroll would
 run its scrollbar under the button. Give such a dialog the `scrollable` anatomy:
 the close then sits over the fixed header and the scrollbar starts below it.
 
-Add `.bleed` to that header when it should form a full-width band. It reaches
-the dialog edges, keeps the modal's inner padding, and can take a surface token
-such as `background: var(--surface-subtle)`.
+Add `.bleed` to that header, or to the wrapper's footer, when it should form a
+full-width band. It reaches the dialog edges and corners, keeps the modal's
+inner padding, and takes a surface utility such as `.background-subtle`.
+
+The wrapper's `<footer>` is a structural slot: it stays fixed under
+`.scrollable` but has no layout of its own. Compose the action row in markup —
+`<footer class="cluster justify-content-end">` for trailing actions,
+`.justify-content-space-between` for a split pair.
+
+### Where each region lives
+
+Two anatomies are legitimate. Pick one; each owns its scroll, footer, and close
+placement.
+
+**Wrapper header** — a `<header>` inside the `form`/`.stack` body. The wrapper
+owns padding, rhythm, and overflow. With `.scrollable` the header and footer are
+fixed rows and the content between them scrolls. The `.close` stays a direct
+child of the dialog and the header reserves its inline room.
+
+**External header** — a direct `dialog > header`, before the body wrapper. The
+header is dialog chrome outside the scroll container, so it never scrolls. The
+footer stays inside the wrapper and is the trailing fixed row under
+`.scrollable`. Wrap the `.close` in the header's trailing `.cluster` to keep it
+in flow; a `.close` that is a direct child of the header is still the absolute
+corner overlay, and the header reserves its room.
+
+The `.scrollable` row template follows the regions the wrapper actually holds,
+so a modal without a header, without a footer, or with an external header all
+keep the footer reachable and the body scrollable.
 
 ## Usage
 
@@ -97,7 +124,7 @@ runtime, backdrop clicks give a small static feedback instead of closing.
       <p>The project, saved reports, and connected automations will be removed permanently.</p>
     </div>
 
-    <footer>
+    <footer class="cluster justify-content-end">
       <button class="btn outline" value="cancel">Cancel</button>
 
       <button class="btn danger"
@@ -109,12 +136,19 @@ runtime, backdrop clicks give a small static feedback instead of closing.
 </dialog>
 ```
 
-For a compact destructive confirmation with a leading status icon, compose
-`dialog-confirmation` with the media object. The icon well accepts the shared
-intent and emphasis classes; `dialog-icon danger soft` creates the tinted red
-circle while keeping the glyph centered. The footer becomes a separate action
-band whose two actions sit at its edges, so the cancel-style control never sits
-next to the committing one.
+### Confirmation with an icon and an action band
+
+For a compact confirmation with a leading status icon, put a `.dialog-icon` and
+the text column in a `.media` row. The first heading of that column centers on
+the icon; following copy stays in the same column. The icon well accepts the
+shared intent and emphasis classes: `dialog-icon danger soft` is the tinted red
+circle.
+
+The action band is the footer composed with existing primitives: `.bleed`
+reaches the panel edges and corners, `.background-subtle` paints it, and
+`.cluster.justify-content-space-between` splits the decision pair. Keep the
+cancel-style action first, so it holds the leading edge and never sits next to
+the committing one.
 
 ```html demo
 <button class="btn danger"
@@ -126,7 +160,7 @@ next to the committing one.
   Deactivate account
 </button>
 
-<dialog class="modal dialog-confirmation"
+<dialog class="modal"
         id="deactivate-dialog"
         closedby="none"
         style="--modal-size: 40rem">
@@ -136,13 +170,13 @@ next to the committing one.
         <i class="ti ti-alert-triangle"></i>
       </span>
 
-      <header>
+      <header class="stack">
         <h3>Deactivate account</h3>
         <p class="muted">Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
       </header>
     </div>
 
-    <footer>
+    <footer class="bleed background-subtle cluster justify-content-space-between">
       <button class="btn outline" value="cancel">Cancel</button>
       <button class="btn danger" value="deactivate">Deactivate</button>
     </footer>
@@ -152,8 +186,7 @@ next to the committing one.
 
 For a trailing illustration, use a direct `<header>` as the message region and
 compose it as a non-wrapping split cluster. `.grow` keeps the text column
-flexible while `.dialog-icon` stays at the inline end. The confirmation variant
-pads either this header or the leading-icon `.media` shape above.
+flexible while `.dialog-icon` stays at the inline end.
 
 Use the same anatomy in a `.card` instead when the surface belongs in page
 content and does not need modal focus or a backdrop.
@@ -168,7 +201,7 @@ content and does not need modal focus or a backdrop.
   Customize workspace
 </button>
 
-<dialog class="modal dialog-confirmation"
+<dialog class="modal"
         id="customize-dialog"
         closedby="none"
         aria-labelledby="customize-dialog-title">
@@ -185,9 +218,9 @@ content and does not need modal focus or a backdrop.
       </span>
     </header>
 
-    <footer>
-      <button class="btn primary" value="customize">Customize</button>
+    <footer class="bleed background-subtle cluster justify-content-end">
       <button class="btn ghost" value="later">Later</button>
+      <button class="btn primary" value="customize">Customize</button>
     </footer>
   </form>
 </dialog>
@@ -289,7 +322,7 @@ the dialog title itself is not an alert.
 
     <p>Confirm these settings to finish setting up the workspace.</p>
 
-    <footer>
+    <footer class="cluster justify-content-end">
       <button class="btn primary inline-size-full" value="continue">Continue</button>
     </footer>
   </form>
@@ -310,6 +343,9 @@ keyboard-focusable so it can be scrolled without a pointer — it takes a focus
 ring like any other focusable element, and it can claim initial focus when
 nothing focusable precedes it. Mark the control you want focused `autofocus`.
 
+Each non-header/footer child region is its own scrollport, so wrap the body in a
+single element (`<div class="stack">`) when there should be one scrollbar.
+
 ```html demo
 <button class="btn"
         type="button"
@@ -341,7 +377,7 @@ nothing focusable precedes it. Mark the control you want focused `autofocus`.
       <p>Section 7. Continued use confirms acceptance of the current terms.</p>
     </div>
 
-    <footer>
+    <footer class="cluster justify-content-end">
       <button class="btn outline" value="cancel">Cancel</button>
 
       <button class="btn primary" value="accept">
@@ -352,6 +388,55 @@ nothing focusable precedes it. Mark the control you want focused `autofocus`.
 </dialog>
 ```
 
+An external header follows the same contract from the other side: the header is
+chrome outside the wrapper, the footer stays in the wrapper, and the content
+between them scrolls.
+
+```html demo
+<button class="btn"
+        type="button"
+        commandfor="external-scroll-dialog"
+        command="show-modal"
+        aria-haspopup="dialog"
+        aria-controls="external-scroll-dialog">
+  Open external-header modal
+</button>
+
+<dialog class="modal scrollable"
+        id="external-scroll-dialog"
+        closedby="any"
+        aria-labelledby="external-scroll-title">
+  <header>
+    <h3 id="external-scroll-title">Release notes</h3>
+
+    <div class="cluster">
+      <button class="close"
+              type="button"
+              commandfor="external-scroll-dialog"
+              command="request-close"
+              aria-controls="external-scroll-dialog"
+              aria-label="Close dialog"></button>
+    </div>
+  </header>
+
+  <form method="dialog" class="stack">
+    <div class="stack">
+      <p>Section 1. The service stores project settings, interface preferences, and theme choices.</p>
+      <p>Section 2. Administrators can invite users and review access periodically.</p>
+      <p>Section 3. Billing changes may affect future invoices.</p>
+      <p>Section 4. Export tools are provided for common formats.</p>
+      <p>Section 5. Support requests should include browser and account context.</p>
+      <p>Section 6. Continued use confirms acceptance of the current terms.</p>
+    </div>
+
+    <footer class="cluster justify-content-end">
+      <button class="btn outline" value="cancel">Cancel</button>
+      <button class="btn primary" value="accept">Accept</button>
+    </footer>
+  </form>
+</dialog>
+```
+
 ## Overlays inside modals
 
 Flyouts and tooltips opened from inside a modal dialog stay exactly where they
@@ -490,7 +575,7 @@ transition.
       <p>This dialog morphs to and from the trigger button.</p>
     </header>
 
-    <footer>
+    <footer class="cluster justify-content-end">
       <button class="btn outline" value="cancel">Cancel</button>
       <button class="btn primary" value="confirm">Confirm</button>
     </footer>
@@ -510,10 +595,13 @@ animation-friendly, and consistent across supported browsers.
   dialog or an inherited value both reach it. A dialog is shrink-to-fit: a
   composition that must fill this width sets `inline-size` as well.
 - `--modal-pad` — padding of the direct `<form>` or `.stack` content wrapper.
-- `--modal-header-bg` — background of a direct header band.
 - `--dialog-viewport-gap` — distance kept between the dialog and the viewport edges.
-- `--dialog-icon-size` — diameter of the `.dialog-icon` circle.
-- `--dialog-icon-glyph-size` — size of the glyph centered inside `.dialog-icon`.
+- `--dialog-icon-size` — diameter of the `.dialog-icon` circle. The heading
+  beside a leading icon reads the same hook to center on it, so set it on the
+  icon's media row (or the dialog) and both inherit one value. A value on the
+  icon alone sizes only the circle.
+- `--dialog-icon-glyph-size` — size of the glyph centered inside `.dialog-icon`;
+  same placement as `--dialog-icon-size`.
 - `--close-size` / `--close-icon-size` — size of the corner `.close` and of its
   X. The header reserves the close size, its edge inset, and a content gap so
   the title never runs under it.

package/docs/pages/components/drawer.md

@@ -61,7 +61,7 @@ your intended target `autofocus`; otherwise the body claims initial focus.
   </header>
 
   <nav>
-    <ul class="nav-list stack">
+    <ul class="nav-list">
       <li><a href="#" aria-current="page">Home</a></li>
       <li><a href="#">Users</a></li>
       <li><a href="#">Settings</a></li>
@@ -103,7 +103,7 @@ actions and the close button can close the drawer.
       <p>Unsaved changes will be lost if you close without saving.</p>
     </div>
 
-    <footer class="cluster" style="--cluster-justify: end">
+    <footer class="cluster justify-content-end">
       <button class="btn" value="save">Save</button>
     </footer>
   </form>

package/docs/pages/components/navbar.md

@@ -1,10 +1,10 @@
 # Navbar
 
-> Horizontal top-level navigation bar with a brand, an inline link list, and a vertical nav-list for drawers.
+> Horizontal top-level navigation bar with a brand, an inline `.cluster` link list, and a vertical `.nav-list` for drawers.
 
 - Use `.navbar` for the horizontal bar shell.
 - `.navbar-brand` is the brand link at the inline start.
-- `.navbar-nav` is the horizontal link list; its items are `.nav-link`.
+- Horizontal links live in a `.cluster`; its items are `.nav-link`.
 - `.nav-list` is the shared vertical navigation list, reused by `.drawer` for stacked links.
 - Mark the current page with `aria-current="page"` on the active `.nav-link`.
 - Presence is the contract: set `aria-current` on the current link and remove
@@ -15,9 +15,9 @@ For a public or normally scrolling page, `.navbar` belongs inside the semantic
 site header. Do not use `.topbar` or `.app-layout` unless the page actually has
 the specialized persistent application-shell behavior those APIs describe.
 
-`.navbar-nav` and `.nav-list` are mutually exclusive: `.navbar-nav` is a horizontal
-flex list, `.nav-list` a vertical grid. Putting both on one element resolves to
-`.nav-list` (vertical) — pick one per container.
+Horizontal navbar links use a `.cluster`. Use `.nav-list` when the navigation
+becomes a full-width vertical list. The two are distinct contracts, so pick one
+per container.
 
 `.navbar` stays the horizontal bar for a site or webapp header with a brand and
 normal document scrolling. `.app-nav` is not merely a stacked-icon flavour of it:
@@ -32,7 +32,6 @@ icons. See [App Navigation](app-navigation.md).
 | --------------- | ----------- | ----------------------------------------------------- |
 | `.navbar`       | Component   | Horizontal bar shell.                                 |
 | `.navbar-brand` | Composition | Brand link at the inline start.                       |
-| `.navbar-nav`   | Composition | Horizontal link list.                                 |
 | `.nav-link`     | Component   | A link item; current page via `aria-current="page"`.  |
 | `.nav-list`     | Component   | Shared vertical navigation list, reused by `.drawer`. |
 
@@ -41,7 +40,7 @@ icons. See [App Navigation](app-navigation.md).
 ```html demo
 <nav class="navbar" aria-label="Main">
   <a class="navbar-brand" href="/">Actual CSS</a>
-  <ul class="navbar-nav">
+  <ul class="cluster">
     <li><a class="nav-link" href="/docs" aria-current="page">Docs</a></li>
     <li><a class="nav-link" href="/components">Components</a></li>
     <li><a class="nav-link" href="/examples">Examples</a></li>
@@ -70,7 +69,7 @@ accessible name.
 ```html demo
 <nav class="navbar" aria-label="Main">
   <a class="navbar-brand" href="/">Actual CSS</a>
-  <ul class="navbar-nav">
+  <ul class="cluster">
     <li><a class="nav-link" href="/" aria-current="page">Home</a></li>
     <li><a class="nav-link" href="/docs">Docs</a></li>
   </ul>
@@ -99,7 +98,7 @@ accessible name.
   </header>
 
   <nav>
-    <ul class="nav-list stack">
+    <ul class="nav-list">
       <li><a class="nav-link" href="#" aria-current="page">Home</a></li>
       <li><a class="nav-link" href="#">Docs</a></li>
       <li><a class="nav-link" href="#">Components</a></li>

package/docs/pages/components/table.md

@@ -101,9 +101,9 @@ table width before the wrapper scrolls horizontally.
 ## Compact tables
 
 `.compact` lowers cell padding and establishes compact density for controls or
-spacing helpers inside cells. Font size and icons stay unchanged; the framework's
-denser font width may apply when the typeface supports it. It is the
-same vocabulary as `.card.compact`.
+spacing helpers inside cells. The text stays as set; a data-heavy table that
+also wants condensed type sets `font-stretch` on itself. It is the same
+vocabulary as `.card.compact`.
 
 ```html demo
 <div class="table-wrap">

package/docs/pages/enhancements/flyout.md

@@ -322,7 +322,7 @@ can be multi-column with `<section>` / `<ul>` groups.
 
 ```html demo
 <nav aria-label="Main navigation">
-  <ul class="list-reset cluster">
+  <ul class="cluster">
     <li class="flyout-trigger">
       <button class="btn ghost"
               type="button"
@@ -373,7 +373,7 @@ a separate `dialog.drawer` when the content needs a modal mobile presentation.
 
 ```html demo
 <nav aria-label="Product navigation">
-  <ul class="list-reset cluster">
+  <ul class="cluster">
     <li class="flyout-trigger">
       <button class="btn ghost"
               type="button"

package/docs/pages/enhancements/scrollspy.md

@@ -26,7 +26,7 @@ or style `[aria-current]` yourself.
 
 ```html demo
 <nav class="scrollspy" data-enhance="scrollspy" aria-label="Page sections">
-  <ol class="nav-list stack">
+  <ol class="nav-list">
     <li><a class="nav-link" href="#overview" aria-current="location">Overview</a></li>
     <li><a class="nav-link" href="#tokens">Tokens</a></li>
     <li><a class="nav-link" href="#components">Components</a></li>

package/docs/pages/enhancements/status-bar.md

@@ -31,14 +31,14 @@ fails to submit shows its `data-validation-message` in the status bar with the
 stays optional.
 
 ```html demo
-<form class="needs-validation" data-enhance="validation" data-validation-message="Please check the highlighted fields.">
+<form class="stack needs-validation" data-enhance="validation" data-validation-message="Please check the highlighted fields.">
   <label class="field">
     <span class="field-label">Email</span>
     <input class="input" type="email" name="email" required
            aria-describedby="sb-email-error" />
     <span class="field-error" id="sb-email-error" role="alert">Enter a valid email.</span>
   </label>
-  <div class="form-actions">
+  <div class="cluster form-actions">
     <button class="btn primary" type="submit">Submit</button>
   </div>
 </form>