npm - @scattered-light/loomiere-mojave - Versions diffs - 0.2.0 → 0.4.0 - Mend

@scattered-light/loomiere-mojave 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

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

@@ -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,16 +764,25 @@
     --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. */
     --sl-navigation-menu-popup-min-width: 400px; /** Narrowest a navigation panel gets on wider screens, and the widest a single column of links grows. */
     --sl-navigation-menu-column-width: 12rem; /** Width of each column in a two-column link list. */
-    --sl-popover-popup-max-width: 400px; /** Keeps longer text to a readable line length. */
     --sl-preview-card-popup-min-width: 300px; /** Narrowest a preview card gets, so a short title still has room for its image. */
     --sl-preview-card-popup-max-width: 450px; /** Widest a preview card gets, so its description keeps a comfortable line length. */
     --sl-slider-vertical-height: 200px; /** Default length of a vertical slider. */
@@ -922,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);
@@ -1046,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 */
@@ -1142,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 */
@@ -1238,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 */
@@ -1334,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. */
@@ -1427,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. */
@@ -1596,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 */
@@ -1723,8 +1804,14 @@
     --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. */
     --sl-popover-popup-min-width: var(--sl-popup-min-width); /** Narrow enough for a short note, wide enough that a title doesn't wrap word by word. */
     --sl-slider-thumb-size: var(--sl-space-5); /** Knob diameter, big enough to grab with a finger on a 4px track. */
     --sl-switch-track-text-font-size: var(--sl-font-size-xs); /** Sized to the track, not a text style: the ON/OFF label has to fit inside the switch at each size. The rest of the label uses condense-subtitle-label. */
@@ -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.2.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.2.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.2.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.2.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.2.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.2.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.2.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.2.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.2.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;
@@ -5483,9 +5739,23 @@ button,
   user-select: none;
 }
-.Button svg {
+.Button svg,
+.Button .material-symbols-outlined {
   width: var(--sl-icon-size-magnify);
   height: var(--sl-icon-size-magnify);
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+}
+/* Icon only: square, so the pill corners make a circle instead of a wide oval. The Button
+   wrapper sets data-icon-only when its only child is an icon. A plain .Button (a Popover or
+   Toolbar trigger) qualifies on its own with an aria-label and a single icon inside, since an
+   icon-only button needs the label anyway; CSS can't see text, so the label is the signal. */
+.Button[data-icon-only],
+.Button[aria-label]:has(> svg:only-child),
+.Button[aria-label]:has(> .material-symbols-outlined:only-child) {
+  aspect-ratio: 1;
+  padding-inline: 0;
 }
 /* ============================================
@@ -5533,53 +5803,59 @@ 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);
 }
-.Button[data-size='xs'] svg {
+.Button[data-size='xs'] svg,
+.Button[data-size='xs'] .material-symbols-outlined {
   width: var(--sl-icon-size-condense);
   height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
 }
 .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);
 }
-.Button[data-size='sm'] svg {
+.Button[data-size='sm'] svg,
+.Button[data-size='sm'] .material-symbols-outlined {
   width: var(--sl-icon-size-base);
   height: var(--sl-icon-size-base);
+  font-size: var(--sl-icon-size-base);
 }
 .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);
 }
-.Button[data-size='lg'] svg {
+.Button[data-size='lg'] svg,
+.Button[data-size='lg'] .material-symbols-outlined {
   width: var(--sl-icon-size-maximize);
   height: var(--sl-icon-size-maximize);
+  font-size: var(--sl-icon-size-maximize);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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.
@@ -5596,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]) {
@@ -5736,7 +6012,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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. */
@@ -5752,7 +6028,7 @@ button,
   pointer-events: none;
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -5767,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;
@@ -5835,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);
@@ -5856,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);
@@ -5868,7 +6144,7 @@ button,
   background: var(--sl-surface-raised);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -5892,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);
@@ -5955,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);
@@ -6127,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;
 }
@@ -6143,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);
 }
@@ -6183,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);
@@ -6202,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);
@@ -6217,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;
@@ -6253,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;
@@ -6314,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);
@@ -6335,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.2.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
@@ -6412,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;
@@ -6479,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);
@@ -6522,11 +6798,11 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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.
  */
@@ -6616,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;
 }
@@ -6628,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;
 }
@@ -6668,7 +6944,7 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -6776,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.2.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
@@ -6817,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);
@@ -6829,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);
 }
@@ -6856,7 +7132,7 @@ textarea.FieldControl {
   height: auto;
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -6878,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.2.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
@@ -6918,7 +7194,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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),
@@ -6945,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);
@@ -7023,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.2.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
@@ -7109,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;
@@ -7176,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);
@@ -7204,7 +7480,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -7224,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;
@@ -7302,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;
@@ -7369,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);
@@ -7397,7 +7673,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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:
@@ -7413,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;
@@ -7440,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;
 }
@@ -7457,7 +7733,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -7503,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;
@@ -7787,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);
 }
@@ -7817,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);
 }
@@ -7877,7 +8153,7 @@ textarea.FieldControl {
   width: 100%;
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -7968,7 +8244,7 @@ textarea.FieldControl {
   user-select: none;
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -8011,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'] {
@@ -8024,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.2.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 */
 /* ============================================
@@ -8081,7 +8357,8 @@ textarea.FieldControl {
   transform var(--sl-popup-animation-duration) var(--sl-popup-animation-easing);
   position: relative;
   min-width: var(--sl-popover-popup-min-width);
-  max-width: var(--sl-popover-popup-max-width);
+  /* No fixed cap: wide content (a calendar, a form) fits; Base UI reports the room beside the trigger. */
+  max-width: var(--available-width, 100vw);
   padding: var(--sl-popup-padding-panel);
 }
@@ -8096,13 +8373,14 @@ 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);
 }
 /* ============================================
@@ -8110,13 +8388,14 @@ 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);
 }
 /* ============================================
@@ -8193,10 +8472,10 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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).
  */
@@ -8251,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);
 }
@@ -8310,7 +8589,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -8332,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);
 }
@@ -8387,7 +8666,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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).
@@ -8502,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 {
@@ -8539,7 +8818,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -8621,7 +8900,7 @@ textarea.FieldControl {
   background: transparent;
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -8640,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;
@@ -8775,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;
 }
@@ -8790,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);
 }
@@ -8836,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);
@@ -8895,7 +9174,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -8923,7 +9202,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -8946,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);
 }
@@ -9089,7 +9368,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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,
@@ -9161,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);
@@ -9228,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.2.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
@@ -9288,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;
@@ -9311,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);
 }
@@ -9342,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);
 }
@@ -9358,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);
 }
@@ -9391,7 +9815,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -9557,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);
@@ -9627,10 +10051,12 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
-/* @scattered-light/loomiere-base-ui 0.2.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.
  */
 /* ============================================
@@ -9646,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);
@@ -9665,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 {
@@ -9698,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);
 }
@@ -9737,7 +10163,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -9758,7 +10184,7 @@ textarea.FieldControl {
   border-radius: var(--sl-radius-item);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -9792,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);
@@ -9820,7 +10246,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
-/* @scattered-light/loomiere-base-ui 0.2.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
@@ -9837,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),