@scattered-light/loomiere-mojave 0.3.0 → 0.4.0

package/dist/exports/design-system/components/bundle.css

@@ -211,29 +211,29 @@
     --sl-color-info-800: #173b76; /** info 800: 10.87:1 against paper */
     --sl-color-info-900: #0e2854; /** info 900: 14.38:1 against paper */
     --sl-color-info-1000: #051634; /** info 1000: 17.89:1 against paper */
-    --sl-color-data-1: #a04fdf; /** Data series 1 (violet). Categorical; use in order. */
-    --sl-color-data-2: #ef7053; /** Data series 2 (coral). Categorical; use in order. */
-    --sl-color-data-3: #c4b679; /** Data series 3 (gold). Categorical; use in order. */
-    --sl-color-data-4: #612c3d; /** Data series 4 (burgundy). Categorical; use in order. */
-    --sl-color-data-5: #86e6ca; /** Data series 5 (mint). Categorical; use in order. */
-    --sl-color-data-6: #154975; /** Data series 6 (navy). Categorical; use in order. */
-    --sl-color-data-7: #bbc3fe; /** Data series 7 (periwinkle). Categorical; use in order. */
-    --sl-color-data-8: #0b5313; /** Data series 8 (forest). Categorical; use in order. */
-    --sl-color-data-9: #74ce4b; /** Data series 9 (lime). Categorical; use in order. */
-    --sl-color-data-10: #dac925; /** Data series 10 (yellow). Categorical; use in order. */
-    --sl-color-data-11: #b4a1e2; /** Data series 11 (lavender). Categorical; use in order. */
-    --sl-color-data-12: #ffc3b5; /** Data series 12 (peach). Categorical; use in order. */
-    --sl-color-data-13: #f1e5af; /** Data series 13 (cream). Categorical; use in order. */
-    --sl-color-data-14: #a6838e; /** Data series 14 (mauve). Categorical; use in order. */
-    --sl-color-data-15: #bfecdf; /** Data series 15 (seafoam). Categorical; use in order. */
-    --sl-color-data-16: #7fa8cb; /** Data series 16 (sky). Categorical; use in order. */
-    --sl-color-data-17: #e5e8ff; /** Data series 17 (ice). Categorical; use in order. */
-    --sl-color-data-18: #b1d0b5; /** Data series 18 (sage). Categorical; use in order. */
-    --sl-color-data-19: #d0fabd; /** Data series 19 (chartreuse). Categorical; use in order. */
-    --sl-color-data-20: #fffce1; /** Data series 20 (ivory). Categorical; use in order. */
-    --sl-duration-fast: 100ms; /** 100ms × speed 1 */
-    --sl-duration-normal: 200ms; /** 200ms × speed 1 */
-    --sl-duration-slow: 300ms; /** 300ms × speed 1 */
+    --sl-color-data-violet: #a04fdf; /** Data color violet. Charts use it through the numbered series slots. */
+    --sl-color-data-coral: #ef7053; /** Data color coral. Charts use it through the numbered series slots. */
+    --sl-color-data-gold: #c4b679; /** Data color gold. Charts use it through the numbered series slots. */
+    --sl-color-data-burgundy: #612c3d; /** Data color burgundy. Charts use it through the numbered series slots. */
+    --sl-color-data-mint: #86e6ca; /** Data color mint. Charts use it through the numbered series slots. */
+    --sl-color-data-navy: #154975; /** Data color navy. Charts use it through the numbered series slots. */
+    --sl-color-data-periwinkle: #bbc3fe; /** Data color periwinkle. Charts use it through the numbered series slots. */
+    --sl-color-data-forest: #0b5313; /** Data color forest. Charts use it through the numbered series slots. */
+    --sl-color-data-lime: #74ce4b; /** Data color lime. Charts use it through the numbered series slots. */
+    --sl-color-data-yellow: #dac925; /** Data color yellow. Charts use it through the numbered series slots. */
+    --sl-color-data-lavender: #b4a1e2; /** Data color lavender. Charts use it through the numbered series slots. */
+    --sl-color-data-peach: #ffc3b5; /** Data color peach. Charts use it through the numbered series slots. */
+    --sl-color-data-cream: #f1e5af; /** Data color cream. Charts use it through the numbered series slots. */
+    --sl-color-data-mauve: #a6838e; /** Data color mauve. Charts use it through the numbered series slots. */
+    --sl-color-data-seafoam: #bfecdf; /** Data color seafoam. Charts use it through the numbered series slots. */
+    --sl-color-data-sky: #7fa8cb; /** Data color sky. Charts use it through the numbered series slots. */
+    --sl-color-data-ice: #e5e8ff; /** Data color ice. Charts use it through the numbered series slots. */
+    --sl-color-data-sage: #b1d0b5; /** Data color sage. Charts use it through the numbered series slots. */
+    --sl-color-data-chartreuse: #d0fabd; /** Data color chartreuse. Charts use it through the numbered series slots. */
+    --sl-color-data-ivory: #fffce1; /** Data color ivory. Charts use it through the numbered series slots. */
+    --sl-duration-fast: 100ms; /** 100ms × speed 1. 1ms with reduced motion. */
+    --sl-duration-normal: 200ms; /** 200ms × speed 1. 1ms with reduced motion. */
+    --sl-duration-slow: 300ms; /** 300ms × speed 1. 1ms with reduced motion. */
     --sl-shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05); /** Elevation xs */
     --sl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /** Elevation sm */
     --sl-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /** Elevation base */
@@ -243,13 +243,6 @@
     --sl-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /** Elevation 2xl */
     --sl-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /** Elevation inner */
     --sl-shadow-none: none; /** No elevation */
-    --sl-shadow-flat-xs: 0 0 0 1px rgba(0, 0, 0, 0.05); /** Elevation xs as a 1px outline */
-    --sl-shadow-flat-sm: 0 0 0 1px rgba(0, 0, 0, 0.1); /** Elevation sm as a 1px outline */
-    --sl-shadow-flat-base: 0 0 0 1px rgba(0, 0, 0, 0.15); /** Elevation base as a 1px outline */
-    --sl-shadow-flat-md: 0 0 0 1px rgba(0, 0, 0, 0.2); /** Elevation md as a 1px outline */
-    --sl-shadow-flat-lg: 0 0 0 1px rgba(0, 0, 0, 0.25); /** Elevation lg as a 1px outline */
-    --sl-shadow-flat-xl: 0 0 0 1px rgba(0, 0, 0, 0.3); /** Elevation xl as a 1px outline */
-    --sl-shadow-flat-2xl: 0 0 0 1px rgba(0, 0, 0, 0.35); /** Elevation 2xl as a 1px outline */
     --sl-stroke-thin: 1px; /** 1 × 1px base */
     --sl-stroke-medium: 2px; /** 2 × 1px base */
     --sl-stroke-thick: 3px; /** 3 × 1px base */
@@ -377,26 +370,26 @@
     --sl-vision-deuteranopia-color-info-800: #3b3377; /** info 800: 10.87:1 against paper */
     --sl-vision-deuteranopia-color-info-900: #282255; /** info 900: 14.38:1 against paper */
     --sl-vision-deuteranopia-color-info-1000: #161234; /** info 1000: 17.89:1 against paper */
-    --sl-vision-deuteranopia-color-data-1: #a04fdf; /** Data series 1 (violet). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-2: #f35d49; /** Data series 2 (coral). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-3: #c4b679; /** Data series 3 (gold). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-4: #612c3d; /** Data series 4 (burgundy). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-5: #86e6ca; /** Data series 5 (mint). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-6: #154975; /** Data series 6 (navy). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-7: #bbc3fe; /** Data series 7 (periwinkle). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-8: #0b5313; /** Data series 8 (forest). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-9: #56c047; /** Data series 9 (lime). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-10: #dac925; /** Data series 10 (yellow). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-11: #b4a1e2; /** Data series 11 (lavender). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-12: #e0b4b5; /** Data series 12 (peach). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-13: #f1e5af; /** Data series 13 (cream). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-14: #a6838e; /** Data series 14 (mauve). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-15: #a9d7c0; /** Data series 15 (seafoam). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-16: #7fa8cb; /** Data series 16 (sky). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-17: #e5e8ff; /** Data series 17 (ice). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-18: #a4c8b1; /** Data series 18 (sage). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-19: #b4da84; /** Data series 19 (chartreuse). Categorical; use in order. */
-    --sl-vision-deuteranopia-color-data-20: #fffce1; /** Data series 20 (ivory). Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-violet: #a04fdf; /** Data color violet. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-coral: #f35d49; /** Data color coral. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-gold: #c4b679; /** Data color gold. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-burgundy: #612c3d; /** Data color burgundy. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-mint: #86e6ca; /** Data color mint. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-navy: #154975; /** Data color navy. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-periwinkle: #bbc3fe; /** Data color periwinkle. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-forest: #0b5313; /** Data color forest. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-lime: #56c047; /** Data color lime. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-yellow: #dac925; /** Data color yellow. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-lavender: #b4a1e2; /** Data color lavender. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-peach: #e0b4b5; /** Data color peach. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-cream: #f1e5af; /** Data color cream. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-mauve: #a6838e; /** Data color mauve. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-seafoam: #a9d7c0; /** Data color seafoam. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-sky: #7fa8cb; /** Data color sky. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-ice: #e5e8ff; /** Data color ice. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-sage: #a4c8b1; /** Data color sage. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-chartreuse: #b4da84; /** Data color chartreuse. Charts use it through the numbered series slots. */
+    --sl-vision-deuteranopia-color-data-ivory: #fffce1; /** Data color ivory. Charts use it through the numbered series slots. */
     --sl-vision-protanopia-color-primary-50: #fdfaff; /** primary (mirage) 50: 1.03:1 against paper */
     --sl-vision-protanopia-color-primary-75: #f9f2ff; /** primary (mirage) 75: 1.09:1 against paper */
     --sl-vision-protanopia-color-primary-100: #f4e7ff; /** primary (mirage) 100: 1.18:1 against paper */
@@ -493,26 +486,26 @@
     --sl-vision-protanopia-color-info-800: #353578; /** info 800: 10.87:1 against paper */
     --sl-vision-protanopia-color-info-900: #242455; /** info 900: 14.38:1 against paper */
     --sl-vision-protanopia-color-info-1000: #131334; /** info 1000: 17.89:1 against paper */
-    --sl-vision-protanopia-color-data-1: #a04fdf; /** Data series 1 (violet). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-2: #ef7053; /** Data series 2 (coral). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-3: #c4b679; /** Data series 3 (gold). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-4: #5e293a; /** Data series 4 (burgundy). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-5: #86e6ca; /** Data series 5 (mint). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-6: #154975; /** Data series 6 (navy). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-7: #bbc3fe; /** Data series 7 (periwinkle). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-8: #0b5313; /** Data series 8 (forest). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-9: #63bb76; /** Data series 9 (lime). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-10: #dac925; /** Data series 10 (yellow). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-11: #b4a1e2; /** Data series 11 (lavender). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-12: #efb3ac; /** Data series 12 (peach). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-13: #f0e2a4; /** Data series 13 (cream). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-14: #a6838e; /** Data series 14 (mauve). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-15: #b1dccd; /** Data series 15 (seafoam). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-16: #7fa8cb; /** Data series 16 (sky). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-17: #e5e8ff; /** Data series 17 (ice). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-18: #9fbea3; /** Data series 18 (sage). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-19: #c4e289; /** Data series 19 (chartreuse). Categorical; use in order. */
-    --sl-vision-protanopia-color-data-20: #fffce1; /** Data series 20 (ivory). Categorical; use in order. */
+    --sl-vision-protanopia-color-data-violet: #a04fdf; /** Data color violet. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-coral: #ef7053; /** Data color coral. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-gold: #c4b679; /** Data color gold. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-burgundy: #5e293a; /** Data color burgundy. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-mint: #86e6ca; /** Data color mint. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-navy: #154975; /** Data color navy. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-periwinkle: #bbc3fe; /** Data color periwinkle. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-forest: #0b5313; /** Data color forest. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-lime: #63bb76; /** Data color lime. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-yellow: #dac925; /** Data color yellow. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-lavender: #b4a1e2; /** Data color lavender. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-peach: #efb3ac; /** Data color peach. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-cream: #f0e2a4; /** Data color cream. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-mauve: #a6838e; /** Data color mauve. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-seafoam: #b1dccd; /** Data color seafoam. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-sky: #7fa8cb; /** Data color sky. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-ice: #e5e8ff; /** Data color ice. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-sage: #9fbea3; /** Data color sage. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-chartreuse: #c4e289; /** Data color chartreuse. Charts use it through the numbered series slots. */
+    --sl-vision-protanopia-color-data-ivory: #fffce1; /** Data color ivory. Charts use it through the numbered series slots. */
     --sl-vision-tritanopia-color-primary-50: #fcfbff; /** primary (mirage) 50: 1.03:1 against paper */
     --sl-vision-tritanopia-color-primary-75: #f6f3ff; /** primary (mirage) 75: 1.09:1 against paper */
     --sl-vision-tritanopia-color-primary-100: #efe9ff; /** primary (mirage) 100: 1.18:1 against paper */
@@ -609,26 +602,26 @@
     --sl-vision-tritanopia-color-info-800: #173b76; /** info 800: 10.87:1 against paper */
     --sl-vision-tritanopia-color-info-900: #0e2854; /** info 900: 14.38:1 against paper */
     --sl-vision-tritanopia-color-info-1000: #051634; /** info 1000: 17.89:1 against paper */
-    --sl-vision-tritanopia-color-data-1: #a04fdf; /** Data series 1 (violet). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-2: #ef7053; /** Data series 2 (coral). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-3: #c4b679; /** Data series 3 (gold). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-4: #612c3d; /** Data series 4 (burgundy). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-5: #86e6ca; /** Data series 5 (mint). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-6: #3b4278; /** Data series 6 (navy). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-7: #bbc3fe; /** Data series 7 (periwinkle). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-8: #0b5313; /** Data series 8 (forest). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-9: #74ce4b; /** Data series 9 (lime). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-10: #c3c729; /** Data series 10 (yellow). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-11: #b4a1e2; /** Data series 11 (lavender). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-12: #f5b1a1; /** Data series 12 (peach). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-13: #f1e5af; /** Data series 13 (cream). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-14: #a6838e; /** Data series 14 (mauve). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-15: #b7ebdc; /** Data series 15 (seafoam). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-16: #6e9ec6; /** Data series 16 (sky). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-17: #e9e5f8; /** Data series 17 (ice). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-18: #a5b898; /** Data series 18 (sage). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-19: #d0fabd; /** Data series 19 (chartreuse). Categorical; use in order. */
-    --sl-vision-tritanopia-color-data-20: #fffce1; /** Data series 20 (ivory). Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-violet: #a04fdf; /** Data color violet. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-coral: #ef7053; /** Data color coral. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-gold: #c4b679; /** Data color gold. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-burgundy: #612c3d; /** Data color burgundy. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-mint: #86e6ca; /** Data color mint. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-navy: #3b4278; /** Data color navy. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-periwinkle: #bbc3fe; /** Data color periwinkle. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-forest: #0b5313; /** Data color forest. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-lime: #74ce4b; /** Data color lime. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-yellow: #c3c729; /** Data color yellow. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-lavender: #b4a1e2; /** Data color lavender. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-peach: #f5b1a1; /** Data color peach. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-cream: #f1e5af; /** Data color cream. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-mauve: #a6838e; /** Data color mauve. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-seafoam: #b7ebdc; /** Data color seafoam. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-sky: #6e9ec6; /** Data color sky. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-ice: #e9e5f8; /** Data color ice. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-sage: #a5b898; /** Data color sage. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-chartreuse: #d0fabd; /** Data color chartreuse. Charts use it through the numbered series slots. */
+    --sl-vision-tritanopia-color-data-ivory: #fffce1; /** Data color ivory. Charts use it through the numbered series slots. */
     --sl-vision-achromatopsia-color-primary-50: #fcfbfd; /** primary (mirage) 50: 1.03:1 against paper */
     --sl-vision-achromatopsia-color-primary-75: #f7f4f9; /** primary (mirage) 75: 1.09:1 against paper */
     --sl-vision-achromatopsia-color-primary-100: #efeaf3; /** primary (mirage) 100: 1.18:1 against paper */
@@ -725,26 +718,26 @@
     --sl-vision-achromatopsia-color-info-800: #163689; /** info 800: 10.87:1 against paper */
     --sl-vision-achromatopsia-color-info-900: #021c7a; /** info 900: 14.38:1 against paper */
     --sl-vision-achromatopsia-color-info-1000: #000b53; /** info 1000: 17.89:1 against paper */
-    --sl-vision-achromatopsia-color-data-1: #9947d7; /** Data series 1 (violet). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-2: #ef7053; /** Data series 2 (coral). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-3: #c4b679; /** Data series 3 (gold). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-4: #430025; /** Data series 4 (burgundy). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-5: #0da693; /** Data series 5 (mint). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-6: #154975; /** Data series 6 (navy). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-7: #030b46; /** Data series 7 (periwinkle). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-8: #0b5313; /** Data series 8 (forest). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-9: #12a232; /** Data series 9 (lime). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-10: #dac925; /** Data series 10 (yellow). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-11: #684793; /** Data series 11 (lavender). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-12: #56190c; /** Data series 12 (peach). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-13: #f1e5af; /** Data series 13 (cream). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-14: #986c7a; /** Data series 14 (mauve). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-15: #215b4e; /** Data series 15 (seafoam). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-16: #00243a; /** Data series 16 (sky). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-17: #8d91a6; /** Data series 17 (ice). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-18: #4f7359; /** Data series 18 (sage). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-19: #06510f; /** Data series 19 (chartreuse). Categorical; use in order. */
-    --sl-vision-achromatopsia-color-data-20: #fffce1; /** Data series 20 (ivory). Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-violet: #9947d7; /** Data color violet. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-coral: #ef7053; /** Data color coral. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-gold: #c4b679; /** Data color gold. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-burgundy: #430025; /** Data color burgundy. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-mint: #0da693; /** Data color mint. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-navy: #154975; /** Data color navy. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-periwinkle: #030b46; /** Data color periwinkle. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-forest: #0b5313; /** Data color forest. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-lime: #12a232; /** Data color lime. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-yellow: #dac925; /** Data color yellow. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-lavender: #684793; /** Data color lavender. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-peach: #56190c; /** Data color peach. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-cream: #f1e5af; /** Data color cream. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-mauve: #986c7a; /** Data color mauve. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-seafoam: #215b4e; /** Data color seafoam. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-sky: #00243a; /** Data color sky. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-ice: #8d91a6; /** Data color ice. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-sage: #4f7359; /** Data color sage. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-chartreuse: #06510f; /** Data color chartreuse. Charts use it through the numbered series slots. */
+    --sl-vision-achromatopsia-color-data-ivory: #fffce1; /** Data color ivory. Charts use it through the numbered series slots. */
     --sl-a11y-focus-outline-offset: 2px; /** Gap between a control and its focus ring so the ring never blends into the control border. */
     --sl-a11y-focus-outline-width: 2px; /** Focus ring thickness. 2px is the WCAG 2.2 minimum that stays visible on every surface. */
     --sl-a11y-link-focus-outline-offset: 0.25em; /** Links sit inside text, so the offset scales with the font (em) instead of a fixed px. */
@@ -771,10 +764,20 @@
     --sl-popup-list-max-height: 300px; /** A long list scrolls inside the popup after about seven rows. */
     --sl-popup-min-width: 200px; /** Narrowest a free-floating popup or menu gets, so short labels don't make a sliver. */
     --sl-color-scheme: light; /** Which way native browser parts (scrollbars, date pickers, autofill) draw: light, or dark wherever the dark theme is on. Set as color-scheme on the root and handed to AG Grid's browserColorScheme, so they follow data-theme as well as the system setting. */
-    --sl-font-condense-subtitle-label-text-transform: uppercase; /** text-transform of font.condense-subtitle-label. */
-    --sl-font-minimize-subtitle-label-text-transform: uppercase; /** text-transform of font.minimize-subtitle-label. */
-    --sl-emphasis-standard-bg: transparent; /** standard: outline in accent (primary) */
-    --sl-emphasis-quiet-bg: transparent; /** quiet: outline in chrome (neutral) */
+    --sl-font-eyebrow-condense-text-transform: uppercase; /** text-transform of font.eyebrow-condense. */
+    --sl-font-eyebrow-minimize-text-transform: uppercase; /** text-transform of font.eyebrow-minimize. */
+    --sl-emphasis-standard-bg: transparent; /** standard in default: outline in accent (primary) */
+    --sl-emphasis-quiet-bg: transparent; /** quiet in default: outline in chrome (neutral) */
+    --sl-status-level-default-standard-bg: transparent; /** standard in default: outline in accent (primary) */
+    --sl-status-level-default-quiet-bg: transparent; /** quiet in default: outline in chrome (neutral) */
+    --sl-status-level-info-standard-bg: transparent; /** standard in info: outline in info */
+    --sl-status-level-info-quiet-bg: transparent; /** quiet in info: outline in info */
+    --sl-status-level-success-standard-bg: transparent; /** standard in success: outline in success */
+    --sl-status-level-success-quiet-bg: transparent; /** quiet in success: outline in success */
+    --sl-status-level-warning-standard-bg: transparent; /** standard in warning: outline in warning */
+    --sl-status-level-warning-quiet-bg: transparent; /** quiet in warning: outline in warning */
+    --sl-status-level-error-standard-bg: transparent; /** standard in error: outline in error */
+    --sl-status-level-error-quiet-bg: transparent; /** quiet in error: outline in error */
     --sl-button-opacity-disabled: 0.5; /** A disabled button fades as a whole, keeping its shape so the layout doesn't jump. */
     --sl-drawer-popup-size: min(420px, 90vw); /** Width of a side drawer. A bottom or top drawer sizes to its content up to max-size. */
     --sl-drawer-popup-max-size: 85vh; /** Tallest a bottom or top drawer gets, leaving the page visible above it. */
@@ -921,6 +924,26 @@
     --sl-color-info-on-800: var(--sl-color-info-50); /** Text on info 800: 10.54:1 */
     --sl-color-info-on-900: var(--sl-color-info-50); /** Text on info 900: 13.98:1 */
     --sl-color-info-on-1000: var(--sl-color-info-50); /** Text on info 1000: 17.31:1 */
+    --sl-color-data-1: var(--sl-color-data-violet); /** Data series 1: violet. Categorical; use in order. */
+    --sl-color-data-2: var(--sl-color-data-coral); /** Data series 2: coral. Categorical; use in order. */
+    --sl-color-data-3: var(--sl-color-data-gold); /** Data series 3: gold. Categorical; use in order. */
+    --sl-color-data-4: var(--sl-color-data-burgundy); /** Data series 4: burgundy. Categorical; use in order. */
+    --sl-color-data-5: var(--sl-color-data-mint); /** Data series 5: mint. Categorical; use in order. */
+    --sl-color-data-6: var(--sl-color-data-navy); /** Data series 6: navy. Categorical; use in order. */
+    --sl-color-data-7: var(--sl-color-data-periwinkle); /** Data series 7: periwinkle. Categorical; use in order. */
+    --sl-color-data-8: var(--sl-color-data-forest); /** Data series 8: forest. Categorical; use in order. */
+    --sl-color-data-9: var(--sl-color-data-lime); /** Data series 9: lime. Categorical; use in order. */
+    --sl-color-data-10: var(--sl-color-data-yellow); /** Data series 10: yellow. Categorical; use in order. */
+    --sl-color-data-11: var(--sl-color-data-lavender); /** Data series 11: lavender. Categorical; use in order. */
+    --sl-color-data-12: var(--sl-color-data-peach); /** Data series 12: peach. Categorical; use in order. */
+    --sl-color-data-13: var(--sl-color-data-cream); /** Data series 13: cream. Categorical; use in order. */
+    --sl-color-data-14: var(--sl-color-data-mauve); /** Data series 14: mauve. Categorical; use in order. */
+    --sl-color-data-15: var(--sl-color-data-seafoam); /** Data series 15: seafoam. Categorical; use in order. */
+    --sl-color-data-16: var(--sl-color-data-sky); /** Data series 16: sky. Categorical; use in order. */
+    --sl-color-data-17: var(--sl-color-data-ice); /** Data series 17: ice. Categorical; use in order. */
+    --sl-color-data-18: var(--sl-color-data-sage); /** Data series 18: sage. Categorical; use in order. */
+    --sl-color-data-19: var(--sl-color-data-chartreuse); /** Data series 19: chartreuse. Categorical; use in order. */
+    --sl-color-data-20: var(--sl-color-data-ivory); /** Data series 20: ivory. Categorical; use in order. */
     --sl-color-accent-50: var(--sl-color-primary-50);
     --sl-color-accent-75: var(--sl-color-primary-75);
     --sl-color-accent-100: var(--sl-color-primary-100);
@@ -1045,6 +1068,26 @@
     --sl-vision-deuteranopia-color-info-on-800: var(--sl-vision-deuteranopia-color-info-50); /** Text on info 800: 10.56:1 */
     --sl-vision-deuteranopia-color-info-on-900: var(--sl-vision-deuteranopia-color-info-50); /** Text on info 900: 14.03:1 */
     --sl-vision-deuteranopia-color-info-on-1000: var(--sl-vision-deuteranopia-color-info-50); /** Text on info 1000: 17.39:1 */
+    --sl-vision-deuteranopia-color-data-1: var(--sl-vision-deuteranopia-color-data-violet); /** Data series 1: violet. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-2: var(--sl-vision-deuteranopia-color-data-coral); /** Data series 2: coral. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-3: var(--sl-vision-deuteranopia-color-data-gold); /** Data series 3: gold. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-4: var(--sl-vision-deuteranopia-color-data-burgundy); /** Data series 4: burgundy. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-5: var(--sl-vision-deuteranopia-color-data-mint); /** Data series 5: mint. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-6: var(--sl-vision-deuteranopia-color-data-navy); /** Data series 6: navy. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-7: var(--sl-vision-deuteranopia-color-data-periwinkle); /** Data series 7: periwinkle. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-8: var(--sl-vision-deuteranopia-color-data-forest); /** Data series 8: forest. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-9: var(--sl-vision-deuteranopia-color-data-lime); /** Data series 9: lime. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-10: var(--sl-vision-deuteranopia-color-data-yellow); /** Data series 10: yellow. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-11: var(--sl-vision-deuteranopia-color-data-lavender); /** Data series 11: lavender. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-12: var(--sl-vision-deuteranopia-color-data-peach); /** Data series 12: peach. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-13: var(--sl-vision-deuteranopia-color-data-cream); /** Data series 13: cream. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-14: var(--sl-vision-deuteranopia-color-data-mauve); /** Data series 14: mauve. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-15: var(--sl-vision-deuteranopia-color-data-seafoam); /** Data series 15: seafoam. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-16: var(--sl-vision-deuteranopia-color-data-sky); /** Data series 16: sky. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-17: var(--sl-vision-deuteranopia-color-data-ice); /** Data series 17: ice. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-18: var(--sl-vision-deuteranopia-color-data-sage); /** Data series 18: sage. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-19: var(--sl-vision-deuteranopia-color-data-chartreuse); /** Data series 19: chartreuse. Categorical; use in order. */
+    --sl-vision-deuteranopia-color-data-20: var(--sl-vision-deuteranopia-color-data-ivory); /** Data series 20: ivory. Categorical; use in order. */
     --sl-vision-protanopia-color-primary-on-50: var(--sl-vision-protanopia-color-primary-1000); /** Text on primary 50: 16.4:1 */
     --sl-vision-protanopia-color-primary-on-75: var(--sl-vision-protanopia-color-primary-1000); /** Text on primary 75: 15.49:1 */
     --sl-vision-protanopia-color-primary-on-100: var(--sl-vision-protanopia-color-primary-1000); /** Text on primary 100: 14.32:1 */
@@ -1141,6 +1184,26 @@
     --sl-vision-protanopia-color-info-on-800: var(--sl-vision-protanopia-color-info-50); /** Text on info 800: 10.53:1 */
     --sl-vision-protanopia-color-info-on-900: var(--sl-vision-protanopia-color-info-50); /** Text on info 900: 13.95:1 */
     --sl-vision-protanopia-color-info-on-1000: var(--sl-vision-protanopia-color-info-50); /** Text on info 1000: 17.38:1 */
+    --sl-vision-protanopia-color-data-1: var(--sl-vision-protanopia-color-data-violet); /** Data series 1: violet. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-2: var(--sl-vision-protanopia-color-data-coral); /** Data series 2: coral. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-3: var(--sl-vision-protanopia-color-data-gold); /** Data series 3: gold. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-4: var(--sl-vision-protanopia-color-data-burgundy); /** Data series 4: burgundy. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-5: var(--sl-vision-protanopia-color-data-mint); /** Data series 5: mint. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-6: var(--sl-vision-protanopia-color-data-navy); /** Data series 6: navy. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-7: var(--sl-vision-protanopia-color-data-periwinkle); /** Data series 7: periwinkle. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-8: var(--sl-vision-protanopia-color-data-forest); /** Data series 8: forest. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-9: var(--sl-vision-protanopia-color-data-lime); /** Data series 9: lime. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-10: var(--sl-vision-protanopia-color-data-yellow); /** Data series 10: yellow. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-11: var(--sl-vision-protanopia-color-data-lavender); /** Data series 11: lavender. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-12: var(--sl-vision-protanopia-color-data-peach); /** Data series 12: peach. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-13: var(--sl-vision-protanopia-color-data-cream); /** Data series 13: cream. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-14: var(--sl-vision-protanopia-color-data-mauve); /** Data series 14: mauve. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-15: var(--sl-vision-protanopia-color-data-seafoam); /** Data series 15: seafoam. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-16: var(--sl-vision-protanopia-color-data-sky); /** Data series 16: sky. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-17: var(--sl-vision-protanopia-color-data-ice); /** Data series 17: ice. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-18: var(--sl-vision-protanopia-color-data-sage); /** Data series 18: sage. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-19: var(--sl-vision-protanopia-color-data-chartreuse); /** Data series 19: chartreuse. Categorical; use in order. */
+    --sl-vision-protanopia-color-data-20: var(--sl-vision-protanopia-color-data-ivory); /** Data series 20: ivory. Categorical; use in order. */
     --sl-vision-tritanopia-color-primary-on-50: var(--sl-vision-tritanopia-color-primary-1000); /** Text on primary 50: 16.44:1 */
     --sl-vision-tritanopia-color-primary-on-75: var(--sl-vision-tritanopia-color-primary-1000); /** Text on primary 75: 15.48:1 */
     --sl-vision-tritanopia-color-primary-on-100: var(--sl-vision-tritanopia-color-primary-1000); /** Text on primary 100: 14.34:1 */
@@ -1237,6 +1300,26 @@
     --sl-vision-tritanopia-color-info-on-800: var(--sl-vision-tritanopia-color-info-50); /** Text on info 800: 10.54:1 */
     --sl-vision-tritanopia-color-info-on-900: var(--sl-vision-tritanopia-color-info-50); /** Text on info 900: 13.98:1 */
     --sl-vision-tritanopia-color-info-on-1000: var(--sl-vision-tritanopia-color-info-50); /** Text on info 1000: 17.31:1 */
+    --sl-vision-tritanopia-color-data-1: var(--sl-vision-tritanopia-color-data-violet); /** Data series 1: violet. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-2: var(--sl-vision-tritanopia-color-data-coral); /** Data series 2: coral. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-3: var(--sl-vision-tritanopia-color-data-gold); /** Data series 3: gold. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-4: var(--sl-vision-tritanopia-color-data-burgundy); /** Data series 4: burgundy. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-5: var(--sl-vision-tritanopia-color-data-mint); /** Data series 5: mint. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-6: var(--sl-vision-tritanopia-color-data-navy); /** Data series 6: navy. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-7: var(--sl-vision-tritanopia-color-data-periwinkle); /** Data series 7: periwinkle. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-8: var(--sl-vision-tritanopia-color-data-forest); /** Data series 8: forest. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-9: var(--sl-vision-tritanopia-color-data-lime); /** Data series 9: lime. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-10: var(--sl-vision-tritanopia-color-data-yellow); /** Data series 10: yellow. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-11: var(--sl-vision-tritanopia-color-data-lavender); /** Data series 11: lavender. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-12: var(--sl-vision-tritanopia-color-data-peach); /** Data series 12: peach. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-13: var(--sl-vision-tritanopia-color-data-cream); /** Data series 13: cream. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-14: var(--sl-vision-tritanopia-color-data-mauve); /** Data series 14: mauve. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-15: var(--sl-vision-tritanopia-color-data-seafoam); /** Data series 15: seafoam. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-16: var(--sl-vision-tritanopia-color-data-sky); /** Data series 16: sky. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-17: var(--sl-vision-tritanopia-color-data-ice); /** Data series 17: ice. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-18: var(--sl-vision-tritanopia-color-data-sage); /** Data series 18: sage. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-19: var(--sl-vision-tritanopia-color-data-chartreuse); /** Data series 19: chartreuse. Categorical; use in order. */
+    --sl-vision-tritanopia-color-data-20: var(--sl-vision-tritanopia-color-data-ivory); /** Data series 20: ivory. Categorical; use in order. */
     --sl-vision-achromatopsia-color-primary-on-50: var(--sl-vision-achromatopsia-color-primary-1000); /** Text on primary 50: 17.35:1 */
     --sl-vision-achromatopsia-color-primary-on-75: var(--sl-vision-achromatopsia-color-primary-1000); /** Text on primary 75: 16.42:1 */
     --sl-vision-achromatopsia-color-primary-on-100: var(--sl-vision-achromatopsia-color-primary-1000); /** Text on primary 100: 15.12:1 */
@@ -1333,23 +1416,36 @@
     --sl-vision-achromatopsia-color-info-on-800: var(--sl-vision-achromatopsia-color-info-50); /** Text on info 800: 10.57:1 */
     --sl-vision-achromatopsia-color-info-on-900: var(--sl-vision-achromatopsia-color-info-50); /** Text on info 900: 14.02:1 */
     --sl-vision-achromatopsia-color-info-on-1000: var(--sl-vision-achromatopsia-color-info-50); /** Text on info 1000: 17.33:1 */
+    --sl-vision-achromatopsia-color-data-1: var(--sl-vision-achromatopsia-color-data-violet); /** Data series 1: violet. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-2: var(--sl-vision-achromatopsia-color-data-coral); /** Data series 2: coral. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-3: var(--sl-vision-achromatopsia-color-data-gold); /** Data series 3: gold. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-4: var(--sl-vision-achromatopsia-color-data-burgundy); /** Data series 4: burgundy. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-5: var(--sl-vision-achromatopsia-color-data-mint); /** Data series 5: mint. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-6: var(--sl-vision-achromatopsia-color-data-navy); /** Data series 6: navy. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-7: var(--sl-vision-achromatopsia-color-data-periwinkle); /** Data series 7: periwinkle. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-8: var(--sl-vision-achromatopsia-color-data-forest); /** Data series 8: forest. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-9: var(--sl-vision-achromatopsia-color-data-lime); /** Data series 9: lime. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-10: var(--sl-vision-achromatopsia-color-data-yellow); /** Data series 10: yellow. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-11: var(--sl-vision-achromatopsia-color-data-lavender); /** Data series 11: lavender. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-12: var(--sl-vision-achromatopsia-color-data-peach); /** Data series 12: peach. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-13: var(--sl-vision-achromatopsia-color-data-cream); /** Data series 13: cream. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-14: var(--sl-vision-achromatopsia-color-data-mauve); /** Data series 14: mauve. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-15: var(--sl-vision-achromatopsia-color-data-seafoam); /** Data series 15: seafoam. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-16: var(--sl-vision-achromatopsia-color-data-sky); /** Data series 16: sky. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-17: var(--sl-vision-achromatopsia-color-data-ice); /** Data series 17: ice. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-18: var(--sl-vision-achromatopsia-color-data-sage); /** Data series 18: sage. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-19: var(--sl-vision-achromatopsia-color-data-chartreuse); /** Data series 19: chartreuse. Categorical; use in order. */
+    --sl-vision-achromatopsia-color-data-20: var(--sl-vision-achromatopsia-color-data-ivory); /** Data series 20: ivory. Categorical; use in order. */
     --sl-focus-ring-width: var(--sl-a11y-focus-outline-width); /** Alias for the focus outline width, kept for components that style rings with box-shadow. */
+    --sl-focus-outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring); /** The one keyboard focus ring. Every control uses it, outside or inset. */
+    --sl-focus-outline-offset: var(--sl-a11y-focus-outline-offset); /** Outside ring: a gap between the control and the ring so it never blends into the control border. The default. */
+    --sl-focus-outline-offset-inset: calc(-1 * var(--sl-a11y-focus-outline-width)); /** Inset ring: drawn just inside the control's edge, for controls packed into a container (menus, tab lists, steppers) where an outside ring would be clipped or overlap a neighbor. */
     --sl-focus-halo-spread: calc(var(--sl-a11y-focus-outline-offset) + var(--sl-a11y-focus-outline-width) + 2px); /** A soft glow just outside the focus ring: the gap, the ring, then 2px of tint. The ring carries the contrast (WCAG 1.4.11), so the glow can stay pale. */
     --sl-bar-padding: var(--sl-space-1); /** Space between the strip's edge and its controls, small so the controls nearly fill it. */
     --sl-bar-gap: var(--sl-space-1); /** Space between controls in one group. */
     --sl-bar-group-gap: var(--sl-space-2); /** Space between groups in a toolbar, wider than inside a group. */
     --sl-bar-separator-length: var(--sl-space-6); /** Divider height, shorter than the controls so the groups still read as one strip. */
     --sl-bar-separator-spacing: var(--sl-space-1); /** Extra space either side of a divider. */
-    --sl-a11y-focus-ring-radius: var(--sl-radius-focus); /** Rounds the focus ring to match the small control radius. */
-    --sl-bar-border-width: var(--sl-stroke-default); /** Strip edge thickness. */
-    --sl-bar-radius: var(--sl-radius-surface); /** Strip corners. Controls inside a toggle group take radius.item, so the inner corners follow the outer ones. */
-    --sl-check-radius: var(--sl-radius-box); /** Checkbox corners. Radios are always round. */
-    --sl-focus-shadow-3px-error: 0 0 0 3px var(--sl-status-error); /** Focus halo for a field with an error. */
-    --sl-border-default: var(--sl-scope-chrome-divider); /** Everyday dividers and control outlines. Darkens under prefers-contrast: more. */
-    --sl-focus-ring: var(--sl-interactive-default); /** Focus ring color. Uses the interactive accent so focus reads as "this is the thing you can act on". */
-    --sl-focus-outline: var(--sl-a11y-focus-outline-width) solid var(--sl-focus-ring); /** The one keyboard focus ring. Every control uses it, outside or inset. */
-    --sl-focus-outline-offset: var(--sl-a11y-focus-outline-offset); /** Outside ring: a gap between the control and the ring so it never blends into the control border. The default. */
-    --sl-focus-outline-offset-inset: calc(-1 * var(--sl-a11y-focus-outline-width)); /** Inset ring: drawn just inside the control's edge, for controls packed into a container (menus, tab lists, steppers) where an outside ring would be clipped or overlap a neighbor. */
     --sl-overlay-base: var(--sl-color-black); /** Base color for scrims behind modals. Components apply their own opacity. */
     --sl-disclosure-animation-duration: var(--sl-duration-normal); /** How long a panel takes to open or close, and the chevron to turn. */
     --sl-disclosure-animation-easing: var(--sl-easing-in-out); /** Panels grow and shrink in place, so they ease both ways. */
@@ -1426,151 +1522,136 @@
     --sl-spacing-stack-md: var(--sl-space-6);
     --sl-spacing-stack-sm: var(--sl-space-4);
     --sl-spacing-stack-xs: var(--sl-space-2);
-    --sl-font-base-font-family: var(--sl-font-family-body); /** font-family of font.base. */
-    --sl-font-base-font-size: var(--sl-font-size-md); /** font-size of font.base. */
-    --sl-font-base-font-weight: var(--sl-font-weight-normal); /** font-weight of font.base. */
-    --sl-font-base-line-height: var(--sl-line-height-md); /** line-height of font.base. */
-    --sl-font-base-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.base. */
-    --sl-font-base-selected-font-family: var(--sl-font-family-body); /** font-family of font.base-selected. */
-    --sl-font-base-selected-font-size: var(--sl-font-size-md); /** font-size of font.base-selected. */
-    --sl-font-base-selected-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.base-selected. */
-    --sl-font-base-selected-line-height: var(--sl-line-height-md); /** line-height of font.base-selected. */
-    --sl-font-base-selected-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.base-selected. */
-    --sl-font-base-label-font-family: var(--sl-font-family-body); /** font-family of font.base-label. */
-    --sl-font-base-label-font-size: var(--sl-font-size-sm); /** font-size of font.base-label. */
-    --sl-font-base-label-font-weight: var(--sl-font-weight-medium); /** font-weight of font.base-label. */
-    --sl-font-base-label-line-height: var(--sl-line-height-sm); /** line-height of font.base-label. */
-    --sl-font-base-label-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.base-label. */
-    --sl-font-base-link-font-family: var(--sl-font-family-body); /** font-family of font.base-link. */
-    --sl-font-base-link-font-size: var(--sl-font-size-md); /** font-size of font.base-link. */
-    --sl-font-base-link-font-weight: var(--sl-font-weight-normal); /** font-weight of font.base-link. */
-    --sl-font-base-link-line-height: var(--sl-line-height-md); /** line-height of font.base-link. */
-    --sl-font-base-link-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.base-link. */
-    --sl-font-base-subtitle-font-family: var(--sl-font-family-body); /** font-family of font.base-subtitle. */
-    --sl-font-base-subtitle-font-size: var(--sl-font-size-md); /** font-size of font.base-subtitle. */
-    --sl-font-base-subtitle-font-weight: var(--sl-font-weight-bold); /** font-weight of font.base-subtitle. */
-    --sl-font-base-subtitle-line-height: var(--sl-line-height-md); /** line-height of font.base-subtitle. */
-    --sl-font-base-subtitle-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.base-subtitle. */
-    --sl-font-base-trigger-font-family: var(--sl-font-family-body); /** font-family of font.base-trigger. */
-    --sl-font-base-trigger-font-size: var(--sl-font-size-md); /** font-size of font.base-trigger. */
-    --sl-font-base-trigger-font-weight: var(--sl-font-weight-medium); /** font-weight of font.base-trigger. */
-    --sl-font-base-trigger-line-height: var(--sl-line-height-sm); /** line-height of font.base-trigger. */
-    --sl-font-base-trigger-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.base-trigger. */
-    --sl-font-code-font-family: var(--sl-font-family-mono); /** font-family of font.code. */
-    --sl-font-code-font-size: var(--sl-font-size-sm); /** font-size of font.code. */
-    --sl-font-code-font-weight: var(--sl-font-weight-normal); /** font-weight of font.code. */
-    --sl-font-code-line-height: var(--sl-line-height-sm); /** line-height of font.code. */
-    --sl-font-code-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.code. */
-    --sl-font-condense-font-family: var(--sl-font-family-body); /** font-family of font.condense. */
-    --sl-font-condense-font-size: var(--sl-font-size-sm); /** font-size of font.condense. */
-    --sl-font-condense-font-weight: var(--sl-font-weight-normal); /** font-weight of font.condense. */
-    --sl-font-condense-line-height: var(--sl-line-height-sm); /** line-height of font.condense. */
-    --sl-font-condense-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.condense. */
-    --sl-font-condense-trigger-font-family: var(--sl-font-family-body); /** font-family of font.condense-trigger. */
-    --sl-font-condense-trigger-font-size: var(--sl-font-size-sm); /** font-size of font.condense-trigger. */
-    --sl-font-condense-trigger-font-weight: var(--sl-font-weight-medium); /** font-weight of font.condense-trigger. */
-    --sl-font-condense-trigger-line-height: var(--sl-line-height-sm); /** line-height of font.condense-trigger. */
-    --sl-font-condense-trigger-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.condense-trigger. */
-    --sl-font-condense-selected-font-family: var(--sl-font-family-body); /** font-family of font.condense-selected. */
-    --sl-font-condense-selected-font-size: var(--sl-font-size-sm); /** font-size of font.condense-selected. */
-    --sl-font-condense-selected-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.condense-selected. */
-    --sl-font-condense-selected-line-height: var(--sl-line-height-sm); /** line-height of font.condense-selected. */
-    --sl-font-condense-selected-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.condense-selected. */
-    --sl-font-condense-link-font-family: var(--sl-font-family-body); /** font-family of font.condense-link. */
-    --sl-font-condense-link-font-size: var(--sl-font-size-sm); /** font-size of font.condense-link. */
-    --sl-font-condense-link-font-weight: var(--sl-font-weight-normal); /** font-weight of font.condense-link. */
-    --sl-font-condense-link-line-height: var(--sl-line-height-sm); /** line-height of font.condense-link. */
-    --sl-font-condense-link-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.condense-link. */
-    --sl-font-condense-subtitle-font-family: var(--sl-font-family-body); /** font-family of font.condense-subtitle. */
-    --sl-font-condense-subtitle-font-size: var(--sl-font-size-sm); /** font-size of font.condense-subtitle. */
-    --sl-font-condense-subtitle-font-weight: var(--sl-font-weight-bold); /** font-weight of font.condense-subtitle. */
-    --sl-font-condense-subtitle-line-height: var(--sl-line-height-sm); /** line-height of font.condense-subtitle. */
-    --sl-font-condense-subtitle-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.condense-subtitle. */
-    --sl-font-condense-subtitle-label-font-family: var(--sl-font-family-body); /** font-family of font.condense-subtitle-label. */
-    --sl-font-condense-subtitle-label-font-size: var(--sl-font-size-sm); /** font-size of font.condense-subtitle-label. */
-    --sl-font-condense-subtitle-label-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.condense-subtitle-label. */
-    --sl-font-condense-subtitle-label-line-height: var(--sl-line-height-sm); /** line-height of font.condense-subtitle-label. */
-    --sl-font-condense-subtitle-label-letter-spacing: var(--sl-letter-spacing-wider); /** letter-spacing of font.condense-subtitle-label. */
-    --sl-font-magnify-font-family: var(--sl-font-family-body); /** font-family of font.magnify. */
-    --sl-font-magnify-font-size: var(--sl-font-size-lg); /** font-size of font.magnify. */
-    --sl-font-magnify-font-weight: var(--sl-font-weight-normal); /** font-weight of font.magnify. */
-    --sl-font-magnify-line-height: var(--sl-line-height-md); /** line-height of font.magnify. */
-    --sl-font-magnify-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.magnify. */
-    --sl-font-magnify-trigger-font-family: var(--sl-font-family-body); /** font-family of font.magnify-trigger. */
-    --sl-font-magnify-trigger-font-size: var(--sl-font-size-lg); /** font-size of font.magnify-trigger. */
-    --sl-font-magnify-trigger-font-weight: var(--sl-font-weight-medium); /** font-weight of font.magnify-trigger. */
-    --sl-font-magnify-trigger-line-height: var(--sl-line-height-md); /** line-height of font.magnify-trigger. */
-    --sl-font-magnify-trigger-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.magnify-trigger. */
-    --sl-font-minimize-font-family: var(--sl-font-family-body); /** font-family of font.minimize. */
-    --sl-font-minimize-font-size: var(--sl-font-size-xs); /** font-size of font.minimize. */
-    --sl-font-minimize-font-weight: var(--sl-font-weight-normal); /** font-weight of font.minimize. */
-    --sl-font-minimize-line-height: var(--sl-line-height-xs); /** line-height of font.minimize. */
-    --sl-font-minimize-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.minimize. */
-    --sl-font-minimize-trigger-font-family: var(--sl-font-family-body); /** font-family of font.minimize-trigger. */
-    --sl-font-minimize-trigger-font-size: var(--sl-font-size-xs); /** font-size of font.minimize-trigger. */
-    --sl-font-minimize-trigger-font-weight: var(--sl-font-weight-medium); /** font-weight of font.minimize-trigger. */
-    --sl-font-minimize-trigger-line-height: var(--sl-line-height-xs); /** line-height of font.minimize-trigger. */
-    --sl-font-minimize-trigger-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.minimize-trigger. */
-    --sl-font-minimize-selected-font-family: var(--sl-font-family-body); /** font-family of font.minimize-selected. */
-    --sl-font-minimize-selected-font-size: var(--sl-font-size-xs); /** font-size of font.minimize-selected. */
-    --sl-font-minimize-selected-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.minimize-selected. */
-    --sl-font-minimize-selected-line-height: var(--sl-line-height-xs); /** line-height of font.minimize-selected. */
-    --sl-font-minimize-selected-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.minimize-selected. */
-    --sl-font-minimize-link-font-family: var(--sl-font-family-body); /** font-family of font.minimize-link. */
-    --sl-font-minimize-link-font-size: var(--sl-font-size-xs); /** font-size of font.minimize-link. */
-    --sl-font-minimize-link-font-weight: var(--sl-font-weight-normal); /** font-weight of font.minimize-link. */
-    --sl-font-minimize-link-line-height: var(--sl-line-height-xs); /** line-height of font.minimize-link. */
-    --sl-font-minimize-link-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.minimize-link. */
-    --sl-font-minimize-subtitle-font-family: var(--sl-font-family-body); /** font-family of font.minimize-subtitle. */
-    --sl-font-minimize-subtitle-font-size: var(--sl-font-size-xs); /** font-size of font.minimize-subtitle. */
-    --sl-font-minimize-subtitle-font-weight: var(--sl-font-weight-bold); /** font-weight of font.minimize-subtitle. */
-    --sl-font-minimize-subtitle-line-height: var(--sl-line-height-xs); /** line-height of font.minimize-subtitle. */
-    --sl-font-minimize-subtitle-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.minimize-subtitle. */
-    --sl-font-minimize-subtitle-label-font-family: var(--sl-font-family-body); /** font-family of font.minimize-subtitle-label. */
-    --sl-font-minimize-subtitle-label-font-size: var(--sl-font-size-xs); /** font-size of font.minimize-subtitle-label. */
-    --sl-font-minimize-subtitle-label-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.minimize-subtitle-label. */
-    --sl-font-minimize-subtitle-label-line-height: var(--sl-line-height-xs); /** line-height of font.minimize-subtitle-label. */
-    --sl-font-minimize-subtitle-label-letter-spacing: var(--sl-letter-spacing-widest); /** letter-spacing of font.minimize-subtitle-label. */
-    --sl-font-maximize-2xl-font-family: var(--sl-font-family-display); /** font-family of font.maximize-2xl. */
-    --sl-font-maximize-2xl-font-size: var(--sl-font-size-2xl); /** font-size of font.maximize-2xl. */
-    --sl-font-maximize-2xl-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.maximize-2xl. */
-    --sl-font-maximize-2xl-line-height: var(--sl-line-height-2xl); /** line-height of font.maximize-2xl. */
-    --sl-font-maximize-2xl-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.maximize-2xl. */
-    --sl-font-maximize-3xl-font-family: var(--sl-font-family-display); /** font-family of font.maximize-3xl. */
-    --sl-font-maximize-3xl-font-size: var(--sl-font-size-3xl); /** font-size of font.maximize-3xl. */
-    --sl-font-maximize-3xl-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.maximize-3xl. */
-    --sl-font-maximize-3xl-line-height: var(--sl-line-height-3xl); /** line-height of font.maximize-3xl. */
-    --sl-font-maximize-3xl-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.maximize-3xl. */
-    --sl-font-maximize-4xl-font-family: var(--sl-font-family-display); /** font-family of font.maximize-4xl. */
-    --sl-font-maximize-4xl-font-size: var(--sl-font-size-4xl); /** font-size of font.maximize-4xl. */
-    --sl-font-maximize-4xl-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.maximize-4xl. */
-    --sl-font-maximize-4xl-line-height: var(--sl-line-height-4xl); /** line-height of font.maximize-4xl. */
-    --sl-font-maximize-4xl-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.maximize-4xl. */
-    --sl-font-maximize-lg-font-family: var(--sl-font-family-display); /** font-family of font.maximize-lg. */
-    --sl-font-maximize-lg-font-size: var(--sl-font-size-lg); /** font-size of font.maximize-lg. */
-    --sl-font-maximize-lg-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.maximize-lg. */
-    --sl-font-maximize-lg-line-height: var(--sl-line-height-md); /** line-height of font.maximize-lg. */
-    --sl-font-maximize-lg-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.maximize-lg. */
-    --sl-font-maximize-md-font-family: var(--sl-font-family-display); /** font-family of font.maximize-md. */
-    --sl-font-maximize-md-font-size: var(--sl-font-size-md); /** font-size of font.maximize-md. */
-    --sl-font-maximize-md-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.maximize-md. */
-    --sl-font-maximize-md-line-height: var(--sl-line-height-md); /** line-height of font.maximize-md. */
-    --sl-font-maximize-md-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.maximize-md. */
-    --sl-font-maximize-sm-font-family: var(--sl-font-family-display); /** font-family of font.maximize-sm. */
-    --sl-font-maximize-sm-font-size: var(--sl-font-size-sm); /** font-size of font.maximize-sm. */
-    --sl-font-maximize-sm-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.maximize-sm. */
-    --sl-font-maximize-sm-line-height: var(--sl-line-height-sm); /** line-height of font.maximize-sm. */
-    --sl-font-maximize-sm-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.maximize-sm. */
-    --sl-font-maximize-xl-font-family: var(--sl-font-family-display); /** font-family of font.maximize-xl. */
-    --sl-font-maximize-xl-font-size: var(--sl-font-size-xl); /** font-size of font.maximize-xl. */
-    --sl-font-maximize-xl-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.maximize-xl. */
-    --sl-font-maximize-xl-line-height: var(--sl-line-height-md); /** line-height of font.maximize-xl. */
-    --sl-font-maximize-xl-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.maximize-xl. */
-    --sl-font-maximize-xs-font-family: var(--sl-font-family-display); /** font-family of font.maximize-xs. */
-    --sl-font-maximize-xs-font-size: var(--sl-font-size-xs); /** font-size of font.maximize-xs. */
-    --sl-font-maximize-xs-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.maximize-xs. */
-    --sl-font-maximize-xs-line-height: var(--sl-line-height-xs); /** line-height of font.maximize-xs. */
-    --sl-font-maximize-xs-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.maximize-xs. */
+    --sl-font-body-base-font-family: var(--sl-font-family-body); /** font-family of font.body-base. */
+    --sl-font-body-base-font-size: var(--sl-font-size-md); /** font-size of font.body-base. */
+    --sl-font-body-base-font-weight: var(--sl-font-weight-normal); /** font-weight of font.body-base. */
+    --sl-font-body-base-line-height: var(--sl-line-height-md); /** line-height of font.body-base. */
+    --sl-font-body-base-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.body-base. */
+    --sl-font-selected-base-font-family: var(--sl-font-family-body); /** font-family of font.selected-base. */
+    --sl-font-selected-base-font-size: var(--sl-font-size-md); /** font-size of font.selected-base. */
+    --sl-font-selected-base-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.selected-base. */
+    --sl-font-selected-base-line-height: var(--sl-line-height-md); /** line-height of font.selected-base. */
+    --sl-font-selected-base-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.selected-base. */
+    --sl-font-label-base-font-family: var(--sl-font-family-body); /** font-family of font.label-base. */
+    --sl-font-label-base-font-size: var(--sl-font-size-sm); /** font-size of font.label-base. */
+    --sl-font-label-base-font-weight: var(--sl-font-weight-medium); /** font-weight of font.label-base. */
+    --sl-font-label-base-line-height: var(--sl-line-height-sm); /** line-height of font.label-base. */
+    --sl-font-label-base-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.label-base. */
+    --sl-font-link-base-font-family: var(--sl-font-family-body); /** font-family of font.link-base. */
+    --sl-font-link-base-font-size: var(--sl-font-size-md); /** font-size of font.link-base. */
+    --sl-font-link-base-font-weight: var(--sl-font-weight-normal); /** font-weight of font.link-base. */
+    --sl-font-link-base-line-height: var(--sl-line-height-md); /** line-height of font.link-base. */
+    --sl-font-link-base-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.link-base. */
+    --sl-font-subtitle-base-font-family: var(--sl-font-family-body); /** font-family of font.subtitle-base. */
+    --sl-font-subtitle-base-font-size: var(--sl-font-size-md); /** font-size of font.subtitle-base. */
+    --sl-font-subtitle-base-font-weight: var(--sl-font-weight-bold); /** font-weight of font.subtitle-base. */
+    --sl-font-subtitle-base-line-height: var(--sl-line-height-md); /** line-height of font.subtitle-base. */
+    --sl-font-subtitle-base-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.subtitle-base. */
+    --sl-font-trigger-base-font-family: var(--sl-font-family-body); /** font-family of font.trigger-base. */
+    --sl-font-trigger-base-font-size: var(--sl-font-size-md); /** font-size of font.trigger-base. */
+    --sl-font-trigger-base-font-weight: var(--sl-font-weight-medium); /** font-weight of font.trigger-base. */
+    --sl-font-trigger-base-line-height: var(--sl-line-height-sm); /** line-height of font.trigger-base. */
+    --sl-font-trigger-base-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.trigger-base. */
+    --sl-font-title-base-font-family: var(--sl-font-family-display); /** font-family of font.title-base. */
+    --sl-font-title-base-font-size: var(--sl-font-size-md); /** font-size of font.title-base. */
+    --sl-font-title-base-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.title-base. */
+    --sl-font-title-base-line-height: var(--sl-line-height-md); /** line-height of font.title-base. */
+    --sl-font-title-base-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.title-base. */
+    --sl-font-code-condense-font-family: var(--sl-font-family-mono); /** font-family of font.code-condense. */
+    --sl-font-code-condense-font-size: var(--sl-font-size-sm); /** font-size of font.code-condense. */
+    --sl-font-code-condense-font-weight: var(--sl-font-weight-normal); /** font-weight of font.code-condense. */
+    --sl-font-code-condense-line-height: var(--sl-line-height-sm); /** line-height of font.code-condense. */
+    --sl-font-code-condense-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.code-condense. */
+    --sl-font-body-condense-font-family: var(--sl-font-family-body); /** font-family of font.body-condense. */
+    --sl-font-body-condense-font-size: var(--sl-font-size-sm); /** font-size of font.body-condense. */
+    --sl-font-body-condense-font-weight: var(--sl-font-weight-normal); /** font-weight of font.body-condense. */
+    --sl-font-body-condense-line-height: var(--sl-line-height-sm); /** line-height of font.body-condense. */
+    --sl-font-body-condense-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.body-condense. */
+    --sl-font-trigger-condense-font-family: var(--sl-font-family-body); /** font-family of font.trigger-condense. */
+    --sl-font-trigger-condense-font-size: var(--sl-font-size-sm); /** font-size of font.trigger-condense. */
+    --sl-font-trigger-condense-font-weight: var(--sl-font-weight-medium); /** font-weight of font.trigger-condense. */
+    --sl-font-trigger-condense-line-height: var(--sl-line-height-sm); /** line-height of font.trigger-condense. */
+    --sl-font-trigger-condense-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.trigger-condense. */
+    --sl-font-selected-condense-font-family: var(--sl-font-family-body); /** font-family of font.selected-condense. */
+    --sl-font-selected-condense-font-size: var(--sl-font-size-sm); /** font-size of font.selected-condense. */
+    --sl-font-selected-condense-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.selected-condense. */
+    --sl-font-selected-condense-line-height: var(--sl-line-height-sm); /** line-height of font.selected-condense. */
+    --sl-font-selected-condense-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.selected-condense. */
+    --sl-font-link-condense-font-family: var(--sl-font-family-body); /** font-family of font.link-condense. */
+    --sl-font-link-condense-font-size: var(--sl-font-size-sm); /** font-size of font.link-condense. */
+    --sl-font-link-condense-font-weight: var(--sl-font-weight-normal); /** font-weight of font.link-condense. */
+    --sl-font-link-condense-line-height: var(--sl-line-height-sm); /** line-height of font.link-condense. */
+    --sl-font-link-condense-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.link-condense. */
+    --sl-font-subtitle-condense-font-family: var(--sl-font-family-body); /** font-family of font.subtitle-condense. */
+    --sl-font-subtitle-condense-font-size: var(--sl-font-size-sm); /** font-size of font.subtitle-condense. */
+    --sl-font-subtitle-condense-font-weight: var(--sl-font-weight-bold); /** font-weight of font.subtitle-condense. */
+    --sl-font-subtitle-condense-line-height: var(--sl-line-height-sm); /** line-height of font.subtitle-condense. */
+    --sl-font-subtitle-condense-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.subtitle-condense. */
+    --sl-font-eyebrow-condense-font-family: var(--sl-font-family-body); /** font-family of font.eyebrow-condense. */
+    --sl-font-eyebrow-condense-font-size: var(--sl-font-size-sm); /** font-size of font.eyebrow-condense. */
+    --sl-font-eyebrow-condense-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.eyebrow-condense. */
+    --sl-font-eyebrow-condense-line-height: var(--sl-line-height-sm); /** line-height of font.eyebrow-condense. */
+    --sl-font-eyebrow-condense-letter-spacing: var(--sl-letter-spacing-wider); /** letter-spacing of font.eyebrow-condense. */
+    --sl-font-title-condense-font-family: var(--sl-font-family-display); /** font-family of font.title-condense. */
+    --sl-font-title-condense-font-size: var(--sl-font-size-sm); /** font-size of font.title-condense. */
+    --sl-font-title-condense-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.title-condense. */
+    --sl-font-title-condense-line-height: var(--sl-line-height-sm); /** line-height of font.title-condense. */
+    --sl-font-title-condense-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.title-condense. */
+    --sl-font-body-magnify-font-family: var(--sl-font-family-body); /** font-family of font.body-magnify. */
+    --sl-font-body-magnify-font-size: var(--sl-font-size-lg); /** font-size of font.body-magnify. */
+    --sl-font-body-magnify-font-weight: var(--sl-font-weight-normal); /** font-weight of font.body-magnify. */
+    --sl-font-body-magnify-line-height: var(--sl-line-height-md); /** line-height of font.body-magnify. */
+    --sl-font-body-magnify-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.body-magnify. */
+    --sl-font-trigger-magnify-font-family: var(--sl-font-family-body); /** font-family of font.trigger-magnify. */
+    --sl-font-trigger-magnify-font-size: var(--sl-font-size-lg); /** font-size of font.trigger-magnify. */
+    --sl-font-trigger-magnify-font-weight: var(--sl-font-weight-medium); /** font-weight of font.trigger-magnify. */
+    --sl-font-trigger-magnify-line-height: var(--sl-line-height-md); /** line-height of font.trigger-magnify. */
+    --sl-font-trigger-magnify-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.trigger-magnify. */
+    --sl-font-title-magnify-font-family: var(--sl-font-family-display); /** font-family of font.title-magnify. */
+    --sl-font-title-magnify-font-size: var(--sl-font-size-lg); /** font-size of font.title-magnify. */
+    --sl-font-title-magnify-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.title-magnify. */
+    --sl-font-title-magnify-line-height: var(--sl-line-height-md); /** line-height of font.title-magnify. */
+    --sl-font-title-magnify-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.title-magnify. */
+    --sl-font-body-minimize-font-family: var(--sl-font-family-body); /** font-family of font.body-minimize. */
+    --sl-font-body-minimize-font-size: var(--sl-font-size-xs); /** font-size of font.body-minimize. */
+    --sl-font-body-minimize-font-weight: var(--sl-font-weight-normal); /** font-weight of font.body-minimize. */
+    --sl-font-body-minimize-line-height: var(--sl-line-height-xs); /** line-height of font.body-minimize. */
+    --sl-font-body-minimize-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.body-minimize. */
+    --sl-font-trigger-minimize-font-family: var(--sl-font-family-body); /** font-family of font.trigger-minimize. */
+    --sl-font-trigger-minimize-font-size: var(--sl-font-size-xs); /** font-size of font.trigger-minimize. */
+    --sl-font-trigger-minimize-font-weight: var(--sl-font-weight-medium); /** font-weight of font.trigger-minimize. */
+    --sl-font-trigger-minimize-line-height: var(--sl-line-height-xs); /** line-height of font.trigger-minimize. */
+    --sl-font-trigger-minimize-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.trigger-minimize. */
+    --sl-font-selected-minimize-font-family: var(--sl-font-family-body); /** font-family of font.selected-minimize. */
+    --sl-font-selected-minimize-font-size: var(--sl-font-size-xs); /** font-size of font.selected-minimize. */
+    --sl-font-selected-minimize-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.selected-minimize. */
+    --sl-font-selected-minimize-line-height: var(--sl-line-height-xs); /** line-height of font.selected-minimize. */
+    --sl-font-selected-minimize-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.selected-minimize. */
+    --sl-font-link-minimize-font-family: var(--sl-font-family-body); /** font-family of font.link-minimize. */
+    --sl-font-link-minimize-font-size: var(--sl-font-size-xs); /** font-size of font.link-minimize. */
+    --sl-font-link-minimize-font-weight: var(--sl-font-weight-normal); /** font-weight of font.link-minimize. */
+    --sl-font-link-minimize-line-height: var(--sl-line-height-xs); /** line-height of font.link-minimize. */
+    --sl-font-link-minimize-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.link-minimize. */
+    --sl-font-subtitle-minimize-font-family: var(--sl-font-family-body); /** font-family of font.subtitle-minimize. */
+    --sl-font-subtitle-minimize-font-size: var(--sl-font-size-xs); /** font-size of font.subtitle-minimize. */
+    --sl-font-subtitle-minimize-font-weight: var(--sl-font-weight-bold); /** font-weight of font.subtitle-minimize. */
+    --sl-font-subtitle-minimize-line-height: var(--sl-line-height-xs); /** line-height of font.subtitle-minimize. */
+    --sl-font-subtitle-minimize-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.subtitle-minimize. */
+    --sl-font-eyebrow-minimize-font-family: var(--sl-font-family-body); /** font-family of font.eyebrow-minimize. */
+    --sl-font-eyebrow-minimize-font-size: var(--sl-font-size-xs); /** font-size of font.eyebrow-minimize. */
+    --sl-font-eyebrow-minimize-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.eyebrow-minimize. */
+    --sl-font-eyebrow-minimize-line-height: var(--sl-line-height-xs); /** line-height of font.eyebrow-minimize. */
+    --sl-font-eyebrow-minimize-letter-spacing: var(--sl-letter-spacing-widest); /** letter-spacing of font.eyebrow-minimize. */
+    --sl-font-title-amplify-font-family: var(--sl-font-family-display); /** font-family of font.title-amplify. */
+    --sl-font-title-amplify-font-size: var(--sl-font-size-2xl); /** font-size of font.title-amplify. */
+    --sl-font-title-amplify-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.title-amplify. */
+    --sl-font-title-amplify-line-height: var(--sl-line-height-2xl); /** line-height of font.title-amplify. */
+    --sl-font-title-amplify-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.title-amplify. */
+    --sl-font-title-maximize-font-family: var(--sl-font-family-display); /** font-family of font.title-maximize. */
+    --sl-font-title-maximize-font-size: var(--sl-font-size-4xl); /** font-size of font.title-maximize. */
+    --sl-font-title-maximize-font-weight: var(--sl-font-weight-semibold); /** font-weight of font.title-maximize. */
+    --sl-font-title-maximize-line-height: var(--sl-line-height-4xl); /** line-height of font.title-maximize. */
+    --sl-font-title-maximize-letter-spacing: var(--sl-letter-spacing-normal); /** letter-spacing of font.title-maximize. */
     --sl-pair-ember-dune-bg: var(--sl-color-secondary-600); /** Background. */
     --sl-pair-ember-dune-fg: var(--sl-color-tertiary-50); /** Text, icons and strong borders. 5.93:1 on bg. */
     --sl-pair-ember-dune-accent: var(--sl-color-tertiary-50); /** Links, buttons and focus rings. The pair names no accent, so this is fg. */
@@ -1595,13 +1676,14 @@
     --sl-scope-neutral-divider: var(--sl-color-neutral-300); /** neutral divider: 300 in light, 800 in dark */
     --sl-scope-neutral-fg: var(--sl-color-neutral-1200); /** neutral fg: 1200 in light, white in dark */
     --sl-scope-neutral-fg-secondary: var(--sl-color-neutral-1000); /** neutral fg-secondary: 1000 in light, 300 in dark */
-    --sl-scope-neutral-fg-tertiary: var(--sl-color-neutral-900); /** neutral fg-tertiary: 900 in light, 400 in dark */
+    --sl-scope-neutral-fg-tertiary: var(--sl-color-neutral-900); /** neutral fg-tertiary: 900 in light, 600 in dark */
+    --sl-scope-neutral-fg-disabled: var(--sl-color-neutral-500); /** neutral fg-disabled: 500 in light, 900 in dark */
     --sl-scope-neutral-focus: var(--sl-color-neutral-800); /** neutral focus: 800 in light, 400 in dark */
     --sl-scope-neutral-canvas: var(--sl-color-white); /** neutral canvas: white in light, 1200 in dark */
     --sl-scope-neutral-raised: var(--sl-color-neutral-50); /** neutral raised: 50 in light, 1100 in dark */
-    --sl-scope-neutral-overlay: var(--sl-color-neutral-100); /** neutral overlay: 100 in light, 1000 in dark */
+    --sl-scope-neutral-overlay: var(--sl-color-neutral-100); /** neutral overlay: 100 in light, 1100 in dark */
     --sl-scope-neutral-modal: var(--sl-color-white); /** neutral modal: white in light, 1100 in dark */
-    --sl-scope-neutral-tray: var(--sl-color-neutral-50); /** neutral tray: 50 in light, 1000 in dark */
+    --sl-scope-neutral-tray: var(--sl-color-neutral-50); /** neutral tray: 50 in light, 1100 in dark */
     --sl-scope-neutral-inverse: var(--sl-color-neutral-1100); /** neutral inverse: 1100 in light, 900 in dark */
     --sl-scope-neutral-track: var(--sl-color-neutral-200); /** neutral track: 200 in light, 1100 in dark */
     --sl-scope-primary-solid: var(--sl-color-primary-600); /** primary solid: 600 in light, 400 in dark */
@@ -1722,6 +1804,11 @@
     --sl-avatar-size-md: var(--sl-space-12); /** 48px, the default. */
     --sl-avatar-size-lg: var(--sl-space-16); /** 64px, in cards and headers. */
     --sl-avatar-size-xl: var(--sl-space-24); /** 96px, on a profile page. */
+    --sl-avatar-initials-font-size-xs: var(--sl-font-size-xs); /** Sized to the avatar, not a text style: initials have to fit inside the circle at each size. The rest of the type is title-base. */
+    --sl-avatar-initials-font-size-sm: var(--sl-font-size-sm); /** Sized to the avatar, not a text style: initials have to fit inside the circle at each size. The rest of the type is title-base. */
+    --sl-avatar-initials-font-size-md: var(--sl-font-size-md); /** Sized to the avatar, not a text style: initials have to fit inside the circle at each size. The rest of the type is title-base. */
+    --sl-avatar-initials-font-size-lg: var(--sl-font-size-lg); /** Sized to the avatar, not a text style: initials have to fit inside the circle at each size. The rest of the type is title-base. */
+    --sl-avatar-initials-font-size-xl: var(--sl-font-size-2xl); /** Sized to the avatar, not a text style: initials have to fit inside the circle at each size. The rest of the type is title-base. */
     --sl-drawer-handle-width: var(--sl-space-10); /** Grab bar length. */
     --sl-drawer-handle-height: var(--sl-space-1); /** Grab bar thickness. */
     --sl-popover-text-max-width: var(--sl-measure-narrow); /** Keeps the title and description to a readable line length. The popup itself has no fixed cap, so wider content such as a calendar or a form fits; it stops at the space Base UI reports beside the trigger. */
@@ -1757,7 +1844,11 @@
     --sl-color-chrome-on-1000: var(--sl-color-neutral-on-1000);
     --sl-color-chrome-on-1100: var(--sl-color-neutral-on-1100);
     --sl-color-chrome-on-1200: var(--sl-color-neutral-on-1200);
+    --sl-a11y-focus-ring-radius: var(--sl-radius-focus); /** Rounds the focus ring to match the small control radius. */
+    --sl-bar-border-width: var(--sl-stroke-default); /** Strip edge thickness. */
+    --sl-bar-radius: var(--sl-radius-surface); /** Strip corners. Controls inside a toggle group take radius.item, so the inner corners follow the outer ones. */
     --sl-check-border-width: var(--sl-stroke-default); /** Edge thickness. */
+    --sl-check-radius: var(--sl-radius-box); /** Checkbox corners. Radios are always round. */
     --sl-check-transition: var(--sl-transition-input); /** Changes at the same speed as a field. */
     --sl-status-error: var(--sl-scope-error-signal); /** Errors and destructive actions. */
     --sl-status-error-dark: var(--sl-scope-error-fg); /** Error color for text or icons that need more contrast than the base color. */
@@ -1792,49 +1883,51 @@
     --sl-table-header-height: var(--sl-control-height-md); /** Header row height: the regular control height, a little taller than rows so the header reads as its own band. */
     --sl-table-cell-padding-inline: var(--sl-control-padding-inline-sm); /** Space either side of cell text, matching small controls. */
     --sl-table-radius: var(--sl-radius-surface); /** Grid corners, like any card or panel. */
-    --sl-font-base-font: var(--sl-font-base-font-weight) var(--sl-font-base-font-size) / var(--sl-font-base-line-height) var(--sl-font-base-font-family); /** Body copy in the base tier, the default UI and body text. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-base-selected-font: var(--sl-font-base-selected-font-weight) var(--sl-font-base-selected-font-size) / var(--sl-font-base-selected-line-height) var(--sl-font-base-selected-font-family); /** The selected or current item in the base tier (the default UI and body text): selected tabs and toggles, the current nav item or page. Base body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-base-label-font: var(--sl-font-base-label-font-weight) var(--sl-font-base-label-font-size) / var(--sl-font-base-label-line-height) var(--sl-font-base-label-font-family); /** Form labels in the base tier, the default UI and body text. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-base-link-font: var(--sl-font-base-link-font-weight) var(--sl-font-base-link-font-size) / var(--sl-font-base-link-line-height) var(--sl-font-base-link-font-family); /** Links in the base tier. The same type as base body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-base-subtitle-font: var(--sl-font-base-subtitle-font-weight) var(--sl-font-base-subtitle-font-size) / var(--sl-font-base-subtitle-line-height) var(--sl-font-base-subtitle-font-family); /** Subtitles in the base tier, the default UI and body text. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-base-trigger-font: var(--sl-font-base-trigger-font-weight) var(--sl-font-base-trigger-font-size) / var(--sl-font-base-trigger-line-height) var(--sl-font-base-trigger-font-family); /** Buttons and triggers in the base tier, the default UI and body text. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-code-font: var(--sl-font-code-font-weight) var(--sl-font-code-font-size) / var(--sl-font-code-line-height) var(--sl-font-code-font-family); /** Code uses the mono family so characters line up. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-condense-font: var(--sl-font-condense-font-weight) var(--sl-font-condense-font-size) / var(--sl-font-condense-line-height) var(--sl-font-condense-font-family); /** Body copy in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-condense-trigger-font: var(--sl-font-condense-trigger-font-weight) var(--sl-font-condense-trigger-font-size) / var(--sl-font-condense-trigger-line-height) var(--sl-font-condense-trigger-font-family); /** Buttons and triggers in the condense tier (dense UI): condense body text at medium, like base-trigger one tier down. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-condense-selected-font: var(--sl-font-condense-selected-font-weight) var(--sl-font-condense-selected-font-size) / var(--sl-font-condense-selected-line-height) var(--sl-font-condense-selected-font-family); /** The selected or current item in the condense tier (dense UI text): selected tabs and toggles, the current nav item or page. Condense body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-condense-link-font: var(--sl-font-condense-link-font-weight) var(--sl-font-condense-link-font-size) / var(--sl-font-condense-link-line-height) var(--sl-font-condense-link-font-family); /** Links in the condense tier. The same type as condense body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-condense-subtitle-font: var(--sl-font-condense-subtitle-font-weight) var(--sl-font-condense-subtitle-font-size) / var(--sl-font-condense-subtitle-line-height) var(--sl-font-condense-subtitle-font-family); /** Subtitles in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-condense-subtitle-label-font: var(--sl-font-condense-subtitle-label-font-weight) var(--sl-font-condense-subtitle-label-font-size) / var(--sl-font-condense-subtitle-label-line-height) var(--sl-font-condense-subtitle-label-font-family); /** Small uppercase eyebrow labels in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-magnify-font: var(--sl-font-magnify-font-weight) var(--sl-font-magnify-font-size) / var(--sl-font-magnify-line-height) var(--sl-font-magnify-font-family); /** Body copy in the magnify tier, emphasized body text (lead paragraphs). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-magnify-trigger-font: var(--sl-font-magnify-trigger-font-weight) var(--sl-font-magnify-trigger-font-size) / var(--sl-font-magnify-trigger-line-height) var(--sl-font-magnify-trigger-font-family); /** Buttons and triggers in the magnify tier (emphasized, larger UI): magnify body text at medium, like base-trigger one tier up. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-minimize-font: var(--sl-font-minimize-font-weight) var(--sl-font-minimize-font-size) / var(--sl-font-minimize-line-height) var(--sl-font-minimize-font-family); /** Body copy in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-minimize-trigger-font: var(--sl-font-minimize-trigger-font-weight) var(--sl-font-minimize-trigger-font-size) / var(--sl-font-minimize-trigger-line-height) var(--sl-font-minimize-trigger-font-family); /** Buttons and triggers in the minimize tier (the smallest UI): minimize body text at medium, like base-trigger one tier down. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-minimize-selected-font: var(--sl-font-minimize-selected-font-weight) var(--sl-font-minimize-selected-font-size) / var(--sl-font-minimize-selected-line-height) var(--sl-font-minimize-selected-font-family); /** The selected or current item in the minimize tier (the smallest functional text): selected tabs and toggles, the current nav item or page. Minimize body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-minimize-link-font: var(--sl-font-minimize-link-font-weight) var(--sl-font-minimize-link-font-size) / var(--sl-font-minimize-link-line-height) var(--sl-font-minimize-link-font-family); /** Links in the minimize tier. The same type as minimize body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-minimize-subtitle-font: var(--sl-font-minimize-subtitle-font-weight) var(--sl-font-minimize-subtitle-font-size) / var(--sl-font-minimize-subtitle-line-height) var(--sl-font-minimize-subtitle-font-family); /** Subtitles in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-minimize-subtitle-label-font: var(--sl-font-minimize-subtitle-label-font-weight) var(--sl-font-minimize-subtitle-label-font-size) / var(--sl-font-minimize-subtitle-label-line-height) var(--sl-font-minimize-subtitle-label-font-family); /** Small uppercase eyebrow labels in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-maximize-2xl-font: var(--sl-font-maximize-2xl-font-weight) var(--sl-font-maximize-2xl-font-size) / var(--sl-font-maximize-2xl-line-height) var(--sl-font-maximize-2xl-font-family); /** Display text at 2xl, for headings and hero copy. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-maximize-3xl-font: var(--sl-font-maximize-3xl-font-weight) var(--sl-font-maximize-3xl-font-size) / var(--sl-font-maximize-3xl-line-height) var(--sl-font-maximize-3xl-font-family); /** Display text at 3xl, for headings and hero copy. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-maximize-4xl-font: var(--sl-font-maximize-4xl-font-weight) var(--sl-font-maximize-4xl-font-size) / var(--sl-font-maximize-4xl-line-height) var(--sl-font-maximize-4xl-font-family); /** Display text at 4xl, for headings and hero copy. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-maximize-lg-font: var(--sl-font-maximize-lg-font-weight) var(--sl-font-maximize-lg-font-size) / var(--sl-font-maximize-lg-line-height) var(--sl-font-maximize-lg-font-family); /** Display text at lg, for headings and hero copy. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-maximize-md-font: var(--sl-font-maximize-md-font-weight) var(--sl-font-maximize-md-font-size) / var(--sl-font-maximize-md-line-height) var(--sl-font-maximize-md-font-family); /** Display text at md, for headings and hero copy. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-maximize-sm-font: var(--sl-font-maximize-sm-font-weight) var(--sl-font-maximize-sm-font-size) / var(--sl-font-maximize-sm-line-height) var(--sl-font-maximize-sm-font-family); /** Display text at sm, for headings and hero copy. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-maximize-xl-font: var(--sl-font-maximize-xl-font-weight) var(--sl-font-maximize-xl-font-size) / var(--sl-font-maximize-xl-line-height) var(--sl-font-maximize-xl-font-family); /** Display text at xl, for headings and hero copy. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-font-maximize-xs-font: var(--sl-font-maximize-xs-font-weight) var(--sl-font-maximize-xs-font-size) / var(--sl-font-maximize-xs-line-height) var(--sl-font-maximize-xs-font-family); /** Display text at xs, for headings and hero copy. As a font shorthand; letter-spacing and text-transform are separate. */
-    --sl-emphasis-quiet-fg: var(--sl-scope-chrome-fg); /** quiet: outline in chrome (neutral) */
+    --sl-font-body-base-font: var(--sl-font-body-base-font-weight) var(--sl-font-body-base-font-size) / var(--sl-font-body-base-line-height) var(--sl-font-body-base-font-family); /** Body copy in the base tier, the default UI and body text. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-selected-base-font: var(--sl-font-selected-base-font-weight) var(--sl-font-selected-base-font-size) / var(--sl-font-selected-base-line-height) var(--sl-font-selected-base-font-family); /** The selected or current item in the base tier (the default UI and body text): selected tabs and toggles, the current nav item or page. Base body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-label-base-font: var(--sl-font-label-base-font-weight) var(--sl-font-label-base-font-size) / var(--sl-font-label-base-line-height) var(--sl-font-label-base-font-family); /** Form labels in the base tier, the default UI and body text. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-link-base-font: var(--sl-font-link-base-font-weight) var(--sl-font-link-base-font-size) / var(--sl-font-link-base-line-height) var(--sl-font-link-base-font-family); /** Links in the base tier. The same type as base body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-subtitle-base-font: var(--sl-font-subtitle-base-font-weight) var(--sl-font-subtitle-base-font-size) / var(--sl-font-subtitle-base-line-height) var(--sl-font-subtitle-base-font-family); /** Subtitles in the base tier, the default UI and body text. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-trigger-base-font: var(--sl-font-trigger-base-font-weight) var(--sl-font-trigger-base-font-size) / var(--sl-font-trigger-base-line-height) var(--sl-font-trigger-base-font-family); /** Buttons and triggers in the base tier, the default UI and body text. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-title-base-font: var(--sl-font-title-base-font-weight) var(--sl-font-title-base-font-size) / var(--sl-font-title-base-line-height) var(--sl-font-title-base-font-family); /** Titles in the base tier: a toast, an accordion row, a list item heading. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-code-condense-font: var(--sl-font-code-condense-font-weight) var(--sl-font-code-condense-font-size) / var(--sl-font-code-condense-line-height) var(--sl-font-code-condense-font-family); /** Code uses the mono family so characters line up. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-body-condense-font: var(--sl-font-body-condense-font-weight) var(--sl-font-body-condense-font-size) / var(--sl-font-body-condense-line-height) var(--sl-font-body-condense-font-family); /** Body copy in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-trigger-condense-font: var(--sl-font-trigger-condense-font-weight) var(--sl-font-trigger-condense-font-size) / var(--sl-font-trigger-condense-line-height) var(--sl-font-trigger-condense-font-family); /** Buttons and triggers in the condense tier (dense UI): condense body text at medium, like base-trigger one tier down. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-selected-condense-font: var(--sl-font-selected-condense-font-weight) var(--sl-font-selected-condense-font-size) / var(--sl-font-selected-condense-line-height) var(--sl-font-selected-condense-font-family); /** The selected or current item in the condense tier (dense UI text): selected tabs and toggles, the current nav item or page. Condense body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-link-condense-font: var(--sl-font-link-condense-font-weight) var(--sl-font-link-condense-font-size) / var(--sl-font-link-condense-line-height) var(--sl-font-link-condense-font-family); /** Links in the condense tier. The same type as condense body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-subtitle-condense-font: var(--sl-font-subtitle-condense-font-weight) var(--sl-font-subtitle-condense-font-size) / var(--sl-font-subtitle-condense-line-height) var(--sl-font-subtitle-condense-font-family); /** Subtitles in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-eyebrow-condense-font: var(--sl-font-eyebrow-condense-font-weight) var(--sl-font-eyebrow-condense-font-size) / var(--sl-font-eyebrow-condense-line-height) var(--sl-font-eyebrow-condense-font-family); /** Small uppercase eyebrow labels in the condense tier, dense UI text (tables, secondary labels). As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-title-condense-font: var(--sl-font-title-condense-font-weight) var(--sl-font-title-condense-font-size) / var(--sl-font-title-condense-line-height) var(--sl-font-title-condense-font-family); /** Titles in the condense tier: group headers in tables, menus and dense panels. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-body-magnify-font: var(--sl-font-body-magnify-font-weight) var(--sl-font-body-magnify-font-size) / var(--sl-font-body-magnify-line-height) var(--sl-font-body-magnify-font-family); /** Body copy in the magnify tier, emphasized body text (lead paragraphs). As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-trigger-magnify-font: var(--sl-font-trigger-magnify-font-weight) var(--sl-font-trigger-magnify-font-size) / var(--sl-font-trigger-magnify-line-height) var(--sl-font-trigger-magnify-font-family); /** Buttons and triggers in the magnify tier (emphasized, larger UI): magnify body text at medium, like base-trigger one tier up. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-title-magnify-font: var(--sl-font-title-magnify-font-weight) var(--sl-font-title-magnify-font-size) / var(--sl-font-title-magnify-line-height) var(--sl-font-title-magnify-font-family); /** Titles in the magnify tier: popovers, cards and fieldsets. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-body-minimize-font: var(--sl-font-body-minimize-font-weight) var(--sl-font-body-minimize-font-size) / var(--sl-font-body-minimize-line-height) var(--sl-font-body-minimize-font-family); /** Body copy in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-trigger-minimize-font: var(--sl-font-trigger-minimize-font-weight) var(--sl-font-trigger-minimize-font-size) / var(--sl-font-trigger-minimize-line-height) var(--sl-font-trigger-minimize-font-family); /** Buttons and triggers in the minimize tier (the smallest UI): minimize body text at medium, like base-trigger one tier down. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-selected-minimize-font: var(--sl-font-selected-minimize-font-weight) var(--sl-font-selected-minimize-font-size) / var(--sl-font-selected-minimize-line-height) var(--sl-font-selected-minimize-font-family); /** The selected or current item in the minimize tier (the smallest functional text): selected tabs and toggles, the current nav item or page. Minimize body text at semibold, so selection reads without changing size. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-link-minimize-font: var(--sl-font-link-minimize-font-weight) var(--sl-font-link-minimize-font-size) / var(--sl-font-link-minimize-line-height) var(--sl-font-link-minimize-font-family); /** Links in the minimize tier. The same type as minimize body text: a link stands out by color and underline, not by its type. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-subtitle-minimize-font: var(--sl-font-subtitle-minimize-font-weight) var(--sl-font-subtitle-minimize-font-size) / var(--sl-font-subtitle-minimize-line-height) var(--sl-font-subtitle-minimize-font-family); /** Subtitles in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-eyebrow-minimize-font: var(--sl-font-eyebrow-minimize-font-weight) var(--sl-font-eyebrow-minimize-font-size) / var(--sl-font-eyebrow-minimize-line-height) var(--sl-font-eyebrow-minimize-font-family); /** Small uppercase eyebrow labels in the minimize tier, the smallest functional text (captions, fine print). As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-title-amplify-font: var(--sl-font-title-amplify-font-weight) var(--sl-font-title-amplify-font-size) / var(--sl-font-title-amplify-line-height) var(--sl-font-title-amplify-font-family); /** Titles in the amplify tier: dialogs, drawers and page sections. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-font-title-maximize-font: var(--sl-font-title-maximize-font-weight) var(--sl-font-title-maximize-font-size) / var(--sl-font-title-maximize-line-height) var(--sl-font-title-maximize-font-family); /** Titles in the maximize tier: the page head. Titles use the display family; the tier sets the size. As a font shorthand; letter-spacing and text-transform are separate. */
+    --sl-emphasis-quiet-fg: var(--sl-scope-chrome-fg); /** quiet in default: outline in chrome (neutral) */
     --sl-pair-ember-dune-hover: color-mix(in oklab, var(--sl-pair-ember-dune-accent) 85%, var(--sl-pair-ember-dune-bg)); /** Accent on hover: accent moved 15% toward bg. 4.76:1 against bg, which is the button label. */
     --sl-pair-ember-dune-active: var(--sl-pair-ember-dune-accent); /** Accent while pressed: the accent itself, because moving it would drop the button label below AA. */
     --sl-pair-ember-dune-subtle: color-mix(in oklab, var(--sl-pair-ember-dune-accent) 12%, var(--sl-pair-ember-dune-bg)); /** Accent wash for highlighted items, selection and mark: accent 12% into bg. fg on it is 4.63:1. */
     --sl-pair-ember-dune-muted: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 6%, var(--sl-pair-ember-dune-bg)); /** Inset background for code: fg 6% into bg. fg on it is 5.22:1. */
+    --sl-pair-ember-dune-bg-hover: color-mix(in oklab, var(--sl-pair-ember-dune-fg) 8%, var(--sl-pair-ember-dune-bg)); /** Background on hover, when the pair paints a control: fg 8% into bg. fg on it is 4.99:1. */
     --sl-pair-mirage-deep-hover: color-mix(in oklab, var(--sl-pair-mirage-deep-accent) 85%, var(--sl-pair-mirage-deep-fg)); /** Accent on hover: accent moved 15% toward fg. 10.13:1 against bg, which is the button label. */
     --sl-pair-mirage-deep-active: color-mix(in oklab, var(--sl-pair-mirage-deep-accent) 70%, var(--sl-pair-mirage-deep-fg)); /** Accent while pressed: accent moved 30% toward fg. 10.59:1 against bg, which is the button label. */
     --sl-pair-mirage-deep-subtle: color-mix(in oklab, var(--sl-pair-mirage-deep-accent) 12%, var(--sl-pair-mirage-deep-bg)); /** Accent wash for highlighted items, selection and mark: accent 12% into bg. fg on it is 10.26:1. */
     --sl-pair-mirage-deep-emphasis: color-mix(in oklab, var(--sl-pair-mirage-deep-accent) 22%, var(--sl-pair-mirage-deep-bg)); /** Stronger accent wash for selected and pressed items: accent 22% into bg. fg on it is 8.05:1. */
     --sl-pair-mirage-deep-muted: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 6%, var(--sl-pair-mirage-deep-bg)); /** Inset background for code: fg 6% into bg. fg on it is 11.48:1. */
+    --sl-pair-mirage-deep-bg-hover: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 8%, var(--sl-pair-mirage-deep-bg)); /** Background on hover, when the pair paints a control: fg 8% into bg. fg on it is 10.86:1. */
+    --sl-pair-mirage-deep-bg-active: color-mix(in oklab, var(--sl-pair-mirage-deep-fg) 15%, var(--sl-pair-mirage-deep-bg)); /** Background while pressed, when the pair paints a control: fg 15% into bg. fg on it is 8.98:1. */
     --sl-pair-stone-soft-hover: color-mix(in oklab, var(--sl-pair-stone-soft-accent) 85%, var(--sl-pair-stone-soft-fg)); /** Accent on hover: accent moved 15% toward fg. 6.87:1 against bg, which is the button label. */
     --sl-pair-stone-soft-active: color-mix(in oklab, var(--sl-pair-stone-soft-accent) 70%, var(--sl-pair-stone-soft-fg)); /** Accent while pressed: accent moved 30% toward fg. 8.13:1 against bg, which is the button label. */
     --sl-pair-stone-soft-subtle: color-mix(in oklab, var(--sl-pair-stone-soft-accent) 12%, var(--sl-pair-stone-soft-bg)); /** Accent wash for highlighted items, selection and mark: accent 12% into bg. fg on it is 13.47:1. */
     --sl-pair-stone-soft-muted: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 6%, var(--sl-pair-stone-soft-bg)); /** Inset background for code: fg 6% into bg. fg on it is 13.97:1. */
+    --sl-pair-stone-soft-bg-hover: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 8%, var(--sl-pair-stone-soft-bg)); /** Background on hover, when the pair paints a control: fg 8% into bg. fg on it is 13.34:1. */
+    --sl-pair-stone-soft-bg-active: color-mix(in oklab, var(--sl-pair-stone-soft-fg) 15%, var(--sl-pair-stone-soft-bg)); /** Background while pressed, when the pair paints a control: fg 15% into bg. fg on it is 11.31:1. */
     --sl-scope-neutral-on-solid: var(--sl-color-neutral-on-1100); /** neutral on-solid: on.1100 in light, on.100 in dark */
     --sl-scope-neutral-on-inverse: var(--sl-color-neutral-on-1100); /** neutral on-inverse: on.1100 in light, on.900 in dark */
     --sl-scope-primary-on-solid: var(--sl-color-primary-on-600); /** primary on-solid: on.600 in light, on.400 in dark */
@@ -1874,6 +1967,7 @@
     --sl-scope-chrome-divider: var(--sl-scope-neutral-divider); /** The chrome role is neutral. */
     --sl-scope-chrome-fg-secondary: var(--sl-scope-neutral-fg-secondary); /** The chrome role is neutral. */
     --sl-scope-chrome-fg-tertiary: var(--sl-scope-neutral-fg-tertiary); /** The chrome role is neutral. */
+    --sl-scope-chrome-fg-disabled: var(--sl-scope-neutral-fg-disabled); /** The chrome role is neutral. */
     --sl-scope-chrome-focus: var(--sl-scope-neutral-focus); /** The chrome role is neutral. */
     --sl-scope-chrome-canvas: var(--sl-scope-neutral-canvas); /** The chrome role is neutral. */
     --sl-scope-chrome-raised: var(--sl-scope-neutral-raised); /** The chrome role is neutral. */
@@ -1882,8 +1976,95 @@
     --sl-scope-chrome-tray: var(--sl-scope-neutral-tray); /** The chrome role is neutral. */
     --sl-scope-chrome-inverse: var(--sl-scope-neutral-inverse); /** The chrome role is neutral. */
     --sl-scope-chrome-track: var(--sl-scope-neutral-track); /** The chrome role is neutral. */
+    --sl-status-level-default-quiet-fg: var(--sl-scope-chrome-fg); /** quiet in default: outline in chrome (neutral) */
+    --sl-status-level-info-bold-bg: var(--sl-scope-info-solid); /** bold in info: solid in info */
+    --sl-status-level-info-bold-bg-hover: var(--sl-scope-info-solid-hover); /** bold in info: solid in info */
+    --sl-status-level-info-bold-bg-active: var(--sl-scope-info-solid-active); /** bold in info: solid in info */
+    --sl-status-level-info-bold-border: var(--sl-scope-info-solid); /** bold in info: solid in info */
+    --sl-status-level-info-bold-border-hover: var(--sl-scope-info-solid-hover); /** bold in info: solid in info */
+    --sl-status-level-info-standard-bg-hover: var(--sl-scope-info-soft); /** standard in info: outline in info */
+    --sl-status-level-info-standard-bg-active: var(--sl-scope-info-soft-hover); /** standard in info: outline in info */
+    --sl-status-level-info-standard-fg: var(--sl-scope-info-fg); /** standard in info: outline in info */
+    --sl-status-level-info-standard-border: var(--sl-scope-info-border); /** standard in info: outline in info */
+    --sl-status-level-info-standard-border-hover: var(--sl-scope-info-solid-hover); /** standard in info: outline in info */
+    --sl-status-level-info-subtle-bg: var(--sl-scope-info-soft); /** subtle in info: soft in info */
+    --sl-status-level-info-subtle-bg-hover: var(--sl-scope-info-soft-hover); /** subtle in info: soft in info */
+    --sl-status-level-info-subtle-bg-active: var(--sl-scope-info-soft-active); /** subtle in info: soft in info */
+    --sl-status-level-info-subtle-fg: var(--sl-scope-info-on-soft); /** subtle in info: soft in info */
+    --sl-status-level-info-subtle-border: var(--sl-scope-info-soft); /** subtle in info: soft in info */
+    --sl-status-level-info-subtle-border-hover: var(--sl-scope-info-soft-hover); /** subtle in info: soft in info */
+    --sl-status-level-info-quiet-bg-hover: var(--sl-scope-info-soft); /** quiet in info: outline in info */
+    --sl-status-level-info-quiet-bg-active: var(--sl-scope-info-soft-hover); /** quiet in info: outline in info */
+    --sl-status-level-info-quiet-fg: var(--sl-scope-info-fg); /** quiet in info: outline in info */
+    --sl-status-level-info-quiet-border: var(--sl-scope-info-border); /** quiet in info: outline in info */
+    --sl-status-level-info-quiet-border-hover: var(--sl-scope-info-solid-hover); /** quiet in info: outline in info */
+    --sl-status-level-success-bold-bg: var(--sl-scope-success-solid); /** bold in success: solid in success */
+    --sl-status-level-success-bold-bg-hover: var(--sl-scope-success-solid-hover); /** bold in success: solid in success */
+    --sl-status-level-success-bold-bg-active: var(--sl-scope-success-solid-active); /** bold in success: solid in success */
+    --sl-status-level-success-bold-border: var(--sl-scope-success-solid); /** bold in success: solid in success */
+    --sl-status-level-success-bold-border-hover: var(--sl-scope-success-solid-hover); /** bold in success: solid in success */
+    --sl-status-level-success-standard-bg-hover: var(--sl-scope-success-soft); /** standard in success: outline in success */
+    --sl-status-level-success-standard-bg-active: var(--sl-scope-success-soft-hover); /** standard in success: outline in success */
+    --sl-status-level-success-standard-fg: var(--sl-scope-success-fg); /** standard in success: outline in success */
+    --sl-status-level-success-standard-border: var(--sl-scope-success-border); /** standard in success: outline in success */
+    --sl-status-level-success-standard-border-hover: var(--sl-scope-success-solid-hover); /** standard in success: outline in success */
+    --sl-status-level-success-subtle-bg: var(--sl-scope-success-soft); /** subtle in success: soft in success */
+    --sl-status-level-success-subtle-bg-hover: var(--sl-scope-success-soft-hover); /** subtle in success: soft in success */
+    --sl-status-level-success-subtle-bg-active: var(--sl-scope-success-soft-active); /** subtle in success: soft in success */
+    --sl-status-level-success-subtle-fg: var(--sl-scope-success-on-soft); /** subtle in success: soft in success */
+    --sl-status-level-success-subtle-border: var(--sl-scope-success-soft); /** subtle in success: soft in success */
+    --sl-status-level-success-subtle-border-hover: var(--sl-scope-success-soft-hover); /** subtle in success: soft in success */
+    --sl-status-level-success-quiet-bg-hover: var(--sl-scope-success-soft); /** quiet in success: outline in success */
+    --sl-status-level-success-quiet-bg-active: var(--sl-scope-success-soft-hover); /** quiet in success: outline in success */
+    --sl-status-level-success-quiet-fg: var(--sl-scope-success-fg); /** quiet in success: outline in success */
+    --sl-status-level-success-quiet-border: var(--sl-scope-success-border); /** quiet in success: outline in success */
+    --sl-status-level-success-quiet-border-hover: var(--sl-scope-success-solid-hover); /** quiet in success: outline in success */
+    --sl-status-level-warning-bold-bg: var(--sl-scope-warning-solid); /** bold in warning: solid in warning */
+    --sl-status-level-warning-bold-bg-hover: var(--sl-scope-warning-solid-hover); /** bold in warning: solid in warning */
+    --sl-status-level-warning-bold-bg-active: var(--sl-scope-warning-solid-active); /** bold in warning: solid in warning */
+    --sl-status-level-warning-bold-border: var(--sl-scope-warning-solid); /** bold in warning: solid in warning */
+    --sl-status-level-warning-bold-border-hover: var(--sl-scope-warning-solid-hover); /** bold in warning: solid in warning */
+    --sl-status-level-warning-standard-bg-hover: var(--sl-scope-warning-soft); /** standard in warning: outline in warning */
+    --sl-status-level-warning-standard-bg-active: var(--sl-scope-warning-soft-hover); /** standard in warning: outline in warning */
+    --sl-status-level-warning-standard-fg: var(--sl-scope-warning-fg); /** standard in warning: outline in warning */
+    --sl-status-level-warning-standard-border: var(--sl-scope-warning-border); /** standard in warning: outline in warning */
+    --sl-status-level-warning-standard-border-hover: var(--sl-scope-warning-solid-hover); /** standard in warning: outline in warning */
+    --sl-status-level-warning-subtle-bg: var(--sl-scope-warning-soft); /** subtle in warning: soft in warning */
+    --sl-status-level-warning-subtle-bg-hover: var(--sl-scope-warning-soft-hover); /** subtle in warning: soft in warning */
+    --sl-status-level-warning-subtle-bg-active: var(--sl-scope-warning-soft-active); /** subtle in warning: soft in warning */
+    --sl-status-level-warning-subtle-fg: var(--sl-scope-warning-on-soft); /** subtle in warning: soft in warning */
+    --sl-status-level-warning-subtle-border: var(--sl-scope-warning-soft); /** subtle in warning: soft in warning */
+    --sl-status-level-warning-subtle-border-hover: var(--sl-scope-warning-soft-hover); /** subtle in warning: soft in warning */
+    --sl-status-level-warning-quiet-bg-hover: var(--sl-scope-warning-soft); /** quiet in warning: outline in warning */
+    --sl-status-level-warning-quiet-bg-active: var(--sl-scope-warning-soft-hover); /** quiet in warning: outline in warning */
+    --sl-status-level-warning-quiet-fg: var(--sl-scope-warning-fg); /** quiet in warning: outline in warning */
+    --sl-status-level-warning-quiet-border: var(--sl-scope-warning-border); /** quiet in warning: outline in warning */
+    --sl-status-level-warning-quiet-border-hover: var(--sl-scope-warning-solid-hover); /** quiet in warning: outline in warning */
+    --sl-status-level-error-bold-bg: var(--sl-scope-error-solid); /** bold in error: solid in error */
+    --sl-status-level-error-bold-bg-hover: var(--sl-scope-error-solid-hover); /** bold in error: solid in error */
+    --sl-status-level-error-bold-bg-active: var(--sl-scope-error-solid-active); /** bold in error: solid in error */
+    --sl-status-level-error-bold-border: var(--sl-scope-error-solid); /** bold in error: solid in error */
+    --sl-status-level-error-bold-border-hover: var(--sl-scope-error-solid-hover); /** bold in error: solid in error */
+    --sl-status-level-error-standard-bg-hover: var(--sl-scope-error-soft); /** standard in error: outline in error */
+    --sl-status-level-error-standard-bg-active: var(--sl-scope-error-soft-hover); /** standard in error: outline in error */
+    --sl-status-level-error-standard-fg: var(--sl-scope-error-fg); /** standard in error: outline in error */
+    --sl-status-level-error-standard-border: var(--sl-scope-error-border); /** standard in error: outline in error */
+    --sl-status-level-error-standard-border-hover: var(--sl-scope-error-solid-hover); /** standard in error: outline in error */
+    --sl-status-level-error-subtle-bg: var(--sl-scope-error-soft); /** subtle in error: soft in error */
+    --sl-status-level-error-subtle-bg-hover: var(--sl-scope-error-soft-hover); /** subtle in error: soft in error */
+    --sl-status-level-error-subtle-bg-active: var(--sl-scope-error-soft-active); /** subtle in error: soft in error */
+    --sl-status-level-error-subtle-fg: var(--sl-scope-error-on-soft); /** subtle in error: soft in error */
+    --sl-status-level-error-subtle-border: var(--sl-scope-error-soft); /** subtle in error: soft in error */
+    --sl-status-level-error-subtle-border-hover: var(--sl-scope-error-soft-hover); /** subtle in error: soft in error */
+    --sl-status-level-error-quiet-bg-hover: var(--sl-scope-error-soft); /** quiet in error: outline in error */
+    --sl-status-level-error-quiet-bg-active: var(--sl-scope-error-soft-hover); /** quiet in error: outline in error */
+    --sl-status-level-error-quiet-fg: var(--sl-scope-error-fg); /** quiet in error: outline in error */
+    --sl-status-level-error-quiet-border: var(--sl-scope-error-border); /** quiet in error: outline in error */
+    --sl-status-level-error-quiet-border-hover: var(--sl-scope-error-solid-hover); /** quiet in error: outline in error */
     --sl-button-radius: var(--sl-radius-pill); /** Buttons are pills, so they read as actions and never as fields or cards. */
+    --sl-focus-shadow-3px-error: 0 0 0 3px var(--sl-status-error); /** Focus halo for a field with an error. */
     --sl-border-accent: var(--sl-scope-accent-border); /** Borders that signal selection or the active item. */
+    --sl-border-default: var(--sl-scope-chrome-divider); /** Everyday dividers and control outlines. Darkens under prefers-contrast: more. */
     --sl-border-strong: var(--sl-scope-chrome-border-strong); /** Borders that identify a control, such as inputs and unchecked checkboxes. 3:1 against the canvas, as WCAG asks for control boundaries. */
     --sl-border-subtle: var(--sl-scope-chrome-border-subtle); /** Hairlines inside a surface (table rows, list separators) that should barely register. */
     --sl-border-control: var(--sl-scope-chrome-border); /** Edge of a small control (checkbox, radio, switch) that must be found before it is filled. */
@@ -1903,7 +2084,7 @@
     --sl-surface-tray: var(--sl-scope-chrome-tray); /** The strip behind a row of controls (toolbars, toggle groups). A step off the page in both themes, so the controls sitting on it stand out, while secondary and accent text on it still pass AA. */
     --sl-surface-inverse: var(--sl-scope-chrome-inverse); /** Dark-on-light flip for small floating things such as tooltips. Inside a brand pair it becomes the pair's text color. */
     --sl-text-accent: var(--sl-scope-accent-fg); /** Accent text such as active tabs. One step darker than the interactive color so it stays AA as text. */
-    --sl-text-disabled: var(--sl-scope-chrome-soft-strong); /** Text in disabled controls. Deliberately below AA, which WCAG allows for disabled UI. */
+    --sl-text-disabled: var(--sl-scope-chrome-fg-disabled); /** Text in disabled controls. Deliberately below AA, which WCAG allows for disabled UI. */
     --sl-text-secondary: var(--sl-scope-chrome-fg-secondary); /** Supporting text such as descriptions and helper copy. Over 7:1 on every surface, and darker still under prefers-contrast: more. */
     --sl-text-tertiary: var(--sl-scope-chrome-fg-tertiary); /** Placeholders, captions and metadata. The lightest text that still passes AA (4.5:1) on every surface. */
     --sl-text-on-tint: var(--sl-scope-accent-on-soft); /** Text on an accent wash (interactive.tint*). Stays in the accent family. */
@@ -1924,31 +2105,57 @@
     --sl-modal-title-color: var(--sl-text-primary); /** Modal heading color. */
     --sl-table-color: var(--sl-text-primary); /** Cell text. */
     --sl-table-header-color: var(--sl-text-primary); /** Column names. */
-    --sl-emphasis-bold-bg: var(--sl-scope-accent-solid); /** bold: solid in accent (primary) */
-    --sl-emphasis-bold-bg-hover: var(--sl-scope-accent-solid-hover); /** bold: solid in accent (primary) */
-    --sl-emphasis-bold-bg-active: var(--sl-scope-accent-solid-active); /** bold: solid in accent (primary) */
-    --sl-emphasis-bold-border: var(--sl-scope-accent-solid); /** bold: solid in accent (primary) */
-    --sl-emphasis-bold-border-hover: var(--sl-scope-accent-solid-hover); /** bold: solid in accent (primary) */
-    --sl-emphasis-standard-bg-hover: var(--sl-scope-accent-soft); /** standard: outline in accent (primary) */
-    --sl-emphasis-standard-bg-active: var(--sl-scope-accent-soft-hover); /** standard: outline in accent (primary) */
-    --sl-emphasis-standard-fg: var(--sl-scope-accent-fg); /** standard: outline in accent (primary) */
-    --sl-emphasis-standard-border: var(--sl-scope-accent-border); /** standard: outline in accent (primary) */
-    --sl-emphasis-standard-border-hover: var(--sl-scope-accent-solid-hover); /** standard: outline in accent (primary) */
-    --sl-emphasis-subtle-bg: var(--sl-scope-chrome-soft); /** subtle: soft in chrome (neutral) */
-    --sl-emphasis-subtle-bg-hover: var(--sl-scope-chrome-soft-hover); /** subtle: soft in chrome (neutral) */
-    --sl-emphasis-subtle-bg-active: var(--sl-scope-chrome-soft-active); /** subtle: soft in chrome (neutral) */
-    --sl-emphasis-subtle-fg: var(--sl-scope-chrome-on-soft); /** subtle: soft in chrome (neutral) */
-    --sl-emphasis-subtle-border: var(--sl-scope-chrome-soft); /** subtle: soft in chrome (neutral) */
-    --sl-emphasis-subtle-border-hover: var(--sl-scope-chrome-soft-hover); /** subtle: soft in chrome (neutral) */
-    --sl-emphasis-quiet-bg-hover: var(--sl-scope-chrome-soft); /** quiet: outline in chrome (neutral) */
-    --sl-emphasis-quiet-bg-active: var(--sl-scope-chrome-soft-hover); /** quiet: outline in chrome (neutral) */
-    --sl-emphasis-quiet-border: var(--sl-scope-chrome-border); /** quiet: outline in chrome (neutral) */
-    --sl-emphasis-quiet-border-hover: var(--sl-scope-chrome-solid-hover); /** quiet: outline in chrome (neutral) */
+    --sl-emphasis-bold-bg: var(--sl-scope-accent-solid); /** bold in default: solid in accent (primary) */
+    --sl-emphasis-bold-bg-hover: var(--sl-scope-accent-solid-hover); /** bold in default: solid in accent (primary) */
+    --sl-emphasis-bold-bg-active: var(--sl-scope-accent-solid-active); /** bold in default: solid in accent (primary) */
+    --sl-emphasis-bold-border: var(--sl-scope-accent-solid); /** bold in default: solid in accent (primary) */
+    --sl-emphasis-bold-border-hover: var(--sl-scope-accent-solid-hover); /** bold in default: solid in accent (primary) */
+    --sl-emphasis-standard-bg-hover: var(--sl-scope-accent-soft); /** standard in default: outline in accent (primary) */
+    --sl-emphasis-standard-bg-active: var(--sl-scope-accent-soft-hover); /** standard in default: outline in accent (primary) */
+    --sl-emphasis-standard-fg: var(--sl-scope-accent-fg); /** standard in default: outline in accent (primary) */
+    --sl-emphasis-standard-border: var(--sl-scope-accent-border); /** standard in default: outline in accent (primary) */
+    --sl-emphasis-standard-border-hover: var(--sl-scope-accent-solid-hover); /** standard in default: outline in accent (primary) */
+    --sl-emphasis-subtle-bg: var(--sl-scope-chrome-soft); /** subtle in default: soft in chrome (neutral) */
+    --sl-emphasis-subtle-bg-hover: var(--sl-scope-chrome-soft-hover); /** subtle in default: soft in chrome (neutral) */
+    --sl-emphasis-subtle-bg-active: var(--sl-scope-chrome-soft-active); /** subtle in default: soft in chrome (neutral) */
+    --sl-emphasis-subtle-fg: var(--sl-scope-chrome-on-soft); /** subtle in default: soft in chrome (neutral) */
+    --sl-emphasis-subtle-border: var(--sl-scope-chrome-soft); /** subtle in default: soft in chrome (neutral) */
+    --sl-emphasis-subtle-border-hover: var(--sl-scope-chrome-soft-hover); /** subtle in default: soft in chrome (neutral) */
+    --sl-emphasis-quiet-bg-hover: var(--sl-scope-chrome-soft); /** quiet in default: outline in chrome (neutral) */
+    --sl-emphasis-quiet-bg-active: var(--sl-scope-chrome-soft-hover); /** quiet in default: outline in chrome (neutral) */
+    --sl-emphasis-quiet-border: var(--sl-scope-chrome-border); /** quiet in default: outline in chrome (neutral) */
+    --sl-emphasis-quiet-border-hover: var(--sl-scope-chrome-solid-hover); /** quiet in default: outline in chrome (neutral) */
     --sl-pair-ember-dune-emphasis: var(--sl-pair-ember-dune-subtle); /** Stronger accent wash for selected and pressed items: subtle itself, because a stronger tint would drop text below AA. */
+    --sl-pair-ember-dune-bg-active: var(--sl-pair-ember-dune-bg-hover); /** Background while pressed, when the pair paints a control: bg-hover itself, because a stronger tint would drop text below AA. */
     --sl-pair-stone-soft-emphasis: var(--sl-pair-stone-soft-subtle); /** Stronger accent wash for selected and pressed items: subtle itself, because a stronger tint would drop text below AA. */
     --sl-scope-accent-on-solid: var(--sl-scope-primary-on-solid); /** The accent role is primary. */
     --sl-scope-chrome-on-solid: var(--sl-scope-neutral-on-solid); /** The chrome role is neutral. */
     --sl-scope-chrome-on-inverse: var(--sl-scope-neutral-on-inverse); /** The chrome role is neutral. */
+    --sl-status-level-default-bold-bg: var(--sl-scope-accent-solid); /** bold in default: solid in accent (primary) */
+    --sl-status-level-default-bold-bg-hover: var(--sl-scope-accent-solid-hover); /** bold in default: solid in accent (primary) */
+    --sl-status-level-default-bold-bg-active: var(--sl-scope-accent-solid-active); /** bold in default: solid in accent (primary) */
+    --sl-status-level-default-bold-border: var(--sl-scope-accent-solid); /** bold in default: solid in accent (primary) */
+    --sl-status-level-default-bold-border-hover: var(--sl-scope-accent-solid-hover); /** bold in default: solid in accent (primary) */
+    --sl-status-level-default-standard-bg-hover: var(--sl-scope-accent-soft); /** standard in default: outline in accent (primary) */
+    --sl-status-level-default-standard-bg-active: var(--sl-scope-accent-soft-hover); /** standard in default: outline in accent (primary) */
+    --sl-status-level-default-standard-fg: var(--sl-scope-accent-fg); /** standard in default: outline in accent (primary) */
+    --sl-status-level-default-standard-border: var(--sl-scope-accent-border); /** standard in default: outline in accent (primary) */
+    --sl-status-level-default-standard-border-hover: var(--sl-scope-accent-solid-hover); /** standard in default: outline in accent (primary) */
+    --sl-status-level-default-subtle-bg: var(--sl-scope-chrome-soft); /** subtle in default: soft in chrome (neutral) */
+    --sl-status-level-default-subtle-bg-hover: var(--sl-scope-chrome-soft-hover); /** subtle in default: soft in chrome (neutral) */
+    --sl-status-level-default-subtle-bg-active: var(--sl-scope-chrome-soft-active); /** subtle in default: soft in chrome (neutral) */
+    --sl-status-level-default-subtle-fg: var(--sl-scope-chrome-on-soft); /** subtle in default: soft in chrome (neutral) */
+    --sl-status-level-default-subtle-border: var(--sl-scope-chrome-soft); /** subtle in default: soft in chrome (neutral) */
+    --sl-status-level-default-subtle-border-hover: var(--sl-scope-chrome-soft-hover); /** subtle in default: soft in chrome (neutral) */
+    --sl-status-level-default-quiet-bg-hover: var(--sl-scope-chrome-soft); /** quiet in default: outline in chrome (neutral) */
+    --sl-status-level-default-quiet-bg-active: var(--sl-scope-chrome-soft-hover); /** quiet in default: outline in chrome (neutral) */
+    --sl-status-level-default-quiet-border: var(--sl-scope-chrome-border); /** quiet in default: outline in chrome (neutral) */
+    --sl-status-level-default-quiet-border-hover: var(--sl-scope-chrome-solid-hover); /** quiet in default: outline in chrome (neutral) */
+    --sl-status-level-info-bold-fg: var(--sl-scope-info-on-solid); /** bold in info: solid in info */
+    --sl-status-level-success-bold-fg: var(--sl-scope-success-on-solid); /** bold in success: solid in success */
+    --sl-status-level-warning-bold-fg: var(--sl-scope-warning-on-solid); /** bold in warning: solid in warning */
+    --sl-status-level-error-bold-fg: var(--sl-scope-error-on-solid); /** bold in error: solid in error */
+    --sl-focus-ring: var(--sl-interactive-default); /** Focus ring color. Uses the interactive accent so focus reads as "this is the thing you can act on". */
     --sl-focus-shadow-3px-primary: 0 0 0 3px var(--sl-interactive-tint-hover); /** Soft focus halo for inputs. */
     --sl-focus-shadow-3px-primary-soft: 0 0 0 3px var(--sl-interactive-tint-active); /** Slightly stronger focus halo for inputs on tinted surfaces. */
     --sl-focus-halo-color: var(--sl-interactive-tint-hover); /** The pale tint of the focus glow. Components on a colored scope use that scope's soft-hover instead. */
@@ -2021,7 +2228,8 @@
     --sl-table-row-border-color: var(--sl-border-subtle); /** Hairlines between rows, quiet so the data leads. */
     --sl-table-column-hover: var(--sl-fill-subtle); /** Column under the pointer, when column hover is on. Neutral so it never reads as a selection. */
     --sl-table-range-background: var(--sl-interactive-tint); /** Cells inside a dragged range selection. */
-    --sl-emphasis-bold-fg: var(--sl-scope-accent-on-solid); /** bold: solid in accent (primary) */
+    --sl-emphasis-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
+    --sl-status-level-default-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
     --sl-drawer-handle-color: var(--sl-border-strong); /** The grab bar on bottom drawers. Strong border so it reads as something to drag. */
     --sl-shadow-outline: 0 0 0 3px color-mix(in oklab, var(--sl-focus-ring) 60%, transparent); /** Focus halo for controls that use box-shadow instead of outline: the focus ring color at 60% opacity, so it follows the accent and the theme. Becomes currentColor under prefers-contrast: more. */
     --sl-check-mark-color: var(--sl-text-on-primary); /** Check mark, dash or dot on a ticked fill. */
@@ -2042,7 +2250,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    :root:not([data-theme='light']) {
+    :root:not([data-theme='light'], [data-theme='light-high-contrast'], [data-theme='deuteranopia'], [data-theme='protanopia'], [data-theme='tritanopia'], [data-theme='achromatopsia']) {
       --sl-color-scheme: dark;
       --sl-pair-stone-soft-bg: var(--sl-color-neutral-1100);
       --sl-pair-stone-soft-fg: var(--sl-color-neutral-100);
@@ -2064,13 +2272,14 @@
       --sl-scope-neutral-divider: var(--sl-color-neutral-800);
       --sl-scope-neutral-fg: var(--sl-color-white);
       --sl-scope-neutral-fg-secondary: var(--sl-color-neutral-300);
-      --sl-scope-neutral-fg-tertiary: var(--sl-color-neutral-400);
+      --sl-scope-neutral-fg-tertiary: var(--sl-color-neutral-600);
+      --sl-scope-neutral-fg-disabled: var(--sl-color-neutral-900);
       --sl-scope-neutral-focus: var(--sl-color-neutral-400);
       --sl-scope-neutral-canvas: var(--sl-color-neutral-1200);
       --sl-scope-neutral-raised: var(--sl-color-neutral-1100);
-      --sl-scope-neutral-overlay: var(--sl-color-neutral-1000);
+      --sl-scope-neutral-overlay: var(--sl-color-neutral-1100);
       --sl-scope-neutral-modal: var(--sl-color-neutral-1100);
-      --sl-scope-neutral-tray: var(--sl-color-neutral-1000);
+      --sl-scope-neutral-tray: var(--sl-color-neutral-1100);
       --sl-scope-neutral-inverse: var(--sl-color-neutral-900);
       --sl-scope-neutral-on-inverse: var(--sl-color-neutral-on-900);
       --sl-scope-neutral-track: var(--sl-color-neutral-1100);
@@ -2198,7 +2407,7 @@
     }
   }
 
-  [data-theme='dark'] {
+  [data-theme='dark'], [data-theme='dark-high-contrast'] {
     --sl-color-scheme: dark;
     --sl-pair-stone-soft-bg: var(--sl-color-neutral-1100);
     --sl-pair-stone-soft-fg: var(--sl-color-neutral-100);
@@ -2220,13 +2429,14 @@
     --sl-scope-neutral-divider: var(--sl-color-neutral-800);
     --sl-scope-neutral-fg: var(--sl-color-white);
     --sl-scope-neutral-fg-secondary: var(--sl-color-neutral-300);
-    --sl-scope-neutral-fg-tertiary: var(--sl-color-neutral-400);
+    --sl-scope-neutral-fg-tertiary: var(--sl-color-neutral-600);
+    --sl-scope-neutral-fg-disabled: var(--sl-color-neutral-900);
     --sl-scope-neutral-focus: var(--sl-color-neutral-400);
     --sl-scope-neutral-canvas: var(--sl-color-neutral-1200);
     --sl-scope-neutral-raised: var(--sl-color-neutral-1100);
-    --sl-scope-neutral-overlay: var(--sl-color-neutral-1000);
+    --sl-scope-neutral-overlay: var(--sl-color-neutral-1100);
     --sl-scope-neutral-modal: var(--sl-color-neutral-1100);
-    --sl-scope-neutral-tray: var(--sl-color-neutral-1000);
+    --sl-scope-neutral-tray: var(--sl-color-neutral-1100);
     --sl-scope-neutral-inverse: var(--sl-color-neutral-900);
     --sl-scope-neutral-on-inverse: var(--sl-color-neutral-on-900);
     --sl-scope-neutral-track: var(--sl-color-neutral-1100);
@@ -2354,7 +2564,7 @@
   }
 
   @media (prefers-contrast: more) {
-    :root {
+    :root:not([data-theme='deuteranopia'], [data-theme='protanopia'], [data-theme='tritanopia'], [data-theme='achromatopsia']) {
       --sl-shadow-outline: 0 0 0 3px currentColor;
       --sl-scope-neutral-border-strong: var(--sl-color-neutral-900);
       --sl-scope-neutral-divider: var(--sl-color-neutral-700);
@@ -2363,8 +2573,16 @@
     }
   }
 
+  [data-theme='light-high-contrast'], [data-theme='dark-high-contrast'] {
+    --sl-shadow-outline: 0 0 0 3px currentColor;
+    --sl-scope-neutral-border-strong: var(--sl-color-neutral-900);
+    --sl-scope-neutral-divider: var(--sl-color-neutral-700);
+    --sl-scope-neutral-fg-secondary: var(--sl-color-neutral-1100);
+    --sl-scope-neutral-fg-tertiary: var(--sl-color-neutral-1000);
+  }
+
   @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-    :root:not([data-theme='light']) {
+    :root:not([data-theme='light'], [data-theme='light-high-contrast'], [data-theme='deuteranopia'], [data-theme='protanopia'], [data-theme='tritanopia'], [data-theme='achromatopsia']) {
       --sl-scope-neutral-border-strong: var(--sl-color-neutral-200);
       --sl-scope-neutral-divider: var(--sl-color-neutral-400);
       --sl-scope-neutral-fg-secondary: var(--sl-color-neutral-100);
@@ -2379,19 +2597,21 @@
     }
   }
 
+  [data-theme='dark-high-contrast'] {
+    --sl-scope-neutral-border-strong: var(--sl-color-neutral-200);
+    --sl-scope-neutral-divider: var(--sl-color-neutral-400);
+    --sl-scope-neutral-fg-secondary: var(--sl-color-neutral-100);
+  }
+
   @media (prefers-reduced-motion: reduce) {
     :root {
-      --sl-elevation-2xl: var(--sl-shadow-flat-2xl);
-      --sl-elevation-base: var(--sl-shadow-flat-base);
-      --sl-elevation-lg: var(--sl-shadow-flat-lg);
-      --sl-elevation-md: var(--sl-shadow-flat-md);
-      --sl-elevation-sm: var(--sl-shadow-flat-sm);
-      --sl-elevation-xl: var(--sl-shadow-flat-xl);
-      --sl-elevation-xs: var(--sl-shadow-flat-xs);
+      --sl-duration-fast: 1ms;
+      --sl-duration-normal: 1ms;
+      --sl-duration-slow: 1ms;
     }
   }
 
-  [data-vision='deuteranopia'] {
+  [data-theme='deuteranopia'] {
     --sl-color-primary-50: var(--sl-vision-deuteranopia-color-primary-50);
     --sl-color-primary-75: var(--sl-vision-deuteranopia-color-primary-75);
     --sl-color-primary-100: var(--sl-vision-deuteranopia-color-primary-100);
@@ -2604,9 +2824,29 @@
     --sl-color-data-18: var(--sl-vision-deuteranopia-color-data-18);
     --sl-color-data-19: var(--sl-vision-deuteranopia-color-data-19);
     --sl-color-data-20: var(--sl-vision-deuteranopia-color-data-20);
+    --sl-color-data-violet: var(--sl-vision-deuteranopia-color-data-violet);
+    --sl-color-data-coral: var(--sl-vision-deuteranopia-color-data-coral);
+    --sl-color-data-gold: var(--sl-vision-deuteranopia-color-data-gold);
+    --sl-color-data-burgundy: var(--sl-vision-deuteranopia-color-data-burgundy);
+    --sl-color-data-mint: var(--sl-vision-deuteranopia-color-data-mint);
+    --sl-color-data-navy: var(--sl-vision-deuteranopia-color-data-navy);
+    --sl-color-data-periwinkle: var(--sl-vision-deuteranopia-color-data-periwinkle);
+    --sl-color-data-forest: var(--sl-vision-deuteranopia-color-data-forest);
+    --sl-color-data-lime: var(--sl-vision-deuteranopia-color-data-lime);
+    --sl-color-data-yellow: var(--sl-vision-deuteranopia-color-data-yellow);
+    --sl-color-data-lavender: var(--sl-vision-deuteranopia-color-data-lavender);
+    --sl-color-data-peach: var(--sl-vision-deuteranopia-color-data-peach);
+    --sl-color-data-cream: var(--sl-vision-deuteranopia-color-data-cream);
+    --sl-color-data-mauve: var(--sl-vision-deuteranopia-color-data-mauve);
+    --sl-color-data-seafoam: var(--sl-vision-deuteranopia-color-data-seafoam);
+    --sl-color-data-sky: var(--sl-vision-deuteranopia-color-data-sky);
+    --sl-color-data-ice: var(--sl-vision-deuteranopia-color-data-ice);
+    --sl-color-data-sage: var(--sl-vision-deuteranopia-color-data-sage);
+    --sl-color-data-chartreuse: var(--sl-vision-deuteranopia-color-data-chartreuse);
+    --sl-color-data-ivory: var(--sl-vision-deuteranopia-color-data-ivory);
   }
 
-  [data-vision='protanopia'] {
+  [data-theme='protanopia'] {
     --sl-color-primary-50: var(--sl-vision-protanopia-color-primary-50);
     --sl-color-primary-75: var(--sl-vision-protanopia-color-primary-75);
     --sl-color-primary-100: var(--sl-vision-protanopia-color-primary-100);
@@ -2819,9 +3059,29 @@
     --sl-color-data-18: var(--sl-vision-protanopia-color-data-18);
     --sl-color-data-19: var(--sl-vision-protanopia-color-data-19);
     --sl-color-data-20: var(--sl-vision-protanopia-color-data-20);
+    --sl-color-data-violet: var(--sl-vision-protanopia-color-data-violet);
+    --sl-color-data-coral: var(--sl-vision-protanopia-color-data-coral);
+    --sl-color-data-gold: var(--sl-vision-protanopia-color-data-gold);
+    --sl-color-data-burgundy: var(--sl-vision-protanopia-color-data-burgundy);
+    --sl-color-data-mint: var(--sl-vision-protanopia-color-data-mint);
+    --sl-color-data-navy: var(--sl-vision-protanopia-color-data-navy);
+    --sl-color-data-periwinkle: var(--sl-vision-protanopia-color-data-periwinkle);
+    --sl-color-data-forest: var(--sl-vision-protanopia-color-data-forest);
+    --sl-color-data-lime: var(--sl-vision-protanopia-color-data-lime);
+    --sl-color-data-yellow: var(--sl-vision-protanopia-color-data-yellow);
+    --sl-color-data-lavender: var(--sl-vision-protanopia-color-data-lavender);
+    --sl-color-data-peach: var(--sl-vision-protanopia-color-data-peach);
+    --sl-color-data-cream: var(--sl-vision-protanopia-color-data-cream);
+    --sl-color-data-mauve: var(--sl-vision-protanopia-color-data-mauve);
+    --sl-color-data-seafoam: var(--sl-vision-protanopia-color-data-seafoam);
+    --sl-color-data-sky: var(--sl-vision-protanopia-color-data-sky);
+    --sl-color-data-ice: var(--sl-vision-protanopia-color-data-ice);
+    --sl-color-data-sage: var(--sl-vision-protanopia-color-data-sage);
+    --sl-color-data-chartreuse: var(--sl-vision-protanopia-color-data-chartreuse);
+    --sl-color-data-ivory: var(--sl-vision-protanopia-color-data-ivory);
   }
 
-  [data-vision='tritanopia'] {
+  [data-theme='tritanopia'] {
     --sl-color-primary-50: var(--sl-vision-tritanopia-color-primary-50);
     --sl-color-primary-75: var(--sl-vision-tritanopia-color-primary-75);
     --sl-color-primary-100: var(--sl-vision-tritanopia-color-primary-100);
@@ -3034,9 +3294,29 @@
     --sl-color-data-18: var(--sl-vision-tritanopia-color-data-18);
     --sl-color-data-19: var(--sl-vision-tritanopia-color-data-19);
     --sl-color-data-20: var(--sl-vision-tritanopia-color-data-20);
+    --sl-color-data-violet: var(--sl-vision-tritanopia-color-data-violet);
+    --sl-color-data-coral: var(--sl-vision-tritanopia-color-data-coral);
+    --sl-color-data-gold: var(--sl-vision-tritanopia-color-data-gold);
+    --sl-color-data-burgundy: var(--sl-vision-tritanopia-color-data-burgundy);
+    --sl-color-data-mint: var(--sl-vision-tritanopia-color-data-mint);
+    --sl-color-data-navy: var(--sl-vision-tritanopia-color-data-navy);
+    --sl-color-data-periwinkle: var(--sl-vision-tritanopia-color-data-periwinkle);
+    --sl-color-data-forest: var(--sl-vision-tritanopia-color-data-forest);
+    --sl-color-data-lime: var(--sl-vision-tritanopia-color-data-lime);
+    --sl-color-data-yellow: var(--sl-vision-tritanopia-color-data-yellow);
+    --sl-color-data-lavender: var(--sl-vision-tritanopia-color-data-lavender);
+    --sl-color-data-peach: var(--sl-vision-tritanopia-color-data-peach);
+    --sl-color-data-cream: var(--sl-vision-tritanopia-color-data-cream);
+    --sl-color-data-mauve: var(--sl-vision-tritanopia-color-data-mauve);
+    --sl-color-data-seafoam: var(--sl-vision-tritanopia-color-data-seafoam);
+    --sl-color-data-sky: var(--sl-vision-tritanopia-color-data-sky);
+    --sl-color-data-ice: var(--sl-vision-tritanopia-color-data-ice);
+    --sl-color-data-sage: var(--sl-vision-tritanopia-color-data-sage);
+    --sl-color-data-chartreuse: var(--sl-vision-tritanopia-color-data-chartreuse);
+    --sl-color-data-ivory: var(--sl-vision-tritanopia-color-data-ivory);
   }
 
-  [data-vision='achromatopsia'] {
+  [data-theme='achromatopsia'] {
     --sl-color-primary-50: var(--sl-vision-achromatopsia-color-primary-50);
     --sl-color-primary-75: var(--sl-vision-achromatopsia-color-primary-75);
     --sl-color-primary-100: var(--sl-vision-achromatopsia-color-primary-100);
@@ -3249,6 +3529,26 @@
     --sl-color-data-18: var(--sl-vision-achromatopsia-color-data-18);
     --sl-color-data-19: var(--sl-vision-achromatopsia-color-data-19);
     --sl-color-data-20: var(--sl-vision-achromatopsia-color-data-20);
+    --sl-color-data-violet: var(--sl-vision-achromatopsia-color-data-violet);
+    --sl-color-data-coral: var(--sl-vision-achromatopsia-color-data-coral);
+    --sl-color-data-gold: var(--sl-vision-achromatopsia-color-data-gold);
+    --sl-color-data-burgundy: var(--sl-vision-achromatopsia-color-data-burgundy);
+    --sl-color-data-mint: var(--sl-vision-achromatopsia-color-data-mint);
+    --sl-color-data-navy: var(--sl-vision-achromatopsia-color-data-navy);
+    --sl-color-data-periwinkle: var(--sl-vision-achromatopsia-color-data-periwinkle);
+    --sl-color-data-forest: var(--sl-vision-achromatopsia-color-data-forest);
+    --sl-color-data-lime: var(--sl-vision-achromatopsia-color-data-lime);
+    --sl-color-data-yellow: var(--sl-vision-achromatopsia-color-data-yellow);
+    --sl-color-data-lavender: var(--sl-vision-achromatopsia-color-data-lavender);
+    --sl-color-data-peach: var(--sl-vision-achromatopsia-color-data-peach);
+    --sl-color-data-cream: var(--sl-vision-achromatopsia-color-data-cream);
+    --sl-color-data-mauve: var(--sl-vision-achromatopsia-color-data-mauve);
+    --sl-color-data-seafoam: var(--sl-vision-achromatopsia-color-data-seafoam);
+    --sl-color-data-sky: var(--sl-vision-achromatopsia-color-data-sky);
+    --sl-color-data-ice: var(--sl-vision-achromatopsia-color-data-ice);
+    --sl-color-data-sage: var(--sl-vision-achromatopsia-color-data-sage);
+    --sl-color-data-chartreuse: var(--sl-vision-achromatopsia-color-data-chartreuse);
+    --sl-color-data-ivory: var(--sl-vision-achromatopsia-color-data-ivory);
   }
 
   :root {
@@ -3287,6 +3587,7 @@
     --sl-scope-fg: var(--sl-scope-neutral-fg);
     --sl-scope-fg-secondary: var(--sl-scope-neutral-fg-secondary);
     --sl-scope-fg-tertiary: var(--sl-scope-neutral-fg-tertiary);
+    --sl-scope-fg-disabled: var(--sl-scope-neutral-fg-disabled);
     --sl-scope-focus: var(--sl-scope-neutral-focus);
     --sl-scope-canvas: var(--sl-scope-neutral-canvas);
     --sl-scope-raised: var(--sl-scope-neutral-raised);
@@ -3371,7 +3672,8 @@
   }
 
   [data-color='success'],
-  .Toast[data-type='success']:not([data-color]) {
+  [data-status='success'],
+  .Toast[data-type='success']:not([data-color], [data-status]) {
     --sl-scope-solid: var(--sl-scope-success-solid);
     --sl-scope-solid-hover: var(--sl-scope-success-solid-hover);
     --sl-scope-solid-active: var(--sl-scope-success-solid-active);
@@ -3390,7 +3692,8 @@
   }
 
   [data-color='warning'],
-  .Toast[data-type='warning']:not([data-color]) {
+  [data-status='warning'],
+  .Toast[data-type='warning']:not([data-color], [data-status]) {
     --sl-scope-solid: var(--sl-scope-warning-solid);
     --sl-scope-solid-hover: var(--sl-scope-warning-solid-hover);
     --sl-scope-solid-active: var(--sl-scope-warning-solid-active);
@@ -3409,7 +3712,8 @@
   }
 
   [data-color='error'],
-  .Toast[data-type='error']:not([data-color]) {
+  [data-status='error'],
+  .Toast[data-type='error']:not([data-color], [data-status]) {
     --sl-scope-solid: var(--sl-scope-error-solid);
     --sl-scope-solid-hover: var(--sl-scope-error-solid-hover);
     --sl-scope-solid-active: var(--sl-scope-error-solid-active);
@@ -3428,7 +3732,8 @@
   }
 
   [data-color='info'],
-  .Toast[data-type='info']:not([data-color]) {
+  [data-status='info'],
+  .Toast[data-type='info']:not([data-color], [data-status]) {
     --sl-scope-solid: var(--sl-scope-info-solid);
     --sl-scope-solid-hover: var(--sl-scope-info-solid-hover);
     --sl-scope-solid-active: var(--sl-scope-info-solid-active);
@@ -3482,6 +3787,7 @@
     --sl-scope-fg: var(--sl-scope-chrome-fg);
     --sl-scope-fg-secondary: var(--sl-scope-chrome-fg-secondary);
     --sl-scope-fg-tertiary: var(--sl-scope-chrome-fg-tertiary);
+    --sl-scope-fg-disabled: var(--sl-scope-chrome-fg-disabled);
     --sl-scope-focus: var(--sl-scope-chrome-focus);
     --sl-scope-canvas: var(--sl-scope-chrome-canvas);
     --sl-scope-raised: var(--sl-scope-chrome-raised);
@@ -3495,7 +3801,8 @@
 
   [data-emphasis='bold'],
   .Button[data-variant='solid']:not([data-emphasis]),
-  .Button:not([data-variant]):not([data-emphasis]) {
+  .Button:not([data-variant]):not([data-emphasis]),
+  .AvatarRoot:not([data-emphasis]) {
     --sl-e-bg: var(--sl-scope-solid);
     --sl-e-bg-hover: var(--sl-scope-solid-hover);
     --sl-e-bg-active: var(--sl-scope-solid-active);
@@ -3505,7 +3812,8 @@
   }
 
   [data-emphasis='standard'],
-  .Button[data-variant='outline']:not([data-emphasis]) {
+  .Button[data-variant='outline']:not([data-emphasis]),
+  .Toggle:not([data-emphasis], [data-emphasis] *) {
     --sl-e-bg: transparent;
     --sl-e-bg-hover: var(--sl-scope-soft);
     --sl-e-bg-active: var(--sl-scope-soft-hover);
@@ -3523,7 +3831,7 @@
     --sl-e-border-hover: var(--sl-scope-soft-hover);
   }
 
-  [data-emphasis='subtle']:not([data-color]) {
+  [data-emphasis='subtle']:not([data-color], [data-status], [data-status] *, .Toast[data-type], .Toast[data-type] *) {
     --sl-scope-solid: var(--sl-scope-chrome-solid);
     --sl-scope-solid-hover: var(--sl-scope-chrome-solid-hover);
     --sl-scope-solid-active: var(--sl-scope-chrome-solid-active);
@@ -3541,6 +3849,7 @@
     --sl-scope-fg: var(--sl-scope-chrome-fg);
     --sl-scope-fg-secondary: var(--sl-scope-chrome-fg-secondary);
     --sl-scope-fg-tertiary: var(--sl-scope-chrome-fg-tertiary);
+    --sl-scope-fg-disabled: var(--sl-scope-chrome-fg-disabled);
     --sl-scope-focus: var(--sl-scope-chrome-focus);
     --sl-scope-canvas: var(--sl-scope-chrome-canvas);
     --sl-scope-raised: var(--sl-scope-chrome-raised);
@@ -3562,8 +3871,8 @@
     --sl-e-border-hover: var(--sl-scope-solid-hover);
   }
 
-  [data-emphasis='quiet']:not([data-color]),
-  .Button[data-variant='ghost']:not([data-emphasis]):not([data-color]) {
+  [data-emphasis='quiet']:not([data-color], [data-status], [data-status] *, .Toast[data-type], .Toast[data-type] *),
+  .Button[data-variant='ghost']:not([data-emphasis]):not([data-color], [data-status], [data-status] *, .Toast[data-type], .Toast[data-type] *) {
     --sl-scope-solid: var(--sl-scope-chrome-solid);
     --sl-scope-solid-hover: var(--sl-scope-chrome-solid-hover);
     --sl-scope-solid-active: var(--sl-scope-chrome-solid-active);
@@ -3581,6 +3890,7 @@
     --sl-scope-fg: var(--sl-scope-chrome-fg);
     --sl-scope-fg-secondary: var(--sl-scope-chrome-fg-secondary);
     --sl-scope-fg-tertiary: var(--sl-scope-chrome-fg-tertiary);
+    --sl-scope-fg-disabled: var(--sl-scope-chrome-fg-disabled);
     --sl-scope-focus: var(--sl-scope-chrome-focus);
     --sl-scope-canvas: var(--sl-scope-chrome-canvas);
     --sl-scope-raised: var(--sl-scope-chrome-raised);
@@ -4004,266 +4314,239 @@
 /* Text styles: one class per text style token. */
 
 /* Body copy in the base tier, the default UI and body text. */
-.text-style-base {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+.text-style-body-base {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
 
 /* The selected or current item in the base tier (the default UI and body text): selected tabs and toggles, the current nav item or page. Base body text at semibold, so selection reads without changing size. */
-.text-style-base-selected {
-  font-family: var(--sl-font-base-selected-font-family);
-  font-size: var(--sl-font-base-selected-font-size);
-  font-weight: var(--sl-font-base-selected-font-weight);
-  line-height: var(--sl-font-base-selected-line-height);
-  letter-spacing: var(--sl-font-base-selected-letter-spacing);
+.text-style-selected-base {
+  font-family: var(--sl-font-selected-base-font-family);
+  font-size: var(--sl-font-selected-base-font-size);
+  font-weight: var(--sl-font-selected-base-font-weight);
+  line-height: var(--sl-font-selected-base-line-height);
+  letter-spacing: var(--sl-font-selected-base-letter-spacing);
 }
 
 /* Form labels in the base tier, the default UI and body text. */
-.text-style-base-label {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+.text-style-label-base {
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
 }
 
 /* Links in the base tier. The same type as base body text: a link stands out by color and underline, not by its type. */
-.text-style-base-link {
-  font-family: var(--sl-font-base-link-font-family);
-  font-size: var(--sl-font-base-link-font-size);
-  font-weight: var(--sl-font-base-link-font-weight);
-  line-height: var(--sl-font-base-link-line-height);
-  letter-spacing: var(--sl-font-base-link-letter-spacing);
+.text-style-link-base {
+  font-family: var(--sl-font-link-base-font-family);
+  font-size: var(--sl-font-link-base-font-size);
+  font-weight: var(--sl-font-link-base-font-weight);
+  line-height: var(--sl-font-link-base-line-height);
+  letter-spacing: var(--sl-font-link-base-letter-spacing);
 }
 
 /* Subtitles in the base tier, the default UI and body text. */
-.text-style-base-subtitle {
-  font-family: var(--sl-font-base-subtitle-font-family);
-  font-size: var(--sl-font-base-subtitle-font-size);
-  font-weight: var(--sl-font-base-subtitle-font-weight);
-  line-height: var(--sl-font-base-subtitle-line-height);
-  letter-spacing: var(--sl-font-base-subtitle-letter-spacing);
+.text-style-subtitle-base {
+  font-family: var(--sl-font-subtitle-base-font-family);
+  font-size: var(--sl-font-subtitle-base-font-size);
+  font-weight: var(--sl-font-subtitle-base-font-weight);
+  line-height: var(--sl-font-subtitle-base-line-height);
+  letter-spacing: var(--sl-font-subtitle-base-letter-spacing);
 }
 
 /* Buttons and triggers in the base tier, the default UI and body text. */
-.text-style-base-trigger {
-  font-family: var(--sl-font-base-trigger-font-family);
-  font-size: var(--sl-font-base-trigger-font-size);
-  font-weight: var(--sl-font-base-trigger-font-weight);
-  line-height: var(--sl-font-base-trigger-line-height);
-  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+.text-style-trigger-base {
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
+}
+
+/* Titles in the base tier: a toast, an accordion row, a list item heading. Titles use the display family; the tier sets the size. */
+.text-style-title-base {
+  font-family: var(--sl-font-title-base-font-family);
+  font-size: var(--sl-font-title-base-font-size);
+  font-weight: var(--sl-font-title-base-font-weight);
+  line-height: var(--sl-font-title-base-line-height);
+  letter-spacing: var(--sl-font-title-base-letter-spacing);
 }
 
 /* Code uses the mono family so characters line up. */
-.text-style-code {
-  font-family: var(--sl-font-code-font-family);
-  font-size: var(--sl-font-code-font-size);
-  font-weight: var(--sl-font-code-font-weight);
-  line-height: var(--sl-font-code-line-height);
-  letter-spacing: var(--sl-font-code-letter-spacing);
+.text-style-code-condense {
+  font-family: var(--sl-font-code-condense-font-family);
+  font-size: var(--sl-font-code-condense-font-size);
+  font-weight: var(--sl-font-code-condense-font-weight);
+  line-height: var(--sl-font-code-condense-line-height);
+  letter-spacing: var(--sl-font-code-condense-letter-spacing);
 }
 
 /* Body copy in the condense tier, dense UI text (tables, secondary labels). */
-.text-style-condense {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+.text-style-body-condense {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 
 /* Buttons and triggers in the condense tier (dense UI): condense body text at medium, like base-trigger one tier down. */
-.text-style-condense-trigger {
-  font-family: var(--sl-font-condense-trigger-font-family);
-  font-size: var(--sl-font-condense-trigger-font-size);
-  font-weight: var(--sl-font-condense-trigger-font-weight);
-  line-height: var(--sl-font-condense-trigger-line-height);
-  letter-spacing: var(--sl-font-condense-trigger-letter-spacing);
+.text-style-trigger-condense {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
 }
 
 /* The selected or current item in the condense tier (dense UI text): selected tabs and toggles, the current nav item or page. Condense body text at semibold, so selection reads without changing size. */
-.text-style-condense-selected {
-  font-family: var(--sl-font-condense-selected-font-family);
-  font-size: var(--sl-font-condense-selected-font-size);
-  font-weight: var(--sl-font-condense-selected-font-weight);
-  line-height: var(--sl-font-condense-selected-line-height);
-  letter-spacing: var(--sl-font-condense-selected-letter-spacing);
+.text-style-selected-condense {
+  font-family: var(--sl-font-selected-condense-font-family);
+  font-size: var(--sl-font-selected-condense-font-size);
+  font-weight: var(--sl-font-selected-condense-font-weight);
+  line-height: var(--sl-font-selected-condense-line-height);
+  letter-spacing: var(--sl-font-selected-condense-letter-spacing);
 }
 
 /* Links in the condense tier. The same type as condense body text: a link stands out by color and underline, not by its type. */
-.text-style-condense-link {
-  font-family: var(--sl-font-condense-link-font-family);
-  font-size: var(--sl-font-condense-link-font-size);
-  font-weight: var(--sl-font-condense-link-font-weight);
-  line-height: var(--sl-font-condense-link-line-height);
-  letter-spacing: var(--sl-font-condense-link-letter-spacing);
+.text-style-link-condense {
+  font-family: var(--sl-font-link-condense-font-family);
+  font-size: var(--sl-font-link-condense-font-size);
+  font-weight: var(--sl-font-link-condense-font-weight);
+  line-height: var(--sl-font-link-condense-line-height);
+  letter-spacing: var(--sl-font-link-condense-letter-spacing);
 }
 
 /* Subtitles in the condense tier, dense UI text (tables, secondary labels). */
-.text-style-condense-subtitle {
-  font-family: var(--sl-font-condense-subtitle-font-family);
-  font-size: var(--sl-font-condense-subtitle-font-size);
-  font-weight: var(--sl-font-condense-subtitle-font-weight);
-  line-height: var(--sl-font-condense-subtitle-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-letter-spacing);
+.text-style-subtitle-condense {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
 }
 
 /* Small uppercase eyebrow labels in the condense tier, dense UI text (tables, secondary labels). */
-.text-style-condense-subtitle-label {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+.text-style-eyebrow-condense {
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
+}
+
+/* Titles in the condense tier: group headers in tables, menus and dense panels. Titles use the display family; the tier sets the size. */
+.text-style-title-condense {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
 }
 
 /* Body copy in the magnify tier, emphasized body text (lead paragraphs). */
-.text-style-magnify {
-  font-family: var(--sl-font-magnify-font-family);
-  font-size: var(--sl-font-magnify-font-size);
-  font-weight: var(--sl-font-magnify-font-weight);
-  line-height: var(--sl-font-magnify-line-height);
-  letter-spacing: var(--sl-font-magnify-letter-spacing);
+.text-style-body-magnify {
+  font-family: var(--sl-font-body-magnify-font-family);
+  font-size: var(--sl-font-body-magnify-font-size);
+  font-weight: var(--sl-font-body-magnify-font-weight);
+  line-height: var(--sl-font-body-magnify-line-height);
+  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
 /* Buttons and triggers in the magnify tier (emphasized, larger UI): magnify body text at medium, like base-trigger one tier up. */
-.text-style-magnify-trigger {
-  font-family: var(--sl-font-magnify-trigger-font-family);
-  font-size: var(--sl-font-magnify-trigger-font-size);
-  font-weight: var(--sl-font-magnify-trigger-font-weight);
-  line-height: var(--sl-font-magnify-trigger-line-height);
-  letter-spacing: var(--sl-font-magnify-trigger-letter-spacing);
+.text-style-trigger-magnify {
+  font-family: var(--sl-font-trigger-magnify-font-family);
+  font-size: var(--sl-font-trigger-magnify-font-size);
+  font-weight: var(--sl-font-trigger-magnify-font-weight);
+  line-height: var(--sl-font-trigger-magnify-line-height);
+  letter-spacing: var(--sl-font-trigger-magnify-letter-spacing);
+}
+
+/* Titles in the magnify tier: popovers, cards and fieldsets. Titles use the display family; the tier sets the size. */
+.text-style-title-magnify {
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
 }
 
 /* Body copy in the minimize tier, the smallest functional text (captions, fine print). */
-.text-style-minimize {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+.text-style-body-minimize {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
 }
 
 /* Buttons and triggers in the minimize tier (the smallest UI): minimize body text at medium, like base-trigger one tier down. */
-.text-style-minimize-trigger {
-  font-family: var(--sl-font-minimize-trigger-font-family);
-  font-size: var(--sl-font-minimize-trigger-font-size);
-  font-weight: var(--sl-font-minimize-trigger-font-weight);
-  line-height: var(--sl-font-minimize-trigger-line-height);
-  letter-spacing: var(--sl-font-minimize-trigger-letter-spacing);
+.text-style-trigger-minimize {
+  font-family: var(--sl-font-trigger-minimize-font-family);
+  font-size: var(--sl-font-trigger-minimize-font-size);
+  font-weight: var(--sl-font-trigger-minimize-font-weight);
+  line-height: var(--sl-font-trigger-minimize-line-height);
+  letter-spacing: var(--sl-font-trigger-minimize-letter-spacing);
 }
 
 /* The selected or current item in the minimize tier (the smallest functional text): selected tabs and toggles, the current nav item or page. Minimize body text at semibold, so selection reads without changing size. */
-.text-style-minimize-selected {
-  font-family: var(--sl-font-minimize-selected-font-family);
-  font-size: var(--sl-font-minimize-selected-font-size);
-  font-weight: var(--sl-font-minimize-selected-font-weight);
-  line-height: var(--sl-font-minimize-selected-line-height);
-  letter-spacing: var(--sl-font-minimize-selected-letter-spacing);
+.text-style-selected-minimize {
+  font-family: var(--sl-font-selected-minimize-font-family);
+  font-size: var(--sl-font-selected-minimize-font-size);
+  font-weight: var(--sl-font-selected-minimize-font-weight);
+  line-height: var(--sl-font-selected-minimize-line-height);
+  letter-spacing: var(--sl-font-selected-minimize-letter-spacing);
 }
 
 /* Links in the minimize tier. The same type as minimize body text: a link stands out by color and underline, not by its type. */
-.text-style-minimize-link {
-  font-family: var(--sl-font-minimize-link-font-family);
-  font-size: var(--sl-font-minimize-link-font-size);
-  font-weight: var(--sl-font-minimize-link-font-weight);
-  line-height: var(--sl-font-minimize-link-line-height);
-  letter-spacing: var(--sl-font-minimize-link-letter-spacing);
+.text-style-link-minimize {
+  font-family: var(--sl-font-link-minimize-font-family);
+  font-size: var(--sl-font-link-minimize-font-size);
+  font-weight: var(--sl-font-link-minimize-font-weight);
+  line-height: var(--sl-font-link-minimize-line-height);
+  letter-spacing: var(--sl-font-link-minimize-letter-spacing);
 }
 
 /* Subtitles in the minimize tier, the smallest functional text (captions, fine print). */
-.text-style-minimize-subtitle {
-  font-family: var(--sl-font-minimize-subtitle-font-family);
-  font-size: var(--sl-font-minimize-subtitle-font-size);
-  font-weight: var(--sl-font-minimize-subtitle-font-weight);
-  line-height: var(--sl-font-minimize-subtitle-line-height);
-  letter-spacing: var(--sl-font-minimize-subtitle-letter-spacing);
+.text-style-subtitle-minimize {
+  font-family: var(--sl-font-subtitle-minimize-font-family);
+  font-size: var(--sl-font-subtitle-minimize-font-size);
+  font-weight: var(--sl-font-subtitle-minimize-font-weight);
+  line-height: var(--sl-font-subtitle-minimize-line-height);
+  letter-spacing: var(--sl-font-subtitle-minimize-letter-spacing);
 }
 
 /* Small uppercase eyebrow labels in the minimize tier, the smallest functional text (captions, fine print). */
-.text-style-minimize-subtitle-label {
-  font-family: var(--sl-font-minimize-subtitle-label-font-family);
-  font-size: var(--sl-font-minimize-subtitle-label-font-size);
-  font-weight: var(--sl-font-minimize-subtitle-label-font-weight);
-  line-height: var(--sl-font-minimize-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-minimize-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-minimize-subtitle-label-text-transform);
-}
-
-/* Display text at 2xl, for headings and hero copy. */
-.text-style-maximize-2xl {
-  font-family: var(--sl-font-maximize-2xl-font-family);
-  font-size: var(--sl-font-maximize-2xl-font-size);
-  font-weight: var(--sl-font-maximize-2xl-font-weight);
-  line-height: var(--sl-font-maximize-2xl-line-height);
-  letter-spacing: var(--sl-font-maximize-2xl-letter-spacing);
-}
-
-/* Display text at 3xl, for headings and hero copy. */
-.text-style-maximize-3xl {
-  font-family: var(--sl-font-maximize-3xl-font-family);
-  font-size: var(--sl-font-maximize-3xl-font-size);
-  font-weight: var(--sl-font-maximize-3xl-font-weight);
-  line-height: var(--sl-font-maximize-3xl-line-height);
-  letter-spacing: var(--sl-font-maximize-3xl-letter-spacing);
-}
-
-/* Display text at 4xl, for headings and hero copy. */
-.text-style-maximize-4xl {
-  font-family: var(--sl-font-maximize-4xl-font-family);
-  font-size: var(--sl-font-maximize-4xl-font-size);
-  font-weight: var(--sl-font-maximize-4xl-font-weight);
-  line-height: var(--sl-font-maximize-4xl-line-height);
-  letter-spacing: var(--sl-font-maximize-4xl-letter-spacing);
-}
-
-/* Display text at lg, for headings and hero copy. */
-.text-style-maximize-lg {
-  font-family: var(--sl-font-maximize-lg-font-family);
-  font-size: var(--sl-font-maximize-lg-font-size);
-  font-weight: var(--sl-font-maximize-lg-font-weight);
-  line-height: var(--sl-font-maximize-lg-line-height);
-  letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
-}
-
-/* Display text at md, for headings and hero copy. */
-.text-style-maximize-md {
-  font-family: var(--sl-font-maximize-md-font-family);
-  font-size: var(--sl-font-maximize-md-font-size);
-  font-weight: var(--sl-font-maximize-md-font-weight);
-  line-height: var(--sl-font-maximize-md-line-height);
-  letter-spacing: var(--sl-font-maximize-md-letter-spacing);
-}
-
-/* Display text at sm, for headings and hero copy. */
-.text-style-maximize-sm {
-  font-family: var(--sl-font-maximize-sm-font-family);
-  font-size: var(--sl-font-maximize-sm-font-size);
-  font-weight: var(--sl-font-maximize-sm-font-weight);
-  line-height: var(--sl-font-maximize-sm-line-height);
-  letter-spacing: var(--sl-font-maximize-sm-letter-spacing);
-}
-
-/* Display text at xl, for headings and hero copy. */
-.text-style-maximize-xl {
-  font-family: var(--sl-font-maximize-xl-font-family);
-  font-size: var(--sl-font-maximize-xl-font-size);
-  font-weight: var(--sl-font-maximize-xl-font-weight);
-  line-height: var(--sl-font-maximize-xl-line-height);
-  letter-spacing: var(--sl-font-maximize-xl-letter-spacing);
-}
-
-/* Display text at xs, for headings and hero copy. */
-.text-style-maximize-xs {
-  font-family: var(--sl-font-maximize-xs-font-family);
-  font-size: var(--sl-font-maximize-xs-font-size);
-  font-weight: var(--sl-font-maximize-xs-font-weight);
-  line-height: var(--sl-font-maximize-xs-line-height);
-  letter-spacing: var(--sl-font-maximize-xs-letter-spacing);
+.text-style-eyebrow-minimize {
+  font-family: var(--sl-font-eyebrow-minimize-font-family);
+  font-size: var(--sl-font-eyebrow-minimize-font-size);
+  font-weight: var(--sl-font-eyebrow-minimize-font-weight);
+  line-height: var(--sl-font-eyebrow-minimize-line-height);
+  letter-spacing: var(--sl-font-eyebrow-minimize-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-minimize-text-transform);
+}
+
+/* Titles in the amplify tier: dialogs, drawers and page sections. Titles use the display family; the tier sets the size. */
+.text-style-title-amplify {
+  font-family: var(--sl-font-title-amplify-font-family);
+  font-size: var(--sl-font-title-amplify-font-size);
+  font-weight: var(--sl-font-title-amplify-font-weight);
+  line-height: var(--sl-font-title-amplify-line-height);
+  letter-spacing: var(--sl-font-title-amplify-letter-spacing);
+}
+
+/* Titles in the maximize tier: the page head. Titles use the display family; the tier sets the size. */
+.text-style-title-maximize {
+  font-family: var(--sl-font-title-maximize-font-family);
+  font-size: var(--sl-font-title-maximize-font-size);
+  font-weight: var(--sl-font-title-maximize-font-weight);
+  line-height: var(--sl-font-title-maximize-line-height);
+  letter-spacing: var(--sl-font-title-maximize-letter-spacing);
 }
 
 /* Responsive visibility from the breakpoint tokens. */
@@ -4347,7 +4630,7 @@
 }
 
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
    Loomiere theme. Load the theme first:
      @import '<your theme>/tokens.css';
@@ -4357,7 +4640,7 @@
 /* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
    frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -4801,7 +5084,7 @@ hr {
 }
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
 
 /* Remove default focus; keyboard focus styled in accessibility-theme.css */
@@ -4914,7 +5197,7 @@ main:focus {
 
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {
@@ -4982,11 +5265,11 @@ button,
 
 }
 /* Component styles */
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
- * concept (tokens/semantic/disclosure.json); the trigger is the maximize-md heading and
+ * concept (tokens/semantic/disclosure.json); the trigger is the title-base heading and
  * the panel is base text. The accordion sits on whatever surface holds it.
  */
 
@@ -5009,11 +5292,11 @@ button,
 
 .AccordionTrigger {
   all: unset;
-  font-family: var(--sl-font-maximize-md-font-family);
-  font-size: var(--sl-font-maximize-md-font-size);
-  font-weight: var(--sl-font-maximize-md-font-weight);
-  line-height: var(--sl-font-maximize-md-line-height);
-  letter-spacing: var(--sl-font-maximize-md-letter-spacing);
+  font-family: var(--sl-font-title-base-font-family);
+  font-size: var(--sl-font-title-base-font-size);
+  font-weight: var(--sl-font-title-base-font-weight);
+  line-height: var(--sl-font-title-base-line-height);
+  letter-spacing: var(--sl-font-title-base-letter-spacing);
   box-sizing: border-box;
   width: 100%;
   display: flex;
@@ -5075,11 +5358,11 @@ button,
 }
 
 .AccordionContent {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   padding: 0 var(--sl-space-6) var(--sl-space-4);
   color: var(--sl-disclosure-content-color);
 }
@@ -5103,7 +5386,7 @@ button,
   overflow: hidden;
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Alert Dialog - Mojave Theme
  *
  * No component tokens and no rules of its own. An alert dialog looks exactly like a
@@ -5112,7 +5395,7 @@ button,
  * cancel quiet, and a destructive one bold with data-color="error".
  */
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Autocomplete - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css), the clear button is an icon
@@ -5242,11 +5525,11 @@ button,
   user-select: none;
   outline: none;
   transition: var(--sl-item-transition);
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   cursor: pointer;
   list-style: none;
 }
@@ -5258,11 +5541,11 @@ button,
 }
 
 .AutocompleteItem[data-selected] {
-  font-family: var(--sl-font-base-selected-font-family);
-  font-size: var(--sl-font-base-selected-font-size);
-  font-weight: var(--sl-font-base-selected-font-weight);
-  line-height: var(--sl-font-base-selected-line-height);
-  letter-spacing: var(--sl-font-base-selected-letter-spacing);
+  font-family: var(--sl-font-selected-base-font-family);
+  font-size: var(--sl-font-selected-base-font-size);
+  font-weight: var(--sl-font-selected-base-font-weight);
+  line-height: var(--sl-font-selected-base-line-height);
+  letter-spacing: var(--sl-font-selected-base-letter-spacing);
   background: var(--sl-item-background-selected);
   color: var(--sl-item-color-selected);
 }
@@ -5278,12 +5561,12 @@ button,
    ============================================ */
 
 .AutocompleteGroupLabel {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
   padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
   padding-inline: var(--sl-item-padding-inline);
   color: var(--sl-text-secondary);
@@ -5297,11 +5580,11 @@ button,
 }
 
 .AutocompleteEmpty {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   padding-block: var(--sl-popup-empty-padding-block);
   padding-inline: var(--sl-item-padding-inline);
   color: var(--sl-text-tertiary);
@@ -5314,12 +5597,12 @@ button,
    (reset-accessibility.css).
    ============================================ */
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Avatar - Mojave Theme
  *
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in
- * both themes. Initials sit on the scope's solid fill in its on-solid text (the bold emphasis
- * colors), so data-color re-colors them. Initials use the heading text style one tier per size.
+ * both themes. Initials paint with the avatar's emphasis level (bold unless data-emphasis says
+ * otherwise), so data-color re-colors them and the brand's ladder sets how loud they are. Initials use the heading text style one tier per size.
  * Only the sizes are avatar tokens.
  */
 
@@ -5346,18 +5629,19 @@ button,
 }
 
 .AvatarFallback {
-  font-family: var(--sl-font-maximize-md-font-family);
-  font-size: var(--sl-font-maximize-md-font-size);
-  font-weight: var(--sl-font-maximize-md-font-weight);
-  line-height: var(--sl-font-maximize-md-line-height);
-  letter-spacing: var(--sl-font-maximize-md-letter-spacing);
+  font-family: var(--sl-font-title-base-font-family);
+  font-size: var(--sl-font-title-base-font-size);
+  font-weight: var(--sl-font-title-base-font-weight);
+  line-height: var(--sl-font-title-base-line-height);
+  letter-spacing: var(--sl-font-title-base-letter-spacing);
+  font-size: var(--avatar-initials-size, var(--sl-avatar-initials-font-size-md));
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
-  background: var(--sl-scope-solid);
-  color: var(--sl-scope-on-solid);
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
   text-transform: uppercase;
   user-select: none;
 }
@@ -5368,50 +5652,22 @@ button,
 
 .AvatarRoot[data-size='xs'] {
   --avatar-size: var(--sl-avatar-size-xs);
-}
-
-.AvatarRoot[data-size='xs'] .AvatarFallback {
-  font-family: var(--sl-font-maximize-xs-font-family);
-  font-size: var(--sl-font-maximize-xs-font-size);
-  font-weight: var(--sl-font-maximize-xs-font-weight);
-  line-height: var(--sl-font-maximize-xs-line-height);
-  letter-spacing: var(--sl-font-maximize-xs-letter-spacing);
+  --avatar-initials-size: var(--sl-avatar-initials-font-size-xs);
 }
 
 .AvatarRoot[data-size='sm'] {
   --avatar-size: var(--sl-avatar-size-sm);
-}
-
-.AvatarRoot[data-size='sm'] .AvatarFallback {
-  font-family: var(--sl-font-maximize-sm-font-family);
-  font-size: var(--sl-font-maximize-sm-font-size);
-  font-weight: var(--sl-font-maximize-sm-font-weight);
-  line-height: var(--sl-font-maximize-sm-line-height);
-  letter-spacing: var(--sl-font-maximize-sm-letter-spacing);
+  --avatar-initials-size: var(--sl-avatar-initials-font-size-sm);
 }
 
 .AvatarRoot[data-size='lg'] {
   --avatar-size: var(--sl-avatar-size-lg);
-}
-
-.AvatarRoot[data-size='lg'] .AvatarFallback {
-  font-family: var(--sl-font-maximize-lg-font-family);
-  font-size: var(--sl-font-maximize-lg-font-size);
-  font-weight: var(--sl-font-maximize-lg-font-weight);
-  line-height: var(--sl-font-maximize-lg-line-height);
-  letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
+  --avatar-initials-size: var(--sl-avatar-initials-font-size-lg);
 }
 
 .AvatarRoot[data-size='xl'] {
   --avatar-size: var(--sl-avatar-size-xl);
-}
-
-.AvatarRoot[data-size='xl'] .AvatarFallback {
-  font-family: var(--sl-font-maximize-2xl-font-family);
-  font-size: var(--sl-font-maximize-2xl-font-size);
-  font-weight: var(--sl-font-maximize-2xl-font-weight);
-  line-height: var(--sl-font-maximize-2xl-line-height);
-  letter-spacing: var(--sl-font-maximize-2xl-letter-spacing);
+  --avatar-initials-size: var(--sl-avatar-initials-font-size-xl);
 }
 
 /* ============================================
@@ -5449,7 +5705,7 @@ button,
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Button - Mojave Theme
  *
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
@@ -5462,11 +5718,11 @@ button,
    ============================================ */
 
 .Button {
-  font-family: var(--sl-font-base-trigger-font-family);
-  font-size: var(--sl-font-base-trigger-font-size);
-  font-weight: var(--sl-font-base-trigger-font-weight);
-  line-height: var(--sl-font-base-trigger-line-height);
-  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -5547,11 +5803,11 @@ button,
    ============================================ */
 
 .Button[data-size='xs'] {
-  font-family: var(--sl-font-minimize-trigger-font-family);
-  font-size: var(--sl-font-minimize-trigger-font-size);
-  font-weight: var(--sl-font-minimize-trigger-font-weight);
-  line-height: var(--sl-font-minimize-trigger-line-height);
-  letter-spacing: var(--sl-font-minimize-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-minimize-font-family);
+  font-size: var(--sl-font-trigger-minimize-font-size);
+  font-weight: var(--sl-font-trigger-minimize-font-weight);
+  line-height: var(--sl-font-trigger-minimize-line-height);
+  letter-spacing: var(--sl-font-trigger-minimize-letter-spacing);
   gap: var(--sl-gap-control-xs);
   height: var(--sl-control-height-xs);
   padding-inline: var(--sl-control-padding-inline-xs);
@@ -5565,11 +5821,11 @@ button,
 }
 
 .Button[data-size='sm'] {
-  font-family: var(--sl-font-condense-trigger-font-family);
-  font-size: var(--sl-font-condense-trigger-font-size);
-  font-weight: var(--sl-font-condense-trigger-font-weight);
-  line-height: var(--sl-font-condense-trigger-line-height);
-  letter-spacing: var(--sl-font-condense-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
   gap: var(--sl-gap-control-sm);
   height: var(--sl-control-height-sm);
   padding-inline: var(--sl-control-padding-inline-sm);
@@ -5583,11 +5839,11 @@ button,
 }
 
 .Button[data-size='lg'] {
-  font-family: var(--sl-font-magnify-trigger-font-family);
-  font-size: var(--sl-font-magnify-trigger-font-size);
-  font-weight: var(--sl-font-magnify-trigger-font-weight);
-  line-height: var(--sl-font-magnify-trigger-line-height);
-  letter-spacing: var(--sl-font-magnify-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-magnify-font-family);
+  font-size: var(--sl-font-trigger-magnify-font-size);
+  font-weight: var(--sl-font-trigger-magnify-font-weight);
+  line-height: var(--sl-font-trigger-magnify-line-height);
+  letter-spacing: var(--sl-font-trigger-magnify-letter-spacing);
   height: var(--sl-control-height-lg);
   padding-inline: var(--sl-control-padding-inline-lg);
 }
@@ -5599,7 +5855,7 @@ button,
   font-size: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox - Mojave Theme
  * Sizes follow the label: the box is the icon size one tier above the label's text
  * tier (like a button's icon) and the check mark one tier below it.
@@ -5616,28 +5872,28 @@ button,
   color: var(--sl-text-primary);
   cursor: pointer;
   user-select: none;
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   min-height: var(--sl-control-height-md); /* Tap target */
 }
 
 .CheckboxLabel:has(.CheckboxRoot[data-size='sm']) {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 
 .CheckboxLabel:has(.CheckboxRoot[data-size='lg']) {
-  font-family: var(--sl-font-magnify-font-family);
-  font-size: var(--sl-font-magnify-font-size);
-  font-weight: var(--sl-font-magnify-font-weight);
-  line-height: var(--sl-font-magnify-line-height);
-  letter-spacing: var(--sl-font-magnify-letter-spacing);
+  font-family: var(--sl-font-body-magnify-font-family);
+  font-size: var(--sl-font-body-magnify-font-size);
+  font-weight: var(--sl-font-body-magnify-font-weight);
+  line-height: var(--sl-font-body-magnify-line-height);
+  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
 .CheckboxLabel:has(.CheckboxRoot[data-disabled]) {
@@ -5756,7 +6012,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox Group - Mojave Theme */
 
 /* Each checkbox row is already a full tap target tall, so the rows sit close. */
@@ -5772,7 +6028,7 @@ button,
   pointer-events: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -5787,11 +6043,11 @@ button,
 
 .CollapsibleTrigger {
   all: unset;
-  font-family: var(--sl-font-base-subtitle-font-family);
-  font-size: var(--sl-font-base-subtitle-font-size);
-  font-weight: var(--sl-font-base-subtitle-font-weight);
-  line-height: var(--sl-font-base-subtitle-line-height);
-  letter-spacing: var(--sl-font-base-subtitle-letter-spacing);
+  font-family: var(--sl-font-subtitle-base-font-family);
+  font-size: var(--sl-font-subtitle-base-font-size);
+  font-weight: var(--sl-font-subtitle-base-font-weight);
+  line-height: var(--sl-font-subtitle-base-line-height);
+  letter-spacing: var(--sl-font-subtitle-base-letter-spacing);
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -5855,11 +6111,11 @@ button,
 
 /* Content starts under the trigger's text: its padding, the chevron and the gap. */
 .CollapsibleContent {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   display: flex;
   flex-direction: column;
   gap: var(--sl-space-2);
@@ -5876,11 +6132,11 @@ button,
 }
 
 .CollapsibleContent code {
-  font-family: var(--sl-font-code-font-family);
-  font-size: var(--sl-font-code-font-size);
-  font-weight: var(--sl-font-code-font-weight);
-  line-height: var(--sl-font-code-line-height);
-  letter-spacing: var(--sl-font-code-letter-spacing);
+  font-family: var(--sl-font-code-condense-font-family);
+  font-size: var(--sl-font-code-condense-font-size);
+  font-weight: var(--sl-font-code-condense-font-weight);
+  line-height: var(--sl-font-code-condense-line-height);
+  letter-spacing: var(--sl-font-code-condense-letter-spacing);
   display: block;
   margin-top: var(--sl-space-2);
   padding: var(--sl-space-2);
@@ -5888,7 +6144,7 @@ button,
   background: var(--sl-surface-raised);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Combobox - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css); the chips box is a field; the
@@ -5912,11 +6168,11 @@ button,
 }
 
 .ComboboxLabel {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
   display: flex;
   flex-direction: column;
   gap: var(--sl-field-label-spacing);
@@ -5975,11 +6231,11 @@ button,
 }
 
 .ComboboxChip {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   display: flex;
   align-items: center;
   gap: var(--sl-space-1);
@@ -6147,11 +6403,11 @@ button,
   user-select: none;
   outline: none;
   transition: var(--sl-item-transition);
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   cursor: pointer;
   list-style: none;
 }
@@ -6163,11 +6419,11 @@ button,
 }
 
 .ComboboxItem[data-selected] {
-  font-family: var(--sl-font-base-selected-font-family);
-  font-size: var(--sl-font-base-selected-font-size);
-  font-weight: var(--sl-font-base-selected-font-weight);
-  line-height: var(--sl-font-base-selected-line-height);
-  letter-spacing: var(--sl-font-base-selected-letter-spacing);
+  font-family: var(--sl-font-selected-base-font-family);
+  font-size: var(--sl-font-selected-base-font-size);
+  font-weight: var(--sl-font-selected-base-font-weight);
+  line-height: var(--sl-font-selected-base-line-height);
+  letter-spacing: var(--sl-font-selected-base-letter-spacing);
   background: var(--sl-item-background-selected);
   color: var(--sl-item-color-selected);
 }
@@ -6203,12 +6459,12 @@ button,
    ============================================ */
 
 .ComboboxGroupLabel {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
   padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
   padding-inline: var(--sl-item-padding-inline);
   color: var(--sl-text-secondary);
@@ -6222,11 +6478,11 @@ button,
 }
 
 .ComboboxEmpty:not(:empty) {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   padding-block: var(--sl-popup-empty-padding-block);
   padding-inline: var(--sl-item-padding-inline);
   color: var(--sl-text-tertiary);
@@ -6237,11 +6493,11 @@ button,
    and shown while results load or when it has a message. */
 .ComboboxPopup[aria-busy] .ComboboxStatus,
 .ComboboxStatus:not(:empty) {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   position: static;
   width: auto;
   height: auto;
@@ -6273,11 +6529,11 @@ button,
   border-radius: var(--sl-field-radius);
   transition: var(--sl-field-transition);
   outline: none;
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -6334,20 +6590,20 @@ button,
 }
 
 .ComboboxItemTitle {
-  font-family: var(--sl-font-base-trigger-font-family);
-  font-size: var(--sl-font-base-trigger-font-size);
-  font-weight: var(--sl-font-base-trigger-font-weight);
-  line-height: var(--sl-font-base-trigger-line-height);
-  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
   color: var(--sl-text-primary);
 }
 
 .ComboboxItemSubtitle {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   display: flex;
   gap: var(--sl-space-2);
   margin-top: var(--sl-space-0-5);
@@ -6355,25 +6611,25 @@ button,
 }
 
 .ComboboxItemUsername {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
   color: var(--sl-interactive-default);
 }
 
 .ComboboxItemEmail {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
   margin-top: var(--sl-space-0-5);
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Context Menu - Mojave Theme
  *
  * No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the
@@ -6432,11 +6688,11 @@ button,
   user-select: none;
   outline: none;
   transition: var(--sl-item-transition);
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   padding-block: var(--sl-item-padding-block-dense);
   cursor: pointer;
   list-style: none;
@@ -6499,12 +6755,12 @@ button,
 }
 
 .ContextMenuGroupLabel {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
   padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
   padding-inline: var(--sl-item-padding-inline);
   color: var(--sl-text-secondary);
@@ -6542,11 +6798,11 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Dialog and Alert dialog - Mojave Theme
  *
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
- * the modal-surface and modal-backdrop patterns, the maximize-xl heading and base
+ * the modal-surface and modal-backdrop patterns, the title-amplify heading and base
  * description. Alert dialog shares every rule here; AlertDialog.css adds nothing of
  * its own. Action buttons are plain .Button elements, so they follow the emphasis levels.
  */
@@ -6636,11 +6892,11 @@ button,
 /* Title */
 .DialogTitle,
 .AlertDialogTitle {
-  font-family: var(--sl-font-maximize-xl-font-family);
-  font-size: var(--sl-font-maximize-xl-font-size);
-  font-weight: var(--sl-font-maximize-xl-font-weight);
-  line-height: var(--sl-font-maximize-xl-line-height);
-  letter-spacing: var(--sl-font-maximize-xl-letter-spacing);
+  font-family: var(--sl-font-title-amplify-font-family);
+  font-size: var(--sl-font-title-amplify-font-size);
+  font-weight: var(--sl-font-title-amplify-font-weight);
+  line-height: var(--sl-font-title-amplify-line-height);
+  letter-spacing: var(--sl-font-title-amplify-letter-spacing);
   color: var(--sl-modal-title-color);
   margin: 0;
 }
@@ -6648,11 +6904,11 @@ button,
 /* Description */
 .DialogDescription,
 .AlertDialogDescription {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   color: var(--sl-modal-description-color);
   margin: 0;
 }
@@ -6688,7 +6944,7 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Drawer - a panel that slides in from an edge and can be swiped away.
    The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
    drawer reads as a dialog's sibling; only its size and grab bar are its own
@@ -6796,26 +7052,26 @@ button,
 }
 
 .DrawerTitle {
-  font-family: var(--sl-font-maximize-xl-font-family);
-  font-size: var(--sl-font-maximize-xl-font-size);
-  font-weight: var(--sl-font-maximize-xl-font-weight);
-  line-height: var(--sl-font-maximize-xl-line-height);
-  letter-spacing: var(--sl-font-maximize-xl-letter-spacing);
+  font-family: var(--sl-font-title-amplify-font-family);
+  font-size: var(--sl-font-title-amplify-font-size);
+  font-weight: var(--sl-font-title-amplify-font-weight);
+  line-height: var(--sl-font-title-amplify-line-height);
+  letter-spacing: var(--sl-font-title-amplify-letter-spacing);
   margin: 0;
   color: var(--sl-modal-title-color);
 }
 
 .DrawerDescription {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   margin: 0;
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -6837,11 +7093,11 @@ button,
 
 .FieldLabel,
 .NumberFieldLabel {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
   display: block;
   margin-bottom: var(--sl-field-label-spacing);
   color: var(--sl-text-primary);
@@ -6849,22 +7105,22 @@ button,
 
 .FieldDescription,
 .NumberFieldDescription {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   margin: var(--sl-field-message-spacing) 0 0;
   color: var(--sl-text-secondary);
 }
 
 .FieldError,
 .NumberFieldError {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
   margin: var(--sl-field-message-spacing) 0 0;
   color: var(--sl-status-error);
 }
@@ -6876,57 +7132,7 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
-/* Icon Button - Mojave Theme
- *
- * A small, quiet icon-only button: the icon-button concept (tokens/semantic/icon-button.json),
- * the same look as the X that closes a dialog or toast, as a part of its own. For calendar
- * arrows, row actions and clear buttons, where a Button would be too loud. No component tokens.
- */
-
-.IconButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--sl-icon-button-size);
-  height: var(--sl-icon-button-size);
-  padding: 0;
-  border: none;
-  border-radius: var(--sl-icon-button-radius);
-  background: transparent;
-  color: var(--sl-icon-button-color);
-  cursor: pointer;
-  outline: none;
-  transition: var(--sl-icon-button-transition);
-}
-
-.IconButton svg,
-.IconButton .material-symbols-outlined {
-  width: var(--sl-icon-size-base);
-  height: var(--sl-icon-size-base);
-  font-size: var(--sl-icon-size-base);
-  line-height: 1;
-}
-
-.IconButton:hover:not(:disabled):not([aria-disabled='true']) {
-  background: var(--sl-icon-button-background-hover);
-  color: var(--sl-icon-button-color-hover);
-}
-
-.IconButton:focus-visible {
-  outline: var(--sl-focus-outline);
-  outline-offset: var(--sl-focus-outline-offset);
-  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
-}
-
-.IconButton:disabled,
-.IconButton[aria-disabled='true'] {
-  color: var(--sl-text-disabled);
-  cursor: not-allowed;
-}
-
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Fieldset - Mojave Theme
  *
  * No component tokens: a titled group of fields, spaced by the stack gaps, with
@@ -6948,27 +7154,27 @@ textarea.FieldControl {
 }
 
 .FieldsetLegend {
-  font-family: var(--sl-font-maximize-lg-font-family);
-  font-size: var(--sl-font-maximize-lg-font-size);
-  font-weight: var(--sl-font-maximize-lg-font-weight);
-  line-height: var(--sl-font-maximize-lg-line-height);
-  letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
   margin-bottom: var(--sl-space-block-sm);
   padding: 0;
   color: var(--sl-text-primary);
 }
 
 .FieldsetDescription {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   margin-bottom: var(--sl-space-block-sm);
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Form - Mojave Theme
  *
  * No component tokens: fields stack with the large block space, and the action
@@ -6988,7 +7194,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Input - Mojave Theme
  *
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -7015,11 +7221,11 @@ textarea.FieldControl {
   border-radius: var(--sl-field-radius);
   transition: var(--sl-field-transition);
   outline: none;
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   width: 100%;
   height: var(--sl-control-height-md);
   padding-block: var(--sl-control-padding-block);
@@ -7093,39 +7299,39 @@ textarea.FieldControl {
    ============================================ */
 
 .Input[data-size='xs'] {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
   height: var(--sl-control-height-xs);
   padding-block: var(--sl-control-padding-block-xs);
   padding-inline: var(--sl-control-padding-inline-xs);
 }
 
 .Input[data-size='sm'] {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   height: var(--sl-control-height-sm);
   padding-block: var(--sl-control-padding-block-sm);
   padding-inline: var(--sl-control-padding-inline-sm);
 }
 
 .Input[data-size='lg'] {
-  font-family: var(--sl-font-magnify-font-family);
-  font-size: var(--sl-font-magnify-font-size);
-  font-weight: var(--sl-font-magnify-font-weight);
-  line-height: var(--sl-font-magnify-line-height);
-  letter-spacing: var(--sl-font-magnify-letter-spacing);
+  font-family: var(--sl-font-body-magnify-font-family);
+  font-size: var(--sl-font-body-magnify-font-size);
+  font-weight: var(--sl-font-body-magnify-font-weight);
+  line-height: var(--sl-font-body-magnify-line-height);
+  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
   height: var(--sl-control-height-lg);
   padding-block: var(--sl-control-padding-block-lg);
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Menu - Mojave Theme
  *
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
@@ -7179,11 +7385,11 @@ textarea.FieldControl {
   user-select: none;
   outline: none;
   transition: var(--sl-item-transition);
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   padding-block: var(--sl-item-padding-block-dense);
   cursor: pointer;
   list-style: none;
@@ -7246,12 +7452,12 @@ textarea.FieldControl {
 }
 
 .MenuGroupLabel {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
   padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
   padding-inline: var(--sl-item-padding-inline);
   color: var(--sl-text-secondary);
@@ -7274,7 +7480,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Menubar - Mojave Theme
  *
  * No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
@@ -7294,11 +7500,11 @@ textarea.FieldControl {
 
 /* Triggers look like menu rows until their menu opens, then like a selected row. */
 .MenubarTrigger {
-  font-family: var(--sl-font-condense-trigger-font-family);
-  font-size: var(--sl-font-condense-trigger-font-size);
-  font-weight: var(--sl-font-condense-trigger-font-weight);
-  line-height: var(--sl-font-condense-trigger-line-height);
-  letter-spacing: var(--sl-font-condense-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
   padding-block: var(--sl-item-padding-block-dense);
   padding-inline: var(--sl-item-padding-inline);
   border: none;
@@ -7372,11 +7578,11 @@ textarea.FieldControl {
   user-select: none;
   outline: none;
   transition: var(--sl-item-transition);
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   padding-block: var(--sl-item-padding-block-dense);
   cursor: pointer;
   list-style: none;
@@ -7439,12 +7645,12 @@ textarea.FieldControl {
 }
 
 .MenubarGroupLabel {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
   padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
   padding-inline: var(--sl-item-padding-inline);
   color: var(--sl-text-secondary);
@@ -7467,7 +7673,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Meter - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
@@ -7483,11 +7689,11 @@ textarea.FieldControl {
 }
 
 .MeterLabel {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
   color: var(--sl-gauge-label-color);
   display: flex;
   justify-content: space-between;
@@ -7510,11 +7716,11 @@ textarea.FieldControl {
 }
 
 .MeterValue {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
   color: var(--sl-gauge-value-color);
   text-align: right;
 }
@@ -7527,7 +7733,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Navigation Menu - Mojave Theme
  *
  * The strip is the bar concept, the panel is the popup concept and each link is an item
@@ -7573,11 +7779,11 @@ textarea.FieldControl {
    ============================================ */
 
 .NavigationMenuTrigger {
-  font-family: var(--sl-font-base-trigger-font-family);
-  font-size: var(--sl-font-base-trigger-font-size);
-  font-weight: var(--sl-font-base-trigger-font-weight);
-  line-height: var(--sl-font-base-trigger-line-height);
-  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -7857,21 +8063,21 @@ textarea.FieldControl {
 }
 
 .NavigationMenuLinkTitle {
-  font-family: var(--sl-font-base-trigger-font-family);
-  font-size: var(--sl-font-base-trigger-font-size);
-  font-weight: var(--sl-font-base-trigger-font-weight);
-  line-height: var(--sl-font-base-trigger-line-height);
-  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
   margin: 0 0 var(--sl-space-1) 0;
   color: var(--sl-text-primary);
 }
 
 .NavigationMenuLinkDescription {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   margin: 0;
   color: var(--sl-text-secondary);
 }
@@ -7887,12 +8093,12 @@ textarea.FieldControl {
 }
 
 .NavigationMenuSectionHeading {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
   margin: 0 0 var(--sl-space-2) 0;
   color: var(--sl-text-secondary);
 }
@@ -7947,7 +8153,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Number Field - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css) and the label, description and
@@ -8038,7 +8244,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* OTP Field - Mojave Theme
  *
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input
@@ -8081,11 +8287,11 @@ textarea.FieldControl {
 }
 
 .OTPFieldRoot[data-size='sm'] .OTPFieldInput {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 
 .OTPFieldRoot[data-size='lg'] {
@@ -8094,14 +8300,14 @@ textarea.FieldControl {
 }
 
 .OTPFieldRoot[data-size='lg'] .OTPFieldInput {
-  font-family: var(--sl-font-magnify-font-family);
-  font-size: var(--sl-font-magnify-font-size);
-  font-weight: var(--sl-font-magnify-font-weight);
-  line-height: var(--sl-font-magnify-line-height);
-  letter-spacing: var(--sl-font-magnify-letter-spacing);
+  font-family: var(--sl-font-body-magnify-font-family);
+  font-size: var(--sl-font-body-magnify-font-size);
+  font-weight: var(--sl-font-body-magnify-font-weight);
+  line-height: var(--sl-font-body-magnify-line-height);
+  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -8167,11 +8373,11 @@ textarea.FieldControl {
    ============================================ */
 
 .PopoverTitle {
-  font-family: var(--sl-font-maximize-lg-font-family);
-  font-size: var(--sl-font-maximize-lg-font-size);
-  font-weight: var(--sl-font-maximize-lg-font-weight);
-  line-height: var(--sl-font-maximize-lg-line-height);
-  letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
   color: var(--sl-text-primary);
   margin: 0 0 var(--sl-space-block-xs) 0;
   max-width: var(--sl-popover-text-max-width);
@@ -8182,11 +8388,11 @@ textarea.FieldControl {
    ============================================ */
 
 .PopoverDescription {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   color: var(--sl-text-secondary);
   margin: 0;
   max-width: var(--sl-popover-text-max-width);
@@ -8266,10 +8472,10 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Preview Card - Mojave Theme
  *
- * The popup concept (surface, arrow, motion) with a maximize-lg title and condense
+ * The popup concept (surface, arrow, motion) with a title-magnify title and condense
  * description. Only its min and max width are its own (tokens/component/preview-card.json).
  */
 
@@ -8324,21 +8530,21 @@ textarea.FieldControl {
 }
 
 .PreviewCardTitle {
-  font-family: var(--sl-font-maximize-lg-font-family);
-  font-size: var(--sl-font-maximize-lg-font-size);
-  font-weight: var(--sl-font-maximize-lg-font-weight);
-  line-height: var(--sl-font-maximize-lg-line-height);
-  letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
   margin: 0 0 var(--sl-space-2) 0;
   color: var(--sl-text-primary);
 }
 
 .PreviewCardDescription {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   margin: 0;
   color: var(--sl-text-secondary);
 }
@@ -8383,7 +8589,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Progress - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
@@ -8405,20 +8611,20 @@ textarea.FieldControl {
 }
 
 .ProgressLabel {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
   color: var(--sl-gauge-label-color);
 }
 
 .ProgressValue {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
   color: var(--sl-gauge-value-color);
 }
 
@@ -8460,7 +8666,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Radio - Mojave Theme
  * Same box as Checkbox, always round. Sizes follow the label the same way, and the
  * dot is a share of the circle (check.dot-scale).
@@ -8575,27 +8781,27 @@ textarea.FieldControl {
    ============================================ */
 
 .RadioLabel {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
 
 .RadioRoot[data-size='sm'] .RadioLabel {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 
 .RadioRoot[data-size='lg'] .RadioLabel {
-  font-family: var(--sl-font-magnify-font-family);
-  font-size: var(--sl-font-magnify-font-size);
-  font-weight: var(--sl-font-magnify-font-weight);
-  line-height: var(--sl-font-magnify-line-height);
-  letter-spacing: var(--sl-font-magnify-letter-spacing);
+  font-family: var(--sl-font-body-magnify-font-family);
+  font-size: var(--sl-font-body-magnify-font-size);
+  font-weight: var(--sl-font-body-magnify-font-weight);
+  line-height: var(--sl-font-body-magnify-line-height);
+  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
 .RadioRoot[data-disabled] .RadioLabel {
@@ -8612,7 +8818,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Scroll Area - Mojave Theme
  *
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
@@ -8694,7 +8900,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Select - Mojave Theme
  *
  * The trigger is a field (the field pattern, control sizes, the base text style); the
@@ -8713,11 +8919,11 @@ textarea.FieldControl {
   border-radius: var(--sl-field-radius);
   transition: var(--sl-field-transition);
   outline: none;
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -8848,11 +9054,11 @@ textarea.FieldControl {
   user-select: none;
   outline: none;
   transition: var(--sl-item-transition);
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   cursor: pointer;
 }
 
@@ -8863,11 +9069,11 @@ textarea.FieldControl {
 }
 
 .SelectItem[data-selected] {
-  font-family: var(--sl-font-base-selected-font-family);
-  font-size: var(--sl-font-base-selected-font-size);
-  font-weight: var(--sl-font-base-selected-font-weight);
-  line-height: var(--sl-font-base-selected-line-height);
-  letter-spacing: var(--sl-font-base-selected-letter-spacing);
+  font-family: var(--sl-font-selected-base-font-family);
+  font-size: var(--sl-font-selected-base-font-size);
+  font-weight: var(--sl-font-selected-base-font-weight);
+  line-height: var(--sl-font-selected-base-line-height);
+  letter-spacing: var(--sl-font-selected-base-letter-spacing);
   background: var(--sl-item-background-selected);
   color: var(--sl-item-color-selected);
 }
@@ -8909,12 +9115,12 @@ textarea.FieldControl {
 }
 
 .SelectGroupLabel {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
   padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
   padding-inline: var(--sl-item-padding-inline);
   color: var(--sl-text-secondary);
@@ -8968,7 +9174,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Separator - Mojave Theme
  *
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
@@ -8996,7 +9202,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Slider - Mojave Theme
  *
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
@@ -9019,20 +9225,20 @@ textarea.FieldControl {
 }
 
 .SliderLabel {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
   color: var(--sl-gauge-label-color);
 }
 
 .SliderValue {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
   color: var(--sl-gauge-value-color);
 }
 
@@ -9162,7 +9368,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Switch - Mojave Theme
  * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
  * worked out from them: the thumb fills the track's height inside the padding,
@@ -9234,12 +9440,12 @@ textarea.FieldControl {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
   font-size: var(--switch-text-size);
   line-height: 1;
   color: var(--sl-text-secondary);
@@ -9301,34 +9507,179 @@ textarea.FieldControl {
 
 /* Switch labels run one step smaller than checkbox and radio labels (switch.json). */
 .SwitchLabel {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
 }
 
 .SwitchContainer[data-size='sm'] .SwitchLabel {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
 }
 
 .SwitchContainer[data-size='lg'] .SwitchLabel {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
 
 .SwitchContainer[data-disabled] .SwitchLabel {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
+/* Table - Mojave Theme
+ *
+ * Base UI has no table, so this styles the native <table class="Table"> elements with the
+ * table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small
+ * hand-built table and a full grid look alike. Rows answer to aria-selected="true" (or
+ * data-selected) for selection; cells take data-align="end" for numbers.
+ */
+
+.Table {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  box-sizing: border-box;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--sl-table-background);
+  color: var(--sl-table-color);
+  border: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-radius: var(--sl-table-radius);
+  overflow: hidden;
+  font-variant-numeric: tabular-nums;
+}
+
+.Table caption {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  caption-side: bottom;
+  padding-block: var(--sl-space-2);
+  color: var(--sl-table-subtle-color);
+  text-align: start;
+}
+
+/* Header: the tray band, a little taller than the rows */
+.Table th {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  height: var(--sl-table-header-height);
+  padding-block: 0;
+  padding-inline: var(--sl-table-cell-padding-inline);
+  background: var(--sl-table-header-background);
+  color: var(--sl-table-header-color);
+  text-align: start;
+  vertical-align: middle;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-border-color);
+}
+
+/* A header that sorts: aria-sort on the th */
+.Table th[aria-sort] {
+  cursor: pointer;
+  transition: background-color var(--sl-duration-fast) var(--sl-easing-default);
+}
+
+.Table th[aria-sort]:hover {
+  background: var(--sl-table-header-background-hover);
+}
+
+/* Body cells */
+.Table td {
+  height: var(--sl-table-row-height);
+  padding-block: 0;
+  padding-inline: var(--sl-table-cell-padding-inline);
+  vertical-align: middle;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+.Table tbody tr:last-child td,
+.Table tbody:last-child tr:last-child td {
+  border-bottom: none;
+}
+
+/* A row header (th in tbody) reads like a cell, in the header's weight */
+.Table tbody th {
+  background: transparent;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+/* Numbers and amounts: right-aligned so digits line up */
+.Table [data-align='end'] {
+  text-align: end;
+}
+
+.Table [data-align='center'] {
+  text-align: center;
+}
+
+/* Secondary text in a cell */
+.Table [data-subtle] {
+  color: var(--sl-table-subtle-color);
+}
+
+/* Hover and selection: the same tints as list items */
+@media (hover: hover) {
+  .Table tbody tr:hover > * {
+    background: var(--sl-table-row-hover);
+    color: var(--sl-item-color-hover);
+  }
+}
+
+.Table tbody tr:is([aria-selected='true'], [data-selected]) > * {
+  background: var(--sl-table-row-selected);
+  color: var(--sl-item-color-selected);
+}
+
+/* Footer: totals on the tray band */
+.Table tfoot td {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  background: var(--sl-table-header-background);
+  border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-bottom: none;
+}
+
+/* A header that stays put while the body scrolls (the table's wrapper scrolls) */
+.Table[data-sticky-header] thead th {
+  position: sticky;
+  top: 0;
+  z-index: var(--sl-z-index-docked);
+}
+
+/* Empty state: one cell spanning the columns */
+.Table td[data-empty] {
+  height: auto;
+  padding-block: var(--sl-space-10);
+  color: var(--sl-text-tertiary);
+  text-align: center;
+}
+
+.Table tbody tr:has(> td[data-empty]):hover > * {
+  background: transparent;
+  color: var(--sl-text-tertiary);
+}
+
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Tabs - Mojave Theme
  *
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -9361,11 +9712,11 @@ textarea.FieldControl {
 /* Tab: a transparent line under it that turns accent when selected. */
 .TabsTab {
   all: unset;
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -9384,11 +9735,11 @@ textarea.FieldControl {
 }
 
 .TabsTab[data-active] {
-  font-family: var(--sl-font-base-selected-font-family);
-  font-size: var(--sl-font-base-selected-font-size);
-  font-weight: var(--sl-font-base-selected-font-weight);
-  line-height: var(--sl-font-base-selected-line-height);
-  letter-spacing: var(--sl-font-base-selected-letter-spacing);
+  font-family: var(--sl-font-selected-base-font-family);
+  font-size: var(--sl-font-selected-base-font-size);
+  font-weight: var(--sl-font-selected-base-font-weight);
+  line-height: var(--sl-font-selected-base-line-height);
+  letter-spacing: var(--sl-font-selected-base-letter-spacing);
   color: var(--sl-disclosure-selected-color);
   border-bottom-color: var(--sl-disclosure-indicator-color);
 }
@@ -9415,11 +9766,11 @@ textarea.FieldControl {
 
 /* Panel */
 .TabsPanel {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   padding: var(--sl-space-4);
   color: var(--sl-text-primary);
 }
@@ -9431,28 +9782,28 @@ textarea.FieldControl {
 
 /* Sizes: the minimize tier for small tabs, more room for large ones. */
 .TabsRoot[data-size='sm'] .TabsTab {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
   padding: var(--sl-space-1-5) var(--sl-space-3);
 }
 
 .TabsRoot[data-size='sm'] .TabsTab[data-active] {
-  font-family: var(--sl-font-minimize-selected-font-family);
-  font-size: var(--sl-font-minimize-selected-font-size);
-  font-weight: var(--sl-font-minimize-selected-font-weight);
-  line-height: var(--sl-font-minimize-selected-line-height);
-  letter-spacing: var(--sl-font-minimize-selected-letter-spacing);
+  font-family: var(--sl-font-selected-minimize-font-family);
+  font-size: var(--sl-font-selected-minimize-font-size);
+  font-weight: var(--sl-font-selected-minimize-font-weight);
+  line-height: var(--sl-font-selected-minimize-line-height);
+  letter-spacing: var(--sl-font-selected-minimize-letter-spacing);
 }
 
 .TabsRoot[data-size='sm'] .TabsPanel {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
   padding: var(--sl-space-3);
 }
 
@@ -9464,7 +9815,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Toast - Mojave Theme
  *
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -9630,20 +9981,20 @@ textarea.FieldControl {
    ============================================ */
 
 .Title {
-  font-family: var(--sl-font-maximize-md-font-family);
-  font-size: var(--sl-font-maximize-md-font-size);
-  font-weight: var(--sl-font-maximize-md-font-weight);
-  line-height: var(--sl-font-maximize-md-line-height);
-  letter-spacing: var(--sl-font-maximize-md-letter-spacing);
+  font-family: var(--sl-font-title-base-font-family);
+  font-size: var(--sl-font-title-base-font-size);
+  font-weight: var(--sl-font-title-base-font-weight);
+  line-height: var(--sl-font-title-base-line-height);
+  letter-spacing: var(--sl-font-title-base-letter-spacing);
   margin: 0;
 }
 
 .Description {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   color: var(--notice-text, var(--sl-notice-description-color));
   margin: 0;
   margin-top: var(--sl-notice-text-gap);
@@ -9700,10 +10051,12 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle - Mojave Theme
  * A toggle is a button that stays pressed: the same heights, padding, gap and
- * trigger text style as a button of the same size.
+ * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
+ * pressed look (standard unless data-emphasis on it or its group says otherwise), so the
+ * brand's emphasis ladder decides how loud an "on" toggle is.
  */
 
 /* ============================================
@@ -9719,11 +10072,11 @@ textarea.FieldControl {
   gap: var(--sl-gap-control);
   height: var(--sl-control-height-md);
   padding-inline: var(--sl-control-padding-inline);
-  font-family: var(--sl-font-base-trigger-font-family);
-  font-size: var(--sl-font-base-trigger-font-size);
-  font-weight: var(--sl-font-base-trigger-font-weight);
-  line-height: var(--sl-font-base-trigger-line-height);
-  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
   color: var(--sl-text-primary);
   background: var(--sl-surface-base);
   border: var(--sl-stroke-default) solid var(--sl-border-default);
@@ -9738,17 +10091,17 @@ textarea.FieldControl {
   border-color: var(--sl-border-strong);
 }
 
+/* An outline or ghost level rests on no fill, so pressed reads from the active fill. */
 .Toggle[data-pressed],
 .Toggle[aria-pressed='true'] {
-  background: var(--sl-interactive-tint-hover);
-  color: var(--sl-interactive-default);
-  border-color: var(--sl-border-accent);
+  background: var(--sl-e-bg-active);
+  color: var(--sl-e-fg);
+  border-color: var(--sl-e-border);
 }
 
 .Toggle[data-pressed]:hover:not([data-disabled]):not(:disabled),
 .Toggle[aria-pressed='true']:hover:not([data-disabled]):not(:disabled) {
-  background: var(--sl-interactive-tint-strong);
-  border-color: var(--sl-interactive-hover);
+  border-color: var(--sl-e-border-hover);
 }
 
 .Toggle:focus-visible {
@@ -9771,22 +10124,22 @@ textarea.FieldControl {
   gap: var(--sl-gap-control-sm);
   height: var(--sl-control-height-sm);
   padding-inline: var(--sl-control-padding-inline-sm);
-  font-family: var(--sl-font-condense-trigger-font-family);
-  font-size: var(--sl-font-condense-trigger-font-size);
-  font-weight: var(--sl-font-condense-trigger-font-weight);
-  line-height: var(--sl-font-condense-trigger-line-height);
-  letter-spacing: var(--sl-font-condense-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
   border-radius: var(--sl-radius-item);
 }
 
 .Toggle[data-size='lg'] {
   height: var(--sl-control-height-lg);
   padding-inline: var(--sl-control-padding-inline-lg);
-  font-family: var(--sl-font-magnify-trigger-font-family);
-  font-size: var(--sl-font-magnify-trigger-font-size);
-  font-weight: var(--sl-font-magnify-trigger-font-weight);
-  line-height: var(--sl-font-magnify-trigger-line-height);
-  letter-spacing: var(--sl-font-magnify-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-magnify-font-family);
+  font-size: var(--sl-font-trigger-magnify-font-size);
+  font-weight: var(--sl-font-trigger-magnify-font-weight);
+  line-height: var(--sl-font-trigger-magnify-line-height);
+  letter-spacing: var(--sl-font-trigger-magnify-letter-spacing);
   border-radius: var(--sl-radius-surface);
 }
 
@@ -9810,7 +10163,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle Group - Mojave Theme
  *
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -9831,7 +10184,7 @@ textarea.FieldControl {
   border-radius: var(--sl-radius-item);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -9865,11 +10218,11 @@ textarea.FieldControl {
 
 /* Link: secondary text that darkens on hover. */
 .ToolbarLink {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
   display: inline-flex;
   align-items: center;
   padding-inline: var(--sl-control-padding-inline-sm);
@@ -9893,7 +10246,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Tooltip - Mojave Theme
  *
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
@@ -9910,11 +10263,11 @@ textarea.FieldControl {
 }
 
 .TooltipPopup {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   transform-origin: var(--transform-origin);
   transition:
   opacity var(--sl-popup-animation-duration) var(--sl-popup-animation-easing),