actual-css 0.11.0 → 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

@@ -9,7 +9,9 @@
         "modular-import",
         "progressive-enhancement",
         "bootstrap",
-        "tailwind"
+        "tailwind",
+        "design-tools",
+        "upgrading"
       ]
     },
     {
@@ -81,6 +83,7 @@
         "overview",
         "controls",
         "combobox",
+        "date-picker",
         "rich-text",
         "labels",
         "floating-field",
@@ -103,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/bleed.md

@@ -3,10 +3,11 @@
 `.bleed` lets a direct child of a padded surface reach its edges. Use it for a
 full-width image, a colored header or footer, or a notice band.
 
-It works inside `.card`, `.drawer`, and an accordion panel. The accordion panel
-owns the padding, so place `.bleed` directly inside the panel, after the summary.
-A deeper descendant stays within its wrapper. A modular build imports
-`actual-css/css/components/bleed` alongside the surface component.
+It works inside `.card`, `.drawer`, a modal's direct `<form>` or `.stack`, and
+an accordion panel. The accordion panel owns the padding, so place `.bleed`
+directly inside the panel, after the summary. A deeper descendant stays within
+its wrapper. A modular build imports `actual-css/css/components/bleed`
+alongside the surface component.
 
 ```html demo
 <article class="card stack" style="--card-max-inline-size: 24rem">

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/close.md

@@ -28,7 +28,9 @@
 In a `.modal` or a `.drawer`, the close sits out of the content flow at the
 panel's top inline-end corner. Place it as a direct child of the dialog, of its
 top-level `form` or `header`, or of a `form` inside that header; a `.close`
-deeper in the content keeps its own place. See [Dialog](dialog.md) and
+deeper in the content keeps its own place, so wrapping it in a `.cluster` keeps
+it in the header's row. A header that hosts the corner close reserves inline
+room so a title never runs under it. See [Dialog](dialog.md) and
 [Drawer](drawer.md).
 
 ```html
@@ -43,6 +45,10 @@ deeper in the content keeps its own place. See [Dialog](dialog.md) and
 
 - `--close-size` — inline and block size of the button; `--control-size` unless the container sets it.
 - `--close-icon-size` — size of the X.
+- `--close-bg` — background of the dialog corner close; `--surface-subtle` unless the dialog or a painted band sets it, e.g. `transparent` for a bare X.
+- `--close-color` — ink of the X; `--text-muted` at the dialog corner, otherwise inherited from the context.
+- `--close-hover-color` — ink of the dialog corner close on hover; `--text` unless a band sets its own foreground.
+- `--close-hover-overlay` — hover and active wash that tints the fill the context gave the control; the dialog corner sets it `transparent` so a hover changes only the ink.
 
-Alerts and badges declare both hooks on themselves, so set them on the container
-or on the button.
+Alerts and badges declare both size hooks on themselves, so set them on the
+container or on the button.

package/docs/pages/components/dialog.md

@@ -6,17 +6,72 @@
 
 ## 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.        |
-
-A [`.close`](close.md) placed as a direct child of the dialog or of its form
-sits outside the content flow, so it does not take part in the dialog's own
-layout.
+| 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
+
+`.modal` is the outer surface and deliberately has no inner padding. Wrap its
+content in a direct `<form>` or `.stack`; that wrapper owns the padding, rhythm,
+and overflow. Put `.stack` on the wrapper, never on `dialog.modal` itself.
+
+For a header band, place `<header>` directly under `dialog.modal`, before the
+body wrapper. Put a flexible `.media` title region first and a `.cluster` of
+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,
+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
+content flow while the header reserves enough inline space to keep its title
+clear.
+
+A `.close` placed as a direct child of the chrome header is still the corner
+overlay. That header reserves the same inline room for it, never below its own
+`--modal-pad`, so a wrapping title stays clear either way.
+
+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, 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
 
@@ -69,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"
@@ -81,11 +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 without changing the semantics of the form or its buttons.
+### 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"
@@ -97,7 +160,7 @@ band without changing the semantics of the form or its buttons.
   Deactivate account
 </button>
 
-<dialog class="modal dialog-confirmation"
+<dialog class="modal"
         id="deactivate-dialog"
         closedby="none"
         style="--modal-size: 40rem">
@@ -107,13 +170,13 @@ band without changing the semantics of the form or its buttons.
         <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>
@@ -121,6 +184,48 @@ band without changing the semantics of the form or its buttons.
 </dialog>
 ```
 
+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.
+
+Use the same anatomy in a `.card` instead when the surface belongs in page
+content and does not need modal focus or a backdrop.
+
+```html demo
+<button class="btn"
+        type="button"
+        commandfor="customize-dialog"
+        command="show-modal"
+        aria-haspopup="dialog"
+        aria-controls="customize-dialog">
+  Customize workspace
+</button>
+
+<dialog class="modal"
+        id="customize-dialog"
+        closedby="none"
+        aria-labelledby="customize-dialog-title">
+  <form method="dialog">
+    <header class="cluster"
+            style="--cluster-align: start; --cluster-justify: space-between; --cluster-wrap: nowrap">
+      <hgroup class="grow">
+        <h3 id="customize-dialog-title">Make this workspace your own</h3>
+        <p class="muted">Choose colors and defaults now, or continue with the current settings.</p>
+      </hgroup>
+
+      <span class="dialog-icon success soft" aria-hidden="true">
+        <i class="ti ti-check"></i>
+      </span>
+    </header>
+
+    <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>
+```
+
 ## Information modal
 
 Use this shape for contextual information or lightweight secondary content. It
@@ -163,6 +268,67 @@ has no action button; the header close button dismisses the dialog.
 </dialog>
 ```
 
+## Action modal
+
+Use this shape when contextual information leads to one non-destructive next
+step, such as reviewing a setup before continuing. Unlike an alert dialog, it
+can be dismissed without choosing the action; unlike an information modal, it
+has a primary action in a footer.
+
+Use `.dialog-icon` with the media object for a leading title icon. An `.alert`
+belongs in the body only when the dialog contains a distinct status message;
+the dialog title itself is not an alert.
+
+```html demo
+<button class="btn primary"
+        type="button"
+        commandfor="setup-dialog"
+        command="show-modal"
+        aria-haspopup="dialog"
+        aria-controls="setup-dialog">
+  Continue setup
+</button>
+
+<dialog class="modal"
+        id="setup-dialog"
+        closedby="any"
+        data-dialog-dismissible
+        aria-labelledby="setup-dialog-title">
+  <header>
+    <div class="media items-center grow">
+      <span class="dialog-icon warning soft" aria-hidden="true">
+        <i class="ti ti-alert-triangle"></i>
+      </span>
+
+      <h2 id="setup-dialog-title">Finish workspace setup</h2>
+    </div>
+
+    <div class="cluster">
+      <button class="close"
+              type="button"
+              commandfor="setup-dialog"
+              command="request-close"
+              aria-controls="setup-dialog"
+              aria-label="Close dialog"></button>
+    </div>
+  </header>
+
+  <form method="dialog" class="stack">
+    <div class="card stack">
+      <p><strong>Acme workspace</strong></p>
+      <p>Team plan</p>
+      <p>Starts October 1</p>
+    </div>
+
+    <p>Confirm these settings to finish setting up the workspace.</p>
+
+    <footer class="cluster justify-content-end">
+      <button class="btn primary inline-size-full" value="continue">Continue</button>
+    </footer>
+  </form>
+</dialog>
+```
+
 ## Scrollable modal
 
 Use `modal scrollable` when the header and footer should stay visible while the
@@ -177,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"
@@ -208,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">
@@ -219,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
@@ -357,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>
@@ -371,20 +589,19 @@ Prefer native dialog behavior whenever possible. The framework runtime should
 not replace the platform modal system; it should only make dialogs declarative,
 animation-friendly, and consistent across supported browsers.
 
-The close button is anchored to the dialog surface, not the content flow: it
-sits at the top `inline-end`, inside the panel. The button itself is out of
-flow, while the header reserves enough inline padding to keep its title clear.
-Keep the button a direct child of `dialog.modal` so the scrolling content
-(`> form` or `> .stack`) never competes with it.
-
 ## CSS hooks
 
 - `--modal-size` — maximum dialog width. Fallback-only, so a class on the
   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.
 - `--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 plus `--space-30` on its inline end so
+  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>