95 files changed, 5543 insertions, 3589 deletions

diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index 699cd8e..e9e978a 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -1,21 +1,20 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:math';
-@use 'pkg:iro-sass/src/easing' as easing;
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "pkg:iro-sass/easing" as easing;
 
 $static-colors: (
         --base: hsl(0, 0%, 98%),
-
         --levels: (
-                --100:  math.div(0, 12) * 110 - 10,
-                --200:  math.div(1, 12) * 110 - 10,
-                --300:  math.div(2, 12) * 110 - 10,
-                --400:  math.div(3, 12) * 110 - 10,
-                --500:  math.div(4, 12) * 110 - 10,
-                --600:  math.div(5, 12) * 110 - 10,
-                --700:  math.div(6, 12) * 110 - 10,
-                --800:  math.div(7, 12) * 110 - 10,
-                --900:  math.div(8, 12) * 110 - 10,
+                --100: math.div(0, 12) * 110 - 10,
+                --200: math.div(1, 12) * 110 - 10,
+                --300: math.div(2, 12) * 110 - 10,
+                --400: math.div(3, 12) * 110 - 10,
+                --500: math.div(4, 12) * 110 - 10,
+                --600: math.div(5, 12) * 110 - 10,
+                --700: math.div(6, 12) * 110 - 10,
+                --800: math.div(7, 12) * 110 - 10,
+                --900: math.div(8, 12) * 110 - 10,
                 --1000: math.div(9, 12) * 110 - 10,
                 --1100: math.div(10, 12) * 110 - 10,
                 --1200: math.div(11, 12) * 110 - 10,
@@ -23,175 +22,405 @@ $static-colors: (
         ),
 
         --palettes: (
-                --blue:   oklch(56% .14 275.25),
-                --purple: oklch(56% .14 305.58),
-                --red:    oklch(56% .14 14.69),
-                --green:  oklch(56% .14 150.48),
-                --yellow: oklch(56% .14 84.08),
+                --blue: oklch(56% 0.14 275.25),
+                --purple: oklch(56% 0.14 305.58),
+                --red: oklch(56% 0.14 14.69),
+                --green: oklch(56% 0.14 150.48),
+                --yellow: oklch(56% 0.14 84.08),
         ),
 
         --transparents: (
                 --100: 0,
-                --200: .1,
-                --300: .25,
-                --400: .4,
-                --500: .55,
-                --600: .7,
-                --700: .8,
-                --800: .9,
+                --200: 0.1,
+                --300: 0.25,
+                --400: 0.4,
+                --500: 0.55,
+                --600: 0.7,
+                --700: 0.8,
+                --800: 0.9,
                 --900: 1,
         ),
 );
 
 $semantic-colors-common: (
-        --accent:          --blue,
-        --accent-static:   --blue-static,
-        --positive:        --green,
+        --accent: --blue,
+        --accent-static: --blue-static,
+        --positive: --green,
         --positive-static: --green-static,
-        --negative:        --red,
+        --negative: --red,
         --negative-static: --red-static,
-        --warning:         --yellow,
-        --warning-static:  --yellow-static,
-
-        --focus-raw:       --accent,
-        --focus-static:    --accent-static,
+        --warning: --yellow,
+        --warning-static: --yellow-static,
 
-        --border-mute:     --base --200,
-        --border:          --base --300,
-        --border-strong:   --base --400,
-
-        --text-disabled:   --base --500,
-        --text-mute-more:  --base --600,
-        --text-mute:       --base --700,
-        --text:            --base --800,
-        --heading:         --base --900,
+        --focus-raw: --accent,
+        --focus-static: --accent-static,
 
+        --border-mute: --base --200,
+        --border: --base --300,
+        --border-strong: --base --400,
+        --text-disabled: --base --500,
+        --text-mute-more: --base --600,
+        --text-mute: --base --700,
+        --text: --base --800,
+        --heading: --base --900,
         --focus: (
-                --outline:       --focus-raw --400,
-                --border-mute:   --focus-raw --900,
-                --border:        --focus-raw --1000,
-                --border-text:   --focus-raw --1000-text,
+                --outline: --focus-raw --400,
+                --border-mute: --focus-raw --900,
+                --border: --focus-raw --1000,
+                --border-text: --focus-raw --1000-text,
                 --border-strong: --focus-raw --1100,
-                --text:          --focus-raw --1100,
+                --text: --focus-raw --1100,
         ),
 );
 
 $theme-light: (
         --levels: (
                 --grays: (
-                        --50:  (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
-                        --75:  (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
-                        --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
+                        --50: (
+                                -8,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(0, 12)),
+                        ),
+                        --75: (
+                                -4,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(1, 12)),
+                        ),
+                        --100: (0)
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(2, 12)),
+                        ),
 
-                        --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
-                        --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
-                        --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
+                        --200: (
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(1, 7)) * 98,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(3, 12)),
+                        ),
+                        --300: (
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(2, 7)) * 98,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(4, 12)),
+                        ),
+                        --400: (
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(3, 7)) * 98,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(5, 12)),
+                        ),
 
-                        --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
-                        --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
-                        --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
-                        --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
-                        --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
+                        --500: (
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(4, 7)) * 98,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(6, 12)),
+                        ),
+                        --600: (
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(5, 7)) * 98,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(7, 12)),
+                        ),
+                        --700: (
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(6, 7)) * 98,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(8, 12)),
+                        ),
+                        --800: (
+                                easing.cubic-bezier(0.2, 0.1, 0.9, 0.9, math.div(7, 7)) * 98,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(9, 12)),
+                        ),
+                        --900: (106)
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(10, 12)),
+                        ),
                 ),
 
                 --colors: (
-                        --100:  (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
-                        --200:  (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
-                        --300:  (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
-                        --400:  (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
-                        --500:  (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
-                        --600:  (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
-                        --700:  (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
-                        --800:  (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
-                        --900:  (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
-                        --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
-                        --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
-                        --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
-                        --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
+                        --100: (
+                                math.div(0, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(0, 12)),
+                        ),
+                        --200: (
+                                math.div(1, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(1, 12)),
+                        ),
+                        --300: (
+                                math.div(2, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(2, 12)),
+                        ),
+                        --400: (
+                                math.div(3, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(3, 12)),
+                        ),
+                        --500: (
+                                math.div(4, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(4, 12)),
+                        ),
+                        --600: (
+                                math.div(5, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(5, 12)),
+                        ),
+                        --700: (
+                                math.div(6, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(6, 12)),
+                        ),
+                        --800: (
+                                math.div(7, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(7, 12)),
+                        ),
+                        --900: (
+                                math.div(8, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(8, 12)),
+                        ),
+                        --1000: (
+                                math.div(9, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(9, 12)),
+                        ),
+                        --1100: (
+                                math.div(10, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(10, 12)),
+                        ),
+                        --1200: (
+                                math.div(11, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(11, 12)),
+                        ),
+                        --1300: (
+                                math.div(12, 12) * 94 + 7,
+                        )
+                        (
+                                0.2 + 0.8 * easing.ease(math.div(12, 12)),
+                        ),
                 ),
         ),
 
         --palettes: (
-                --base:   hsl(260, 70%, 98%)    --grays,
-                --blue:   oklch(56% .16 275.25) --colors,
-                --purple: oklch(56% .16 305.58) --colors,
-                --red:    oklch(56% .16 14.69)  --colors,
-                --green:  oklch(56% .16 150.48) --colors,
-                --yellow: oklch(56% .16 84.08)  --colors,
+                --base: hsl(260, 70%, 98%) --grays,
+                --blue: oklch(56% 0.16 275.25) --colors,
+                --purple: oklch(56% 0.16 305.58) --colors,
+                --red: oklch(56% 0.16 14.69) --colors,
+                --green: oklch(56% 0.16 150.48) --colors,
+                --yellow: oklch(56% 0.16 84.08) --colors,
         ),
 
-        --semantic: map.merge($semantic-colors-common, (
-                --bg-l2:   --base --50,
-                --bg-l1:   --base --100,
-                --bg-base: --base --200,
-
-                --box: (
-                        --border:        --base --200,
-                        --border-strong: --base --300,
+        --semantic: map.merge(
+                        $semantic-colors-common,
+                        (
+                                --bg-l2: --base --50,
+                                --bg-l1: --base --100,
+                                --bg-base: --base --200,
+                                --box: (
+                                        --border: --base --200,
+                                        --border-strong: --base --300,
+                                ),
+                        )
                 ),
-        )),
-
         --constants: (
-                --shadow: rgba(#000, .1),
+                --shadow: rgba(#000, 0.1),
         ),
 );
 
 $theme-dark: (
         --levels: (
                 --grays: (
-                        --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
-                        --75:  (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
-                        --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
+                        --50: (4.4)
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(10, 12)),
+                        ),
+                        --75: (2.5)
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(9, 12)),
+                        ),
+                        --100: (0)
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(8, 12)),
+                        ),
 
-                        --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
-                        --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
-                        --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
+                        --200: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(1, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(7, 12)),
+                        ),
+                        --300: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(2, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(6, 12)),
+                        ),
+                        --400: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(3, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(5, 12)),
+                        ),
 
-                        --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
-                        --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
-                        --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
-                        --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
-                        --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
+                        --500: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(4, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(4, 12)),
+                        ),
+                        --600: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(5, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(3, 12)),
+                        ),
+                        --700: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(6, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(2, 12)),
+                        ),
+                        --800: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(7, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(1, 12)),
+                        ),
+                        --900: (
+                                easing.cubic-bezier(0.3, 0.1, 0.8, 0.8, math.div(8, 8)) * -108,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(0, 12)),
+                        ),
                 ),
 
                 --colors: (
-                        --100:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
-                        --200:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
-                        --300:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),
-                        --400:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),
-                        --500:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
-                        --600:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),
-                        --700:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),
-                        --800:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
-                        --900:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),
-                        --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),
-                        --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
-                        --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),
-                        --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
+                        --100: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(0, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(0, 12)),
+                        ),
+                        --200: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(1, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(1, 12)),
+                        ),
+                        --300: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(2, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(2, 12)),
+                        ),
+                        --400: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(3, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(3, 12)),
+                        ),
+                        --500: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(4, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(4, 12)),
+                        ),
+                        --600: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(5, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(5, 12)),
+                        ),
+                        --700: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(6, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(6, 12)),
+                        ),
+                        --800: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(7, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(7, 12)),
+                        ),
+                        --900: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(8, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(8, 12)),
+                        ),
+                        --1000: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(9, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(9, 12)),
+                        ),
+                        --1100: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(10, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(10, 12)),
+                        ),
+                        --1200: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(11, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(11, 12)),
+                        ),
+                        --1300: (
+                                easing.cubic-bezier(0.2, 0.1, 0.8, 0.8, math.div(12, 12)) * -109 - 0.5,
+                        )
+                        (
+                                0.3 + 0.7 * easing.ease(math.div(12, 12)),
+                        ),
                 ),
         ),
 
         --palettes: (
-                --base:   hsl(257, 7%, 20%)     --grays,
-                --blue:   oklch(56% .16 275.25) --colors,
-                --purple: oklch(56% .16 305.58) --colors,
-                --red:    oklch(56% .16 14.69)  --colors,
-                --green:  oklch(56% .16 150.48) --colors,
-                --yellow: oklch(56% .16 84.08)  --colors,
+                --base: hsl(257, 7%, 20%) --grays,
+                --blue: oklch(56% 0.16 275.25) --colors,
+                --purple: oklch(56% 0.16 305.58) --colors,
+                --red: oklch(56% 0.16 14.69) --colors,
+                --green: oklch(56% 0.16 150.48) --colors,
+                --yellow: oklch(56% 0.16 84.08) --colors,
         ),
 
-        --semantic: map.merge($semantic-colors-common, (
-                --bg-base: --base --50,
-                --bg-l1:   --base --75,
-                --bg-l2:   --base --100,
-
-                --box: (
-                        --border:        --base --100,
-                        --border-strong: --base --100,
+        --semantic: map.merge(
+                        $semantic-colors-common,
+                        (
+                                --bg-base: --base --50,
+                                --bg-l1: --base --75,
+                                --bg-l2: --base --100,
+                                --box: (
+                                        --border: --base --100,
+                                        --border-strong: --base --100,
+                                ),
+                        )
                 ),
-        )),
-
         --constants: (
-                --shadow: rgba(#000, .35),
+                --shadow: rgba(#000, 0.35),
         ),
 );
diff --git a/src/_config.scss b/src/_config.scss
index a3ea6ee..6ddef96 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -1,14 +1,17 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:math';
-@use 'pkg:iro-sass/src/easing' as easing;
-@use 'config.defaults' as def;
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "pkg:iro-sass/easing" as easing;
+@use "config.defaults" as def;
 
 $static-colors-override: () !default;
 $static-colors: map.deep-merge(def.$static-colors, $static-colors-override) !default;
 
 $semantic-colors-common-override: () !default;
-$semantic-colors-common: map.deep-merge(def.$semantic-colors-common, $semantic-colors-common-override) !default;
+$semantic-colors-common: map.deep-merge(
+        def.$semantic-colors-common,
+        $semantic-colors-common-override
+) !default;
 
 $theme-light-override: () !default;
 $theme-light: map.deep-merge(def.$theme-light, $theme-light-override) !default;
@@ -17,12 +20,15 @@ $theme-dark-override: () !default;
 $theme-dark: map.deep-merge(def.$theme-dark, $theme-dark-override) !default;
 
 $themes-override: () !default;
-$themes: map.deep-merge((
-        --main: (
-                light: $theme-light,
-                dark:  $theme-dark,
+$themes: map.deep-merge(
+        (
+                --main: (
+                        light: $theme-light,
+                        dark: $theme-dark,
+                ),
         ),
-), $themes-override) !default;
+        $themes-override
+) !default;
 
 $theme-default: list.nth(map.keys($themes), 1) !default;
 
diff --git a/src/_core.scss b/src/_core.scss
index 8c761ff..3427579 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -1,42 +1,42 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use 'config';
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "config";
 
-@use 'core.vars' as vars;
-@forward 'core.vars';
+@use "core.vars" as vars;
+@forward "core.vars";
 
 @mixin styles {
         @each $theme-name, $theme in vars.$themes {
                 @if $theme-name == config.$theme-default {
                         :root {
-                                @include props.materialize(map.values(meta.module-variables('vars')));
+                                @include props.materialize(map.values(meta.module-variables("vars")));
 
-                                @if map.has-key($theme, 'dark') {
+                                @if map.has-key($theme, "dark") {
                                         @media (prefers-color-scheme: dark) {
-                                                @include props.materialize(map.get($theme, 'dark'));
+                                                @include props.materialize(map.get($theme, "dark"));
                                         }
                                 }
                         }
 
-                        @if map.has-key($theme, 'dark') and config.$explicit-dark-theme {
-                                @include bem.theme('dark') {
-                                        @include props.materialize(map.values(meta.module-variables('vars')));
-                                        @include props.materialize(map.get($theme, 'dark'));
+                        @if map.has-key($theme, "dark") and config.$explicit-dark-theme {
+                                @include bem.theme("dark") {
+                                        @include props.materialize(map.values(meta.module-variables("vars")));
+                                        @include props.materialize(map.get($theme, "dark"));
                                 }
                         }
                 } @else {
                         @include bem.theme(string.slice($theme-name, 3)) {
-                                @include props.materialize(map.get($theme, 'light'));
+                                @include props.materialize(map.get($theme, "light"));
 
-                                color:            props.get(vars.$theme, --text);
+                                color: props.get(vars.$theme, --text);
                                 background-color: props.get(vars.$theme, --bg-base);
 
-                                @if map.has-key($theme, 'dark') {
+                                @if map.has-key($theme, "dark") {
                                         @media (prefers-color-scheme: dark) {
-                                                @include props.materialize(map.get($theme, 'dark'));
+                                                @include props.materialize(map.get($theme, "dark"));
                                         }
                                 }
                         }
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 11acbfa..bef5f88 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -1,45 +1,45 @@
 // stylelint-disable scss/dollar-variable-pattern
 
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:list';
-@use 'functions' as fn;
-@use 'config';
-@use 'pkg:iro-sass/src/functions';
-@use 'pkg:iro-sass/src/props';
+@use "sass:map";
+@use "sass:meta";
+@use "sass:list";
+@use "functions" as fn;
+@use "config";
+@use "pkg:iro-sass/functions";
+@use "pkg:iro-sass/props";
 
-$size--0:    props.def(--size--0, 0) !default;
-$size--10:   props.def(--size--10, functions.px-to-rem(1px)) !default;
-$size--25:   props.def(--size--25, functions.px-to-rem(2px)) !default;
-$size--40:   props.def(--size--40, functions.px-to-rem(3px)) !default;
-$size--50:   props.def(--size--50, functions.px-to-rem(4px)) !default;
-$size--65:   props.def(--size--65, functions.px-to-rem(5px)) !default;
-$size--75:   props.def(--size--75, functions.px-to-rem(6px)) !default;
-$size--85:   props.def(--size--85, functions.px-to-rem(7px)) !default;
-$size--100:  props.def(--size--100, functions.px-to-rem(8px)) !default;
-$size--115:  props.def(--size--115, functions.px-to-rem(9px)) !default;
-$size--125:  props.def(--size--125, functions.px-to-rem(10px)) !default;
-$size--130:  props.def(--size--130, functions.px-to-rem(11px)) !default;
-$size--150:  props.def(--size--150, functions.px-to-rem(12px)) !default;
-$size--160:  props.def(--size--160, functions.px-to-rem(13px)) !default;
-$size--175:  props.def(--size--175, functions.px-to-rem(14px)) !default;
-$size--200:  props.def(--size--200, functions.px-to-rem(16px)) !default;
-$size--225:  props.def(--size--225, functions.px-to-rem(18px)) !default;
-$size--250:  props.def(--size--250, functions.px-to-rem(20px)) !default;
-$size--275:  props.def(--size--275, functions.px-to-rem(22px)) !default;
-$size--300:  props.def(--size--300, functions.px-to-rem(24px)) !default;
-$size--325:  props.def(--size--325, functions.px-to-rem(26px)) !default;
-$size--350:  props.def(--size--350, functions.px-to-rem(28px)) !default;
-$size--375:  props.def(--size--375, functions.px-to-rem(30px)) !default;
-$size--400:  props.def(--size--400, functions.px-to-rem(32px)) !default;
-$size--450:  props.def(--size--450, functions.px-to-rem(36px)) !default;
-$size--500:  props.def(--size--500, functions.px-to-rem(40px)) !default;
-$size--550:  props.def(--size--550, functions.px-to-rem(44px)) !default;
-$size--600:  props.def(--size--600, functions.px-to-rem(48px)) !default;
-$size--650:  props.def(--size--650, functions.px-to-rem(52px)) !default;
-$size--700:  props.def(--size--700, functions.px-to-rem(56px)) !default;
-$size--800:  props.def(--size--800, functions.px-to-rem(64px)) !default;
-$size--900:  props.def(--size--900, functions.px-to-rem(72px)) !default;
+$size--0: props.def(--size--0, 0) !default;
+$size--10: props.def(--size--10, functions.px-to-rem(1px)) !default;
+$size--25: props.def(--size--25, functions.px-to-rem(2px)) !default;
+$size--40: props.def(--size--40, functions.px-to-rem(3px)) !default;
+$size--50: props.def(--size--50, functions.px-to-rem(4px)) !default;
+$size--65: props.def(--size--65, functions.px-to-rem(5px)) !default;
+$size--75: props.def(--size--75, functions.px-to-rem(6px)) !default;
+$size--85: props.def(--size--85, functions.px-to-rem(7px)) !default;
+$size--100: props.def(--size--100, functions.px-to-rem(8px)) !default;
+$size--115: props.def(--size--115, functions.px-to-rem(9px)) !default;
+$size--125: props.def(--size--125, functions.px-to-rem(10px)) !default;
+$size--130: props.def(--size--130, functions.px-to-rem(11px)) !default;
+$size--150: props.def(--size--150, functions.px-to-rem(12px)) !default;
+$size--160: props.def(--size--160, functions.px-to-rem(13px)) !default;
+$size--175: props.def(--size--175, functions.px-to-rem(14px)) !default;
+$size--200: props.def(--size--200, functions.px-to-rem(16px)) !default;
+$size--225: props.def(--size--225, functions.px-to-rem(18px)) !default;
+$size--250: props.def(--size--250, functions.px-to-rem(20px)) !default;
+$size--275: props.def(--size--275, functions.px-to-rem(22px)) !default;
+$size--300: props.def(--size--300, functions.px-to-rem(24px)) !default;
+$size--325: props.def(--size--325, functions.px-to-rem(26px)) !default;
+$size--350: props.def(--size--350, functions.px-to-rem(28px)) !default;
+$size--375: props.def(--size--375, functions.px-to-rem(30px)) !default;
+$size--400: props.def(--size--400, functions.px-to-rem(32px)) !default;
+$size--450: props.def(--size--450, functions.px-to-rem(36px)) !default;
+$size--500: props.def(--size--500, functions.px-to-rem(40px)) !default;
+$size--550: props.def(--size--550, functions.px-to-rem(44px)) !default;
+$size--600: props.def(--size--600, functions.px-to-rem(48px)) !default;
+$size--650: props.def(--size--650, functions.px-to-rem(52px)) !default;
+$size--700: props.def(--size--700, functions.px-to-rem(56px)) !default;
+$size--800: props.def(--size--800, functions.px-to-rem(64px)) !default;
+$size--900: props.def(--size--900, functions.px-to-rem(72px)) !default;
 $size--1000: props.def(--size--1000, functions.px-to-rem(80px)) !default;
 $size--1200: props.def(--size--1200, functions.px-to-rem(96px)) !default;
 $size--1600: props.def(--size--1600, functions.px-to-rem(128px)) !default;
@@ -58,58 +58,105 @@ $size--4600: props.def(--size--4600, functions.px-to-rem(368px)) !default;
 $size--5000: props.def(--size--5000, functions.px-to-rem(400px)) !default;
 $size--6000: props.def(--size--6000, functions.px-to-rem(480px)) !default;
 
-$font--standard--family:           props.def(--font--standard--family, ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif)) !default;
-$font--standard--line-height:      props.def(--font--standard--line-height, 1.5) !default;
-$font--standard--feature-settings: props.def(--font--standard--feature-settings, ('\'ss01\'')) !default;
+$font--standard--family: props.def(
+        --font--standard--family,
+        (
+                "Inter",
+                "Open Sans",
+                "Segoe UI",
+                "Droid Sans",
+                Roboto,
+                Oxygen,
+                "Helvetica Neue",
+                Helvetica,
+                Tahoma,
+                Arial,
+                sans-serif
+        )
+) !default;
+$font--standard--line-height: props.def(--font--standard--line-height, 1.5) !default;
+$font--standard--feature-settings: props.def(
+        --font--standard--feature-settings,
+        ("'ss01'")
+) !default;
 
-$font--headline--family:           props.def(--font--headline--family, props.get($font--standard--family)) !default;
-$font--headline--line-height:      props.def(--font--headline--line-height, 1.3) !default;
-$font--headline--weight:           props.def(--font--headline--weight, 800) !default;
-$font--headline--feature-settings: props.def(--font--headline--feature-settings, ('\'opsz\'' 32, '\'ss01\'', '\'cv06\'')) !default;
+$font--headline--family: props.def(
+        --font--headline--family,
+        props.get($font--standard--family)
+) !default;
+$font--headline--line-height: props.def(--font--headline--line-height, 1.3) !default;
+$font--headline--weight: props.def(--font--headline--weight, 800) !default;
+$font--headline--feature-settings: props.def(
+        --font--headline--feature-settings,
+        ("'opsz'" 32, "'ss01'", "'cv06'")
+) !default;
 
-$font--mono--family:               props.def(--font--mono--family, ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace)) !default;
-$font--mono--line-height:          props.def(--font--mono--line-height, 1.4) !default;
-$font--mono--feature-settings:     props.def(--font--mono--feature-settings, ('\'calt\'' 0, '\'dlig\' 1', '\'ss09\' 1')) !default;
+$font--mono--family: props.def(
+        --font--mono--family,
+        (
+                "Iosevka Term SS09",
+                "IBM Plex Mono",
+                "Menlo",
+                "DejaVu Sans Mono",
+                "Bitstream Vera Sans Mono",
+                Courier,
+                monospace
+        )
+) !default;
+$font--mono--line-height: props.def(--font--mono--line-height, 1.4) !default;
+$font--mono--feature-settings: props.def(
+        --font--mono--feature-settings,
+        ("'calt'" 0, "'dlig' 1", "'ss09' 1")
+) !default;
 
-$font-size--50:   props.def(--font-size--50, functions.px-to-rem(12px)) !default;
-$font-size--75:   props.def(--font-size--75 , functions.px-to-rem(13px)) !default;
-$font-size--100:  props.def(--font-size--100, functions.px-to-rem(14px)) !default;
-$font-size--150:  props.def(--font-size--150, functions.px-to-rem(16px)) !default;
-$font-size--200:  props.def(--font-size--200, functions.px-to-rem(18px)) !default;
-$font-size--300:  props.def(--font-size--300, functions.px-to-rem(20px)) !default;
-$font-size--400:  props.def(--font-size--400, functions.px-to-rem(24px)) !default;
-$font-size--500:  props.def(--font-size--500, functions.px-to-rem(28px)) !default;
-$font-size--600:  props.def(--font-size--600, functions.px-to-rem(32px)) !default;
-$font-size--700:  props.def(--font-size--700, functions.px-to-rem(36px)) !default;
-$font-size--800:  props.def(--font-size--800, functions.px-to-rem(40px)) !default;
-$font-size--900:  props.def(--font-size--900, functions.px-to-rem(45px)) !default;
+$font-size--50: props.def(--font-size--50, functions.px-to-rem(12px)) !default;
+$font-size--75: props.def(--font-size--75, functions.px-to-rem(13px)) !default;
+$font-size--100: props.def(--font-size--100, functions.px-to-rem(14px)) !default;
+$font-size--150: props.def(--font-size--150, functions.px-to-rem(16px)) !default;
+$font-size--200: props.def(--font-size--200, functions.px-to-rem(18px)) !default;
+$font-size--300: props.def(--font-size--300, functions.px-to-rem(20px)) !default;
+$font-size--400: props.def(--font-size--400, functions.px-to-rem(24px)) !default;
+$font-size--500: props.def(--font-size--500, functions.px-to-rem(28px)) !default;
+$font-size--600: props.def(--font-size--600, functions.px-to-rem(32px)) !default;
+$font-size--700: props.def(--font-size--700, functions.px-to-rem(36px)) !default;
+$font-size--800: props.def(--font-size--800, functions.px-to-rem(40px)) !default;
+$font-size--900: props.def(--font-size--900, functions.px-to-rem(45px)) !default;
 $font-size--1000: props.def(--font-size--1000, functions.px-to-rem(50px)) !default;
 $font-size--1100: props.def(--font-size--1100, functions.px-to-rem(60px)) !default;
 $font-size--1200: props.def(--font-size--1200, functions.px-to-rem(70px)) !default;
 $font-size--1300: props.def(--font-size--1300, functions.px-to-rem(80px)) !default;
 
-$border-width--thick:  props.def(--border-width--thick, 4px) !default;
+$border-width--thick: props.def(--border-width--thick, 4px) !default;
 $border-width--medium: props.def(--border-width--medium, 2px) !default;
-$border-width--thin:   props.def(--border-width--thin, 1px) !default;
+$border-width--thin: props.def(--border-width--thin, 1px) !default;
 
-$shadow--l1--x:    props.def(--shadow--l1--x, 0) !default;
-$shadow--l1--y:    props.def(--shadow--l1--y, 2px) !default;
+$shadow--l1--x: props.def(--shadow--l1--x, 0) !default;
+$shadow--l1--y: props.def(--shadow--l1--y, 2px) !default;
 $shadow--l1--blur: props.def(--shadow--l1--blur, 3px) !default;
 $shadow--l1--grow: props.def(--shadow--l1--grow, -1px) !default;
 
-$shadow--l2--x:    props.def(--shadow--l2--x, 0) !default;
-$shadow--l2--y:    props.def(--shadow--l2--y, 5px) !default;
+$shadow--l2--x: props.def(--shadow--l2--x, 0) !default;
+$shadow--l2--y: props.def(--shadow--l2--y, 5px) !default;
 $shadow--l2--blur: props.def(--shadow--l2--blur, 12px) !default;
 $shadow--l2--grow: props.def(--shadow--l2--grow, -4px) !default;
 
-$rounding:     props.def(--rounding, 12px) !default;
+$rounding: props.def(--rounding, 12px) !default;
 $rounding--sm: props.def(--rounding--sm, 4px) !default;
 
-$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default;
-$key-focus--border-width:  props.def(--key-focus--border-width, props.get($border-width--medium)) !default;
-$key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default;
+$key-focus--outline-width: props.def(
+        --key-focus--outline-width,
+        props.get($border-width--thick)
+) !default;
+$key-focus--border-width: props.def(
+        --key-focus--border-width,
+        props.get($border-width--medium)
+) !default;
+$key-focus--border-offset: props.def(
+        --key-focus--border-offset,
+        props.get($border-width--medium)
+) !default;
 
-$list--indent:         props.def(--list--indent, props.get($size--400)) !default;
+$list--indent: props.def(--list--indent, props.get($size--400)) !default;
 $list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default;
 
 $sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default;
@@ -119,20 +166,34 @@ $sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default;
 $-static-colors: ();
 
 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
-        $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base));
-        $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
+        $palette: fn.palette(
+                $palette,
+                map.get(config.$static-colors, --levels),
+                map.get(config.$static-colors, --base)
+        );
+        $-static-colors: map.merge(
+                $-static-colors,
+                (
+                        $palette-name: $palette,
+                )
+        );
 }
 
 //
 
-$transparent-colors: props.def(--transparent-colors, (), 'color');
+$transparent-colors: props.def(--transparent-colors, (), "color");
 
 @each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
         $color: list.nth($palette, 1);
-        $text:  list.nth($palette, 2);
+        $text: list.nth($palette, 2);
 
         $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents));
-        $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
+        $transparent-colors: props.merge(
+                $transparent-colors,
+                (
+                        $palette-name: $palette,
+                )
+        );
 }
 
 //
@@ -142,40 +203,64 @@ $themes: ();
 @each $theme-name, $theme in config.$themes {
         @each $variant-name, $variant in $theme {
                 @if $variant != null {
-                        $compiled: props.def(--colors, (), 'color');
+                        $compiled: props.def(--colors, (), "color");
 
                         @each $palette-name, $palette in $-static-colors {
-                                $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette ));
+                                $compiled: props.merge($compiled, (#{$palette-name}-static: $palette));
                         }
 
                         @each $palette-name, $palette in map.get($variant, --palettes) {
                                 $base-color: list.nth($palette, 1);
-                                $levels:     list.nth($palette, 2);
+                                $levels: list.nth($palette, 2);
 
-                                $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1));
-                                $compiled: props.merge($compiled, ( $palette-name: $palette ));
+                                $palette: fn.palette(
+                                        $base-color,
+                                        map.get($variant, --levels, $levels),
+                                        list.nth(map.get($variant, --palettes, --base), 1)
+                                );
+                                $compiled: props.merge(
+                                        $compiled,
+                                        (
+                                                $palette-name: $palette,
+                                        )
+                                );
                         }
 
                         @each $color, $value in map.get($variant, --constants) {
-                                $compiled: props.merge($compiled, ( $color: $value ));
+                                $compiled: props.merge(
+                                        $compiled,
+                                        (
+                                                $color: $value,
+                                        )
+                                );
                         }
 
                         @each $color, $ref in map.get($variant, --semantic) {
                                 $res: ();
 
-                                @if meta.type-of($ref) == 'map' {
+                                @if meta.type-of($ref) == "map" {
                                         @each $key, $r in $ref {
                                                 $re1: list.nth($r, 1);
                                                 $re2: functions.list-slice($r, 2);
-                                                $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
+                                                $res: map.merge(
+                                                        $res,
+                                                        (
+                                                                $key: props.get($compiled, $re1, $re2...),
+                                                        )
+                                                );
                                         }
                                 } @else {
                                         $ref1: list.nth($ref, 1);
                                         $ref2: functions.list-slice($ref, 2);
-                                        $res:  props.get($compiled, $ref1, $ref2...);
+                                        $res: props.get($compiled, $ref1, $ref2...);
                                 }
 
-                                $compiled: props.merge($compiled, ( $color: $res ));
+                                $compiled: props.merge(
+                                        $compiled,
+                                        (
+                                                $color: $res,
+                                        )
+                                );
                         }
 
                         $themes: map.set($themes, $theme-name, $variant-name, $compiled);
diff --git a/src/_functions.scss b/src/_functions.scss
index e237ccc..8fb0d98 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -1,17 +1,17 @@
-@use 'sass:color';
-@use 'sass:math';
-@use 'sass:map';
-@use 'sass:list';
-@use 'sass:meta';
+@use "sass:color";
+@use "sass:math";
+@use "sass:map";
+@use "sass:list";
+@use "sass:meta";
 
-@use 'pkg:iro-sass/src/easing';
-@use 'apca';
+@use "pkg:iro-sass/easing";
+@use "apca";
 
 @function palette($base-color, $levels, $ref-color: $base-color) {
         $base-lch: color.to-space($base-color, oklch);
         $ref-lch: color.to-space($ref-color, oklch);
 
-        $ref-l: color.channel($ref-lch, 'lightness');
+        $ref-l: color.channel($ref-lch, "lightness");
         $ref-y: apca.sRGB_to_Y($ref-lch);
 
         $black-y: apca.sRGB_to_Y(#000);
@@ -32,17 +32,19 @@
                         $h: list.nth($level, 3);
                 }
 
-                @if meta.type-of($color) != 'color' {
+                @if meta.type-of($color) != "color" {
                         $y: apca.reverse($color, $ref-y);
-                        $l: color.channel($base-lch, 'lightness');
+                        $l: color.channel($base-lch, "lightness");
 
                         @if $y != false {
-                                $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
+                                $l: color.channel(apca.Y_to_sRGB($y), "lightness", oklch);
                         } @else {
                                 $y: $ref-y;
                         }
 
-                        $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue')));
+                        $color: oklch(
+                                $l ($c * color.channel($base-lch, "chroma")) ($h + color.channel($base-lch, "hue"))
+                        );
                 } @else {
                         $y: apca.sRGB_to_Y($color);
                 }
@@ -51,7 +53,11 @@
                 $contrast-white: apca.contrast($white-y, $y);
 
                 $palette: map.set($palette, $key, $color);
-                $palette: map.set($palette, #{$key}-text, if(sass(math.abs($contrast-black) > math.abs($contrast-white)): #000; else: #fff));
+                $palette: map.set(
+                        $palette,
+                        #{$key}-text,
+                        if(sass(math.abs($contrast-black) > math.abs($contrast-white)): #000; else: #fff)
+                );
         }
 
         @return $palette;
diff --git a/src/_props.scss b/src/_props.scss
index 0830375..2683ca9 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -1,46 +1,46 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'config';
-@use 'pkg:include-media/dist/include-media' as media;
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "config";
+@use "pkg:include-media/dist/include-media" as media;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
 
 @mixin materialize-at-root($ref) {
-        @if meta.type-of($ref) == 'map' {
+        @if meta.type-of($ref) == "map" {
                 $ref: map.values($ref);
         }
 
         :root {
                 @include props.materialize($ref, null);
-                @include props.materialize($ref, 'color');
+                @include props.materialize($ref, "color");
 
                 @each $breakpoint in map.keys(media.$breakpoints) {
-                        @include media.media('<=#{$breakpoint}') {
+                        @include media.media("<=#{$breakpoint}") {
                                 @include props.materialize($ref, $breakpoint);
                         }
                 }
 
                 @media (prefers-color-scheme: dark) {
-                        @include props.materialize($ref, 'dark');
+                        @include props.materialize($ref, "dark");
                 }
         }
 
         @if config.$explicit-dark-theme {
-                @include bem.theme('dark') {
-                        @include props.materialize($ref, 'color');
-                        @include props.materialize($ref, 'dark');
+                @include bem.theme("dark") {
+                        @include props.materialize($ref, "color");
+                        @include props.materialize($ref, "dark");
                 }
         }
 
         @each $theme-name in map.keys(config.$themes) {
                 @if $theme-name != config.$theme-default {
                         @include bem.theme(string.slice($theme-name, 3)) {
-                                @include props.materialize($ref, 'color');
+                                @include props.materialize($ref, "color");
 
                                 @media (prefers-color-scheme: dark) {
-                                        @include props.materialize($ref, 'dark');
+                                        @include props.materialize($ref, "dark");
                                 }
                         }
                 }
diff --git a/src/_themes.scss b/src/_themes.scss
index f06a5ca..be13e60 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,71 +1,71 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use 'pkg:include-media/dist/include-media' as media;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:include-media/dist/include-media" as media;
 
-@use 'core.vars' as vars;
-@forward 'core.vars';
+@use "core.vars" as vars;
+@forward "core.vars";
 
 @mixin styles {
-        @include bem.theme('base') {
+        @include bem.theme("base") {
                 background-color: props.get(vars.$theme, --bg-base);
 
-                @include bem.suffix('light') {
+                @include bem.suffix("light") {
                         @media (prefers-color-scheme: light) {
                                 background-color: props.get(vars.$theme, --bg-base);
                         }
                 }
 
-                @include bem.suffix('dark') {
+                @include bem.suffix("dark") {
                         @media (prefers-color-scheme: dark) {
                                 background-color: props.get(vars.$theme, --bg-base);
                         }
                 }
         }
 
-        @include bem.theme('l1') {
+        @include bem.theme("l1") {
                 background-color: props.get(vars.$theme, --bg-l1);
 
-                @include bem.suffix('light') {
+                @include bem.suffix("light") {
                         @media (prefers-color-scheme: light) {
                                 background-color: props.get(vars.$theme, --bg-l1);
                         }
                 }
 
-                @include bem.suffix('dark') {
+                @include bem.suffix("dark") {
                         @media (prefers-color-scheme: dark) {
                                 background-color: props.get(vars.$theme, --bg-l1);
                         }
                 }
         }
 
-        @include bem.theme('l2') {
+        @include bem.theme("l2") {
                 background-color: props.get(vars.$theme, --bg-l2);
 
-                @include bem.suffix('light') {
+                @include bem.suffix("light") {
                         @media (prefers-color-scheme: light) {
                                 background-color: props.get(vars.$theme, --bg-l2);
                         }
                 }
 
-                @include bem.suffix('dark') {
+                @include bem.suffix("dark") {
                         @media (prefers-color-scheme: dark) {
                                 background-color: props.get(vars.$theme, --bg-l2);
                         }
                 }
         }
 
-        @include bem.theme('50') {
+        @include bem.theme("50") {
                 background-color: props.get(vars.$theme, --base, --50);
 
-                @include bem.suffix('light') {
+                @include bem.suffix("light") {
                         @media (prefers-color-scheme: light) {
                                 background-color: props.get(vars.$theme, --base, --50);
                         }
                 }
 
-                @include bem.suffix('dark') {
+                @include bem.suffix("dark") {
                         @media (prefers-color-scheme: dark) {
                                 background-color: props.get(vars.$theme, --base, --50);
                         }
diff --git a/src/_utils.scss b/src/_utils.scss
index dd8e8bb..be2faab 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,27 +1,27 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use 'pkg:include-media/dist/include-media' as media;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "pkg:include-media/dist/include-media" as media;
 
-@use 'core.vars' as vars;
-@forward 'core.vars';
+@use "core.vars" as vars;
+@forward "core.vars";
 
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
 $-dirs: (
-        '': '',
-        'b':  '-block',
-        'bs': '-block-start',
-        'be': '-block-end',
-        'i':  '-inline',
-        'is': '-inline-start',
-        'ie': '-inline-end',
+        "": "",
+        "b": "-block",
+        "bs": "-block-start",
+        "be": "-block-end",
+        "i": "-inline",
+        "is": "-inline-start",
+        "ie": "-inline-end",
 ) !default;
 
 $-axes: (
-        '': '',
-        'r':  'row-',
-        'c':  'column-',
+        "": "",
+        "r": "row-",
+        "c": "column-",
 ) !default;
 
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
@@ -48,145 +48,145 @@ $-font-sizes: (
 ) !default;
 
 $-aspect-ratios: (
-        '1\\/1': '1 / 1',
-        '4\\/3': '4 / 3',
-        '5\\/4': '5 / 4',
+        "1\\/1": "1 / 1",
+        "4\\/3": "4 / 3",
+        "5\\/4": "5 / 4",
 ) !default;
 
 @mixin styles {
-        @include bem.utility('d-block') {
+        @include bem.utility("d-block") {
                 display: block;
         }
 
-        @include bem.utility('d-inline-block') {
+        @include bem.utility("d-inline-block") {
                 display: inline-block;
         }
 
-        @include bem.utility('d-inline') {
+        @include bem.utility("d-inline") {
                 display: inline;
         }
 
-        @include bem.utility('d-contents') {
+        @include bem.utility("d-contents") {
                 display: contents;
         }
 
-        @include bem.utility('d-flex') {
+        @include bem.utility("d-flex") {
                 display: flex;
         }
 
-        @include bem.utility('td-none') {
+        @include bem.utility("td-none") {
                 text-decoration: none;
         }
 
-        @include bem.utility('d-none') {
+        @include bem.utility("d-none") {
                 display: none;
 
                 @each $breakpoint in map.keys(media.$breakpoints) {
-                        @include media.media('<=#{$breakpoint}') {
-                                @include bem.suffix('#{$breakpoint}-lo') {
+                        @include media.media("<=#{$breakpoint}") {
+                                @include bem.suffix("#{$breakpoint}-lo") {
                                         display: none;
                                 }
                         }
 
-                        @include media.media('>#{$breakpoint}') {
-                                @include bem.suffix('#{$breakpoint}-hi') {
+                        @include media.media(">#{$breakpoint}") {
+                                @include bem.suffix("#{$breakpoint}-hi") {
                                         display: none;
                                 }
                         }
                 }
 
-                @include bem.at-theme('js') {
-                        @include bem.suffix('js') {
+                @include bem.at-theme("js") {
+                        @include bem.suffix("js") {
                                 display: none;
                         }
                 }
 
-                @include bem.at-theme('no-js') {
-                        @include bem.suffix('no-js') {
+                @include bem.at-theme("no-js") {
+                        @include bem.suffix("no-js") {
                                 display: none;
                         }
                 }
 
-                @include bem.suffix('empty') {
+                @include bem.suffix("empty") {
                         &:empty {
                                 display: none;
                         }
                 }
         }
 
-        @include bem.utility('va-top') {
+        @include bem.utility("va-top") {
                 vertical-align: top;
         }
 
-        @include bem.utility('va-baseline') {
+        @include bem.utility("va-baseline") {
                 vertical-align: baseline;
         }
 
-        @include bem.utility('va-middle') {
+        @include bem.utility("va-middle") {
                 vertical-align: middle;
         }
 
-        @include bem.utility('va-bottom') {
+        @include bem.utility("va-bottom") {
                 vertical-align: bottom;
         }
 
-        @include bem.utility('ta-start') {
+        @include bem.utility("ta-start") {
                 text-align: start;
         }
 
-        @include bem.utility('ta-end') {
+        @include bem.utility("ta-end") {
                 text-align: end;
         }
 
-        @include bem.utility('ta-center') {
+        @include bem.utility("ta-center") {
                 text-align: center;
         }
 
-        @include bem.utility('fw-normal') {
+        @include bem.utility("fw-normal") {
                 font-weight: normal;
         }
 
-        @include bem.utility('ai-center') {
+        @include bem.utility("ai-center") {
                 align-items: center;
         }
 
-        @include bem.utility('ai-start') {
+        @include bem.utility("ai-start") {
                 align-items: flex-start;
         }
 
-        @include bem.utility('ai-end') {
+        @include bem.utility("ai-end") {
                 align-items: flex-end;
         }
 
-        @include bem.utility('ai-stretch') {
+        @include bem.utility("ai-stretch") {
                 align-items: stretch;
         }
 
-        @include bem.utility('ac-center') {
+        @include bem.utility("ac-center") {
                 align-content: center;
         }
 
-        @include bem.utility('jc-center') {
+        @include bem.utility("jc-center") {
                 justify-content: center;
         }
 
-        @include bem.utility('jc-start') {
+        @include bem.utility("jc-start") {
                 justify-content: flex-start;
         }
 
-        @include bem.utility('jc-end') {
+        @include bem.utility("jc-end") {
                 justify-content: flex-end;
         }
 
-        @include bem.utility('tt-upper') {
+        @include bem.utility("tt-upper") {
                 text-transform: uppercase;
         }
 
-        @include bem.utility('tt-lower') {
+        @include bem.utility("tt-lower") {
                 text-transform: lowercase;
         }
 
-        @include bem.utility('c-heading') {
+        @include bem.utility("c-heading") {
                 color: props.get(vars.$theme, --heading);
 
                 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
@@ -198,7 +198,7 @@ $-aspect-ratios: (
                 }
         }
 
-        @include bem.utility('c-text') {
+        @include bem.utility("c-text") {
                 color: props.get(vars.$theme, --text);
 
                 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
@@ -210,7 +210,7 @@ $-aspect-ratios: (
                 }
         }
 
-        @include bem.utility('c-mute') {
+        @include bem.utility("c-mute") {
                 color: props.get(vars.$theme, --text-mute);
 
                 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
@@ -222,7 +222,7 @@ $-aspect-ratios: (
                 }
         }
 
-        @include bem.utility('c-mute-more') {
+        @include bem.utility("c-mute-more") {
                 color: props.get(vars.$theme, --text-mute-more);
 
                 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
@@ -235,189 +235,195 @@ $-aspect-ratios: (
         }
 
         @each $mod, $size in $-font-sizes {
-                @include bem.utility('fs-#{$mod}') {
+                @include bem.utility("fs-#{$mod}") {
                         font-size: props.get($size);
                 }
         }
 
         @each $dir, $prop in (is: inline-size, bs: block-size) {
-                @include bem.utility('#{$dir}-100') {
+                @include bem.utility("#{$dir}-100") {
                         #{$prop}: 100%;
                 }
 
-                @include bem.utility('#{$dir}-75') {
+                @include bem.utility("#{$dir}-75") {
                         #{$prop}: 75%;
                 }
 
-                @include bem.utility('#{$dir}-50') {
+                @include bem.utility("#{$dir}-50") {
                         #{$prop}: 50%;
                 }
 
-                @include bem.utility('#{$dir}-25') {
+                @include bem.utility("#{$dir}-25") {
                         #{$prop}: 25%;
                 }
 
-                @include bem.utility('#{$dir}-1px') {
+                @include bem.utility("#{$dir}-1px") {
                         #{$prop}: 1px;
                 }
 
-                @include bem.utility('#{$dir}-0') {
+                @include bem.utility("#{$dir}-0") {
                         #{$prop}: 0;
                 }
         }
 
-        @include bem.utility('elp') {
-                overflow:      hidden;
+        @include bem.utility("elp") {
+                overflow: hidden;
                 text-overflow: ellipsis;
-                white-space:   nowrap;
+                white-space: nowrap;
         }
 
-        @include bem.utility('hyph') {
+        @include bem.utility("hyph") {
                 hyphens: auto;
                 hyphenate-limit-chars: auto;
         }
 
-        @include bem.utility('tw-balance') {
+        @include bem.utility("tw-balance") {
                 text-wrap-style: balance;
         }
 
-        @include bem.utility('o-auto') {
+        @include bem.utility("o-auto") {
                 overflow: auto;
         }
 
-        @include bem.utility('o-hidden') {
+        @include bem.utility("o-hidden") {
                 overflow: hidden;
         }
 
-        @include bem.utility('p-static') {
+        @include bem.utility("p-static") {
                 position: static;
         }
 
-        @include bem.utility('p-relative') {
+        @include bem.utility("p-relative") {
                 position: relative;
         }
 
-        @include bem.utility('p-fixed') {
+        @include bem.utility("p-fixed") {
                 position: fixed;
         }
 
-        @include bem.utility('p-sticky-bs') {
-                position:          sticky;
+        @include bem.utility("p-sticky-bs") {
+                position: sticky;
                 inset-block-start: props.get(vars.$sticky-top-offset);
         }
 
-        @include bem.utility('p-sticky-be') {
-                position:        sticky;
+        @include bem.utility("p-sticky-be") {
+                position: sticky;
                 inset-block-end: 0;
         }
 
-        @include bem.utility('br-round') {
+        @include bem.utility("br-round") {
                 border-radius: props.get(vars.$rounding);
         }
 
-        @include bem.utility('br-round-sm') {
+        @include bem.utility("br-round-sm") {
                 border-radius: props.get(vars.$rounding--sm);
         }
 
         @each $dir, $prefix in $-axes {
                 @each $mod, $size in $-sizes {
-                        @include bem.utility('#{$dir}g-#{$mod}') {
+                        @include bem.utility("#{$dir}g-#{$mod}") {
                                 #{$prefix}gap: props.get($size);
                         }
                 }
         }
 
         @each $dir, $suffix in $-dirs {
-                @include bem.utility('m#{$dir}-auto') {
+                @include bem.utility("m#{$dir}-auto") {
                         margin#{$suffix}: auto;
                 }
 
-                @include bem.utility('p#{$dir}-auto') {
+                @include bem.utility("p#{$dir}-auto") {
                         padding#{$suffix}: auto;
                 }
 
                 @each $mod, $size in $-sizes {
-                        @include bem.utility('m#{$dir}-#{$mod}') {
+                        @include bem.utility("m#{$dir}-#{$mod}") {
                                 margin#{$suffix}: props.get($size);
                         }
 
-                        @include bem.utility('p#{$dir}-#{$mod}') {
+                        @include bem.utility("p#{$dir}-#{$mod}") {
                                 padding#{$suffix}: props.get($size);
                         }
                 }
 
-                @include bem.utility('b#{$dir}-0') {
+                @include bem.utility("b#{$dir}-0") {
                         border#{$suffix}: 0;
 
-                        @include bem.suffix('light') {
+                        @include bem.suffix("light") {
                                 @media (prefers-color-scheme: light) {
                                         border#{$suffix}: 0;
                                 }
                         }
 
-                        @include bem.suffix('dark') {
+                        @include bem.suffix("dark") {
                                 @media (prefers-color-scheme: dark) {
                                         border#{$suffix}: 0;
                                 }
                         }
                 }
 
-                @include bem.utility('b#{$dir}-1') {
-                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                @include bem.utility("b#{$dir}-1") {
+                        border#{$suffix}: props.get(vars.$border-width--thin) solid
+                                props.get(vars.$theme, --border);
 
-                        @include bem.suffix('light') {
+                        @include bem.suffix("light") {
                                 @media (prefers-color-scheme: light) {
-                                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                                        border#{$suffix}: props.get(vars.$border-width--thin) solid
+                                                props.get(vars.$theme, --border);
                                 }
                         }
 
-                        @include bem.suffix('dark') {
+                        @include bem.suffix("dark") {
                                 @media (prefers-color-scheme: dark) {
-                                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                                        border#{$suffix}: props.get(vars.$border-width--thin) solid
+                                                props.get(vars.$theme, --border);
                                 }
                         }
                 }
 
-                @include bem.utility('b#{$dir}-1-mute') {
-                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                @include bem.utility("b#{$dir}-1-mute") {
+                        border#{$suffix}: props.get(vars.$border-width--thin) solid
+                                props.get(vars.$theme, --border-mute);
 
-                        @include bem.suffix('light') {
+                        @include bem.suffix("light") {
                                 @media (prefers-color-scheme: light) {
-                                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                                        border#{$suffix}: props.get(vars.$border-width--thin) solid
+                                                props.get(vars.$theme, --border-mute);
                                 }
                         }
 
-                        @include bem.suffix('dark') {
+                        @include bem.suffix("dark") {
                                 @media (prefers-color-scheme: dark) {
-                                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                                        border#{$suffix}: props.get(vars.$border-width--thin) solid
+                                                props.get(vars.$theme, --border-mute);
                                 }
                         }
                 }
         }
 
-        @include bem.utility('mbs-neutralize') {
+        @include bem.utility("mbs-neutralize") {
                 &::before {
-                        display:       block;
-                        margin-block:  -100em 100em;
-                        content:       '';
+                        display: block;
+                        margin-block: -100em 100em;
+                        content: "";
                 }
         }
 
         @each $mod, $value in $-aspect-ratios {
-                @include bem.utility('ar-#{$mod}') {
+                @include bem.utility("ar-#{$mod}") {
                         aspect-ratio: string.unquote($value);
                 }
         }
 
-        @include bem.utility('sr-only') {
-                position:    absolute;
-                width:       1px;
-                height:      1px;
-                padding:     0;
-                margin:      -1px;
-                overflow:    hidden;
+        @include bem.utility("sr-only") {
+                position: absolute;
+                width: 1px;
+                height: 1px;
+                padding: 0;
+                margin: -1px;
+                overflow: hidden;
                 white-space: nowrap;
-                border:      0;
-                clip-path:   inset(50%);
+                border: 0;
+                clip-path: inset(50%);
         }
 }
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index f2a6ff5..c05b798 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,39 +1,44 @@
-@use 'sass:meta';
-@use 'pkg:include-media/dist/include-media' as media;
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:include-media/dist/include-media" as media;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@use '../objects/card.vars' as card;
+@use "../objects/card.vars" as card;
 
-@forward 'card-list.vars';
-@use 'card-list.vars' as vars;
+@forward "card-list.vars";
+@use "card-list.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.layout('card-list') {
-                display:        flex;
+        @include bem.layout("card-list") {
+                display: flex;
                 flex-direction: column;
-                gap:            props.get(vars.$row-gap);
+                gap: props.get(vars.$row-gap);
 
-                @include bem.modifier('merge') {
-                        position:      relative;
-                        gap:           0;
+                @include bem.modifier("merge") {
+                        position: relative;
+                        gap: 0;
                         border-radius: props.get(card.$rounding);
 
-                        @include bem.elem('card') {
-                                border-color:    props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color);
+                        @include bem.elem("card") {
+                                border-color: props.get(card.$border-color) props.get(card.$border-color)
+                                        props.get(vars.$border-color);
                                 background-clip: content-box;
-                                box-shadow:      none;
+                                box-shadow: none;
 
                                 &:not(:last-child) {
-                                        position:                relative;
+                                        position: relative;
                                         border-end-start-radius: 0;
-                                        border-end-end-radius:   0;
+                                        border-end-end-radius: 0;
                                 }
 
-                                @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+                                @include bem.multi(
+                                        "&:link, &:visited, &:enabled",
+                                        "modifier" "interactive",
+                                        "modifier" "collapsible"
+                                ) {
                                         &:hover,
                                         &:active,
                                         &:focus-visible {
@@ -46,19 +51,28 @@
                                 }
 
                                 @include bem.next-twin-elem {
-                                        margin-block-start:        calc(-1 * props.get(card.$border-width));
-                                        border-block-start-color:  transparent;
+                                        margin-block-start: calc(-1 * props.get(card.$border-width));
+                                        border-block-start-color: transparent;
                                         border-start-start-radius: 0;
-                                        border-start-end-radius:   0;
+                                        border-start-end-radius: 0;
 
-                                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+                                        @include bem.multi(
+                                                "&:link, &:visited, &:enabled",
+                                                "modifier" "interactive",
+                                                "modifier" "collapsible"
+                                        ) {
                                                 &:hover,
                                                 &:active {
                                                         border-block-start-color: props.get(card.$hover--border-color);
                                                 }
 
                                                 &:focus-visible {
-                                                        margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
+                                                        margin-block-start: calc(
+                                                                -1 *
+                                                                        props.get(card.$border-width) - props.get(
+                                                                                card.$key-focus--border-width
+                                                                        )
+                                                        );
                                                 }
                                         }
                                 }
@@ -67,7 +81,11 @@
                                         border-block-end-color: props.get(card.$border-color);
                                 }
 
-                                @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+                                @include bem.multi(
+                                        "&:link, &:visited, &:enabled",
+                                        "modifier" "interactive",
+                                        "modifier" "collapsible"
+                                ) {
                                         &:hover,
                                         &:active {
                                                 border-color: props.get(card.$hover--border-color);
@@ -75,17 +93,20 @@
 
                                         &:focus-visible {
                                                 border-color: props.get(card.$hover--bg-color);
-                                                box-shadow:
-                                                        0 0 0
-                                                        calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width))
+                                                box-shadow: 0 0 0
+                                                        calc(
+                                                                props.get(card.$key-focus--border-width) +
+                                                                        props.get(card.$key-focus--outline-width)
+                                                        )
                                                         props.get(card.$key-focus--outline-color);
                                         }
                                 }
                         }
 
-                        @include bem.modifier('borderless') {
-                                @include bem.elem('card') {
-                                        border-color: props.get(card.$bg-color) props.get(card.$bg-color) props.get(vars.$border-color);
+                        @include bem.modifier("borderless") {
+                                @include bem.elem("card") {
+                                        border-color: props.get(card.$bg-color) props.get(card.$bg-color)
+                                                props.get(vars.$border-color);
 
                                         @include bem.next-twin-elem {
                                                 border-block-start-color: transparent;
@@ -95,7 +116,11 @@
                                                 border-block-end-color: props.get(card.$bg-color);
                                         }
 
-                                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+                                        @include bem.multi(
+                                                "&:link, &:visited, &:enabled",
+                                                "modifier" "interactive",
+                                                "modifier" "collapsible"
+                                        ) {
                                                 &:hover,
                                                 &:active {
                                                         border-color: props.get(card.$hover--border-color);
@@ -108,84 +133,87 @@
                                 }
                         }
 
-                        @include bem.modifier('shadow') {
-                                box-shadow:
-                                        props.get(vars.$shadow-x)
-                                        props.get(vars.$shadow-y)
-                                        props.get(vars.$shadow-blur)
-                                        props.get(vars.$shadow-grow)
+                        @include bem.modifier("shadow") {
+                                box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
+                                        props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
                                         props.get(card.$shadow-color);
                         }
 
-                        @include bem.modifier('interactive') {
-                                transition: transform .2s, box-shadow .2s;
+                        @include bem.modifier("interactive") {
+                                transition:
+                                        transform 0.2s,
+                                        box-shadow 0.2s;
 
                                 &:hover,
                                 &:active,
                                 &:focus-within {
                                         box-shadow: none;
-                                        transform:  translateY(props.get(card.$hover--offset-b));
+                                        transform: translateY(props.get(card.$hover--offset-b));
                                 }
                         }
                 }
 
-                @include bem.modifier('quiet') {
+                @include bem.modifier("quiet") {
                         row-gap: props.get(vars.$quiet--row-gap);
                 }
 
-                @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$grid-layouts {
+                @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap,
+                        $breakpoint in vars.$grid-layouts
+                {
                         @include bem.modifier($mod) {
-                                display:               grid;
+                                display: grid;
                                 grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr));
-                                gap:                   props.get($row-gap) props.get($col-gap);
+                                gap: props.get($row-gap) props.get($col-gap);
 
-                                @include bem.modifier('quiet') {
+                                @include bem.modifier("quiet") {
                                         row-gap: props.get($quiet--row-gap);
                                 }
 
-                                @include media.media('<=#{$breakpoint}') {
+                                @include media.media("<=#{$breakpoint}") {
                                         display: flex;
                                 }
                         }
                 }
 
-                @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$flex-layouts {
+                @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap,
+                        $breakpoint in vars.$flex-layouts
+                {
                         @include bem.modifier($mod) {
-                                display:   flex;
+                                display: flex;
                                 flex-flow: row wrap;
-                                gap:       props.get($row-gap) props.get($col-gap);
+                                gap: props.get($row-gap) props.get($col-gap);
 
-                                @include bem.modifier('quiet') {
+                                @include bem.modifier("quiet") {
                                         row-gap: props.get($quiet--row-gap);
                                 }
 
-                                @include bem.elem('card') {
-                                        flex:        0.1 0 auto;
+                                @include bem.elem("card") {
+                                        flex: 0.1 0 auto;
                                         inline-size: props.get($col-width);
                                 }
 
-                                @include media.media('<=#{$breakpoint}') {
+                                @include media.media("<=#{$breakpoint}") {
                                         flex-flow: column nowrap;
 
-                                        @include bem.elem('card') {
+                                        @include bem.elem("card") {
                                                 inline-size: auto;
                                         }
                                 }
                         }
                 }
 
-                @include bem.modifier('masonry') {
-                        display:    block;
-                        columns:    auto props.get(vars.$masonry--col-width);
+                @include bem.modifier("masonry") {
+                        display: block;
+                        columns: auto props.get(vars.$masonry--col-width);
                         column-gap: props.get(vars.$masonry--col-gap);
 
-                        @include bem.elem('card') {
+                        @include bem.elem("card") {
                                 margin-block-end: props.get(vars.$masonry--row-gap);
-                                break-inside:     avoid;
+                                break-inside: avoid;
                         }
 
-                        @include bem.modifier('quiet') {
-                                @include bem.elem('card') {
+                        @include bem.modifier("quiet") {
+                                @include bem.elem("card") {
                                         margin-block-end: props.get(vars.$masonry--quiet--row-gap);
                                 }
                         }
@@ -194,34 +222,34 @@
                 @each $mod, $row-gap, $col-gap, $row-height, $quiet--row-gap in vars.$masonry-h-layouts {
                         @include bem.modifier($mod) {
                                 flex-flow: row wrap;
-                                gap:       props.get($row-gap) props.get($col-gap);
+                                gap: props.get($row-gap) props.get($col-gap);
 
-                                @include bem.modifier('no-flush') {
+                                @include bem.modifier("no-flush") {
                                         &::after {
-                                                display:     block;
-                                                flex:        1 0 auto;
+                                                display: block;
+                                                flex: 1 0 auto;
                                                 inline-size: props.get($row-height);
-                                                content:     '';
+                                                content: "";
                                         }
                                 }
 
-                                @include bem.elem('card') {
-                                        flex:            1 0 auto;
+                                @include bem.elem("card") {
+                                        flex: 1 0 auto;
                                         max-inline-size: 100%;
                                 }
 
-                                @include bem.elem('card-image') {
+                                @include bem.elem("card-image") {
                                         block-size: props.get($row-height);
                                 }
 
-                                @include bem.modifier('quiet') {
+                                @include bem.modifier("quiet") {
                                         row-gap: props.get($quiet--row-gap);
                                 }
                         }
                 }
 
-                @include bem.modifier('aspect-5\\/4') {
-                        @include bem.elem('card-image') {
+                @include bem.modifier("aspect-5\\/4") {
+                        @include bem.elem("card-image") {
                                 aspect-ratio: 5 / 4;
                         }
                 }
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index fb89b52..ece68f3 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,61 +1,116 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
-@use '../objects/card' as card;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
+@use "../objects/card" as card;
 
-$row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
+$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
 $quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
 
-$grid--row-gap:        props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default;
-$grid--col-gap:        props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default;
-$grid--col-width:      props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
-$grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
+$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default;
+$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default;
+$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
+$grid--quiet--row-gap: props.def(
+        --l-card-list--grid--quiet--row-gap,
+        props.get(core.$size--800)
+) !default;
 
-$grid-sm--row-gap:        props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default;
-$grid-sm--col-gap:        props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default;
-$grid-sm--col-width:      props.def(--l-card-list--grid-sm--col-width, props.get(core.$size--4600)) !default;
-$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default;
+$grid-sm--row-gap: props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-gap: props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-width: props.def(
+        --l-card-list--grid-sm--col-width,
+        props.get(core.$size--4600)
+) !default;
+$grid-sm--quiet--row-gap: props.def(
+        --l-card-list--grid-sm--quiet--row-gap,
+        props.get(core.$size--800)
+) !default;
 
-$grid-xs--row-gap:        props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default;
-$grid-xs--col-gap:        props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default;
-$grid-xs--col-width:      props.def(--l-card-list--grid-xs--col-width, props.get(core.$size--1600)) !default;
-$grid-xs--quiet--row-gap: props.def(--l-card-list--grid-xs--quiet--row-gap, props.get(core.$size--800)) !default;
+$grid-xs--row-gap: props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default;
+$grid-xs--col-gap: props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default;
+$grid-xs--col-width: props.def(
+        --l-card-list--grid-xs--col-width,
+        props.get(core.$size--1600)
+) !default;
+$grid-xs--quiet--row-gap: props.def(
+        --l-card-list--grid-xs--quiet--row-gap,
+        props.get(core.$size--800)
+) !default;
 
 $grid-layouts: (
-        'grid'    $grid--row-gap    $grid--col-gap    $grid--col-width    $grid--quiet--row-gap    sm,
-        'grid-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
-        'grid-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
+        "grid" $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm,
+        "grid-sm" $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
+        "grid-xs" $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs
 ) !default;
 
 $flex-layouts: (
-        'flex'    $grid--row-gap    $grid--col-gap    $grid--col-width    $grid--quiet--row-gap    sm,
-        'flex-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
-        'flex-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
+        "flex" $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm,
+        "flex-sm" $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
+        "flex-xs" $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs
 ) !default;
 
-$masonry-h--row-gap:        props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default;
-$masonry-h--col-gap:        props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default;
-$masonry-h--row-height:     props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
-$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default;
+$masonry-h--row-gap: props.def(
+        --l-card-list--masonry-h--row-gap,
+        props.get(core.$size--400)
+) !default;
+$masonry-h--col-gap: props.def(
+        --l-card-list--masonry-h--col-gap,
+        props.get(core.$size--400)
+) !default;
+$masonry-h--row-height: props.def(
+        --l-card-list--masonry-h--row-height,
+        props.get(core.$size--3200)
+) !default;
+$masonry-h--quiet--row-gap: props.def(
+        --l-card-list--masonry-h--quiet--row-gap,
+        props.get(core.$size--800)
+) !default;
 
-$masonry-h-sm--row-gap:        props.def(--l-card-list--masonry-h-sm--row-gap, props.get(core.$size--400)) !default;
-$masonry-h-sm--col-gap:        props.def(--l-card-list--masonry-h-sm--col-gap, props.get(core.$size--400)) !default;
-$masonry-h-sm--row-height:     props.def(--l-card-list--masonry-h-sm--row-height, props.get(core.$size--2600)) !default;
-$masonry-h-sm--quiet--row-gap: props.def(--l-card-list--masonry-h-sm--quiet--row-gap, props.get(core.$size--800)) !default;
+$masonry-h-sm--row-gap: props.def(
+        --l-card-list--masonry-h-sm--row-gap,
+        props.get(core.$size--400)
+) !default;
+$masonry-h-sm--col-gap: props.def(
+        --l-card-list--masonry-h-sm--col-gap,
+        props.get(core.$size--400)
+) !default;
+$masonry-h-sm--row-height: props.def(
+        --l-card-list--masonry-h-sm--row-height,
+        props.get(core.$size--2600)
+) !default;
+$masonry-h-sm--quiet--row-gap: props.def(
+        --l-card-list--masonry-h-sm--quiet--row-gap,
+        props.get(core.$size--800)
+) !default;
 
 $masonry-h-layouts: (
-        'masonry-h'    $masonry-h--row-gap    $masonry-h--col-gap    $masonry-h--row-height    $masonry-h--quiet--row-gap,
-        'masonry-h-sm' $masonry-h-sm--row-gap $masonry-h-sm--col-gap $masonry-h-sm--row-height $masonry-h-sm--quiet--row-gap,
+        "masonry-h" $masonry-h--row-gap $masonry-h--col-gap $masonry-h--row-height
+                $masonry-h--quiet--row-gap,
+        "masonry-h-sm" $masonry-h-sm--row-gap $masonry-h-sm--col-gap $masonry-h-sm--row-height
+                $masonry-h-sm--quiet--row-gap
 ) !default;
 
-$masonry--row-gap:        props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
-$masonry--col-gap:        props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
-$masonry--col-width:      props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
-$masonry--quiet--row-gap: props.def(--l-card-list--masonry--quiet--row-gap, props.get(core.$size--800)) !default;
+$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
+$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
+$masonry--col-width: props.def(
+        --l-card-list--masonry--col-width,
+        props.get(core.$size--3200)
+) !default;
+$masonry--quiet--row-gap: props.def(
+        --l-card-list--masonry--quiet--row-gap,
+        props.get(core.$size--800)
+) !default;
 
-$shadow-x:    props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
-$shadow-y:    props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
+$shadow-x: props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
+$shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
 $shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
 $shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default;
 
-$border-color:       props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default;
-$border-color-dark:  props.def(--l-card-list--border-color, props.get(core.$theme, --border-mute), 'dark') !default;
+$border-color: props.def(
+        --l-card-list--border-color,
+        props.get(card.$border-color),
+        "color"
+) !default;
+$border-color-dark: props.def(
+        --l-card-list--border-color,
+        props.get(core.$theme, --border-mute),
+        "dark"
+) !default;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 46ded23..7b3dc3f 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,37 +1,37 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'container.vars';
-@use 'container.vars' as vars;
+@forward "container.vars";
+@use "container.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.layout('container') {
+        @include bem.layout("container") {
                 @each $mod, $size in vars.$fixed-sizes {
                         @include bem.modifier($mod) {
                                 max-inline-size: props.get($size);
-                                margin-inline:   auto;
+                                margin-inline: auto;
                         }
                 }
 
-                @include bem.modifier('pad-i') {
+                @include bem.modifier("pad-i") {
                         padding-inline: props.get(vars.$pad-i);
                 }
 
-                @include bem.modifier('pad-b') {
+                @include bem.modifier("pad-b") {
                         padding-block: props.get(vars.$pad-b);
                 }
 
                 @each $mod, $pad-i, $pad-b in vars.$sizes {
                         @include bem.modifier($mod) {
-                                @include bem.modifier('pad-i') {
+                                @include bem.modifier("pad-i") {
                                         padding-inline: props.get($pad-i);
                                 }
 
-                                @include bem.modifier('pad-b') {
+                                @include bem.modifier("pad-b") {
                                         padding-block: props.get($pad-b);
                                 }
                         }
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index 094046f..09ef165 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -1,39 +1,36 @@
-@use 'pkg:iro-sass/src/functions' as fn;
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/functions" as fn;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 $fixed-200: props.def(--l-container--fixed-200, fn.px-to-rem(1300px)) !default;
 $fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default;
-$fixed:     props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
+$fixed: props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
 
 $fixed-sizes: (
-        'fixed-200': $fixed-200,
-        'fixed-150': $fixed-150,
-        'fixed':     $fixed
+        "fixed-200": $fixed-200,
+        "fixed-150": $fixed-150,
+        "fixed": $fixed,
 ) !default;
 
 $pad-i: props.def(--l-container--pad-i, props.get(core.$size--600)) !default;
 $pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default;
 
-$pad-i--md: props.def(--l-container--pad-i, props.get(core.$size--400), 'md') !default;
-$pad-b--md: props.def(--l-container--pad-b, props.get(core.$size--700), 'md') !default;
+$pad-i--md: props.def(--l-container--pad-i, props.get(core.$size--400), "md") !default;
+$pad-b--md: props.def(--l-container--pad-b, props.get(core.$size--700), "md") !default;
 
-$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), 'sm') !default;
-$pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), 'sm') !default;
+$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), "sm") !default;
+$pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), "sm") !default;
 
-$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), 'xs') !default;
-$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), 'xs') !default;
+$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), "xs") !default;
+$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), "xs") !default;
 
 $sm--pad-i: props.def(--l-container--sm--pad-i, props.get(core.$size--300)) !default;
 $sm--pad-b: props.def(--l-container--sm--pad-b, props.get(core.$size--800)) !default;
 
-$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), 'sm') !default;
-$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), 'sm') !default;
+$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), "sm") !default;
+$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), "sm") !default;
 
-$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), 'xs') !default;
-$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), 'xs') !default;
+$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), "xs") !default;
+$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), "xs") !default;
 
-$sizes: (
-        'sm' $sm--pad-i $sm--pad-b,
-        'md' $sm--pad-i $sm--pad-b,
-) !default;
+$sizes: ("sm" $sm--pad-i $sm--pad-b, "md" $sm--pad-i $sm--pad-b) !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index ea0b268..70d29f9 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,18 +1,18 @@
-@use 'pkg:iro-sass/src/bem';
+@use "pkg:iro-sass/bem";
 
 @mixin styles {
-        @include bem.layout('flex') {
+        @include bem.layout("flex") {
                 display: flex;
 
-                @include bem.modifier('column') {
+                @include bem.modifier("column") {
                         flex-direction: column;
                 }
 
-                @include bem.modifier('wrap') {
+                @include bem.modifier("wrap") {
                         flex-wrap: wrap;
                 }
 
-                @include bem.modifier('wrap-reverse') {
+                @include bem.modifier("wrap-reverse") {
                         flex-wrap: wrap-reverse;
                 }
         }
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index f094cbc..f71e469 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,57 +1,57 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'form.vars';
-@use 'form.vars' as vars;
+@forward "form.vars";
+@use "form.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.layout('form') {
-                display:        flex;
+        @include bem.layout("form") {
+                display: flex;
                 flex-direction: column;
-                gap:            props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
+                gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
 
-                @include bem.elem('item') {
+                @include bem.elem("item") {
                         display: block;
                 }
 
-                @include bem.elem('item-content') {
-                        @include bem.modifier('align-start') {
+                @include bem.elem("item-content") {
+                        @include bem.modifier("align-start") {
                                 align-self: start;
                         }
                 }
 
-                @include bem.modifier('row') {
+                @include bem.modifier("row") {
                         flex-direction: row;
-                        align-items:    flex-end;
+                        align-items: flex-end;
                 }
 
-                @include bem.modifier('labels-start', 'labels-end') {
-                        display:               grid;
-                        grid-template-rows:    auto;
+                @include bem.modifier("labels-start", "labels-end") {
+                        display: grid;
+                        grid-template-rows: auto;
                         grid-template-columns: auto 1fr;
-                        align-items:           baseline;
+                        align-items: baseline;
 
-                        @include bem.elem('item') {
+                        @include bem.elem("item") {
                                 display: contents;
                         }
 
-                        @include bem.elem('item-label') {
-                                grid-column:        1;
+                        @include bem.elem("item-label") {
+                                grid-column: 1;
                                 padding-inline-end: 0;
                         }
 
-                        @include bem.elem('item-content') {
-                                grid-column:        2;
+                        @include bem.elem("item-content") {
+                                grid-column: 2;
                                 margin-block-start: 0;
                         }
                 }
 
-                @include bem.modifier('labels-end') {
-                        @include bem.elem('item-label') {
+                @include bem.modifier("labels-end") {
+                        @include bem.elem("item-label") {
                                 text-align: end;
                         }
                 }
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss
index 52670cc..68cb23a 100644
--- a/src/layouts/_form.vars.scss
+++ b/src/layouts/_form.vars.scss
@@ -1,5 +1,5 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$item-spacing-b:  props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default;
+$item-spacing-b: props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default;
 $label-spacing-i: props.def(--l-form--label-spacing-i, props.get(core.$size--325)) !default;
diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss
index 32b3097..00787db 100644
--- a/src/layouts/_hlist.scss
+++ b/src/layouts/_hlist.scss
@@ -1,30 +1,30 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'hlist.vars';
-@use 'hlist.vars' as vars;
-@use '../objects/button.vars' as button;
+@forward "hlist.vars";
+@use "hlist.vars" as vars;
+@use "../objects/button.vars" as button;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.layout('hlist') {
-                display:   inline-flex;
+        @include bem.layout("hlist") {
+                display: inline-flex;
                 flex-wrap: wrap;
-                gap:       props.get(vars.$gap);
+                gap: props.get(vars.$gap);
 
                 @each $mod, $size in vars.$sizes {
                         @include bem.modifier($mod) {
                                 gap: props.get($size);
 
-                                @include bem.modifier('separated') {
-                                        @include bem.elem('item') {
+                                @include bem.modifier("separated") {
+                                        @include bem.elem("item") {
                                                 @include bem.next-twin-elem {
                                                         &::before {
-                                                                content: '·';
-                                                                margin-inline: calc(.65 * props.get($size));
+                                                                content: "·";
+                                                                margin-inline: calc(0.65 * props.get($size));
                                                         }
                                                 }
                                         }
@@ -32,40 +32,51 @@
                         }
                 }
 
-                @include bem.modifier('separated') {
+                @include bem.modifier("separated") {
                         gap: 0;
 
-                        @include bem.elem('item') {
+                        @include bem.elem("item") {
                                 @include bem.next-twin-elem {
                                         &::before {
-                                                content: '·';
-                                                margin-inline: calc(.65 * props.get(vars.$gap));
+                                                content: "·";
+                                                margin-inline: calc(0.65 * props.get(vars.$gap));
                                         }
                                 }
                         }
                 }
 
-                @include bem.modifier('buttons') {
+                @include bem.modifier("buttons") {
                         margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
 
-                        @include bem.modifier('pill') {
-                                margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
+                        @include bem.modifier("pill") {
+                                margin-inline: calc(
+                                        -1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)
+                                );
                         }
 
-                        @include bem.modifier('icon') {
-                                margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+                        @include bem.modifier("icon") {
+                                margin-inline: calc(
+                                        -1 * props.get(button.$pad-b) - props.get(button.$border-width) - 0.5em *
+                                                (props.get(button.$line-height) - 1)
+                                );
                         }
 
-                        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
-                                @include bem.modifier('buttons-#{$mod}') {
+                        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes
+                        {
+                                @include bem.modifier("buttons-#{$mod}") {
                                         margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
 
-                                        @include bem.modifier('pill') {
-                                                margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
+                                        @include bem.modifier("pill") {
+                                                margin-inline: calc(
+                                                        -1 * props.get($pad-i-pill) - props.get(button.$border-width)
+                                                );
                                         }
 
-                                        @include bem.modifier('icon') {
-                                                margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+                                        @include bem.modifier("icon") {
+                                                margin-inline: calc(
+                                                        -1 * props.get($pad-b) - props.get(button.$border-width) - 0.5em *
+                                                                (props.get(button.$line-height) - 1)
+                                                );
                                         }
                                 }
                         }
diff --git a/src/layouts/_hlist.vars.scss b/src/layouts/_hlist.vars.scss
index 2d99057..557cfae 100644
--- a/src/layouts/_hlist.vars.scss
+++ b/src/layouts/_hlist.vars.scss
@@ -1,16 +1,16 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 $gap: props.def(--l-hlist--gap, props.get(core.$size--150)) !default;
 
 $gapless: props.def(--l-hlist--gapless, 0) !default;
-$sm:      props.def(--l-hlist--sm, props.get(core.$size--100)) !default;
-$lg:      props.def(--l-hlist--lg, props.get(core.$size--300)) !default;
-$xl:      props.def(--l-hlist--xl, props.get(core.$size--450)) !default;
+$sm: props.def(--l-hlist--sm, props.get(core.$size--100)) !default;
+$lg: props.def(--l-hlist--lg, props.get(core.$size--300)) !default;
+$xl: props.def(--l-hlist--xl, props.get(core.$size--450)) !default;
 
 $sizes: (
-        'gapless': $gapless,
-        'sm':      $sm,
-        'lg':      $lg,
-        'xl':      $xl,
+        "gapless": $gapless,
+        "sm": $sm,
+        "lg": $lg,
+        "xl": $xl,
 ) !default;
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 4492ea9..b6732bf 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -1,17 +1,17 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'media.vars';
-@use 'media.vars' as vars;
+@forward "media.vars";
+@use "media.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.layout('media') {
-                display:     flex;
-                gap:         props.get(vars.$gap);
+        @include bem.layout("media") {
+                display: flex;
+                gap: props.get(vars.$gap);
                 align-items: center;
                 line-height: 1.4;
 
@@ -21,19 +21,19 @@
                         }
                 }
 
-                @include bem.modifier('wrap') {
+                @include bem.modifier("wrap") {
                         flex-wrap: wrap;
                 }
 
-                @include bem.elem('block') {
+                @include bem.elem("block") {
                         flex: 0 0 auto;
 
-                        @include bem.modifier('shrink', 'main') {
-                                flex-shrink:     1;
+                        @include bem.modifier("shrink", "main") {
+                                flex-shrink: 1;
                                 min-inline-size: 0;
                         }
 
-                        @include bem.modifier('main') {
+                        @include bem.modifier("main") {
                                 inline-size: 100%;
                         }
                 }
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index 78e157f..f24ea2a 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -1,16 +1,16 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$gap:  props.def(--l-media--gap, props.get(core.$size--150)) !default;
+$gap: props.def(--l-media--gap, props.get(core.$size--150)) !default;
 
 $gapless: props.def(--l-media--gapless, 0) !default;
-$sm:      props.def(--l-media--sm, props.get(core.$size--100)) !default;
-$lg:      props.def(--l-media--lg, props.get(core.$size--300)) !default;
-$xl:      props.def(--l-media--xl, props.get(core.$size--450)) !default;
+$sm: props.def(--l-media--sm, props.get(core.$size--100)) !default;
+$lg: props.def(--l-media--lg, props.get(core.$size--300)) !default;
+$xl: props.def(--l-media--xl, props.get(core.$size--450)) !default;
 
 $sizes: (
-        'gapless': $gapless,
-        'sm':      $sm,
-        'lg':      $lg,
-        'xl':      $xl,
+        "gapless": $gapless,
+        "sm": $sm,
+        "lg": $lg,
+        "xl": $xl,
 ) !default;
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index ab983b9..57e2512 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -1,10 +1,10 @@
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 @mixin styles {
-        @include bem.layout('overflow') {
-                overflow:        auto;
+        @include bem.layout("overflow") {
+                overflow: auto;
                 scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
         }
 }
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index ea651c7..1bffddd 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -1,101 +1,110 @@
-@use 'sass:meta';
-@use 'pkg:include-media/dist/include-media' as media;
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:include-media/dist/include-media" as media;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'split-view.vars';
-@use 'split-view.vars' as vars;
+@forward "split-view.vars";
+@use "split-view.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.layout('split-view') {
-                display:     flex;
-                gap:         props.get(vars.$col-gap);
+        @include bem.layout("split-view") {
+                display: flex;
+                gap: props.get(vars.$col-gap);
                 align-items: start;
 
-                @include bem.elem('panel') {
-                        flex:            1 1 auto;
-                        inline-size:     100%;
+                @include bem.elem("panel") {
+                        flex: 1 1 auto;
+                        inline-size: 100%;
                         min-inline-size: 0;
 
                         &::before {
-                                display:       block;
-                                margin-block:  -100em 100em;
-                                content:       '';
+                                display: block;
+                                margin-block: -100em 100em;
+                                content: "";
                         }
 
-                        @include bem.modifier('side-25') {
-                                flex:        0 0 auto;
+                        @include bem.modifier("side-25") {
+                                flex: 0 0 auto;
                                 inline-size: 25%;
                         }
 
-                        @include bem.modifier('min-50') {
+                        @include bem.modifier("min-50") {
                                 min-inline-size: props.get(vars.$panel--min-50);
                         }
 
-                        @include bem.modifier('min-100') {
+                        @include bem.modifier("min-100") {
                                 min-inline-size: props.get(vars.$panel--min-100);
                         }
 
-                        @include bem.modifier('min-200') {
+                        @include bem.modifier("min-200") {
                                 min-inline-size: props.get(vars.$panel--min-200);
                         }
 
-                        @include bem.modifier('sticky') {
-                                position:          sticky;
+                        @include bem.modifier("sticky") {
+                                position: sticky;
                                 inset-block-start: props.get(vars.$panel--sticky-offset);
                         }
                 }
 
-                @include bem.modifier('gapless') {
+                @include bem.modifier("gapless") {
                         gap: props.get(vars.$gapless);
 
-                        @include bem.elem('panel') {
-                                @include bem.modifier('min-50') {
-                                        min-inline-size: calc(props.get(vars.$panel--min-50) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+                        @include bem.elem("panel") {
+                                @include bem.modifier("min-50") {
+                                        min-inline-size: calc(
+                                                props.get(vars.$panel--min-50) +
+                                                        props.get(vars.$col-gap) - props.get(vars.$gapless)
+                                        );
                                 }
 
-                                @include bem.modifier('min-100') {
-                                        min-inline-size: calc(props.get(vars.$panel--min-100) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+                                @include bem.modifier("min-100") {
+                                        min-inline-size: calc(
+                                                props.get(vars.$panel--min-100) +
+                                                        props.get(vars.$col-gap) - props.get(vars.$gapless)
+                                        );
                                 }
 
-                                @include bem.modifier('min-200') {
-                                        min-inline-size: calc(props.get(vars.$panel--min-200) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+                                @include bem.modifier("min-200") {
+                                        min-inline-size: calc(
+                                                props.get(vars.$panel--min-200) +
+                                                        props.get(vars.$col-gap) - props.get(vars.$gapless)
+                                        );
                                 }
                         }
                 }
 
-                @include bem.elem('content') {
+                @include bem.elem("content") {
                         inline-size: 100%;
                 }
 
-                @include media.media('<=md') {
+                @include media.media("<=md") {
                         flex-direction: column;
-                        gap:            props.get(vars.$row-gap);
-                        align-items:    stretch;
+                        gap: props.get(vars.$row-gap);
+                        align-items: stretch;
 
-                        @include bem.modifier('gapless') {
+                        @include bem.modifier("gapless") {
                                 gap: props.get(vars.$gapless);
                         }
 
-                        @include bem.modifier('wrap-reverse') {
+                        @include bem.modifier("wrap-reverse") {
                                 flex-direction: column-reverse;
                         }
 
-                        @include bem.elem('panel') {
+                        @include bem.elem("panel") {
                                 inline-size: auto;
 
-                                @include bem.modifier('side-25') {
+                                @include bem.modifier("side-25") {
                                         inline-size: auto;
                                 }
 
-                                @include bem.modifier('min-50', 'min-100', 'min-200') {
+                                @include bem.modifier("min-50", "min-100", "min-200") {
                                         min-inline-size: 0;
                                 }
 
-                                @include bem.modifier('sticky') {
+                                @include bem.modifier("sticky") {
                                         position: static;
                                 }
                         }
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index b2944e7..9b6dd21 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -1,13 +1,16 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$col-gap:  props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
-$row-gap:  props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
+$col-gap: props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
+$row-gap: props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
 
 $gapless: props.def(--l-split-view--gapless, 0rem) !default;
 
-$panel--min-50:  props.def(--l-split-view--panel--min-50,  props.get(core.$size--2400)) !default;
+$panel--min-50: props.def(--l-split-view--panel--min-50, props.get(core.$size--2400)) !default;
 $panel--min-100: props.def(--l-split-view--panel--min-100, props.get(core.$size--3200)) !default;
 $panel--min-200: props.def(--l-split-view--panel--min-200, props.get(core.$size--4200)) !default;
 
-$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;
+$panel--sticky-offset: props.def(
+        --l-split-view--panel--sticky-offset,
+        props.get(core.$sticky-top-offset)
+) !default;
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index c2a1c58..3aeb781 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -1,44 +1,37 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:map";
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'alert.vars';
-@use 'alert.vars' as vars;
+@forward "alert.vars";
+@use "alert.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('alert') {
-                padding-block:    props.get(vars.$pad-b);
-                padding-inline:   props.get(vars.$pad-i);
+        @include bem.object("alert") {
+                padding-block: props.get(vars.$pad-b);
+                padding-inline: props.get(vars.$pad-i);
                 background-color: props.get(vars.$bg-color);
-                border:           props.get(vars.$border-width) solid transparent;
-                border-color:     props.get(vars.$border-color);
-                border-radius:    props.get(vars.$rounding);
-                box-shadow:
-                        props.get(vars.$shadow-x)
-                        props.get(vars.$shadow-y)
-                        props.get(vars.$shadow-blur)
-                        props.get(vars.$shadow-grow)
-                        props.get(vars.$shadow-color);
+                border: props.get(vars.$border-width) solid transparent;
+                border-color: props.get(vars.$border-color);
+                border-radius: props.get(vars.$rounding);
+                box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur)
+                        props.get(vars.$shadow-grow) props.get(vars.$shadow-color);
 
                 &::before {
-                        display:       block;
-                        margin-block:  -100em 100em;
-                        content:       '';
+                        display: block;
+                        margin-block: -100em 100em;
+                        content: "";
                 }
 
                 @each $mod, $theme in vars.$themes-config {
                         @include bem.modifier($mod) {
                                 background-color: props.get(vars.$themes, $theme, --bg-color);
                                 border-color: props.get(vars.$themes, $theme, --border-color);
-                                box-shadow:
-                                        props.get(vars.$shadow-x)
-                                        props.get(vars.$shadow-y)
-                                        props.get(vars.$shadow-blur)
-                                        props.get(vars.$shadow-grow)
+                                box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
+                                        props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
                                         props.get(vars.$themes, $theme, --shadow-color);
                         }
                 }
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
index bbd3dad..aedd917 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -1,36 +1,50 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 $border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default;
-$pad-i:        props.def(--o-alert--pad-i, props.get(core.$size--250)) !default;
-$pad-b:        props.def(--o-alert--pad-b, props.get(core.$size--200)) !default;
-$rounding:     props.def(--o-alert--rounding, props.get(core.$rounding)) !default;
+$pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default;
+$pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default;
+$rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default;
 
-$shadow-x:    props.def(--o-alert--shadow-x, props.get(core.$shadow--l2--x)) !default;
-$shadow-y:    props.def(--o-alert--shadow-y, props.get(core.$shadow--l2--y)) !default;
+$shadow-x: props.def(--o-alert--shadow-x, props.get(core.$shadow--l2--x)) !default;
+$shadow-y: props.def(--o-alert--shadow-y, props.get(core.$shadow--l2--y)) !default;
 $shadow-blur: props.def(--o-alert--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
 $shadow-grow: props.def(--o-alert--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
 
-$bg-color:     props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
-$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute), 'color') !default;
+$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), "color") !default;
+$border-color: props.def(
+        --o-alert--border-color,
+        props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute-more)
+                props.get(core.$theme, --text-mute),
+        "color"
+) !default;
 
-$shadow-color:  props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default;
+$shadow-color: props.def(
+        --o-alert--shadow-color,
+        props.get(core.$transparent-colors, --black, --200),
+        "color"
+) !default;
 
 $themes-config: (
-        accent:   --accent,
+        accent: --accent,
         positive: --positive,
         negative: --negative,
-        warning:  --warning,
+        warning: --warning,
 ) !default;
 
-$themes: props.def(--o-alert, (), 'color');
+$themes: props.def(--o-alert, (), "color");
 
 @each $theme, $key in $themes-config {
-        $themes: props.merge($themes, (
-                $key: (
-                        --bg-color:     props.get(core.$theme, --bg-l2),
-                        --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800),
-                        --shadow-color: props.get(core.$theme, $key, --200),
+        $themes: props.merge(
+                $themes,
+                (
+                        $key: (
+                                        --bg-color: props.get(core.$theme, --bg-l2),
+                                        --border-color: props.get(core.$theme, $key, --700)
+                                                props.get(core.$theme, $key, --700)
+                                                props.get(core.$theme, $key, --800),
+                                        --shadow-color: props.get(core.$theme, $key, --200),
+                                ),
                 )
-        ));
+        );
 }
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 272c213..f805502 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,118 +1,135 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'avatar.vars';
-@use 'avatar.vars' as vars;
+@forward "avatar.vars";
+@use "avatar.vars" as vars;
 
 @mixin status($indicator-size) {
-        @include bem.elem('status') {
+        @include bem.elem("status") {
                 inline-size: props.get($indicator-size);
-                block-size:  props.get($indicator-size);
+                block-size: props.get($indicator-size);
 
-                @include bem.sibling-elem('content') {
-                        mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
-                        calc(100% - .5 * props.get($indicator-size))
-                        calc(100% - .5 * props.get($indicator-size)),
-                        transparent 95%,
-                        #fff);
+                @include bem.sibling-elem("content") {
+                        mask-image: radial-gradient(
+                                circle calc(0.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing))
+                                        at calc(100% - 0.5 * props.get($indicator-size))
+                                        calc(100% - 0.5 * props.get($indicator-size)),
+                                transparent 95%,
+                                #fff
+                        );
                 }
         }
 }
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('avatar') {
-                position:       relative;
-                display:        inline-block;
-                font-style:     normal;
-                vertical-align: .05em;
-                border-radius:  props.get(vars.$rounding);
+        @include bem.object("avatar") {
+                position: relative;
+                display: inline-block;
+                font-style: normal;
+                vertical-align: 0.05em;
+                border-radius: props.get(vars.$rounding);
 
                 &::after {
-                        position:       absolute;
-                        inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
-                        z-index:        1;
-                        display:        none;
+                        position: absolute;
+                        inset: calc(-1 * props.get(vars.$key-focus--border-offset));
+                        z-index: 1;
+                        display: none;
                         pointer-events: none;
-                        outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                        content:        '';
-                        border:         props.get(vars.$key-focus--border-offset) solid transparent;
-                        border-radius:  props.get(vars.$rounding);
-                        box-shadow:
-                                0
-                                0
-                                0
-                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                        outline: props.get(vars.$key-focus--border-color) solid
+                                props.get(vars.$key-focus--border-width);
+                        content: "";
+                        border: props.get(vars.$key-focus--border-offset) solid transparent;
+                        border-radius: props.get(vars.$rounding);
+                        box-shadow: 0 0 0
+                                calc(
+                                        props.get(vars.$key-focus--border-width) +
+                                                props.get(vars.$key-focus--outline-width)
+                                )
                                 props.get(vars.$key-focus--outline-color);
                 }
 
-                @include bem.elem('status') {
-                        position:         absolute;
-                        inset-block-end:  0;
+                @include bem.elem("status") {
+                        position: absolute;
+                        inset-block-end: 0;
                         inset-inline-end: 0;
                 }
 
-                @include bem.elem('icon') {
-                        position:         absolute;
-                        inset-block-end:  0;
+                @include bem.elem("icon") {
+                        position: absolute;
+                        inset-block-end: 0;
                         inset-inline-end: 0;
-                        display:          flex;
-                        align-items:      flex-end;
-                        justify-content:  flex-end;
-                        inline-size:      props.get(vars.$icon-size);
-                        block-size:       props.get(vars.$icon-size);
+                        display: flex;
+                        align-items: flex-end;
+                        justify-content: flex-end;
+                        inline-size: props.get(vars.$icon-size);
+                        block-size: props.get(vars.$icon-size);
 
-                        @include bem.sibling-elem('content') {
+                        @include bem.sibling-elem("content") {
                                 clip-path: props.get(vars.$icon-mask);
                         }
                 }
 
-                @include bem.elem('content') {
-                        display:          block;
-                        inline-size:      props.get(vars.$size);
-                        block-size:       props.get(vars.$size);
-                        font-size:        props.get(vars.$font-size);
-                        line-height:      props.get(vars.$size);
-                        text-align:       center;
-                        object-fit:       cover;
-                        object-position:  center center;
-                        border-radius:    props.get(vars.$rounding);
+                @include bem.elem("content") {
+                        display: block;
+                        inline-size: props.get(vars.$size);
+                        block-size: props.get(vars.$size);
+                        font-size: props.get(vars.$font-size);
+                        line-height: props.get(vars.$size);
+                        text-align: center;
+                        object-fit: cover;
+                        object-position: center center;
+                        border-radius: props.get(vars.$rounding);
                 }
 
-                @include bem.modifier('circle') {
+                @include bem.modifier("circle") {
                         border-radius: 100%;
 
                         &::after {
                                 border-radius: 100%;
                         }
 
-                        @include bem.elem('content') {
+                        @include bem.elem("content") {
                                 border-radius: 100%;
                         }
                 }
 
-                @include bem.modifier('placeholder') {
-                        @include bem.elem('content') {
+                @include bem.modifier("placeholder") {
+                        @include bem.elem("content") {
                                 background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
                         }
                 }
 
-                @include bem.modifier('colored') {
-                        @include bem.elem('content') {
-                                color:            #fff;
-                                background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
+                @include bem.modifier("colored") {
+                        @include bem.elem("content") {
+                                color: #fff;
+                                background-color: hsl(
+                                        props.get(vars.$bg-color--h),
+                                        props.get(vars.$bg-color--s),
+                                        props.get(vars.$bg-color--l)
+                                );
                         }
                 }
 
-                @include bem.modifier('colored-gradient') {
-                        @include bem.elem('content') {
-                                color:      #fff;
-                                background: linear-gradient(props.get(vars.$bg-angle),
-                                hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),
-                                hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
+                @include bem.modifier("colored-gradient") {
+                        @include bem.elem("content") {
+                                color: #fff;
+                                background: linear-gradient(
+                                        props.get(vars.$bg-angle),
+                                        hsl(
+                                                props.get(vars.$bg-color--h),
+                                                props.get(vars.$bg-color--s),
+                                                props.get(vars.$bg-color--l)
+                                        ),
+                                        hsl(
+                                                props.get(vars.$bg-color-2--h),
+                                                props.get(vars.$bg-color-2--s),
+                                                props.get(vars.$bg-color-2--l)
+                                        )
+                                );
                         }
                 }
 
@@ -122,19 +139,19 @@
                         @include bem.modifier($mod) {
                                 @include status($indicator-size);
 
-                                @include bem.elem('icon') {
+                                @include bem.elem("icon") {
                                         inline-size: props.get($icon-size);
-                                        block-size:  props.get($icon-size);
+                                        block-size: props.get($icon-size);
 
-                                        @include bem.sibling-elem('content') {
-                                                clip-path:   props.get($icon-mask);
+                                        @include bem.sibling-elem("content") {
+                                                clip-path: props.get($icon-mask);
                                         }
                                 }
 
-                                @include bem.elem('content') {
+                                @include bem.elem("content") {
                                         inline-size: props.get($size);
-                                        block-size:  props.get($size);
-                                        font-size:   props.get($font-size);
+                                        block-size: props.get($size);
+                                        font-size: props.get($font-size);
                                         line-height: props.get($size);
                                 }
                         }
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index 467d7cc..7d1c342 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -1,79 +1,102 @@
-@use 'sass:math';
+@use "sass:math";
 
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 @function icon-mask($p) {
         $offset: 0.15 * math.div(0.5, $p);
         @return 'data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="avatar_mask" clipPathUnits="objectBoundingBox"><path d="M 0,0 H 1 V #{$p} H #{$p + $offset} C #{$p + 0.055},#{$p} #{$p},#{$p + 0.055} #{$p},#{$p + $offset} V 1 H 0 Z" /></clipPath></defs></svg>#avatar_mask';
 }
 
-$size:              props.def(--o-avatar--size, props.get(core.$size--500)) !default;
-$font-size:         props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default;
-$indicator-size:    props.def(--o-avatar--indicator-size, props.get(core.$size--150)) !default;
+$size: props.def(--o-avatar--size, props.get(core.$size--500)) !default;
+$font-size: props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default;
+$indicator-size: props.def(--o-avatar--indicator-size, props.get(core.$size--150)) !default;
 $indicator-spacing: props.def(--o-avatar--indicator-spacing, props.get(core.$size--40)) !default;
-$rounding:          props.def(--o-avatar--rounding, 25%) !default;
-$icon-size:         props.def(--o-avatar--icon-size, 1.2em) !default;
-$icon-mask:         props.def(--o-avatar--icon-mask, url(icon-mask(.5))) !default;
+$rounding: props.def(--o-avatar--rounding, 25%) !default;
+$icon-size: props.def(--o-avatar--icon-size, 1.2em) !default;
+$icon-mask: props.def(--o-avatar--icon-mask, url(icon-mask(0.5))) !default;
 
-$size--xxxl:           props.def(--o-avatar--xxxl--size, props.get(core.$size--1600)) !default;
-$font-size--xxxl:      props.def(--o-avatar--xxxl--font-size, props.get(core.$font-size--800)) !default;
-$indicator-size--xxxl: props.def(--o-avatar--xxxl--indicator-size, props.get(core.$size--400)) !default;
-$icon-size--xxxl:      props.def(--o-avatar--xxxl--icon-size, 1.9em) !default;
-$icon-mask--xxxl:      props.def(--o-avatar--xxxl--icon-mask, url(icon-mask(.75))) !default;
+$size--xxxl: props.def(--o-avatar--xxxl--size, props.get(core.$size--1600)) !default;
+$font-size--xxxl: props.def(--o-avatar--xxxl--font-size, props.get(core.$font-size--800)) !default;
+$indicator-size--xxxl: props.def(
+        --o-avatar--xxxl--indicator-size,
+        props.get(core.$size--400)
+) !default;
+$icon-size--xxxl: props.def(--o-avatar--xxxl--icon-size, 1.9em) !default;
+$icon-mask--xxxl: props.def(--o-avatar--xxxl--icon-mask, url(icon-mask(0.75))) !default;
 
-$size--xxl:           props.def(--o-avatar--xxl--size, props.get(core.$size--1200)) !default;
-$font-size--xxl:      props.def(--o-avatar--xxl--font-size, props.get(core.$font-size--600)) !default;
-$indicator-size--xxl: props.def(--o-avatar--xxl--indicator-size, props.get(core.$size--300)) !default;
-$icon-size--xxl:      props.def(--o-avatar--xxl--icon-size, 1.7em) !default;
-$icon-mask--xxl:      props.def(--o-avatar--xxl--icon-mask, url(icon-mask(.7))) !default;
+$size--xxl: props.def(--o-avatar--xxl--size, props.get(core.$size--1200)) !default;
+$font-size--xxl: props.def(--o-avatar--xxl--font-size, props.get(core.$font-size--600)) !default;
+$indicator-size--xxl: props.def(
+        --o-avatar--xxl--indicator-size,
+        props.get(core.$size--300)
+) !default;
+$icon-size--xxl: props.def(--o-avatar--xxl--icon-size, 1.7em) !default;
+$icon-mask--xxl: props.def(--o-avatar--xxl--icon-mask, url(icon-mask(0.7))) !default;
 
-$size--xl:           props.def(--o-avatar--xl--size, props.get(core.$size--800)) !default;
-$font-size--xl:      props.def(--o-avatar--xl--font-size, props.get(core.$font-size--300)) !default;
+$size--xl: props.def(--o-avatar--xl--size, props.get(core.$size--800)) !default;
+$font-size--xl: props.def(--o-avatar--xl--font-size, props.get(core.$font-size--300)) !default;
 $indicator-size--xl: props.def(--o-avatar--xl--indicator-size, props.get(core.$size--225)) !default;
-$icon-size--xl:      props.def(--o-avatar--xl--icon-size, 1.5em) !default;
-$icon-mask--xl:      props.def(--o-avatar--xl--icon-mask, url(icon-mask(.6))) !default;
+$icon-size--xl: props.def(--o-avatar--xl--icon-size, 1.5em) !default;
+$icon-mask--xl: props.def(--o-avatar--xl--icon-mask, url(icon-mask(0.6))) !default;
 
-$size--lg:           props.def(--o-avatar--lg--size, props.get(core.$size--650)) !default;
-$font-size--lg:      props.def(--o-avatar--lg--font-size, props.get(core.$font-size--200)) !default;
+$size--lg: props.def(--o-avatar--lg--size, props.get(core.$size--650)) !default;
+$font-size--lg: props.def(--o-avatar--lg--font-size, props.get(core.$font-size--200)) !default;
 $indicator-size--lg: props.def(--o-avatar--lg--indicator-size, props.get(core.$size--175)) !default;
-$icon-size--lg:      props.def(--o-avatar--lg--icon-size, 1.25em) !default;
-$icon-mask--lg:      props.def(--o-avatar--lg--icon-mask, url(icon-mask(.55))) !default;
+$icon-size--lg: props.def(--o-avatar--lg--icon-size, 1.25em) !default;
+$icon-mask--lg: props.def(--o-avatar--lg--icon-mask, url(icon-mask(0.55))) !default;
 
-$size--sm:           props.def(--o-avatar--sm--size, props.get(core.$size--375)) !default;
-$font-size--sm:      props.def(--o-avatar--sm--font-size, props.get(core.$font-size--75)) !default;
+$size--sm: props.def(--o-avatar--sm--size, props.get(core.$size--375)) !default;
+$font-size--sm: props.def(--o-avatar--sm--font-size, props.get(core.$font-size--75)) !default;
 $indicator-size--sm: props.def(--o-avatar--sm--indicator-size, props.get(core.$size--125)) !default;
-$icon-size--sm:      props.def(--o-avatar--sm--icon-size, 1.2em) !default;
-$icon-mask--sm:      props.def(--o-avatar--sm--icon-mask, url(icon-mask(.5))) !default;
+$icon-size--sm: props.def(--o-avatar--sm--icon-size, 1.2em) !default;
+$icon-mask--sm: props.def(--o-avatar--sm--icon-mask, url(icon-mask(0.5))) !default;
 
-$size--xs:           props.def(--o-avatar--xs--size, props.get(core.$size--250)) !default;
-$font-size--xs:      props.def(--o-avatar--xs--font-size, props.get(core.$font-size--50)) !default;
+$size--xs: props.def(--o-avatar--xs--size, props.get(core.$size--250)) !default;
+$font-size--xs: props.def(--o-avatar--xs--font-size, props.get(core.$font-size--50)) !default;
 $indicator-size--xs: props.def(--o-avatar--xs--indicator-size, props.get(core.$size--100)) !default;
-$icon-size--xs:      props.def(--o-avatar--xs--icon-size, 1.2em) !default;
-$icon-mask--xs:      props.def(--o-avatar--xs--icon-mask, url(icon-mask(.5))) !default;
+$icon-size--xs: props.def(--o-avatar--xs--icon-size, 1.2em) !default;
+$icon-mask--xs: props.def(--o-avatar--xs--icon-mask, url(icon-mask(0.5))) !default;
 
-$key-focus--border-width:  props.def(--o-avatar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-avatar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-avatar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --o-avatar--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$key-focus--border-offset: props.def(
+        --o-avatar--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$key-focus--outline-width: props.def(
+        --o-avatar--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$bg-color--h: props.def(--o-avatar--bg-color--h, 354, 'color') !default;
-$bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default;
-$bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default;
+$bg-color--h: props.def(--o-avatar--bg-color--h, 354, "color") !default;
+$bg-color--s: props.def(--o-avatar--bg-color--s, 44%, "color") !default;
+$bg-color--l: props.def(--o-avatar--bg-color--l, 45%, "color") !default;
 
-$bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, 'color') !default;
-$bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, 'color') !default;
-$bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, 'color') !default;
+$bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, "color") !default;
+$bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, "color") !default;
+$bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, "color") !default;
 
 $bg-angle: props.def(--o-avatar--bg-angle, 180deg) !default;
 
-$key-focus--border-color:  props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$key-focus--border-color: props.def(
+        --o-avatar--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$key-focus--outline-color: props.def(
+        --o-avatar--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
 
 $sizes: (
-        'xs'   $size--xs   $font-size--xs   $indicator-size--xs   $icon-size--xs   $icon-mask--xs,
-        'sm'   $size--sm   $font-size--sm   $indicator-size--sm   $icon-size--sm   $icon-mask--sm,
-        'lg'   $size--lg   $font-size--lg   $indicator-size--lg   $icon-size--lg   $icon-mask--lg,
-        'xl'   $size--xl   $font-size--xl   $indicator-size--xl   $icon-size--xl   $icon-mask--xl,
-        'xxl'  $size--xxl  $font-size--xxl  $indicator-size--xxl  $icon-size--xxl  $icon-mask--xxl,
-        'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl $icon-size--xxxl $icon-mask--xxxl,
+        "xs" $size--xs $font-size--xs $indicator-size--xs $icon-size--xs $icon-mask--xs,
+        "sm" $size--sm $font-size--sm $indicator-size--sm $icon-size--sm $icon-mask--sm,
+        "lg" $size--lg $font-size--lg $indicator-size--lg $icon-size--lg $icon-mask--lg,
+        "xl" $size--xl $font-size--xl $indicator-size--xl $icon-size--xl $icon-mask--xl,
+        "xxl" $size--xxl $font-size--xxl $indicator-size--xxl $icon-size--xxl $icon-mask--xxl,
+        "xxxl" $size--xxxl $font-size--xxxl $indicator-size--xxxl $icon-size--xxxl $icon-mask--xxxl
 ) !default;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 6660abf..1a7d1fa 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -1,23 +1,23 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'backdrop.vars';
-@use 'backdrop.vars' as vars;
+@forward "backdrop.vars";
+@use "backdrop.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('backdrop') {
-                position:         fixed;
-                inset:            0;
-                z-index:          props.get(vars.$z-index);
-                box-sizing:       border-box;
-                display:          flex;
-                flex-direction:   column;
-                overflow:         auto;
+        @include bem.object("backdrop") {
+                position: fixed;
+                inset: 0;
+                z-index: props.get(vars.$z-index);
+                box-sizing: border-box;
+                display: flex;
+                flex-direction: column;
+                overflow: auto;
                 background-color: props.get(vars.$bg-color);
-                backdrop-filter:  blur(props.get(vars.$blur));
+                backdrop-filter: blur(props.get(vars.$blur));
         }
 }
diff --git a/src/objects/_backdrop.vars.scss b/src/objects/_backdrop.vars.scss
index 9206117..78f4742 100644
--- a/src/objects/_backdrop.vars.scss
+++ b/src/objects/_backdrop.vars.scss
@@ -1,6 +1,10 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$z-index:  props.def(--o-backdrop--z-index, 10000) !default;
-$blur:     props.def(--o-backdrop--blur, 2em) !default;
-$bg-color: props.def(--o-backdrop--bg-color, props.get(core.$transparent-colors, --black, --600), 'color') !default;
+$z-index: props.def(--o-backdrop--z-index, 10000) !default;
+$blur: props.def(--o-backdrop--blur, 2em) !default;
+$bg-color: props.def(
+        --o-backdrop--bg-color,
+        props.get(core.$transparent-colors, --black, --600),
+        "color"
+) !default;
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index a3c8187..8adc0f7 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,115 +1,119 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'button.vars';
-@use 'button.vars' as vars;
+@forward "button.vars";
+@use "button.vars" as vars;
 
 @mixin -apply-theme($theme, $key: ()) {
-        color:            props.get($theme, list.join($key, --disabled --label-color)...);
+        color: props.get($theme, list.join($key, --disabled --label-color)...);
         background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
-        border-color:     props.get($theme, list.join($key, --disabled --border-color)...);
+        border-color: props.get($theme, list.join($key, --disabled --border-color)...);
 
         &::after {
                 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
-                box-shadow:
-                        0
-                        0
-                        0
-                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                box-shadow: 0 0 0
+                        calc(
+                                props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)
+                        )
                         props.get($theme, list.join($key, --key-focus --outline-color)...);
         }
 
         &:link,
         &:visited,
         &:enabled {
-                color:            props.get($theme, list.join($key, --label-color)...);
+                color: props.get($theme, list.join($key, --label-color)...);
                 background-color: props.get($theme, list.join($key, --bg-color)...);
-                border-color:     props.get($theme, list.join($key, --border-color)...);
-                box-shadow:
-                        props.get(vars.$shadow-x)
-                        props.get(vars.$shadow-y)
-                        props.get(vars.$shadow-blur)
-                        props.get(vars.$shadow-grow)
-                        props.get($theme, list.join($key, --shadow-color)...);
+                border-color: props.get($theme, list.join($key, --border-color)...);
+                box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur)
+                        props.get(vars.$shadow-grow) props.get($theme, list.join($key, --shadow-color)...);
 
                 &:hover,
                 &:focus-visible {
-                        color:            props.get($theme, list.join($key, --hover --label-color)...);
+                        color: props.get($theme, list.join($key, --hover --label-color)...);
                         background-color: props.get($theme, list.join($key, --hover --bg-color)...);
-                        border-color:     props.get($theme, list.join($key, --hover --border-color)...);
+                        border-color: props.get($theme, list.join($key, --hover --border-color)...);
                 }
 
                 &:active {
-                        color:            props.get($theme, list.join($key, --active --label-color)...);
+                        color: props.get($theme, list.join($key, --active --label-color)...);
                         background-color: props.get($theme, list.join($key, --active --bg-color)...);
-                        border-color:     props.get($theme, list.join($key, --active --border-color)...);
-                        box-shadow:       none;
+                        border-color: props.get($theme, list.join($key, --active --border-color)...);
+                        box-shadow: none;
                 }
         }
 
-        @include bem.modifier('badge') {
-                color:            props.get($theme, list.join($key, --badge --label-color)...);
+        @include bem.modifier("badge") {
+                color: props.get($theme, list.join($key, --badge --label-color)...);
                 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
-                border-color:     props.get($theme, list.join($key, --badge --border-color)...);
-                box-shadow:       none;
+                border-color: props.get($theme, list.join($key, --badge --border-color)...);
+                box-shadow: none;
 
                 &:link,
                 &:visited,
                 &:enabled {
-                        color:            props.get($theme, list.join($key, --badge --label-color)...);
+                        color: props.get($theme, list.join($key, --badge --label-color)...);
                         background-color: props.get($theme, list.join($key, --badge --bg-color)...);
-                        border-color:     props.get($theme, list.join($key, --badge --border-color)...);
-                        box-shadow:       none;
+                        border-color: props.get($theme, list.join($key, --badge --border-color)...);
+                        box-shadow: none;
 
                         &:hover,
                         &:focus-visible {
-                                color:            props.get($theme, list.join($key, --badge --hover --label-color)...);
+                                color: props.get($theme, list.join($key, --badge --hover --label-color)...);
                                 background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...);
-                                border-color:     props.get($theme, list.join($key, --badge --hover --border-color)...);
+                                border-color: props.get($theme, list.join($key, --badge --hover --border-color)...);
                         }
 
                         &:active {
-                                color:            props.get($theme, list.join($key, --badge --active --label-color)...);
-                                background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
-                                border-color:     props.get($theme, list.join($key, --badge --active --border-color)...);
+                                color: props.get($theme, list.join($key, --badge --active --label-color)...);
+                                background-color: props.get(
+                                        $theme,
+                                        list.join($key, --badge --active --bg-color)...
+                                );
+                                border-color: props.get(
+                                        $theme,
+                                        list.join($key, --badge --active --border-color)...
+                                );
                         }
                 }
         }
 
-        @include bem.modifier('quiet') {
-                color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
+        @include bem.modifier("quiet") {
+                color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
                 background-color: transparent;
-                border-color:     transparent;
+                border-color: transparent;
 
                 &:link,
                 &:visited,
                 &:enabled {
-                        color:            props.get($theme, list.join($key, --quiet --label-color)...);
+                        color: props.get($theme, list.join($key, --quiet --label-color)...);
                         background-color: transparent;
-                        border-color:     transparent;
-                        box-shadow:       none;
+                        border-color: transparent;
+                        box-shadow: none;
 
                         &:hover,
                         &:focus-visible {
-                                color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
+                                color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
                                 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
-                                border-color:     transparent;
+                                border-color: transparent;
                         }
 
                         &:active {
-                                color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
-                                background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
-                                border-color:     transparent;
+                                color: props.get($theme, list.join($key, --quiet --active --label-color)...);
+                                background-color: props.get(
+                                        $theme,
+                                        list.join($key, --quiet --active --bg-color)...
+                                );
+                                border-color: transparent;
                         }
                 }
         }
 
-        @include bem.is('highlighted') {
+        @include bem.is("highlighted") {
                 &:link,
                 &:visited,
                 &:enabled {
@@ -121,32 +125,27 @@
 
                         box-shadow:
                                 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
-                                props.get(vars.$shadow-x)
-                                props.get(vars.$shadow-y)
-                                props.get(vars.$shadow-blur)
-                                props.get(vars.$shadow-grow)
-                                props.get($theme, list.join($key, --highlighted --shadow-color)...);
+                                props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur)
+                                        props.get(vars.$shadow-grow)
+                                        props.get($theme, list.join($key, --highlighted --shadow-color)...);
 
                         &:focus-visible {
-                                box-shadow:
-                                        props.get(vars.$shadow-x)
-                                        props.get(vars.$shadow-y)
-                                        props.get(vars.$shadow-blur)
-                                        props.get(vars.$shadow-grow)
+                                box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
+                                        props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
                                         props.get($theme, list.join($key, --shadow-color)...);
                         }
                 }
         }
 
-        @include bem.is('selected') {
-                color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
+        @include bem.is("selected") {
+                color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
                 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
-                border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
+                border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
 
-                @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
-                        color:            props.get($theme, list.join($key, --selected --label-color)...);
+                @include bem.multi("&:link, &:visited, &:enabled", "modifier" "badge") {
+                        color: props.get($theme, list.join($key, --selected --label-color)...);
                         background-color: props.get($theme, list.join($key, --selected --bg-color)...);
-                        border-color:     props.get($theme, list.join($key, --selected --border-color)...);
+                        border-color: props.get($theme, list.join($key, --selected --border-color)...);
                 }
 
                 &:link,
@@ -154,47 +153,67 @@
                 &:enabled {
                         &:hover,
                         &:focus-visible {
-                                color:            props.get($theme, list.join($key, --selected --hover --label-color)...);
-                                background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
-                                border-color:     props.get($theme, list.join($key, --selected --hover --border-color)...);
+                                color: props.get($theme, list.join($key, --selected --hover --label-color)...);
+                                background-color: props.get(
+                                        $theme,
+                                        list.join($key, --selected --hover --bg-color)...
+                                );
+                                border-color: props.get(
+                                        $theme,
+                                        list.join($key, --selected --hover --border-color)...
+                                );
                         }
 
                         &:active {
-                                color:            props.get($theme, list.join($key, --selected --active --label-color)...);
-                                background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
-                                border-color:     props.get($theme, list.join($key, --selected --active --border-color)...);
+                                color: props.get($theme, list.join($key, --selected --active --label-color)...);
+                                background-color: props.get(
+                                        $theme,
+                                        list.join($key, --selected --active --bg-color)...
+                                );
+                                border-color: props.get(
+                                        $theme,
+                                        list.join($key, --selected --active --border-color)...
+                                );
                         }
                 }
         }
 }
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('button') {
-                position:         relative;
-                display:          inline-block;
-                padding-block:    props.get(vars.$pad-b);
-                padding-inline:   props.get(vars.$pad-i);
-                text-overflow:    ellipsis;
-                font-size:        props.get(vars.$font-size);
-                line-height:      props.get(vars.$line-height);
-                text-align:       center;
-                white-space:      nowrap;
-                text-decoration:  none;
-                border:           props.get(vars.$border-width) solid transparent;
-                border-radius:    props.get(vars.$rounding);
-                transition:       color .1s, background-color .1s, border-color .1s, box-shadow .1s;
+        @include bem.object("button") {
+                position: relative;
+                display: inline-block;
+                padding-block: props.get(vars.$pad-b);
+                padding-inline: props.get(vars.$pad-i);
+                text-overflow: ellipsis;
+                font-size: props.get(vars.$font-size);
+                line-height: props.get(vars.$line-height);
+                text-align: center;
+                white-space: nowrap;
+                text-decoration: none;
+                border: props.get(vars.$border-width) solid transparent;
+                border-radius: props.get(vars.$rounding);
+                transition:
+                        color 0.1s,
+                        background-color 0.1s,
+                        border-color 0.1s,
+                        box-shadow 0.1s;
 
                 &::after {
-                        position:       absolute;
-                        inset:          calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
-                        z-index:        1;
-                        display:        none;
+                        position: absolute;
+                        inset: calc(
+                                -1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)
+                        );
+                        z-index: 1;
+                        display: none;
                         pointer-events: none;
-                        outline:        transparent solid props.get(vars.$key-focus--border-width);
-                        content:        '';
-                        border-radius:  calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                        outline: transparent solid props.get(vars.$key-focus--border-width);
+                        content: "";
+                        border-radius: calc(
+                                props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
+                        );
                 }
 
                 &:link,
@@ -209,7 +228,7 @@
                         }
                 }
 
-                @include bem.elem('label') {
+                @include bem.elem("label") {
                         display: inline-block;
                         margin-inline: props.get(vars.$pad-i-label);
                 }
@@ -222,79 +241,91 @@
                         }
                 }
 
-                @include bem.modifier('pill') {
+                @include bem.modifier("pill") {
                         padding-inline: props.get(vars.$pad-i-pill);
-                        border-radius:  100em;
+                        border-radius: 100em;
 
                         &::after {
-                                border-radius:  100em;
+                                border-radius: 100em;
                         }
                 }
 
-                @include bem.modifier('icon') {
-                        inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
+                @include bem.modifier("icon") {
+                        inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
                         padding-inline: 0;
                 }
 
-                @include bem.modifier('wide') {
-                        @include bem.elem('label') {
+                @include bem.modifier("wide") {
+                        @include bem.elem("label") {
                                 margin-inline: props.get(vars.$pad-i-wide);
                         }
                 }
 
-                @include bem.modifier('justify') {
+                @include bem.modifier("justify") {
                         text-align: justify;
                         text-align-last: justify;
                 }
 
-                @each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
+                @each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b,
+                        $font-size in vars.$fixed-sizes
+                {
                         @include bem.modifier($mod) {
-                                padding-block:  props.get($pad-b);
+                                padding-block: props.get($pad-b);
                                 padding-inline: props.get($pad-i);
-                                font-size:      props.get($font-size);
+                                font-size: props.get($font-size);
 
-                                @include bem.elem('label') {
+                                @include bem.elem("label") {
                                         margin-inline: props.get($pad-i-label);
                                 }
 
-                                @include bem.modifier('pill') {
+                                @include bem.modifier("pill") {
                                         padding-inline: props.get($pad-i-pill);
                                 }
 
-                                @include bem.modifier('icon') {
-                                        inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
+                                @include bem.modifier("icon") {
+                                        inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
                                         padding-inline: 0;
                                 }
 
-                                @include bem.modifier('wide') {
-                                        @include bem.elem('label') {
+                                @include bem.modifier("wide") {
+                                        @include bem.elem("label") {
                                                 margin-inline: props.get($pad-i-wide);
                                         }
                                 }
                         }
                 }
 
-                @include bem.modifier('align-block') {
+                @include bem.modifier("align-block") {
                         margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
 
-                        @include bem.modifier('pill') {
-                                margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
+                        @include bem.modifier("pill") {
+                                margin-inline: calc(
+                                        -1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)
+                                );
                         }
 
-                        @include bem.modifier('icon') {
-                                margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
+                        @include bem.modifier("icon") {
+                                margin-inline: calc(
+                                        -1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - 0.5em *
+                                                (props.get(vars.$line-height) - 1)
+                                );
                         }
 
                         @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
                                 @include bem.modifier($mod) {
                                         margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
 
-                                        @include bem.modifier('pill') {
-                                                margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
+                                        @include bem.modifier("pill") {
+                                                margin-inline: calc(
+                                                        -1 * props.get($pad-i-pill) - props.get(vars.$border-width)
+                                                );
                                         }
 
-                                        @include bem.modifier('icon') {
-                                                margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
+                                        @include bem.modifier("icon") {
+                                                margin-inline: calc(
+                                                        -1 * props.get($pad-b) - props.get(vars.$border-width) - 0.5em *
+                                                                (props.get(vars.$line-height) - 1)
+                                                );
                                         }
                                 }
                         }
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 3f835ae..a137d6d 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -1,386 +1,456 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$line-height:  props.def(--o-button--line-height, 1.4) !default;
+$line-height: props.def(--o-button--line-height, 1.4) !default;
 $border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default;
-$rounding:     props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default;
+$rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default;
 
-$pad-i--xs:       props.def(--o-button--xs--pad-i, props.get(core.$size--75)) !default;
+$pad-i--xs: props.def(--o-button--xs--pad-i, props.get(core.$size--75)) !default;
 $pad-i-label--xs: props.def(--o-button--xs--pad-i-label, props.get(core.$size--40)) !default;
-$pad-i-wide--xs:  props.def(--o-button--xs--pad-i-wide, props.get(core.$size--150)) !default;
-$pad-i-pill--xs:  props.def(--o-button--xs--pad-i-pill, props.get(core.$size--115)) !default;
-$pad-b--xs:       props.def(--o-button--xs--pad-b, props.get(core.$size--40)) !default;
-$font-size--xs:   props.def(--o-button--xs--font-size, props.get(core.$font-size--75)) !default;
+$pad-i-wide--xs: props.def(--o-button--xs--pad-i-wide, props.get(core.$size--150)) !default;
+$pad-i-pill--xs: props.def(--o-button--xs--pad-i-pill, props.get(core.$size--115)) !default;
+$pad-b--xs: props.def(--o-button--xs--pad-b, props.get(core.$size--40)) !default;
+$font-size--xs: props.def(--o-button--xs--font-size, props.get(core.$font-size--75)) !default;
 
-$pad-i--sm:       props.def(--o-button--sm--pad-i, props.get(core.$size--85)) !default;
+$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--85)) !default;
 $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--50)) !default;
-$pad-i-wide--sm:  props.def(--o-button--sm--pad-i-wide, props.get(core.$size--175)) !default;
-$pad-i-pill--sm:  props.def(--o-button--sm--pad-i-pill, props.get(core.$size--125)) !default;
-$pad-b--sm:       props.def(--o-button--sm--pad-b, props.get(core.$size--50)) !default;
-$font-size--sm:   props.def(--o-button--sm--font-size, props.get(core.$font-size--100)) !default;
+$pad-i-wide--sm: props.def(--o-button--sm--pad-i-wide, props.get(core.$size--175)) !default;
+$pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--125)) !default;
+$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--50)) !default;
+$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--100)) !default;
 
-$pad-i:        props.def(--o-button--pad-i, props.get(core.$size--115)) !default;
-$pad-i-label:  props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
-$pad-i-wide:   props.def(--o-button--pad-i-wide, props.get(core.$size--200)) !default;
-$pad-i-pill:   props.def(--o-button--pad-i-pill, props.get(core.$size--160)) !default;
-$pad-b:        props.def(--o-button--pad-b, props.get(core.$size--85)) !default;
-$font-size:    props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
+$pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default;
+$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
+$pad-i-wide: props.def(--o-button--pad-i-wide, props.get(core.$size--200)) !default;
+$pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--160)) !default;
+$pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default;
+$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
 
-$pad-i--lg:       props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default;
+$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default;
 $pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default;
-$pad-i-wide--lg:  props.def(--o-button--lg--pad-i-wide, props.get(core.$size--300)) !default;
-$pad-i-pill--lg:  props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
-$pad-b--lg:       props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default;
-$font-size--lg:   props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
+$pad-i-wide--lg: props.def(--o-button--lg--pad-i-wide, props.get(core.$size--300)) !default;
+$pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
+$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default;
+$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
 
-$pad-i--xl:       props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default;
+$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default;
 $pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default;
-$pad-i-wide--xl:  props.def(--o-button--xl--pad-i-wide, props.get(core.$size--400)) !default;
-$pad-i-pill--xl:  props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
-$pad-b--xl:       props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
-$font-size--xl:   props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
+$pad-i-wide--xl: props.def(--o-button--xl--pad-i-wide, props.get(core.$size--400)) !default;
+$pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
+$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
+$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
 
-$shadow-x:    props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
-$shadow-y:    props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
+$shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
+$shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
 $shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
 $shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
 
-$key-focus--border-width:  props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --o-button--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$key-focus--border-offset: props.def(
+        --o-button--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$key-focus--outline-width: props.def(
+        --o-button--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
 $fixed-sizes: (
-        'xs' $pad-i--xs $pad-i-label--xs $pad-i-wide--xs $pad-i-pill--xs $pad-b--xs $font-size--xs,
-        'sm' $pad-i--sm $pad-i-label--sm $pad-i-wide--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
-        'lg' $pad-i--lg $pad-i-label--lg $pad-i-wide--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
-        'xl' $pad-i--xl $pad-i-label--xl $pad-i-wide--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
+        "xs" $pad-i--xs $pad-i-label--xs $pad-i-wide--xs $pad-i-pill--xs $pad-b--xs $font-size--xs,
+        "sm" $pad-i--sm $pad-i-label--sm $pad-i-wide--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
+        "lg" $pad-i--lg $pad-i-label--lg $pad-i-wide--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
+        "xl" $pad-i--xl $pad-i-label--xl $pad-i-wide--xl $pad-i-pill--xl $pad-b--xl $font-size--xl
 ) !default;
 
-$themes: props.def(--o-button, (), 'color');
+$themes: props.def(--o-button, (), "color");
 
 $default-theme-override: () !default;
-$default-theme: map.deep-merge((
-        --bg-color:             props.get(core.$theme, --bg-l2),
-        --label-color:          props.get(core.$theme, --text),
-        --border-color:         props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
-        --shadow-color:         props.get(core.$theme, --shadow),
-
-        --hover: (
-                --bg-color:     props.get(core.$theme, --bg-l1),
-                --label-color:  props.get(core.$theme, --heading),
-                --border-color: props.get(core.$theme, --border),
-        ),
-
-        --active: (
-                --bg-color:     props.get(core.$theme, --border-mute),
-                --label-color:  props.get(core.$theme, --heading),
-                --border-color: props.get(core.$theme, --border-strong),
-        ),
-
-        --disabled: (
-                --bg-color:     transparent,
-                --label-color:  props.get(core.$theme, --border-strong),
-                --border-color: props.get(core.$theme, --text-disabled),
-        ),
-
-        --key-focus: (
-                --border-color:  props.get(core.$theme, --focus, --border),
-                --outline-color: props.get(core.$theme, --focus, --outline),
-        ),
-
-        --highlighted: (
-                --border-color: props.get(core.$theme, --focus, --border),
-                --shadow-color: props.get(core.$theme, --focus, --outline),
-        ),
-
-        --selected: (
-                --bg-color:     props.get(core.$theme, --heading),
-                --label-color:  props.get(core.$theme, --base, --50),
-                --border-color: props.get(core.$theme, --heading),
-
+$default-theme: map.deep-merge(
+        (
+                --bg-color: props.get(core.$theme, --bg-l2),
+                --label-color: props.get(core.$theme, --text),
+                --border-color: props.get(core.$theme, --box, --border)
+                        props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
+                --shadow-color: props.get(core.$theme, --shadow),
                 --hover: (
-                        --bg-color:     props.get(core.$theme, --text),
-                        --label-color:  props.get(core.$theme, --base, --50),
-                        --border-color: props.get(core.$theme, --text),
+                        --bg-color: props.get(core.$theme, --bg-l1),
+                        --label-color: props.get(core.$theme, --heading),
+                        --border-color: props.get(core.$theme, --border),
                 ),
 
                 --active: (
-                        --bg-color:     props.get(core.$theme, --text-mute),
-                        --label-color:  props.get(core.$theme, --base, --50),
-                        --border-color: props.get(core.$theme, --text-mute),
+                        --bg-color: props.get(core.$theme, --border-mute),
+                        --label-color: props.get(core.$theme, --heading),
+                        --border-color: props.get(core.$theme, --border-strong),
                 ),
 
                 --disabled: (
-                        --bg-color:     props.get(core.$theme, --border-mute),
-                        --label-color:  props.get(core.$theme, --border-strong),
-                        --border-color: props.get(core.$theme, --border-mute),
+                        --bg-color: transparent,
+                        --label-color: props.get(core.$theme, --border-strong),
+                        --border-color: props.get(core.$theme, --text-disabled),
                 ),
-        ),
 
-        --badge: (
-                --bg-color:     props.get(core.$theme, --border-mute),
-                --label-color:  props.get(core.$theme, --heading),
-                --border-color: props.get(core.$theme, --border-mute),
-
-                --hover: (
-                        --bg-color:     props.get(core.$theme, --border),
-                        --label-color:  props.get(core.$theme, --heading),
-                        --border-color: props.get(core.$theme, --border),
+                --key-focus: (
+                        --border-color: props.get(core.$theme, --focus, --border),
+                        --outline-color: props.get(core.$theme, --focus, --outline),
                 ),
 
-                --active: (
-                        --bg-color:     props.get(core.$theme, --border-strong),
-                        --label-color:  props.get(core.$theme, --heading),
-                        --border-color: props.get(core.$theme, --border-strong),
+                --highlighted: (
+                        --border-color: props.get(core.$theme, --focus, --border),
+                        --shadow-color: props.get(core.$theme, --focus, --outline),
                 ),
-        ),
 
-        --quiet: (
-                --label-color:  props.get(core.$theme, --text),
+                --selected: (
+                        --bg-color: props.get(core.$theme, --heading),
+                        --label-color: props.get(core.$theme, --base, --50),
+                        --border-color: props.get(core.$theme, --heading),
+                        --hover: (
+                                --bg-color: props.get(core.$theme, --text),
+                                --label-color: props.get(core.$theme, --base, --50),
+                                --border-color: props.get(core.$theme, --text),
+                        ),
 
-                --hover: (
-                        --bg-color:    props.get(core.$theme, --border-mute),
-                        --label-color: props.get(core.$theme, --heading),
+                        --active: (
+                                --bg-color: props.get(core.$theme, --text-mute),
+                                --label-color: props.get(core.$theme, --base, --50),
+                                --border-color: props.get(core.$theme, --text-mute),
+                        ),
+
+                        --disabled: (
+                                --bg-color: props.get(core.$theme, --border-mute),
+                                --label-color: props.get(core.$theme, --border-strong),
+                                --border-color: props.get(core.$theme, --border-mute),
+                        ),
                 ),
 
-                --active: (
-                        --bg-color:    props.get(core.$theme, --border),
+                --badge: (
+                        --bg-color: props.get(core.$theme, --border-mute),
                         --label-color: props.get(core.$theme, --heading),
+                        --border-color: props.get(core.$theme, --border-mute),
+                        --hover: (
+                                --bg-color: props.get(core.$theme, --border),
+                                --label-color: props.get(core.$theme, --heading),
+                                --border-color: props.get(core.$theme, --border),
+                        ),
+
+                        --active: (
+                                --bg-color: props.get(core.$theme, --border-strong),
+                                --label-color: props.get(core.$theme, --heading),
+                                --border-color: props.get(core.$theme, --border-strong),
+                        ),
                 ),
 
-                --disabled: (
-                        --label-color: props.get(core.$theme, --border-strong),
+                --quiet: (
+                        --label-color: props.get(core.$theme, --text),
+                        --hover: (
+                                --bg-color: props.get(core.$theme, --border-mute),
+                                --label-color: props.get(core.$theme, --heading),
+                        ),
+
+                        --active: (
+                                --bg-color: props.get(core.$theme, --border),
+                                --label-color: props.get(core.$theme, --heading),
+                        ),
+
+                        --disabled: (
+                                --label-color: props.get(core.$theme, --border-strong),
+                        ),
                 ),
         ),
-), $default-theme-override) !default;
-$default-theme: props.def(--o-button, $default-theme, 'color');
+        $default-theme-override
+) !default;
+$default-theme: props.def(--o-button, $default-theme, "color");
 
 $default-theme-dark-override: () !default;
-$default-theme-dark: map.deep-merge((
-        --bg-color:             props.get(core.$theme, --border-mute),
-        --border-color:         props.get(core.$theme, --border-mute),
-
-        --hover: (
-                --bg-color:     props.get(core.$theme, --border),
-                --border-color: props.get(core.$theme, --border),
-        ),
+$default-theme-dark: map.deep-merge(
+        (
+                --bg-color: props.get(core.$theme, --border-mute),
+                --border-color: props.get(core.$theme, --border-mute),
+                --hover: (
+                        --bg-color: props.get(core.$theme, --border),
+                        --border-color: props.get(core.$theme, --border),
+                ),
 
-        --active: (
-                --bg-color:     props.get(core.$theme, --border-strong),
-                --border-color: props.get(core.$theme, --border-strong),
-        ),
+                --active: (
+                        --bg-color: props.get(core.$theme, --border-strong),
+                        --border-color: props.get(core.$theme, --border-strong),
+                ),
 
-        --selected: (
-                --border-color: props.get(core.$theme, --text),
+                --selected: (
+                        --border-color: props.get(core.$theme, --text),
+                ),
         ),
-), $default-theme-override) !default;
-$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark');
+        $default-theme-override
+) !default;
+$default-theme-dark: props.def(--o-button, $default-theme-dark, "dark");
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
         $button-theme: --static-#{string.slice($theme, 3)};
 
-        $themes: props.merge($themes, (
-                $button-theme: (
-                        --bg-color:     props.get(core.$transparent-colors, $theme, --200),
-                        --label-color:  props.get(core.$transparent-colors, $theme, --900),
-                        --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
-                        --shadow-color: props.get(core.$transparent-colors, --black, --200),
-
-                        --hover: (
-                                --bg-color:     props.get(core.$transparent-colors, $theme, --300),
-                                --label-color:  props.get(core.$transparent-colors, $theme, --900),
-                                --border-color: props.get(core.$transparent-colors, $theme, --400),
-                        ),
+        $themes: props.merge(
+                $themes,
+                (
+                        $button-theme: (
+                                        --bg-color: props.get(core.$transparent-colors, $theme, --200),
+                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                        --border-color: props.get(core.$transparent-colors, $theme, --300)
+                                                props.get(core.$transparent-colors, $theme, --300)
+                                                props.get(core.$transparent-colors, $theme, --400),
+                                        --shadow-color: props.get(core.$transparent-colors, --black, --200),
+                                        --hover: (
+                                                        --bg-color: props.get(core.$transparent-colors, $theme, --300),
+                                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --border-color: props.get(core.$transparent-colors, $theme, --400),
+                                                ),
 
-                        --active: (
-                                --bg-color:     props.get(core.$transparent-colors, $theme, --400),
-                                --label-color:  props.get(core.$transparent-colors, $theme, --900),
-                                --border-color: props.get(core.$transparent-colors, $theme, --500),
-                        ),
+                                        --active: (
+                                                        --bg-color: props.get(core.$transparent-colors, $theme, --400),
+                                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --border-color: props.get(core.$transparent-colors, $theme, --500),
+                                                ),
 
-                        --disabled: (
-                                --bg-color:     props.get(core.$transparent-colors, $theme, --100),
-                                --label-color:  props.get(core.$transparent-colors, $theme, --500),
-                                --border-color: props.get(core.$transparent-colors, $theme, --300),
-                        ),
+                                        --disabled: (
+                                                        --bg-color: props.get(core.$transparent-colors, $theme, --100),
+                                                        --label-color: props.get(core.$transparent-colors, $theme, --500),
+                                                        --border-color: props.get(core.$transparent-colors, $theme, --300),
+                                                ),
 
-                        --key-focus: (
-                                --border-color:  props.get(core.$transparent-colors, $theme, --900),
-                                --outline-color: props.get(core.$transparent-colors, $theme, --300),
-                        ),
+                                        --key-focus: (
+                                                        --border-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --outline-color: props.get(core.$transparent-colors, $theme, --300),
+                                                ),
 
-                        --highlighted: (
-                                --border-color: props.get(core.$transparent-colors, $theme, --900),
-                                --shadow-color: props.get(core.$transparent-colors, --black, --200),
-                        ),
+                                        --highlighted: (
+                                                        --border-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --shadow-color: props.get(core.$transparent-colors, --black, --200),
+                                                ),
 
-                        --selected: (
-                                --bg-color:     props.get(core.$transparent-colors, $theme, --900),
-                                --label-color:  props.get(core.$transparent-colors, $theme, --text),
-                                --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
+                                        --selected: (
+                                                        --bg-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --label-color: props.get(core.$transparent-colors, $theme, --text),
+                                                        --border-color: props.get(core.$transparent-colors, $theme, --100)
+                                                                props.get(core.$transparent-colors, $theme, --100)
+                                                                props.get(core.$transparent-colors, $theme, --200),
+                                                        --hover: (
+                                                                        --bg-color: props.get(core.$transparent-colors, $theme, --800),
+                                                                        --label-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --text
+                                                                                ),
+                                                                        --border-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --100
+                                                                                ),
+                                                                ),
 
-                                --hover: (
-                                        --bg-color:     props.get(core.$transparent-colors, $theme, --800),
-                                        --label-color:  props.get(core.$transparent-colors, $theme, --text),
-                                        --border-color: props.get(core.$transparent-colors, $theme, --100),
-                                ),
+                                                        --active: (
+                                                                        --bg-color: props.get(core.$transparent-colors, $theme, --800),
+                                                                        --label-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --text
+                                                                                ),
+                                                                        --border-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --100
+                                                                                ),
+                                                                ),
 
-                                --active: (
-                                        --bg-color:     props.get(core.$transparent-colors, $theme, --800),
-                                        --label-color:  props.get(core.$transparent-colors, $theme, --text),
-                                        --border-color: props.get(core.$transparent-colors, $theme, --100),
-                                ),
+                                                        --disabled: (
+                                                                        --bg-color: props.get(core.$transparent-colors, $theme, --200),
+                                                                        --label-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --500
+                                                                                ),
+                                                                        --border-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --100
+                                                                                ),
+                                                                ),
+                                                ),
 
-                                --disabled: (
-                                        --bg-color:     props.get(core.$transparent-colors, $theme, --200),
-                                        --label-color:  props.get(core.$transparent-colors, $theme, --500),
-                                        --border-color: props.get(core.$transparent-colors, $theme, --100),
-                                ),
-                        ),
+                                        --badge: (
+                                                        --bg-color: props.get(core.$transparent-colors, $theme, --200),
+                                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --border-color: transparent,
 
-                        --badge: (
-                                --bg-color:     props.get(core.$transparent-colors, $theme, --200),
-                                --label-color:  props.get(core.$transparent-colors, $theme, --900),
-                                --border-color: transparent,
+                                                        --hover: (
+                                                                        --bg-color: props.get(core.$transparent-colors, $theme, --300),
+                                                                        --label-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --900
+                                                                                ),
+                                                                        --border-color: transparent,
+                                                                ),
 
-                                --hover: (
-                                        --bg-color:     props.get(core.$transparent-colors, $theme, --300),
-                                        --label-color:  props.get(core.$transparent-colors, $theme, --900),
-                                        --border-color: transparent,
-                                ),
+                                                        --active: (
+                                                                        --bg-color: props.get(core.$transparent-colors, $theme, --400),
+                                                                        --label-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --900
+                                                                                ),
+                                                                        --border-color: transparent,
+                                                                ),
+                                                ),
 
-                                --active: (
-                                        --bg-color:     props.get(core.$transparent-colors, $theme, --400),
-                                        --label-color:  props.get(core.$transparent-colors, $theme, --900),
-                                        --border-color: transparent,
-                                ),
-                        ),
+                                        --quiet: (
+                                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --hover: (
+                                                                        --bg-color: props.get(core.$transparent-colors, $theme, --200),
+                                                                        --label-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --900
+                                                                                ),
+                                                                ),
 
-                        --quiet: (
-                                --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                                                        --active: (
+                                                                        --bg-color: props.get(core.$transparent-colors, $theme, --300),
+                                                                        --label-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --900
+                                                                                ),
+                                                                ),
 
-                                --hover: (
-                                        --bg-color:    props.get(core.$transparent-colors, $theme, --200),
-                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --disabled: (
+                                                                        --label-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --500
+                                                                                ),
+                                                                ),
+                                                ),
                                 ),
-
-                                --active: (
-                                        --bg-color:    props.get(core.$transparent-colors, $theme, --300),
-                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
-                                ),
-
-                                --disabled: (
-                                        --label-color: props.get(core.$transparent-colors, $theme, --500),
-                                ),
-                        ),
                 )
-        ));
+        );
 }
 
 $themes-config: (
-        accent:   --accent,
+        accent: --accent,
         positive: --positive,
         negative: --negative,
-        warning:  --warning,
+        warning: --warning,
 ) !default;
 
 @each $theme, $key in $themes-config {
-        $themes: props.merge($themes, (
-                --#{$theme}: (
-                        --bg-color:     props.get(core.$theme, $key, --100),
-                        --label-color:  props.get(core.$theme, $key, --1100),
-                        --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
-                        --shadow-color: props.get(core.$theme, $key, --200),
+        $themes: props.merge(
+                $themes,
+                (
+                        --#{$theme}: (
+                                        --bg-color: props.get(core.$theme, $key, --100),
+                                        --label-color: props.get(core.$theme, $key, --1100),
+                                        --border-color: props.get(core.$theme, $key, --500)
+                                                props.get(core.$theme, $key, --500)
+                                                props.get(core.$theme, $key, --600),
+                                        --shadow-color: props.get(core.$theme, $key, --200),
+                                        --hover: (
+                                                        --bg-color: props.get(core.$theme, $key, --200),
+                                                        --label-color: props.get(core.$theme, $key, --1200),
+                                                        --border-color: props.get(core.$theme, $key, --600),
+                                                ),
 
-                        --hover: (
-                                --bg-color:     props.get(core.$theme, $key, --200),
-                                --label-color:  props.get(core.$theme, $key, --1200),
-                                --border-color: props.get(core.$theme, $key, --600),
-                        ),
+                                        --active: (
+                                                        --bg-color: props.get(core.$theme, $key, --300),
+                                                        --label-color: props.get(core.$theme, $key, --1300),
+                                                        --border-color: props.get(core.$theme, $key, --800),
+                                                ),
 
-                        --active: (
-                                --bg-color:     props.get(core.$theme, $key, --300),
-                                --label-color:  props.get(core.$theme, $key, --1300),
-                                --border-color: props.get(core.$theme, $key, --800),
-                        ),
+                                        --disabled: (
+                                                        --bg-color: props.get(core.$theme, --bg-l1),
+                                                        --label-color: props.get(core.$theme, --border-strong),
+                                                        --border-color: props.get(core.$theme, --border),
+                                                ),
 
-                        --disabled: (
-                                --bg-color:     props.get(core.$theme, --bg-l1),
-                                --label-color:  props.get(core.$theme, --border-strong),
-                                --border-color: props.get(core.$theme, --border),
-                        ),
+                                        --key-focus: (
+                                                        --border-color: props.get(core.$theme, --focus, --border),
+                                                        --outline-color: props.get(core.$theme, --focus, --outline),
+                                                ),
 
-                        --key-focus: (
-                                --border-color:  props.get(core.$theme, --focus, --border),
-                                --outline-color: props.get(core.$theme, --focus, --outline),
-                        ),
+                                        --highlighted: (
+                                                        --border-color: props.get(core.$theme, $key, --900),
+                                                        --shadow-color: props.get(core.$theme, $key, --200),
+                                                ),
 
-                        --highlighted: (
-                                --border-color: props.get(core.$theme, $key, --900),
-                                --shadow-color: props.get(core.$theme, $key, --200),
-                        ),
+                                        --selected: (
+                                                        --bg-color: props.get(core.$theme, #{$key}-static, --900),
+                                                        --label-color: props.get(core.$theme, #{$key}-static, --900-text),
+                                                        --border-color: props.get(core.$theme, #{$key}-static, --900)
+                                                                props.get(core.$theme, #{$key}-static, --900)
+                                                                props.get(core.$theme, #{$key}-static, --1000),
+                                                        --hover: (
+                                                                        --bg-color: props.get(core.$theme, #{$key}-static, --1000),
+                                                                        --label-color: props.get(
+                                                                                        core.$theme,
+                                                                                        #{$key}-static,
+                                                                                        --1000-text
+                                                                                ),
+                                                                        --border-color: props.get(core.$theme, #{$key}-static, --1000),
+                                                                ),
 
-                        --selected: (
-                                --bg-color:     props.get(core.$theme, #{$key}-static, --900),
-                                --label-color:  props.get(core.$theme, #{$key}-static, --900-text),
-                                --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
+                                                        --active: (
+                                                                        --bg-color: props.get(core.$theme, #{$key}-static, --1100),
+                                                                        --label-color: props.get(
+                                                                                        core.$theme,
+                                                                                        #{$key}-static,
+                                                                                        --1100-text
+                                                                                ),
+                                                                        --border-color: props.get(core.$theme, #{$key}-static, --1100),
+                                                                ),
 
-                                --hover: (
-                                        --bg-color:     props.get(core.$theme, #{$key}-static, --1000),
-                                        --label-color:  props.get(core.$theme, #{$key}-static, --1000-text),
-                                        --border-color: props.get(core.$theme, #{$key}-static, --1000),
-                                ),
+                                                        --disabled: (
+                                                                        --bg-color: props.get(core.$theme, --border-mute),
+                                                                        --label-color: props.get(core.$theme, --border-strong),
+                                                                        --border-color: props.get(core.$theme, --border-mute),
+                                                                ),
+                                                ),
 
-                                --active: (
-                                        --bg-color:     props.get(core.$theme, #{$key}-static, --1100),
-                                        --label-color:  props.get(core.$theme, #{$key}-static, --1100-text),
-                                        --border-color: props.get(core.$theme, #{$key}-static, --1100),
-                                ),
-
-                                --disabled: (
-                                        --bg-color:     props.get(core.$theme, --border-mute),
-                                        --label-color:  props.get(core.$theme, --border-strong),
-                                        --border-color: props.get(core.$theme, --border-mute),
-                                ),
-                        ),
-
-                        --badge: (
-                                --bg-color:     props.get(core.$theme, $key, --100),
-                                --label-color:  props.get(core.$theme, $key, --1100),
-                                --border-color: props.get(core.$theme, $key, --300),
-
-                                --hover: (
-                                        --bg-color:     props.get(core.$theme, $key, --200),
-                                        --label-color:  props.get(core.$theme, $key, --1200),
-                                        --border-color: props.get(core.$theme, $key, --400),
-                                ),
+                                        --badge: (
+                                                        --bg-color: props.get(core.$theme, $key, --100),
+                                                        --label-color: props.get(core.$theme, $key, --1100),
+                                                        --border-color: props.get(core.$theme, $key, --300),
+                                                        --hover: (
+                                                                        --bg-color: props.get(core.$theme, $key, --200),
+                                                                        --label-color: props.get(core.$theme, $key, --1200),
+                                                                        --border-color: props.get(core.$theme, $key, --400),
+                                                                ),
 
-                                --active: (
-                                        --bg-color:     props.get(core.$theme, $key, --300),
-                                        --label-color:  props.get(core.$theme, $key, --1300),
-                                        --border-color: props.get(core.$theme, $key, --500),
-                                ),
-                        ),
+                                                        --active: (
+                                                                        --bg-color: props.get(core.$theme, $key, --300),
+                                                                        --label-color: props.get(core.$theme, $key, --1300),
+                                                                        --border-color: props.get(core.$theme, $key, --500),
+                                                                ),
+                                                ),
 
-                        --quiet: (
-                                --label-color:  props.get(core.$theme, $key, --1100),
+                                        --quiet: (
+                                                        --label-color: props.get(core.$theme, $key, --1100),
+                                                        --hover: (
+                                                                        --bg-color: props.get(core.$theme, $key, --200),
+                                                                        --label-color: props.get(core.$theme, $key, --1200),
+                                                                ),
 
-                                --hover: (
-                                        --bg-color:    props.get(core.$theme, $key, --200),
-                                        --label-color: props.get(core.$theme, $key, --1200),
-                                ),
+                                                        --active: (
+                                                                        --bg-color: props.get(core.$theme, $key, --300),
+                                                                        --label-color: props.get(core.$theme, $key, --1300),
+                                                                ),
 
-                                --active: (
-                                        --bg-color:    props.get(core.$theme, $key, --300),
-                                        --label-color: props.get(core.$theme, $key, --1300),
-                                ),
-
-                                --disabled: (
-                                        --label-color: props.get(core.$theme, --border-strong),
-                                ),
-                        ),
+                                                        --disabled: (
+                                                                        --label-color: props.get(core.$theme, --border-strong),
+                                                                ),
+                                                ),
+                                )
                 )
-        ));
+        );
 }
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index b8bc727..3275bc8 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,84 +1,95 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use 'avatar.vars' as avatar;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "avatar.vars" as avatar;
 
-@forward 'card.vars';
-@use 'card.vars' as vars;
+@forward "card.vars";
+@use "card.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('card') {
-                position:         relative;
-                display:          flex;
-                flex-direction:   column;
+        @include bem.object("card") {
+                position: relative;
+                display: flex;
+                flex-direction: column;
                 background-color: props.get(vars.$bg-color);
-                border:           props.get(vars.$border-width) solid transparent;
-                border-color:     props.get(vars.$border-color);
-                border-radius:    props.get(vars.$rounding);
-                transition:       transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
+                border: props.get(vars.$border-width) solid transparent;
+                border-color: props.get(vars.$border-color);
+                border-radius: props.get(vars.$rounding);
+                transition:
+                        transform 0.2s,
+                        background-color 0.2s,
+                        border-color 0.2s,
+                        box-shadow 0.2s;
 
-                @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+                @include bem.multi(
+                        "&:link, &:visited, &:enabled",
+                        "modifier" "interactive",
+                        "modifier" "collapsible"
+                ) {
                         &:hover,
                         &:active,
                         &:focus-visible {
                                 background-color: props.get(vars.$hover--bg-color);
-                                border-color:     props.get(vars.$hover--border-color);
-                                box-shadow:       none;
-                                transform:        translateY(props.get(vars.$hover--offset-b));
+                                border-color: props.get(vars.$hover--border-color);
+                                box-shadow: none;
+                                transform: translateY(props.get(vars.$hover--offset-b));
                         }
 
                         &:focus-visible {
-                                margin:        calc(-1 * props.get(vars.$key-focus--border-width));
-                                outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                                border:        calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
-                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-                                box-shadow:
-                                        0 0 0
-                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                margin: calc(-1 * props.get(vars.$key-focus--border-width));
+                                outline: props.get(vars.$key-focus--border-color) solid
+                                        props.get(vars.$key-focus--border-width);
+                                border: calc(
+                                                props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)
+                                        )
+                                        solid transparent;
+                                border-radius: calc(
+                                        props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
+                                );
+                                box-shadow: 0 0 0
+                                        calc(
+                                                props.get(vars.$key-focus--border-width) +
+                                                        props.get(vars.$key-focus--outline-width)
+                                        )
                                         props.get(vars.$key-focus--outline-color);
-                                transition:    transform .2s;
+                                transition: transform 0.2s;
                         }
                 }
 
-                @include bem.modifier('borderless') {
+                @include bem.modifier("borderless") {
                         border-color: props.get(vars.$bg-color);
                 }
 
-                @include bem.modifier('shadow') {
-                        box-shadow:
-                                props.get(vars.$shadow-x)
-                                props.get(vars.$shadow-y)
-                                props.get(vars.$shadow-blur)
-                                props.get(vars.$shadow-grow)
+                @include bem.modifier("shadow") {
+                        box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
+                                props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
                                 props.get(vars.$shadow-color);
 
-                        @include bem.modifier('quiet') {
-                                @include bem.elem('image') {
-                                        box-shadow:
-                                                props.get(vars.$shadow-x)
-                                                props.get(vars.$shadow-y)
-                                                props.get(vars.$shadow-blur)
-                                                props.get(vars.$shadow-grow)
+                        @include bem.modifier("quiet") {
+                                @include bem.elem("image") {
+                                        box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
+                                                props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
                                                 props.get(vars.$shadow-color);
                                 }
                         }
                 }
 
-                @include bem.modifier('highlight') {
+                @include bem.modifier("highlight") {
                         margin: calc(props.get(vars.$border-width) - props.get(vars.$highlight--border-width));
                         border-color: props.get(vars.$highlight--border-color);
                         border-width: props.get(vars.$highlight--border-width);
-                        box-shadow:
-                                props.get(vars.$highlight--shadow-x)
-                                props.get(vars.$highlight--shadow-y)
-                                props.get(vars.$highlight--shadow-blur)
-                                props.get(vars.$highlight--shadow-grow)
+                        box-shadow: props.get(vars.$highlight--shadow-x) props.get(vars.$highlight--shadow-y)
+                                props.get(vars.$highlight--shadow-blur) props.get(vars.$highlight--shadow-grow)
                                 props.get(vars.$highlight--shadow-color);
 
-                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+                        @include bem.multi(
+                                "&:link, &:visited, &:enabled",
+                                "modifier" "interactive",
+                                "modifier" "collapsible"
+                        ) {
                                 &:hover,
                                 &:active {
                                         border-color: props.get(vars.$highlight--border-color);
@@ -86,207 +97,238 @@
                         }
                 }
 
-                @include bem.elem('avatar') {
-                        margin-block-start:  props.get(vars.$pad-b);
+                @include bem.elem("avatar") {
+                        margin-block-start: props.get(vars.$pad-b);
                         margin-inline-start: props.get(vars.$pad-i);
                 }
 
-                @include bem.elem('image') {
-                        position:      relative;
-                        display:       block;
-                        flex:          0 0 auto;
-                        inline-size:   calc(100% + 2 * props.get(vars.$border-width));
-                        margin:        calc(-1 * props.get(vars.$border-width));
-                        overflow:      hidden;
-                        object-fit:    cover;
-                        transition:    background-color .2s, transform .2s, opacity .2s;
+                @include bem.elem("image") {
+                        position: relative;
+                        display: block;
+                        flex: 0 0 auto;
+                        inline-size: calc(100% + 2 * props.get(vars.$border-width));
+                        margin: calc(-1 * props.get(vars.$border-width));
+                        overflow: hidden;
+                        object-fit: cover;
+                        transition:
+                                background-color 0.2s,
+                                transform 0.2s,
+                                opacity 0.2s;
 
                         &:first-child {
-                                border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                                border-start-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                border-start-start-radius: calc(
+                                        props.get(vars.$rounding) - props.get(vars.$border-width)
+                                );
+                                border-start-end-radius: calc(
+                                        props.get(vars.$rounding) - props.get(vars.$border-width)
+                                );
                         }
 
                         &:last-child {
-                                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                border-end-start-radius: calc(
+                                        props.get(vars.$rounding) - props.get(vars.$border-width)
+                                );
+                                border-end-end-radius: calc(
+                                        props.get(vars.$rounding) - props.get(vars.$border-width)
+                                );
                         }
 
-                        @include bem.next-elem('avatar') {
-                                margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
+                        @include bem.next-elem("avatar") {
+                                margin-block-start: calc(-0.7 * props.get(avatar.$size--xl));
                         }
                 }
 
-                @include bem.elem('image-img') {
-                        display:     block;
+                @include bem.elem("image-img") {
+                        display: block;
                         inline-size: 100%;
-                        block-size:  100%;
-                        object-fit:  cover;
+                        block-size: 100%;
+                        object-fit: cover;
                 }
 
-                @include bem.elem('image-overlay') {
-                        position:        absolute;
+                @include bem.elem("image-overlay") {
+                        position: absolute;
                         inset-block-end: 0;
-                        inset-inline:    0;
-                        z-index:         5;
-                        padding-block:   props.get(vars.$image-overlay--pad-b);
-                        padding-inline:  props.get(vars.$image-overlay--pad-i);
+                        inset-inline: 0;
+                        z-index: 5;
+                        padding-block: props.get(vars.$image-overlay--pad-b);
+                        padding-inline: props.get(vars.$image-overlay--pad-i);
                 }
 
-                @include bem.elem('body') {
-                        flex:            0 0 auto;
-                        padding-block:   props.get(vars.$pad-b);
-                        padding-inline:  props.get(vars.$pad-i);
+                @include bem.elem("body") {
+                        flex: 0 0 auto;
+                        padding-block: props.get(vars.$pad-b);
+                        padding-inline: props.get(vars.$pad-i);
 
                         &::before {
-                                display:       block;
-                                margin-block:  -100em 100em;
-                                content:       '';
+                                display: block;
+                                margin-block: -100em 100em;
+                                content: "";
                         }
 
-                        @include bem.modifier('no-mbs-neutralize') {
+                        @include bem.modifier("no-mbs-neutralize") {
                                 &::before {
                                         display: none;
                                 }
                         }
 
-                        @include bem.modifier('main') {
-                                flex-shrink:    1;
-                                block-size:     100%;
+                        @include bem.modifier("main") {
+                                flex-shrink: 1;
+                                block-size: 100%;
                                 min-block-size: 0;
                         }
                 }
 
-                @include bem.elem('content') {
+                @include bem.elem("content") {
                         margin-block-start: props.get(vars.$spacing);
                 }
 
-                @include bem.elem('footer') {
-                        flex:               0 0 auto;
-                        padding-block:      0 props.get(vars.$pad-b);
-                        padding-inline:     props.get(vars.$pad-i);
+                @include bem.elem("footer") {
+                        flex: 0 0 auto;
+                        padding-block: 0 props.get(vars.$pad-b);
+                        padding-inline: props.get(vars.$pad-i);
                         margin-block-start: calc(-1 * props.get(vars.$pad-b));
 
                         &::before {
-                                display:          block;
-                                block-size:       props.get(vars.$divider-width);
-                                margin-block:     props.get(vars.$spacing);
-                                content:          '';
+                                display: block;
+                                block-size: props.get(vars.$divider-width);
+                                margin-block: props.get(vars.$spacing);
+                                content: "";
                                 background-color: props.get(vars.$divider-width);
                         }
                 }
 
-                @include bem.modifier('quiet') {
-                        margin-inline:    0;
+                @include bem.modifier("quiet") {
+                        margin-inline: 0;
                         background-color: transparent;
-                        border:           0;
-                        box-shadow:       none;
+                        border: 0;
+                        box-shadow: none;
 
-                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+                        @include bem.multi(
+                                "&:link, &:visited, &:enabled",
+                                "modifier" "interactive",
+                                "modifier" "collapsible"
+                        ) {
                                 &:hover,
                                 &:active,
                                 &:focus-visible {
                                         background-color: transparent;
-                                        transform:        none;
+                                        transform: none;
 
-                                        @include bem.elem('image') {
+                                        @include bem.elem("image") {
                                                 background-color: props.get(vars.$quiet--hover--image-color);
-                                                opacity:          .75;
-                                                transform:        translateY(props.get(vars.$hover--offset-b));
+                                                opacity: 0.75;
+                                                transform: translateY(props.get(vars.$hover--offset-b));
                                         }
                                 }
 
                                 &:focus-visible {
-                                        margin:     0;
-                                        outline:    none;
-                                        border:     0;
+                                        margin: 0;
+                                        outline: none;
+                                        border: 0;
                                         box-shadow: none;
 
-                                        @include bem.elem('image') {
-                                                margin:           calc(-1 * props.get(vars.$key-focus--border-width) - props.get(vars.$border-width));
-                                                outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                        @include bem.elem("image") {
+                                                margin: calc(
+                                                        -1 *
+                                                                props.get(vars.$key-focus--border-width) - props.get(
+                                                                        vars.$border-width
+                                                                )
+                                                );
+                                                outline: props.get(vars.$key-focus--border-color) solid
+                                                        props.get(vars.$key-focus--border-width);
                                                 background-color: props.get(vars.$quiet--hover--image-color);
-                                                border:           props.get(vars.$key-focus--border-offset) solid transparent;
-                                                border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-                                                box-shadow:
-                                                        0
-                                                        0
-                                                        0
-                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                border: props.get(vars.$key-focus--border-offset) solid transparent;
+                                                border-radius: calc(
+                                                        props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
+                                                );
+                                                box-shadow: 0 0 0
+                                                        calc(
+                                                                props.get(vars.$key-focus--border-width) +
+                                                                        props.get(vars.$key-focus--outline-width)
+                                                        )
                                                         props.get(vars.$key-focus--outline-color);
-                                                opacity:          1;
+                                                opacity: 1;
                                         }
                                 }
                         }
 
-                        @include bem.elem('image') {
-                                position:         relative;
+                        @include bem.elem("image") {
+                                position: relative;
                                 background-color: props.get(vars.$quiet--image-color);
-                                background-clip:  padding-box;
-                                border-radius:    props.get(vars.$rounding);
+                                background-clip: padding-box;
+                                border-radius: props.get(vars.$rounding);
                         }
 
-                        @include bem.elem('body') {
-                                padding:             0;
+                        @include bem.elem("body") {
+                                padding: 0;
                                 padding-block-start: props.get(vars.$spacing);
                         }
 
-                        @include bem.elem('footer') {
+                        @include bem.elem("footer") {
                                 padding-inline: 0;
                         }
                 }
 
-                @include bem.modifier('thumbnail') {
-                        @include bem.elem('image') {
+                @include bem.modifier("thumbnail") {
+                        @include bem.elem("image") {
                                 border-radius: props.get(vars.$rounding);
                         }
 
-                        @include bem.elem('body') {
-                                position:                absolute;
-                                inset-block-end:         calc(-1 * props.get(vars.$border-width));
-                                inset-inline:            calc(-1 * props.get(vars.$border-width));
-                                z-index:                 10;
-                                visibility:              hidden;
-                                background-color:        props.get(vars.$hover--bg-color);
-                                border-color:            transparent;
-                                border-style:            solid;
-                                border-width:            0 props.get(vars.$border-width) props.get(vars.$border-width);
-                                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                                opacity:                 0;
+                        @include bem.elem("body") {
+                                position: absolute;
+                                inset-block-end: calc(-1 * props.get(vars.$border-width));
+                                inset-inline: calc(-1 * props.get(vars.$border-width));
+                                z-index: 10;
+                                visibility: hidden;
+                                background-color: props.get(vars.$hover--bg-color);
+                                border-color: transparent;
+                                border-style: solid;
+                                border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
+                                border-end-start-radius: calc(
+                                        props.get(vars.$rounding) - props.get(vars.$border-width)
+                                );
+                                border-end-end-radius: calc(
+                                        props.get(vars.$rounding) - props.get(vars.$border-width)
+                                );
+                                opacity: 0;
                                 transition:
-                                        border-color .2s ease,
-                                        opacity .2s ease,
-                                        visibility 0s .2s linear;
+                                        border-color 0.2s ease,
+                                        opacity 0.2s ease,
+                                        visibility 0s 0.2s linear;
                         }
 
-                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+                        @include bem.multi(
+                                "&:link, &:visited, &:enabled",
+                                "modifier" "interactive",
+                                "modifier" "collapsible"
+                        ) {
                                 &:hover,
                                 &:active,
                                 &:focus-visible {
-                                        @include bem.elem('body') {
-                                                visibility:   visible;
+                                        @include bem.elem("body") {
+                                                visibility: visible;
                                                 border-color: props.get(vars.$hover--border-color);
-                                                opacity:      1;
+                                                opacity: 1;
                                                 transition:
-                                                        border-color .2s ease,
-                                                        opacity .2s ease,
-                                                        visibility .2s linear;
+                                                        border-color 0.2s ease,
+                                                        opacity 0.2s ease,
+                                                        visibility 0.2s linear;
                                         }
                                 }
                         }
                 }
 
-                @include bem.modifier('horizontal') {
+                @include bem.modifier("horizontal") {
                         flex-direction: row;
-                        align-items:    center;
+                        align-items: center;
 
-                        @include bem.elem('image') {
-                                align-self:  stretch;
+                        @include bem.elem("image") {
+                                align-self: stretch;
                                 inline-size: auto;
 
                                 &:first-child {
-                                        border-start-end-radius:   0;
-                                        border-end-start-radius:   props.get(vars.$rounding);
+                                        border-start-end-radius: 0;
+                                        border-end-start-radius: props.get(vars.$rounding);
                                 }
 
                                 &:last-child {
@@ -295,37 +337,38 @@
                                 }
                         }
 
-                        @include bem.elem('body') {
-                                @include bem.modifier('main') {
-                                        block-size:      auto;
-                                        min-block-size:  none;
-                                        inline-size:     100%;
+                        @include bem.elem("body") {
+                                @include bem.modifier("main") {
+                                        block-size: auto;
+                                        min-block-size: none;
+                                        inline-size: 100%;
                                         min-inline-size: 0;
                                 }
                         }
                 }
 
-                @include bem.modifier('collapsible') {
+                @include bem.modifier("collapsible") {
                         display: block;
                         interpolate-size: allow-keywords;
 
                         @include bem.elem("header") {
-                                display:     flex;
+                                display: flex;
                                 align-items: center;
-                                gap:         1em;
-                                cursor:      pointer;
+                                gap: 1em;
+                                cursor: pointer;
 
                                 &::before {
-                                        margin:      0;
+                                        margin: 0;
                                         inline-size: 1em;
-                                        font-size:   0.8em;
-                                        content:     "▶";
+                                        font-size: 0.8em;
+                                        content: "▶";
                                 }
 
                                 &:focus-visible {
-                                        outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                        outline: props.get(vars.$key-focus--border-color) solid
+                                                props.get(vars.$key-focus--border-width);
                                         outline-offset: calc(-1 * props.get(vars.$key-focus--border-width));
-                                        border-radius:  calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                        border-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
                                 }
 
                                 @include bem.next-elem("body") {
@@ -334,7 +377,7 @@
                         }
 
                         &::details-content {
-                                opacity:    0;
+                                opacity: 0;
                                 block-size: 0;
                                 overflow-y: clip;
                                 transition:
@@ -351,7 +394,7 @@
                                 }
 
                                 &::details-content {
-                                        opacity:    1;
+                                        opacity: 1;
                                         block-size: auto;
                                 }
                         }
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 4616c80..96f3cb9 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -1,51 +1,130 @@
-@use 'sass:map';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$divider-width:        props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
-$border-width:         props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default;
-$sub-border-width:     props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default;
-$pad-i:                props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
-$pad-b:                props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
-$spacing:              props.def(--o-card--spacing, props.get(core.$size--200)) !default;
-$rounding:             props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
+$border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default;
+$sub-border-width: props.def(
+        --o-card--sub-border-width,
+        props.get(core.$border-width--thick)
+) !default;
+$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
+$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
+$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default;
+$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default;
 $image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default;
 $image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default;
 
-$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;
+$hover--offset-b: props.def(
+        --o-card--hover--offset-b,
+        calc(-1 * props.get(core.$size--65))
+) !default;
 
-$shadow-x:    props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default;
-$shadow-y:    props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default;
+$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default;
+$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default;
 $shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
 $shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
 
-$key-focus--border-width:  props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --o-card--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$key-focus--border-offset: props.def(
+        --o-card--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$key-focus--outline-width: props.def(
+        --o-card--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$shadow-color:  props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
-$bg-color:      props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
-$border-color:  props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default;
-$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
+$shadow-color: props.def(
+        --o-card--shadow-color,
+        props.get(core.$theme, --shadow),
+        "color"
+) !default;
+$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), "color") !default;
+$border-color: props.def(
+        --o-card--border-color,
+        props.get(core.$theme, --box, --border),
+        "color"
+) !default;
+$divider-color: props.def(
+        --o-card--divider-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;
 
-$highlight--shadow-x:    props.def(--o-card--highlight--shadow-x, props.get(core.$shadow--l2--x)) !default;
-$highlight--shadow-y:    props.def(--o-card--highlight--shadow-y, props.get(core.$shadow--l2--y)) !default;
-$highlight--shadow-blur: props.def(--o-card--highlight--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
-$highlight--shadow-grow: props.def(--o-card--highlight--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
+$highlight--shadow-x: props.def(
+        --o-card--highlight--shadow-x,
+        props.get(core.$shadow--l2--x)
+) !default;
+$highlight--shadow-y: props.def(
+        --o-card--highlight--shadow-y,
+        props.get(core.$shadow--l2--y)
+) !default;
+$highlight--shadow-blur: props.def(
+        --o-card--highlight--shadow-blur,
+        props.get(core.$shadow--l2--blur)
+) !default;
+$highlight--shadow-grow: props.def(
+        --o-card--highlight--shadow-grow,
+        props.get(core.$shadow--l2--grow)
+) !default;
 
-$highlight--border-width: props.def(--o-card--highlight--border-width, props.get(core.$border-width--medium)) !default;
-$highlight--border-color: props.def(--o-card--highlight--border-color, props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --800), 'color') !default;
-$highlight--shadow-color: props.def(--o-card--highlight--shadow-color, props.get(core.$theme, --accent, --200), 'color') !default;
+$highlight--border-width: props.def(
+        --o-card--highlight--border-width,
+        props.get(core.$border-width--medium)
+) !default;
+$highlight--border-color: props.def(
+        --o-card--highlight--border-color,
+        props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --700)
+                props.get(core.$theme, --accent, --800),
+        "color"
+) !default;
+$highlight--shadow-color: props.def(
+        --o-card--highlight--shadow-color,
+        props.get(core.$theme, --accent, --200),
+        "color"
+) !default;
 
-$hover--bg-color:         props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), 'color') !default;
-$hover--border-color:     props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default;
+$hover--bg-color: props.def(
+        --o-card--hover--bg-color,
+        color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)),
+        "color"
+) !default;
+$hover--border-color: props.def(
+        --o-card--hover--border-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
 
-$key-focus--label-color:   props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
-$key-focus--border-color:  props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$key-focus--label-color: props.def(
+        --o-card--key-focus--label-color,
+        props.get(core.$theme, --focus, --text),
+        "color"
+) !default;
+$key-focus--border-color: props.def(
+        --o-card--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$key-focus--outline-color: props.def(
+        --o-card--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
 
-$quiet--image-color:        props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default;
-$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default;
+$quiet--image-color: props.def(
+        --o-card--quiet--image-color,
+        props.get(core.$theme, --bg-base),
+        "color"
+) !default;
+$quiet--hover--image-color: props.def(
+        --o-card--quiet--hover--image-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
 
-$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), 'sm') !default;
-$pad-b--sm: props.def(--o-card--pad-b, props.get(core.$size--175), 'sm') !default;
+$pad-i--sm: props.def(--o-card--pad-i, props.get(core.$size--200), "sm") !default;
+$pad-b--sm: props.def(--o-card--pad-b, props.get(core.$size--175), "sm") !default;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index f3fb793..60cee65 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,130 +1,140 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/functions' as fn;
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use '../core.vars' as core;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/functions" as fn;
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "../core.vars" as core;
 
-@forward 'checkbox.vars';
-@use 'checkbox.vars' as vars;
+@forward "checkbox.vars";
+@use "checkbox.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('checkbox') {
-                position:       relative;
-                display:        inline-block;
-                padding-block:  props.get(vars.$pad-b);
+        @include bem.object("checkbox") {
+                position: relative;
+                display: inline-block;
+                padding-block: props.get(vars.$pad-b);
                 padding-inline: props.get(vars.$pad-i);
-                margin-inline:
-                        calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
-                        calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
+                margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+                        calc(
+                                props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(
+                                                vars.$key-focus--border-offset
+                                        )
+                        );
 
-                @include bem.elem('box') {
-                        position:           relative;
-                        display:            inline-block;
-                        flex:               0 0 auto;
-                        inline-size:        props.get(vars.$size);
-                        block-size:         props.get(vars.$size);
-                        margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
-                        vertical-align:     top;
-                        background-color:   props.get(vars.$box-border-color);
-                        background-clip:    padding-box;
-                        border:             props.get(vars.$key-focus--border-offset) solid transparent;
-                        border-radius:      calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
+                @include bem.elem("box") {
+                        position: relative;
+                        display: inline-block;
+                        flex: 0 0 auto;
+                        inline-size: props.get(vars.$size);
+                        block-size: props.get(vars.$size);
+                        margin-block-start: calc(
+                                0.5em * props.get(core.$font--standard--line-height) - 0.5 *
+                                        props.get(vars.$size) - props.get(vars.$key-focus--border-offset)
+                        );
+                        vertical-align: top;
+                        background-color: props.get(vars.$box-border-color);
+                        background-clip: padding-box;
+                        border: props.get(vars.$key-focus--border-offset) solid transparent;
+                        border-radius: calc(
+                                props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)
+                        );
 
                         &::before,
                         &::after {
                                 position: absolute;
-                                display:  block;
-                                content:  '';
+                                display: block;
+                                content: "";
                         }
 
                         &::before {
-                                inset-block-start:  props.get(vars.$border-width);
+                                inset-block-start: props.get(vars.$border-width);
                                 inset-inline-start: props.get(vars.$border-width);
-                                z-index:            2;
-                                inline-size:        calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
-                                block-size:         calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
-                                background-color:   props.get(vars.$box-bg-color);
-                                transition:         transform .2s ease;
+                                z-index: 2;
+                                inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
+                                block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
+                                background-color: props.get(vars.$box-bg-color);
+                                transition: transform 0.2s ease;
                         }
 
                         &::after {
-                                inset-block-start:   calc(.5 * props.get(vars.$size) - 1px);
-                                inset-inline-start:  calc(1.5 * props.get(vars.$border-width));
-                                z-index:             3;
-                                box-sizing:          border-box;
-                                inline-size:         calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
-                                block-size:          0;
-                                border-color:        props.get(vars.$box-bg-color);
-                                border-style:        solid;
-                                border-radius:       2px;
-                                transform:           scale(0);
-                                transition:          transform .2s ease;
-                                border-block-width:  0 2px;
+                                inset-block-start: calc(0.5 * props.get(vars.$size) - 1px);
+                                inset-inline-start: calc(1.5 * props.get(vars.$border-width));
+                                z-index: 3;
+                                box-sizing: border-box;
+                                inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
+                                block-size: 0;
+                                border-color: props.get(vars.$box-bg-color);
+                                border-style: solid;
+                                border-radius: 2px;
+                                transform: scale(0);
+                                transition: transform 0.2s ease;
+                                border-block-width: 0 2px;
                                 border-inline-width: 0 2px;
                         }
                 }
 
-                @include bem.elem('check-icon') {
-                        position:           absolute;
-                        inset-block-start:  calc(1 * props.get(vars.$border-width));
+                @include bem.elem("check-icon") {
+                        position: absolute;
+                        inset-block-start: calc(1 * props.get(vars.$border-width));
                         inset-inline-start: calc(1 * props.get(vars.$border-width));
-                        z-index:            2;
-                        display:            block;
-                        inline-size:        calc(100% - 2 * props.get(vars.$border-width));
-                        block-size:         calc(100% - 2 * props.get(vars.$border-width));
-                        margin:             0;
-                        color:              props.get(vars.$box-bg-color);
-                        stroke-width:       fn.px-to-rem(3px);
-                        transform:          scale(0);
-                        transform-origin:   40% 90%;
-                        transition:         transform .2s ease;
+                        z-index: 2;
+                        display: block;
+                        inline-size: calc(100% - 2 * props.get(vars.$border-width));
+                        block-size: calc(100% - 2 * props.get(vars.$border-width));
+                        margin: 0;
+                        color: props.get(vars.$box-bg-color);
+                        stroke-width: fn.px-to-rem(3px);
+                        transform: scale(0);
+                        transform-origin: 40% 90%;
+                        transition: transform 0.2s ease;
                 }
 
-                @include bem.elem('label') {
-                        margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
+                @include bem.elem("label") {
+                        margin-inline-start: calc(
+                                props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)
+                        );
                 }
 
-                @include bem.elem('native') {
-                        position:           absolute;
-                        inset-block-start:  0;
+                @include bem.elem("native") {
+                        position: absolute;
+                        inset-block-start: 0;
                         inset-inline-start: 0;
-                        z-index:            -1;
-                        inline-size:        100%;
-                        block-size:         100%;
-                        padding:            0;
-                        margin:             0;
-                        overflow:           hidden;
-                        appearance:         none;
-                        border-radius:      props.get(vars.$rounding);
+                        z-index: -1;
+                        inline-size: 100%;
+                        block-size: 100%;
+                        padding: 0;
+                        margin: 0;
+                        overflow: hidden;
+                        appearance: none;
+                        border-radius: props.get(vars.$rounding);
 
                         &:hover,
                         &:focus-visible {
-                                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem("label") {
                                         color: props.get(vars.$hover--label-color);
                                 }
 
-                                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem("box") {
                                         background-color: props.get(vars.$hover--box-border-color);
                                 }
                         }
 
                         &:checked {
-                                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem("box") {
                                         &::before {
                                                 transform: scale(0);
                                         }
 
-                                        @include bem.elem('check-icon') {
+                                        @include bem.elem("check-icon") {
                                                 transform: scale(1);
                                         }
                                 }
                         }
 
                         &:indeterminate {
-                                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem("box") {
                                         &::before {
                                                 transform: scale(0);
                                         }
@@ -133,18 +143,18 @@
                                                 transform: scale(1);
                                         }
 
-                                        @include bem.elem('check-icon') {
+                                        @include bem.elem("check-icon") {
                                                 transform: scale(0);
                                         }
                                 }
                         }
 
                         &:disabled {
-                                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem("label") {
                                         color: props.get(vars.$disabled--label-color);
                                 }
 
-                                @include bem.sibling-elem('box') {
+                                @include bem.sibling-elem("box") {
                                         background-color: props.get(vars.$disabled--box-border-color);
 
                                         &::before {
@@ -154,58 +164,59 @@
                         }
 
                         &:focus-visible {
-                                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem("label") {
                                         color: props.get(vars.$key-focus--label-color);
                                 }
 
-                                @include bem.sibling-elem('box') {
-                                        outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                                        box-shadow:
-                                                0
-                                                0
-                                                0
-                                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                @include bem.sibling-elem("box") {
+                                        outline: props.get(vars.$key-focus--border-color) solid
+                                                props.get(vars.$key-focus--border-width);
+                                        box-shadow: 0 0 0
+                                                calc(
+                                                        props.get(vars.$key-focus--border-width) +
+                                                                props.get(vars.$key-focus--outline-width)
+                                                )
                                                 props.get(vars.$key-focus--outline-color);
                                 }
                         }
                 }
 
-                @include bem.modifier('standalone') {
-                        @include bem.elem('box') {
+                @include bem.modifier("standalone") {
+                        @include bem.elem("box") {
                                 margin-block-start: 0;
                         }
                 }
 
-                @include bem.modifier('accent') {
-                        @include bem.elem('native') {
+                @include bem.modifier("accent") {
+                        @include bem.elem("native") {
                                 &:checked {
-                                        @include bem.sibling-elem('box') {
+                                        @include bem.sibling-elem("box") {
                                                 background-color: props.get(vars.$accent--box-border-color);
                                         }
 
                                         &:hover,
                                         &:focus-visible {
-                                                @include bem.sibling-elem('box') {
+                                                @include bem.sibling-elem("box") {
                                                         background-color: props.get(vars.$accent--hover--box-border-color);
                                                 }
                                         }
                                 }
 
                                 &:indeterminate {
-                                        @include bem.sibling-elem('box') {
+                                        @include bem.sibling-elem("box") {
                                                 background-color: props.get(vars.$accent--box-border-color);
                                         }
 
                                         &:hover,
                                         &:focus-visible {
-                                                @include bem.sibling-elem('box') {
+                                                @include bem.sibling-elem("box") {
                                                         background-color: props.get(vars.$accent--hover--box-border-color);
                                                 }
                                         }
                                 }
 
                                 &:disabled {
-                                        @include bem.sibling-elem('box') {
+                                        @include bem.sibling-elem("box") {
                                                 background-color: props.get(vars.$disabled--box-border-color);
 
                                                 &::before {
@@ -214,13 +225,13 @@
                                         }
 
                                         &:checked {
-                                                @include bem.sibling-elem('box') {
+                                                @include bem.sibling-elem("box") {
                                                         background-color: props.get(vars.$disabled--box-border-color);
                                                 }
                                         }
 
                                         &:indeterminate {
-                                                @include bem.sibling-elem('box') {
+                                                @include bem.sibling-elem("box") {
                                                         background-color: props.get(vars.$disabled--box-border-color);
                                                 }
                                         }
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss
index 278aac8..8362aa7 100644
--- a/src/objects/_checkbox.vars.scss
+++ b/src/objects/_checkbox.vars.scss
@@ -1,32 +1,92 @@
-@use 'sass:map';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$size:            props.def(--o-checkbox--size, props.get(core.$size--175)) !default;
-$label-gap:       props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default;
-$border-width:    props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default;
-$pad-i:           props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default;
-$pad-b:           props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default;
-$rounding:        props.def(--o-checkbox--rounding, props.get(core.$rounding--sm)) !default;
+$size: props.def(--o-checkbox--size, props.get(core.$size--175)) !default;
+$label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default;
+$border-width: props.def(
+        --o-checkbox--border-width,
+        props.get(core.$border-width--medium)
+) !default;
+$pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default;
+$pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default;
+$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding--sm)) !default;
 $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default;
 
-$key-focus--border-width:  props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-checkbox--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-checkbox--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --o-checkbox--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$key-focus--border-offset: props.def(
+        --o-checkbox--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$key-focus--outline-width: props.def(
+        --o-checkbox--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
-$box-bg-color:     props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
+$box-border-color: props.def(
+        --o-checkbox--box-border-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
+$box-bg-color: props.def(
+        --o-checkbox--box-bg-color,
+        props.get(core.$theme, --base, --75),
+        "color"
+) !default;
 
-$hover--label-color:      props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
-$hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute), 'color') !default;
+$hover--label-color: props.def(
+        --o-checkbox--hover--label-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
+$hover--box-border-color: props.def(
+        --o-checkbox--hover--box-border-color,
+        props.get(core.$theme, --text-mute),
+        "color"
+) !default;
 
-$accent--box-border-color:        props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900), 'color') !default;
-$accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000), 'color') !default;
+$accent--box-border-color: props.def(
+        --o-checkbox--accent--box-border-color,
+        props.get(core.$theme, --accent, --900),
+        "color"
+) !default;
+$accent--hover--box-border-color: props.def(
+        --o-checkbox--accent--hover--box-border-color,
+        props.get(core.$theme, --accent, --1000),
+        "color"
+) !default;
 
-$disabled--label-color:      props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
-$disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong), 'color') !default;
-$disabled--box-bg-color:     props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
+$disabled--label-color: props.def(
+        --o-checkbox--disabled--label-color,
+        props.get(core.$theme, --text-disabled),
+        "color"
+) !default;
+$disabled--box-border-color: props.def(
+        --o-checkbox--disabled--box-border-color,
+        props.get(core.$theme, --border-strong),
+        "color"
+) !default;
+$disabled--box-bg-color: props.def(
+        --o-checkbox--disabled--box-bg-color,
+        props.get(core.$theme, --base, --75),
+        "color"
+) !default;
 
-$key-focus--label-color:   props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
-$key-focus--border-color:  props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$key-focus--label-color: props.def(
+        --o-checkbox--key-focus--label-color,
+        props.get(core.$theme, --focus, --text),
+        "color"
+) !default;
+$key-focus--border-color: props.def(
+        --o-checkbox--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$key-focus--outline-color: props.def(
+        --o-checkbox--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index d2ee8c3..f5584e6 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -1,29 +1,29 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'dialog.vars';
-@use 'dialog.vars' as vars;
+@forward "dialog.vars";
+@use "dialog.vars" as vars;
 
-@use 'backdrop.vars' as backdrop;
-@use 'divider.vars' as divider;
+@use "backdrop.vars" as backdrop;
+@use "divider.vars" as divider;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('dialog') {
-                display:          none;
-                box-sizing:       border-box;
-                inline-size:      100%;
-                max-inline-size:  none;
-                block-size:       100%;
-                min-block-size:   0;
-                max-block-size:   none;
-                padding:          props.get(vars.$pad-b) props.get(vars.$pad-i);
-                margin:           0;
+        @include bem.object("dialog") {
+                display: none;
+                box-sizing: border-box;
+                inline-size: 100%;
+                max-inline-size: none;
+                block-size: 100%;
+                min-block-size: 0;
+                max-block-size: none;
+                padding: props.get(vars.$pad-b) props.get(vars.$pad-i);
+                margin: 0;
                 background-color: transparent;
-                border:           0;
+                border: 0;
 
                 &::backdrop {
                         background-color: props.get(backdrop.$bg-color);
@@ -31,38 +31,40 @@
                 }
 
                 &[open],
-                &:popover-open {
-                        display:        flex;
+                &:popover-open {
+                        display: flex;
                         flex-direction: column;
                 }
 
-                @include bem.elem('content') {
-                        pointer-events:   auto;
-                        border-radius:    props.get(vars.$rounding);
+                @include bem.elem("content") {
+                        pointer-events: auto;
+                        border-radius: props.get(vars.$rounding);
                         background-color: props.get(vars.$bg-color);
                 }
 
-                @include bem.elem('header') {
-                        display:     flex;
+                @include bem.elem("header") {
+                        display: flex;
                         align-items: center;
-                        padding:     props.get(vars.$body--pad-i) props.get(vars.$body--pad-i) 0;
+                        padding: props.get(vars.$body--pad-i) props.get(vars.$body--pad-i) 0;
                 }
 
-                @include bem.elem('divider') {
+                @include bem.elem("divider") {
                         margin-inline: props.get(vars.$body--pad-i);
 
-                        @include bem.next-elem('body') {
-                                padding-block-start: calc(.5 * props.get(vars.$body--pad-b) - props.get(divider.$margin-b));
+                        @include bem.next-elem("body") {
+                                padding-block-start: calc(
+                                        0.5 * props.get(vars.$body--pad-b) - props.get(divider.$margin-b)
+                                );
                         }
                 }
 
-                @include bem.elem('body') {
+                @include bem.elem("body") {
                         padding: props.get(vars.$body--pad-b) props.get(vars.$body--pad-i);
 
                         &::before {
-                                display:       block;
-                                margin-block:  -100em 100em;
-                                content:       '';
+                                display: block;
+                                margin-block: -100em 100em;
+                                content: "";
                         }
                 }
         }
diff --git a/src/objects/_dialog.vars.scss b/src/objects/_dialog.vars.scss
index 39c47ba..8650e51 100644
--- a/src/objects/_dialog.vars.scss
+++ b/src/objects/_dialog.vars.scss
@@ -1,10 +1,10 @@
-@use 'sass:map';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
-@use '../layouts/container.vars' as container;
+@use "sass:map";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
+@use "../layouts/container.vars" as container;
 
-$pad-b:    props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default;
-$pad-i:    props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default;
+$pad-b: props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default;
+$pad-i: props.def(--o-dialog--pad-b, props.get(container.$pad-i)) !default;
 $rounding: props.def(--o-dialog--rounding, props.get(core.$rounding)) !default;
 
 $border-width: props.def(--o-dialog--border-width, props.get(core.$border-width--thin)) !default;
@@ -12,5 +12,9 @@ $border-width: props.def(--o-dialog--border-width, props.get(core.$border-width-
 $body--pad-b: props.def(--o-dialog--body--pad-b, props.get(container.$pad-i)) !default;
 $body--pad-i: props.def(--o-dialog--body--pad-i, props.get(container.$pad-i)) !default;
 
-$bg-color:     props.def(--o-dialog--bg-color, props.get(core.$theme, --bg-l1), 'color') !default;
-$border-color: props.def(--o-dialog--border-color, props.get(core.$theme, --border-mute), 'color') !default;
+$bg-color: props.def(--o-dialog--bg-color, props.get(core.$theme, --bg-l1), "color") !default;
+$border-color: props.def(
+        --o-dialog--border-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index d81284b..f082d12 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,38 +1,38 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "../core.vars" as core;
 
-@forward 'divider.vars';
-@use 'divider.vars' as vars;
+@forward "divider.vars";
+@use "divider.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('divider') {
-                display:          flex;
-                flex:             0 0 auto;
-                flex-direction:   row;
-                align-items:      center;
-                block-size:       1em;
-                margin-block:     props.get(vars.$margin-b);
-                font-size:        props.get(vars.$strong--label-font-size);
-                font-weight:      700;
-                line-height:      1;
-                color:            props.get(vars.$strong--label-color);
-                text-transform:   uppercase;
-                letter-spacing:   props.get(vars.$letter-spacing);
+        @include bem.object("divider") {
+                display: flex;
+                flex: 0 0 auto;
+                flex-direction: row;
+                align-items: center;
+                block-size: 1em;
+                margin-block: props.get(vars.$margin-b);
+                font-size: props.get(vars.$strong--label-font-size);
+                font-weight: 700;
+                line-height: 1;
+                color: props.get(vars.$strong--label-color);
+                text-transform: uppercase;
+                letter-spacing: props.get(vars.$letter-spacing);
                 background-color: transparent;
 
                 &::before,
                 &::after {
-                        flex:             1 1 auto;
-                        inline-size:      100%;
-                        block-size:       props.get(vars.$strong--border-width);
-                        content:          '';
+                        flex: 1 1 auto;
+                        inline-size: 100%;
+                        block-size: props.get(vars.$strong--border-width);
+                        content: "";
                         background-color: props.get(vars.$strong--bg-color);
                 }
 
@@ -40,15 +40,15 @@
                         display: block;
                 }
 
-                @include bem.elem('label') {
+                @include bem.elem("label") {
                         flex: 0 0 auto;
                 }
 
-                @include bem.modifier('vertical') {
-                        align-self:       stretch;
-                        inline-size:      props.get(vars.$vertical--border-width);
-                        block-size:       auto;
-                        margin-block:     0;
+                @include bem.modifier("vertical") {
+                        align-self: stretch;
+                        inline-size: props.get(vars.$vertical--border-width);
+                        block-size: auto;
+                        margin-block: 0;
                         background-color: props.get(vars.$strong--bg-color);
 
                         &::before,
@@ -57,13 +57,13 @@
                         }
                 }
 
-                @include bem.modifier('dot') {
-                        align-self:       center;
-                        inline-size:      props.get(vars.$dot--size);
-                        block-size:       props.get(vars.$dot--size);
-                        margin-block:     0;
+                @include bem.modifier("dot") {
+                        align-self: center;
+                        inline-size: props.get(vars.$dot--size);
+                        block-size: props.get(vars.$dot--size);
+                        margin-block: 0;
                         background-color: props.get(vars.$strong--bg-color);
-                        border-radius:    props.get(vars.$dot--size);
+                        border-radius: props.get(vars.$dot--size);
 
                         &::before,
                         &::after {
@@ -71,73 +71,73 @@
                         }
                 }
 
-                @include bem.modifier('medium') {
-                        font-size:   props.get(vars.$medium--label-font-size);
+                @include bem.modifier("medium") {
+                        font-size: props.get(vars.$medium--label-font-size);
                         font-weight: 500;
-                        color:       props.get(vars.$medium--label-color);
+                        color: props.get(vars.$medium--label-color);
 
                         &::before,
                         &::after {
-                                block-size:       props.get(vars.$medium--border-width);
+                                block-size: props.get(vars.$medium--border-width);
                                 background-color: props.get(vars.$medium--bg-color);
                         }
 
-                        @include bem.modifier('vertical') {
+                        @include bem.modifier("vertical") {
                                 background-color: props.get(vars.$medium--bg-color);
                         }
 
-                        @include bem.modifier('dot') {
+                        @include bem.modifier("dot") {
                                 background-color: props.get(vars.$medium--bg-color);
                         }
                 }
 
-                @include bem.modifier('quiet') {
-                        font-size:   props.get(vars.$quiet--label-font-size);
+                @include bem.modifier("quiet") {
+                        font-size: props.get(vars.$quiet--label-font-size);
                         font-weight: 500;
-                        color:       props.get(vars.$quiet--label-color);
+                        color: props.get(vars.$quiet--label-color);
 
                         &::before,
                         &::after {
-                                block-size:       props.get(vars.$quiet--border-width);
+                                block-size: props.get(vars.$quiet--border-width);
                                 background-color: props.get(vars.$quiet--bg-color);
                         }
 
-                        @include bem.modifier('vertical') {
+                        @include bem.modifier("vertical") {
                                 background-color: props.get(vars.$vertical--quiet--bg-color);
                         }
 
-                        @include bem.modifier('dot') {
+                        @include bem.modifier("dot") {
                                 background-color: props.get(vars.$dot--quiet--bg-color);
                         }
                 }
 
-                @include bem.modifier('faint') {
-                        font-size:   props.get(vars.$faint--label-font-size);
+                @include bem.modifier("faint") {
+                        font-size: props.get(vars.$faint--label-font-size);
                         font-weight: 500;
-                        color:       props.get(vars.$faint--label-color);
+                        color: props.get(vars.$faint--label-color);
 
                         &::before,
                         &::after {
-                                block-size:       props.get(vars.$faint--border-width);
+                                block-size: props.get(vars.$faint--border-width);
                                 background-color: props.get(vars.$faint--bg-color);
                         }
 
-                        @include bem.modifier('vertical') {
+                        @include bem.modifier("vertical") {
                                 background-color: props.get(vars.$vertical--quiet--bg-color);
                         }
 
-                        @include bem.modifier('dot') {
+                        @include bem.modifier("dot") {
                                 background-color: props.get(vars.$dot--quiet--bg-color);
                         }
                 }
 
-                @include bem.modifier('labelled') {
+                @include bem.modifier("labelled") {
                         &::before {
                                 margin-inline-end: 1em;
                         }
 
                         &::after {
-                                display:             block;
+                                display: block;
                                 margin-inline-start: 1em;
                         }
                 }
@@ -149,7 +149,7 @@
                                         background-color: props.get(vars.$themes, $theme, --bg);
                                 }
 
-                                @include bem.elem('label') {
+                                @include bem.elem("label") {
                                         color: props.get(vars.$themes, $theme, --label);
                                 }
                         }
@@ -162,39 +162,39 @@
                                         background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
                                 }
 
-                                @include bem.elem('label') {
+                                @include bem.elem("label") {
                                         color: props.get(vars.$static-themes, $theme, --strong, --label);
                                 }
 
-                                @include bem.modifier('medium') {
+                                @include bem.modifier("medium") {
                                         &::before,
                                         &::after {
                                                 background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
                                         }
 
-                                        @include bem.elem('label') {
+                                        @include bem.elem("label") {
                                                 color: props.get(vars.$static-themes, $theme, --medium, --label);
                                         }
                                 }
 
-                                @include bem.modifier('quiet') {
+                                @include bem.modifier("quiet") {
                                         &::before,
                                         &::after {
                                                 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
                                         }
 
-                                        @include bem.elem('label') {
+                                        @include bem.elem("label") {
                                                 color: props.get(vars.$static-themes, $theme, --quiet, --label);
                                         }
                                 }
 
-                                @include bem.modifier('faint') {
+                                @include bem.modifier("faint") {
                                         &::before,
                                         &::after {
                                                 background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
                                         }
 
-                                        @include bem.elem('label') {
+                                        @include bem.elem("label") {
                                                 color: props.get(vars.$static-themes, $theme, --faint, --label);
                                         }
                                 }
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index a8b0f9f..38224d4 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -1,80 +1,153 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$margin-b:               props.def(--o-divider--size, props.get(core.$size--85)) !default;
-$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default;
-$dot--size:              props.def(--o-divider--dot--size, props.get(core.$size--50)) !default;
-$letter-spacing:         props.def(--o-divider--letter-spacing, 1px) !default;
+$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
+$vertical--border-width: props.def(
+        --o-divider--vertical--width,
+        props.get(core.$border-width--thin)
+) !default;
+$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default;
+$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !default;
 
-$strong--border-width:    props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default;
-$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default;
+$strong--border-width: props.def(
+        --o-divider--strong--border-width,
+        props.get(core.$border-width--thick)
+) !default;
+$strong--label-font-size: props.def(
+        --o-divider--strong--label-font-size,
+        props.get(core.$font-size--100)
+) !default;
 
-$medium--border-width:    props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default;
-$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default;
+$medium--border-width: props.def(
+        --o-divider--medium--border-width,
+        props.get(core.$border-width--medium)
+) !default;
+$medium--label-font-size: props.def(
+        --o-divider--medium--label-font-size,
+        props.get(core.$font-size--75)
+) !default;
 
-$quiet--border-width:    props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default;
-$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default;
+$quiet--border-width: props.def(
+        --o-divider--quiet--border-width,
+        props.get(core.$border-width--thin)
+) !default;
+$quiet--label-font-size: props.def(
+        --o-divider--quiet--label-font-size,
+        props.get(core.$font-size--50)
+) !default;
 
-$faint--border-width:    props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default;
-$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default;
+$faint--border-width: props.def(
+        --o-divider--faint--border-width,
+        props.get(core.$border-width--thin)
+) !default;
+$faint--label-font-size: props.def(
+        --o-divider--faint--label-font-size,
+        props.get(core.$font-size--50)
+) !default;
 
-$strong--bg-color:    props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text), 'color') !default;
-$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text), 'color') !default;
+$strong--bg-color: props.def(
+        --o-divider--strong--bg-color,
+        props.get(core.$theme, --text),
+        "color"
+) !default;
+$strong--label-color: props.def(
+        --o-divider--strong--label-color,
+        props.get(core.$theme, --text),
+        "color"
+) !default;
 
-$medium--bg-color:    props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default;
-$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default;
+$medium--bg-color: props.def(
+        --o-divider--medium--bg-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
+$medium--label-color: props.def(
+        --o-divider--medium--label-color,
+        props.get(core.$theme, --text-mute),
+        "color"
+) !default;
 
-$quiet--bg-color:    props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default;
-$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$quiet--bg-color: props.def(
+        --o-divider--quiet--bg-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
+$quiet--label-color: props.def(
+        --o-divider--quiet--label-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
 
-$faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
-$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
+$faint--bg-color: props.def(
+        --o-divider--faint--bg-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;
+$faint--label-color: props.def(
+        --o-divider--faint--label-color,
+        props.get(core.$theme, --text-disabled),
+        "color"
+) !default;
 
-$vertical--quiet--bg-color:    props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$vertical--quiet--bg-color: props.def(
+        --o-divider--vertical--quiet--bg-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;
 
-$dot--quiet--bg-color:    props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$dot--quiet--bg-color: props.def(
+        --o-divider--dot--quiet--bg-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;
 
-$static-themes: props.def(--o-divider, (), 'color');
+$static-themes: props.def(--o-divider, (), "color");
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
         $button-theme: --static-#{string.slice($theme, 3)};
 
-        $static-themes: props.merge($static-themes, (
-                $button-theme: (
-                        --strong: (
-                                --bg:    props.get(core.$transparent-colors, $theme, --800),
-                                --label: props.get(core.$transparent-colors, $theme, --900),
-                        ),
-                        --medium: (
-                                --bg:    props.get(core.$transparent-colors, $theme, --300),
-                                --label: props.get(core.$transparent-colors, $theme, --500),
-                        ),
-                        --quiet: (
-                                --bg:    props.get(core.$transparent-colors, $theme, --300),
-                                --label: props.get(core.$transparent-colors, $theme, --500),
-                        ),
-                        --faint: (
-                                --bg:    props.get(core.$transparent-colors, $theme, --200),
-                                --label: props.get(core.$transparent-colors, $theme, --400),
-                        ),
+        $static-themes: props.merge(
+                $static-themes,
+                (
+                        $button-theme: (
+                                        --strong: (
+                                                        --bg: props.get(core.$transparent-colors, $theme, --800),
+                                                        --label: props.get(core.$transparent-colors, $theme, --900),
+                                                ),
+                                        --medium: (
+                                                        --bg: props.get(core.$transparent-colors, $theme, --300),
+                                                        --label: props.get(core.$transparent-colors, $theme, --500),
+                                                ),
+                                        --quiet: (
+                                                        --bg: props.get(core.$transparent-colors, $theme, --300),
+                                                        --label: props.get(core.$transparent-colors, $theme, --500),
+                                                ),
+                                        --faint: (
+                                                        --bg: props.get(core.$transparent-colors, $theme, --200),
+                                                        --label: props.get(core.$transparent-colors, $theme, --400),
+                                                ),
+                                ),
                 )
-        ));
+        );
 }
 
 $themes-config: (
-        accent:   --accent,
+        accent: --accent,
         negative: --negative,
 ) !default;
 
-$themes: props.def(--o-divider, (), 'color');
+$themes: props.def(--o-divider, (), "color");
 
 @each $theme, $key in $themes-config {
-        $themes: props.merge($themes, (
-                --#{$theme}: (
-                        --bg:    props.get(core.$theme, $key, --800),
-                        --label: props.get(core.$theme, $key, --1000),
+        $themes: props.merge(
+                $themes,
+                (
+                        --#{$theme}: (
+                                        --bg: props.get(core.$theme, $key, --800),
+                                        --label: props.get(core.$theme, $key, --1000),
+                                )
                 )
-        ));
+        );
 }
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 655e662..0257b32 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,49 +1,55 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use 'icon.vars' as icon;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "icon.vars" as icon;
 
-@forward 'emoji.vars';
-@use 'emoji.vars' as vars;
+@forward "emoji.vars";
+@use "emoji.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('emoji') {
-                position:       relative;
-                display:        inline-block;
-                inline-size:    calc(props.get(vars.$size));
-                block-size:     calc(props.get(vars.$size));
-                padding:        calc(props.get(vars.$pad));
-                margin:         calc(-1 * props.get(vars.$pad));
+        @include bem.object("emoji") {
+                position: relative;
+                display: inline-block;
+                inline-size: calc(props.get(vars.$size));
+                block-size: calc(props.get(vars.$size));
+                padding: calc(props.get(vars.$pad));
+                margin: calc(-1 * props.get(vars.$pad));
                 vertical-align: props.get(vars.$valign);
-                object-fit:     contain;
+                object-fit: contain;
 
-                @include bem.modifier('icon') {
-                        margin:         calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size)));
+                @include bem.modifier("icon") {
+                        margin: calc(
+                                -1 * props.get(vars.$pad) - 0.5 * (props.get(vars.$size) - props.get(icon.$size))
+                        );
                         vertical-align: props.get(icon.$valign);
                 }
 
                 @each $mod, $size, $valign in vars.$sizes {
                         @include bem.modifier($mod) {
-                                inline-size:    props.get($size);
-                                block-size:     props.get($size);
+                                inline-size: props.get($size);
+                                block-size: props.get($size);
                                 vertical-align: props.get($valign);
 
-                                @include bem.modifier('icon') {
-                                        margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
+                                @include bem.modifier("icon") {
+                                        margin: calc(
+                                                -1 * props.get(vars.$pad) - 0.5 * (props.get($size) - props.get(icon.$size))
+                                        );
                                 }
                         }
                 }
 
-                @include bem.modifier('zoomable') {
+                @include bem.modifier("zoomable") {
                         border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
-                        transition:    transform .2s ease, background-color .2s ease;
+                        transition:
+                                transform 0.2s ease,
+                                background-color 0.2s ease;
 
                         &:hover {
                                 background-color: props.get(vars.$bg-color);
-                                transform:        scale(props.get(vars.$zoom));
+                                transform: scale(props.get(vars.$zoom));
                         }
                 }
         }
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss
index cf940cf..1c2a0e2 100644
--- a/src/objects/_emoji.vars.scss
+++ b/src/objects/_emoji.vars.scss
@@ -1,26 +1,26 @@
-@use 'sass:map';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$size:     props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
-$pad:      props.def(--o-emoji--pad, .3em) !default;
+$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
+$pad: props.def(--o-emoji--pad, 0.3em) !default;
 $rounding: props.def(--o-emoji--rounding, props.get(core.$rounding--sm)) !default;
-$zoom:     props.def(--o-emoji--zoom, 3) !default;
-$valign:   props.def(--o-emoji--valign, -.25em) !default;
+$zoom: props.def(--o-emoji--zoom, 3) !default;
+$valign: props.def(--o-emoji--valign, -0.25em) !default;
 
-$size--125:   props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default;
-$valign--125: props.def(--o-emoji--125--valign, -.45em) !default;
+$size--125: props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default;
+$valign--125: props.def(--o-emoji--125--valign, -0.45em) !default;
 
-$size--150:   props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default;
-$valign--150: props.def(--o-emoji--150--valign, -.65em) !default;
+$size--150: props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default;
+$valign--150: props.def(--o-emoji--150--valign, -0.65em) !default;
 
-$size--200:   props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default;
+$size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default;
 $valign--200: props.def(--o-emoji--200--valign, -1em) !default;
 
 $sizes: (
-        '125' $size--125 $valign--125,
-        '150' $size--150 $valign--150,
-        '200' $size--200 $valign--200,
+        "125" $size--125 $valign--125,
+        "150" $size--150 $valign--150,
+        "200" $size--200 $valign--200
 ) !default;
 
-$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), "color") !default;
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 23875f5..fb664b4 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,74 +1,74 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'field-label.vars';
-@use 'field-label.vars' as vars;
+@forward "field-label.vars";
+@use "field-label.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('field-label') {
-                @include bem.elem('label') {
-                        display:            block;
-                        flex:               0 0 auto;
+        @include bem.object("field-label") {
+                @include bem.elem("label") {
+                        display: block;
+                        flex: 0 0 auto;
                         padding-inline-end: props.get(vars.$spacing-i);
-                        font-size:          props.get(vars.$label-font-size);
-                        font-weight:        400;
-                        line-height:        1.3;
-                        color:              props.get(vars.$label-color);
+                        font-size: props.get(vars.$label-font-size);
+                        font-weight: 400;
+                        line-height: 1.3;
+                        color: props.get(vars.$label-color);
 
-                        @include bem.next-elem('content') {
+                        @include bem.next-elem("content") {
                                 margin-block-start: props.get(vars.$spacing-b);
                         }
                 }
 
-                @include bem.elem('content') {
+                @include bem.elem("content") {
                         display: block;
-                        flex:    1 1 auto;
+                        flex: 1 1 auto;
                 }
 
-                @include bem.elem('hint') {
-                        display:            block;
+                @include bem.elem("hint") {
+                        display: block;
                         margin-block-start: props.get(vars.$spacing-b);
-                        font-size:          props.get(vars.$hint-font-size);
-                        color:              props.get(vars.$hint-color);
+                        font-size: props.get(vars.$hint-font-size);
+                        color: props.get(vars.$hint-color);
                 }
 
-                @include bem.is('invalid') {
-                        @include bem.elem('hint') {
+                @include bem.is("invalid") {
+                        @include bem.elem("hint") {
                                 color: props.get(vars.$error-hint-color);
                         }
                 }
 
-                @include bem.is('disabled') {
-                        @include bem.elem('label', 'hint') {
+                @include bem.is("disabled") {
+                        @include bem.elem("label", "hint") {
                                 color: props.get(vars.$disabled-color);
                         }
                 }
 
-                @include bem.modifier('align-start', 'align-end') {
-                        display:     flex;
+                @include bem.modifier("align-start", "align-end") {
+                        display: flex;
                         align-items: baseline;
 
-                        @include bem.elem('label') {
+                        @include bem.elem("label") {
                                 display: inline-block;
 
-                                @include bem.next-elem('content') {
+                                @include bem.next-elem("content") {
                                         margin-block-start: 0;
                                 }
                         }
                 }
 
-                @include bem.modifier('align-start') {
-                        @include bem.elem('label') {
+                @include bem.modifier("align-start") {
+                        @include bem.elem("label") {
                                 text-align: start;
                         }
                 }
 
-                @include bem.modifier('align-end') {
-                        @include bem.elem('label') {
+                @include bem.modifier("align-end") {
+                        @include bem.elem("label") {
                                 text-align: end;
                         }
                 }
diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss
index 5bd4547..4588e70 100644
--- a/src/objects/_field-label.vars.scss
+++ b/src/objects/_field-label.vars.scss
@@ -1,12 +1,34 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$spacing-i:       props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default;
-$spacing-b:       props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default;
-$label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default;
-$hint-font-size:  props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default;
+$spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default;
+$spacing-b: props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default;
+$label-font-size: props.def(
+        --o-field-label--label-font-size,
+        props.get(core.$font-size--75)
+) !default;
+$hint-font-size: props.def(
+        --o-field-label--hint-font-size,
+        props.get(core.$font-size--75)
+) !default;
 
-$label-color:      props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute), 'color') !default;
-$hint-color:       props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute), 'color') !default;
-$error-hint-color: props.def(--o-field-label--error-hint-color, props.get(core.$theme, --negative, --900), 'color') !default;
-$disabled-color:   props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled), 'color') !default;
+$label-color: props.def(
+        --o-field-label--label-color,
+        props.get(core.$theme, --text-mute),
+        "color"
+) !default;
+$hint-color: props.def(
+        --o-field-label--hint-color,
+        props.get(core.$theme, --text-mute),
+        "color"
+) !default;
+$error-hint-color: props.def(
+        --o-field-label--error-hint-color,
+        props.get(core.$theme, --negative, --900),
+        "color"
+) !default;
+$disabled-color: props.def(
+        --o-field-label--disabled-color,
+        props.get(core.$theme, --text-disabled),
+        "color"
+) !default;
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss
index 04b9bdf..d3e37b3 100644
--- a/src/objects/_figure.scss
+++ b/src/objects/_figure.scss
@@ -1,25 +1,25 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'figure.vars';
-@use 'figure.vars' as vars;
+@forward "figure.vars";
+@use "figure.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('figure') {
-                @include bem.elem('caption') {
-                        padding-block:    props.get(vars.$pad-b);
-                        font-size:        props.get(vars.$font-size);
-                        color:            props.get(vars.$text-color);
+        @include bem.object("figure") {
+                @include bem.elem("caption") {
+                        padding-block: props.get(vars.$pad-b);
+                        font-size: props.get(vars.$font-size);
+                        color: props.get(vars.$text-color);
                         border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color);
 
                         &::before {
-                                display:       block;
-                                margin-block:  -100em 100em;
-                                content:       '';
+                                display: block;
+                                margin-block: -100em 100em;
+                                content: "";
                         }
                 }
         }
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss
index 3de3406..936932d 100644
--- a/src/objects/_figure.vars.scss
+++ b/src/objects/_figure.vars.scss
@@ -1,9 +1,17 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$pad-b:        props.def(--o-figure--pad-b, props.get(core.$size--100)) !default;
+$pad-b: props.def(--o-figure--pad-b, props.get(core.$size--100)) !default;
 $border-width: props.def(--o-figure--border-width, props.get(core.$border-width--thin)) !default;
-$font-size:    props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default;
+$font-size: props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default;
 
-$text-color:   props.def(--o-figure--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
-$border-color: props.def(--o-figure--border-color, props.get(core.$theme, --border), 'color') !default;
+$text-color: props.def(
+        --o-figure--text-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
+$border-color: props.def(
+        --o-figure--border-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 0e8392e..87a6269 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,64 +1,70 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'heading.vars';
-@use 'heading.vars' as vars;
+@forward "heading.vars";
+@use "heading.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('heading') {
-                display:               block;
-                margin-block-start:    props.get(vars.$margin-bs);
-                font-family:           props.get(vars.$font-family);
-                font-weight:           props.get(vars.$font-weight);
+        @include bem.object("heading") {
+                display: block;
+                margin-block-start: props.get(vars.$margin-bs);
+                font-family: props.get(vars.$font-family);
+                font-weight: props.get(vars.$font-weight);
                 font-feature-settings: props.get(vars.$feature-settings);
-                line-height:           props.get(vars.$line-height);
-                color:                 props.get(vars.$text-color);
-                text-transform:        props.get(vars.$text-transform);
-                letter-spacing:        normal;
+                line-height: props.get(vars.$line-height);
+                color: props.get(vars.$text-color);
+                text-transform: props.get(vars.$text-transform);
+                letter-spacing: normal;
 
                 & + & {
                         margin-block-start: props.get(vars.$margin-bs-sibling);
                 }
 
-                @include bem.elem('highlight') {
-                        background-image: linear-gradient(to top,
-                        transparent               props.get(vars.$bg-start),
-                        props.get(vars.$bg-color) props.get(vars.$bg-start),
-                        props.get(vars.$bg-color) props.get(vars.$bg-end),
-                        transparent               props.get(vars.$bg-end));
+                @include bem.elem("highlight") {
+                        background-image: linear-gradient(
+                                to top,
+                                transparent props.get(vars.$bg-start),
+                                props.get(vars.$bg-color) props.get(vars.$bg-start),
+                                props.get(vars.$bg-color) props.get(vars.$bg-end),
+                                transparent props.get(vars.$bg-end)
+                        );
                 }
 
-                @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$sizes {
+                @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing,
+                        $feature-settings, $text-transform, $text-color in vars.$sizes
+                {
                         @include bem.modifier($mod) {
-                                font-family:           props.get($font-family);
-                                font-size:             props.get($font-size);
-                                font-weight:           props.get($font-weight);
+                                font-family: props.get($font-family);
+                                font-size: props.get($font-size);
+                                font-weight: props.get($font-weight);
                                 font-feature-settings: props.get($feature-settings);
-                                line-height:           props.get($line-height);
-                                color:                 props.get($text-color);
-                                text-transform:        props.get($text-transform);
-                                letter-spacing:        props.get($letter-spacing);
+                                line-height: props.get($line-height);
+                                color: props.get($text-color);
+                                text-transform: props.get($text-transform);
+                                letter-spacing: props.get($letter-spacing);
                         }
                 }
 
-                @include bem.modifier('display') {
-                        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in vars.$display--sizes {
+                @include bem.modifier("display") {
+                        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing,
+                                $feature-settings, $text-transform, $text-color in vars.$display--sizes
+                        {
                                 @include bem.modifier($mod) {
-                                        font-family:           props.get($font-family);
-                                        font-size:             props.get($font-size);
-                                        font-weight:           props.get($font-weight);
+                                        font-family: props.get($font-family);
+                                        font-size: props.get($font-size);
+                                        font-weight: props.get($font-weight);
                                         font-feature-settings: props.get($feature-settings);
-                                        line-height:           props.get($line-height);
-                                        color:                 props.get($text-color);
-                                        text-transform:        props.get($text-transform);
-                                        letter-spacing:        props.get($letter-spacing);
-                                        transform:             translateX(props.get(vars.$offset));
+                                        line-height: props.get($line-height);
+                                        color: props.get($text-color);
+                                        text-transform: props.get($text-transform);
+                                        letter-spacing: props.get($letter-spacing);
+                                        transform: translateX(props.get(vars.$offset));
                                 }
                         }
                 }
@@ -73,18 +79,26 @@
                                         }
                                 }
 
-                                @include bem.elem('highlight') {
-                                        background-image: linear-gradient(to top,
-                                        transparent                                        props.get(vars.$bg-start),
-                                        props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start),
-                                        props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end),
-                                        transparent                                        props.get(vars.$bg-end));
+                                @include bem.elem("highlight") {
+                                        background-image: linear-gradient(
+                                                to top,
+                                                transparent props.get(vars.$bg-start),
+                                                props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-start),
+                                                props.get(vars.$static-themes, $theme, --bg-color) props.get(vars.$bg-end),
+                                                transparent props.get(vars.$bg-end)
+                                        );
                                 }
 
-                                @include bem.modifier('display') {
+                                @include bem.modifier("display") {
                                         @each $mod, $value in vars.$sizes {
                                                 @include bem.modifier($mod) {
-                                                        color: props.get(vars.$static-themes, $theme, --display, --#{$mod}, --text-color);
+                                                        color: props.get(
+                                                                vars.$static-themes,
+                                                                $theme,
+                                                                --display,
+                                                                --#{$mod},
+                                                                --text-color
+                                                        );
                                                 }
                                         }
                                 }
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index 4267b8c..8943622 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -1,208 +1,472 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$offset:            props.def(--o-heading--offset, -.02em) !default;
-$margin-bs:         props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default;
+$offset: props.def(--o-heading--offset, -0.02em) !default;
+$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default;
 $margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default;
 
-$text-color:     props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default;
-$bg-color:       props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
+$text-color: props.def(
+        --o-heading--text-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
+$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), "color") !default;
 
-$text-color--xxl: props.def(--o-heading--xxl--text-color, props.get(core.$theme, --heading), 'color') !default;
-$text-color--xl:  props.def(--o-heading--xl--text-color, props.get($text-color--xxl), 'color') !default;
-$text-color--lg:  props.def(--o-heading--lg--text-color, props.get($text-color--xxl), 'color') !default;
-$text-color--md:  props.def(--o-heading--md--text-color, props.get($text-color--xxl), 'color') !default;
-$text-color--sm:  props.def(--o-heading--sm--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
-$text-color--xs:  props.def(--o-heading--xs--text-color, props.get($text-color--sm), 'color') !default;
+$text-color--xxl: props.def(
+        --o-heading--xxl--text-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
+$text-color--xl: props.def(
+        --o-heading--xl--text-color,
+        props.get($text-color--xxl),
+        "color"
+) !default;
+$text-color--lg: props.def(
+        --o-heading--lg--text-color,
+        props.get($text-color--xxl),
+        "color"
+) !default;
+$text-color--md: props.def(
+        --o-heading--md--text-color,
+        props.get($text-color--xxl),
+        "color"
+) !default;
+$text-color--sm: props.def(
+        --o-heading--sm--text-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
+$text-color--xs: props.def(
+        --o-heading--xs--text-color,
+        props.get($text-color--sm),
+        "color"
+) !default;
 
-$display--text-color--xxl: props.def(--o-heading--display--xxl--text-color, props.get(core.$theme, --heading), 'color') !default;
-$display--text-color--xl:  props.def(--o-heading--display--xl--text-color, props.get($display--text-color--xxl), 'color') !default;
-$display--text-color--lg:  props.def(--o-heading--display--lg--text-color, props.get($display--text-color--xxl), 'color') !default;
-$display--text-color--md:  props.def(--o-heading--display--md--text-color, props.get($display--text-color--xxl), 'color') !default;
-$display--text-color--sm:  props.def(--o-heading--display--sm--text-color, props.get($display--text-color--xxl), 'color') !default;
-$display--text-color--xs:  props.def(--o-heading--display--xs--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$display--text-color--xxl: props.def(
+        --o-heading--display--xxl--text-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
+$display--text-color--xl: props.def(
+        --o-heading--display--xl--text-color,
+        props.get($display--text-color--xxl),
+        "color"
+) !default;
+$display--text-color--lg: props.def(
+        --o-heading--display--lg--text-color,
+        props.get($display--text-color--xxl),
+        "color"
+) !default;
+$display--text-color--md: props.def(
+        --o-heading--display--md--text-color,
+        props.get($display--text-color--xxl),
+        "color"
+) !default;
+$display--text-color--sm: props.def(
+        --o-heading--display--sm--text-color,
+        props.get($display--text-color--xxl),
+        "color"
+) !default;
+$display--text-color--xs: props.def(
+        --o-heading--display--xs--text-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
 
-$bg-start: props.def(--o-heading--bg-start, .05em) !default;
-$bg-end:   props.def(--o-heading--bg-end, .5em) !default;
+$bg-start: props.def(--o-heading--bg-start, 0.05em) !default;
+$bg-end: props.def(--o-heading--bg-end, 0.5em) !default;
 
-$font-family:      props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default;
-$line-height:      props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default;
-$font-weight:      props.def(--o-heading--font-weight, bold) !default;
-$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
-$text-transform:   props.def(--o-heading--text-transform, none) !default;
+$font-family: props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default;
+$line-height: props.def(
+        --o-heading--line-height,
+        props.get(core.$font--standard--line-height)
+) !default;
+$font-weight: props.def(--o-heading--font-weight, bold) !default;
+$feature-settings: props.def(
+        --o-heading--feature-settings,
+        props.get(core.$font--standard--feature-settings)
+) !default;
+$text-transform: props.def(--o-heading--text-transform, none) !default;
 
-$font-family--xxl:      props.def(--o-heading--xxl--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--xxl:      props.def(--o-heading--xxl--line-height, props.get(core.$font--standard--line-height)) !default;
-$font-size--xxl:        props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default;
-$font-weight--xxl:      props.def(--o-heading--xxl--font-weight, bold) !default;
-$letter-spacing--xxl:   props.def(--o-heading--xxl--letter-spacing, 0) !default;
-$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
-$text-transform--xxl:   props.def(--o-heading--xxl--text-transform, none) !default;
+$font-family--xxl: props.def(
+        --o-heading--xxl--font-family,
+        props.get(core.$font--standard--family)
+) !default;
+$line-height--xxl: props.def(
+        --o-heading--xxl--line-height,
+        props.get(core.$font--standard--line-height)
+) !default;
+$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default;
+$font-weight--xxl: props.def(--o-heading--xxl--font-weight, bold) !default;
+$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default;
+$feature-settings--xxl: props.def(
+        --o-heading--xxl--feature-settings,
+        props.get(core.$font--standard--feature-settings)
+) !default;
+$text-transform--xxl: props.def(--o-heading--xxl--text-transform, none) !default;
 
-$font-family--xl:      props.def(--o-heading--xl--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--xl:      props.def(--o-heading--xl--line-height, props.get(core.$font--standard--line-height)) !default;
-$font-size--xl:        props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default;
-$font-weight--xl:      props.def(--o-heading--xl--font-weight, bold) !default;
-$letter-spacing--xl:   props.def(--o-heading--xl--letter-spacing, 0) !default;
-$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
-$text-transform--xl:   props.def(--o-heading--xl--text-transform, none) !default;
+$font-family--xl: props.def(
+        --o-heading--xl--font-family,
+        props.get(core.$font--standard--family)
+) !default;
+$line-height--xl: props.def(
+        --o-heading--xl--line-height,
+        props.get(core.$font--standard--line-height)
+) !default;
+$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default;
+$font-weight--xl: props.def(--o-heading--xl--font-weight, bold) !default;
+$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default;
+$feature-settings--xl: props.def(
+        --o-heading--xl--feature-settings,
+        props.get(core.$font--standard--feature-settings)
+) !default;
+$text-transform--xl: props.def(--o-heading--xl--text-transform, none) !default;
 
-$font-family--lg:      props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--lg:      props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default;
-$font-size--lg:        props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default;
-$font-weight--lg:      props.def(--o-heading--lg--font-weight, bold) !default;
-$letter-spacing--lg:   props.def(--o-heading--lg--letter-spacing, 0) !default;
-$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
-$text-transform--lg:   props.def(--o-heading--lg--text-transform, none) !default;
+$font-family--lg: props.def(
+        --o-heading--lg--font-family,
+        props.get(core.$font--standard--family)
+) !default;
+$line-height--lg: props.def(
+        --o-heading--lg--line-height,
+        props.get(core.$font--standard--line-height)
+) !default;
+$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default;
+$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default;
+$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default;
+$feature-settings--lg: props.def(
+        --o-heading--lg--feature-settings,
+        props.get(core.$font--standard--feature-settings)
+) !default;
+$text-transform--lg: props.def(--o-heading--lg--text-transform, none) !default;
 
-$font-family--md:      props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--md:      props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default;
-$font-size--md:        props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default;
-$font-weight--md:      props.def(--o-heading--md--font-weight, bold) !default;
-$letter-spacing--md:   props.def(--o-heading--md--letter-spacing, 0) !default;
-$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
-$text-transform--md:   props.def(--o-heading--md--text-transform, none) !default;
+$font-family--md: props.def(
+        --o-heading--md--font-family,
+        props.get(core.$font--standard--family)
+) !default;
+$line-height--md: props.def(
+        --o-heading--md--line-height,
+        props.get(core.$font--standard--line-height)
+) !default;
+$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default;
+$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default;
+$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default;
+$feature-settings--md: props.def(
+        --o-heading--md--feature-settings,
+        props.get(core.$font--standard--feature-settings)
+) !default;
+$text-transform--md: props.def(--o-heading--md--text-transform, none) !default;
 
-$font-family--sm:      props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--sm:      props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default;
-$font-size--sm:        props.def(--o-heading--sm--font-size, props.get(core.$font-size--100)) !default;
-$font-weight--sm:      props.def(--o-heading--sm--font-weight, normal) !default;
-$letter-spacing--sm:   props.def(--o-heading--sm--letter-spacing, 0) !default;
-$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
-$text-transform--sm:   props.def(--o-heading--sm--text-transform, none) !default;
+$font-family--sm: props.def(
+        --o-heading--sm--font-family,
+        props.get(core.$font--standard--family)
+) !default;
+$line-height--sm: props.def(
+        --o-heading--sm--line-height,
+        props.get(core.$font--standard--line-height)
+) !default;
+$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--100)) !default;
+$font-weight--sm: props.def(--o-heading--sm--font-weight, normal) !default;
+$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 0) !default;
+$feature-settings--sm: props.def(
+        --o-heading--sm--feature-settings,
+        props.get(core.$font--standard--feature-settings)
+) !default;
+$text-transform--sm: props.def(--o-heading--sm--text-transform, none) !default;
 
-$font-family--xs:      props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--xs:      props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default;
-$font-size--xs:        props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
-$font-weight--xs:      props.def(--o-heading--xs--font-weight, normal) !default;
-$letter-spacing--xs:   props.def(--o-heading--xs--letter-spacing, 1px) !default;
-$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
-$text-transform--xs:   props.def(--o-heading--xs--text-transform, none) !default;
+$font-family--xs: props.def(
+        --o-heading--xs--font-family,
+        props.get(core.$font--standard--family)
+) !default;
+$line-height--xs: props.def(
+        --o-heading--xs--line-height,
+        props.get(core.$font--standard--line-height)
+) !default;
+$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
+$font-weight--xs: props.def(--o-heading--xs--font-weight, normal) !default;
+$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default;
+$feature-settings--xs: props.def(
+        --o-heading--xs--feature-settings,
+        props.get(core.$font--standard--feature-settings)
+) !default;
+$text-transform--xs: props.def(--o-heading--xs--text-transform, none) !default;
 
 $sizes: (
-        'xs'  $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs $text-transform--xs $text-color--xs,
-        'sm'  $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm $text-transform--sm $text-color--sm,
-        'md'  $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md $text-transform--md $text-color--md,
-        'lg'  $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg $text-transform--lg $text-color--lg,
-        'xl'  $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl $text-transform--xl $text-color--xl,
-        'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl $text-transform--xxl $text-color--xxl,
+        "xs" $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs
+                $feature-settings--xs $text-transform--xs $text-color--xs,
+        "sm" $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm
+                $feature-settings--sm $text-transform--sm $text-color--sm,
+        "md" $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md
+                $feature-settings--md $text-transform--md $text-color--md,
+        "lg" $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg
+                $feature-settings--lg $text-transform--lg $text-color--lg,
+        "xl" $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl
+                $feature-settings--xl $text-transform--xl $text-color--xl,
+        "xxl" $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl
+                $feature-settings--xxl $text-transform--xxl $text-color--xxl
 ) !default;
 
-$display--font-family--xxl:      props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
-$display--line-height--xxl:      props.def(--o-heading--display--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
-$display--font-size--xxl:        props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--1100)) !default;
-$display--font-weight--xxl:      props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
-$display--letter-spacing--xxl:   props.def(--o-heading--display--xxl--letter-spacing, 0) !default;
-$display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
-$display--text-transform--xxl:   props.def(--o-heading--display--xxl--text-transform, none) !default;
+$display--font-family--xxl: props.def(
+        --o-heading--display--xxl--font-family,
+        props.get(core.$font--headline--family)
+) !default;
+$display--line-height--xxl: props.def(
+        --o-heading--display--xxl--line-height,
+        props.get(core.$font--headline--line-height)
+) !default;
+$display--font-size--xxl: props.def(
+        --o-heading--display--xxl--font-size,
+        props.get(core.$font-size--1100)
+) !default;
+$display--font-weight--xxl: props.def(
+        --o-heading--display--xxl--font-weight,
+        props.get(core.$font--headline--weight)
+) !default;
+$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default;
+$display--feature-settings--xxl: props.def(
+        --o-heading--display--xxl--feature-settings,
+        props.get(core.$font--headline--feature-settings)
+) !default;
+$display--text-transform--xxl: props.def(--o-heading--display--xxl--text-transform, none) !default;
 
-$display--font-family--xl:      props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default;
-$display--line-height--xl:      props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default;
-$display--font-size--xl:        props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--700)) !default;
-$display--font-weight--xl:      props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default;
-$display--letter-spacing--xl:   props.def(--o-heading--display--xl--letter-spacing, 0) !default;
-$display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
-$display--text-transform--xl:   props.def(--o-heading--display--xl--text-transform, none) !default;
+$display--font-family--xl: props.def(
+        --o-heading--display--xl--font-family,
+        props.get(core.$font--headline--family)
+) !default;
+$display--line-height--xl: props.def(
+        --o-heading--display--xl--line-height,
+        props.get(core.$font--headline--line-height)
+) !default;
+$display--font-size--xl: props.def(
+        --o-heading--display--xl--font-size,
+        props.get(core.$font-size--700)
+) !default;
+$display--font-weight--xl: props.def(
+        --o-heading--display--xl--font-weight,
+        props.get(core.$font--headline--weight)
+) !default;
+$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default;
+$display--feature-settings--xl: props.def(
+        --o-heading--display--xl--feature-settings,
+        props.get(core.$font--headline--feature-settings)
+) !default;
+$display--text-transform--xl: props.def(--o-heading--display--xl--text-transform, none) !default;
 
-$display--font-family--lg:      props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default;
-$display--line-height--lg:      props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default;
-$display--font-size--lg:        props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default;
-$display--font-weight--lg:      props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default;
-$display--letter-spacing--lg:   props.def(--o-heading--display--lg--letter-spacing, 1px) !default;
-$display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
-$display--text-transform--lg:   props.def(--o-heading--display--lg--text-transform, uppercase) !default;
+$display--font-family--lg: props.def(
+        --o-heading--display--lg--font-family,
+        props.get(core.$font--headline--family)
+) !default;
+$display--line-height--lg: props.def(
+        --o-heading--display--lg--line-height,
+        props.get(core.$font--headline--line-height)
+) !default;
+$display--font-size--lg: props.def(
+        --o-heading--display--lg--font-size,
+        props.get(core.$font-size--300)
+) !default;
+$display--font-weight--lg: props.def(
+        --o-heading--display--lg--font-weight,
+        props.get(core.$font--headline--weight)
+) !default;
+$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 1px) !default;
+$display--feature-settings--lg: props.def(
+        --o-heading--display--lg--feature-settings,
+        props.get(core.$font--headline--feature-settings)
+) !default;
+$display--text-transform--lg: props.def(
+        --o-heading--display--lg--text-transform,
+        uppercase
+) !default;
 
-$display--font-family--md:      props.def(--o-heading--display--md--font-family, props.get(core.$font--standard--family)) !default;
-$display--line-height--md:      props.def(--o-heading--display--md--line-height, props.get(core.$font--standard--line-height)) !default;
-$display--font-size--md:        props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default;
-$display--font-weight--md:      props.def(--o-heading--display--md--font-weight, bold) !default;
-$display--letter-spacing--md:   props.def(--o-heading--display--md--letter-spacing, 0) !default;
-$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
-$display--text-transform--md:   props.def(--o-heading--display--md--text-transform, none) !default;
+$display--font-family--md: props.def(
+        --o-heading--display--md--font-family,
+        props.get(core.$font--standard--family)
+) !default;
+$display--line-height--md: props.def(
+        --o-heading--display--md--line-height,
+        props.get(core.$font--standard--line-height)
+) !default;
+$display--font-size--md: props.def(
+        --o-heading--display--md--font-size,
+        props.get(core.$font-size--150)
+) !default;
+$display--font-weight--md: props.def(--o-heading--display--md--font-weight, bold) !default;
+$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default;
+$display--feature-settings--md: props.def(
+        --o-heading--display--md--feature-settings,
+        props.get(core.$font--standard--feature-settings)
+) !default;
+$display--text-transform--md: props.def(--o-heading--display--md--text-transform, none) !default;
 
-$display--font-family--sm:      props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
-$display--line-height--sm:      props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default;
-$display--font-size--sm:        props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--100)) !default;
-$display--font-weight--sm:      props.def(--o-heading--display--sm--font-weight, bold) !default;
-$display--letter-spacing--sm:   props.def(--o-heading--display--sm--letter-spacing, 0) !default;
-$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
-$display--text-transform--sm:   props.def(--o-heading--display--sm--text-transform, none) !default;
+$display--font-family--sm: props.def(
+        --o-heading--display--sm--font-family,
+        props.get(core.$font--standard--family)
+) !default;
+$display--line-height--sm: props.def(
+        --o-heading--display--sm--line-height,
+        props.get(core.$font--standard--line-height)
+) !default;
+$display--font-size--sm: props.def(
+        --o-heading--display--sm--font-size,
+        props.get(core.$font-size--100)
+) !default;
+$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default;
+$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default;
+$display--feature-settings--sm: props.def(
+        --o-heading--display--sm--feature-settings,
+        props.get(core.$font--standard--feature-settings)
+) !default;
+$display--text-transform--sm: props.def(--o-heading--display--sm--text-transform, none) !default;
 
-$display--font-family--xs:      props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
-$display--line-height--xs:      props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default;
-$display--font-size--xs:        props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default;
-$display--font-weight--xs:      props.def(--o-heading--display--xs--font-weight, normal) !default;
-$display--letter-spacing--xs:   props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
-$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
-$display--text-transform--xs:   props.def(--o-heading--display--xs--text-transform, none) !default;
+$display--font-family--xs: props.def(
+        --o-heading--display--xs--font-family,
+        props.get(core.$font--standard--family)
+) !default;
+$display--line-height--xs: props.def(
+        --o-heading--display--xs--line-height,
+        props.get(core.$font--standard--line-height)
+) !default;
+$display--font-size--xs: props.def(
+        --o-heading--display--xs--font-size,
+        props.get(core.$font-size--50)
+) !default;
+$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, normal) !default;
+$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
+$display--feature-settings--xs: props.def(
+        --o-heading--display--xs--feature-settings,
+        props.get(core.$font--standard--feature-settings)
+) !default;
+$display--text-transform--xs: props.def(--o-heading--display--xs--text-transform, none) !default;
 
-$display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default;
-$display--font-size--xl--md:  props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default;
-$display--font-size--lg--md:  props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--200), 'md') !default;
-$display--font-size--md--md:  props.def(--o-heading--display--md--font-size, props.get(core.$font-size--100), 'md') !default;
-$display--font-size--sm--md:  props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75), 'md') !default;
-$display--font-size--xs--md:  props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default;
+$display--font-size--xxl--md: props.def(
+        --o-heading--display--xxl--font-size,
+        props.get(core.$font-size--900),
+        "md"
+) !default;
+$display--font-size--xl--md: props.def(
+        --o-heading--display--xl--font-size,
+        props.get(core.$font-size--600),
+        "md"
+) !default;
+$display--font-size--lg--md: props.def(
+        --o-heading--display--lg--font-size,
+        props.get(core.$font-size--200),
+        "md"
+) !default;
+$display--font-size--md--md: props.def(
+        --o-heading--display--md--font-size,
+        props.get(core.$font-size--100),
+        "md"
+) !default;
+$display--font-size--sm--md: props.def(
+        --o-heading--display--sm--font-size,
+        props.get(core.$font-size--75),
+        "md"
+) !default;
+$display--font-size--xs--md: props.def(
+        --o-heading--display--xs--font-size,
+        props.get(core.$font-size--50),
+        "md"
+) !default;
 
 $display--sizes: (
-        'xs'  $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs $display--text-transform--xs $display--text-color--xs,
-        'sm'  $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm $display--text-transform--sm $display--text-color--sm,
-        'md'  $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md $display--text-transform--md $display--text-color--md,
-        'lg'  $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg $display--text-transform--lg $display--text-color--lg,
-        'xl'  $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl $display--text-transform--xl $display--text-color--xl,
-        'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl $display--text-transform--xxl $display--text-color--xxl,
+        "xs" $display--font-family--xs $display--line-height--xs $display--font-size--xs
+                $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs
+                $display--text-transform--xs $display--text-color--xs,
+        "sm" $display--font-family--sm $display--line-height--sm $display--font-size--sm
+                $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm
+                $display--text-transform--sm $display--text-color--sm,
+        "md" $display--font-family--md $display--line-height--md $display--font-size--md
+                $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md
+                $display--text-transform--md $display--text-color--md,
+        "lg" $display--font-family--lg $display--line-height--lg $display--font-size--lg
+                $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg
+                $display--text-transform--lg $display--text-color--lg,
+        "xl" $display--font-family--xl $display--line-height--xl $display--font-size--xl
+                $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl
+                $display--text-transform--xl $display--text-color--xl,
+        "xxl" $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl
+                $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl
+                $display--text-transform--xxl $display--text-color--xxl
 ) !default;
 
-$static-themes: props.def(--o-heading, (), 'color');
+$static-themes: props.def(--o-heading, (), "color");
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
         $heading-theme: --static-#{string.slice($theme, 3)};
 
-        $static-themes: props.merge($static-themes, (
-                $heading-theme: (
-                        --bg-color:   props.get(core.$transparent-colors, $theme, --200),
-                        --text-color: props.get(core.$transparent-colors, $theme, --900),
-
-                        --xxl: (
-                                --text-color: props.get(core.$transparent-colors, $theme, --900),
-                        ),
-                        --xl: (
-                                --text-color: props.get(core.$transparent-colors, $theme, --900),
-                        ),
-                        --lg: (
-                                --text-color: props.get(core.$transparent-colors, $theme, --900),
-                        ),
-                        --md: (
-                                --text-color: props.get(core.$transparent-colors, $theme, --900),
-                        ),
-                        --sm: (
-                                --text-color: props.get(core.$transparent-colors, $theme, --500),
-                        ),
-                        --xs: (
-                                --text-color: props.get(core.$transparent-colors, $theme, --500),
-                        ),
-
-                        --display: (
-                                --xxl: (
+        $static-themes: props.merge(
+                $static-themes,
+                (
+                        $heading-theme: (
+                                        --bg-color: props.get(core.$transparent-colors, $theme, --200),
                                         --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                        --xxl: (
+                                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                                ),
+                                        --xl: (
+                                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                                ),
+                                        --lg: (
+                                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                                ),
+                                        --md: (
+                                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                                ),
+                                        --sm: (
+                                                        --text-color: props.get(core.$transparent-colors, $theme, --500),
+                                                ),
+                                        --xs: (
+                                                        --text-color: props.get(core.$transparent-colors, $theme, --500),
+                                                ),
+
+                                        --display: (
+                                                        --xxl: (
+                                                                        --text-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --900
+                                                                                ),
+                                                                ),
+                                                        --xl: (
+                                                                        --text-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --900
+                                                                                ),
+                                                                ),
+                                                        --lg: (
+                                                                        --text-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --900
+                                                                                ),
+                                                                ),
+                                                        --md: (
+                                                                        --text-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --900
+                                                                                ),
+                                                                ),
+                                                        --sm: (
+                                                                        --text-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --900
+                                                                                ),
+                                                                ),
+                                                        --xs: (
+                                                                        --text-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --500
+                                                                                ),
+                                                                ),
+                                                ),
                                 ),
-                                --xl: (
-                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
-                                ),
-                                --lg: (
-                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
-                                ),
-                                --md: (
-                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
-                                ),
-                                --sm: (
-                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
-                                ),
-                                --xs: (
-                                        --text-color: props.get(core.$transparent-colors, $theme, --500),
-                                ),
-                        ),
                 )
-        ));
+        );
 }
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 1d046e0..7baa3f8 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,24 +1,24 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'icon.vars';
-@use 'icon.vars' as vars;
+@forward "icon.vars";
+@use "icon.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('icon') {
-                display:         inline;
-                inline-size:     props.get(vars.$size);
-                block-size:      props.get(vars.$size);
-                vertical-align:  props.get(vars.$valign);
-                stroke-width:    props.get(vars.$stroke-width);
-                stroke-linecap:  round;
+        @include bem.object("icon") {
+                display: inline;
+                inline-size: props.get(vars.$size);
+                block-size: props.get(vars.$size);
+                vertical-align: props.get(vars.$valign);
+                stroke-width: props.get(vars.$stroke-width);
+                stroke-linecap: round;
                 stroke-linejoin: round;
 
-                @include bem.modifier('block') {
+                @include bem.modifier("block") {
                         display: block;
                 }
         }
diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss
index 2a37212..4fdbfae 100644
--- a/src/objects/_icon.vars.scss
+++ b/src/objects/_icon.vars.scss
@@ -1,5 +1,5 @@
-@use 'pkg:iro-sass/src/props';
+@use "pkg:iro-sass/props";
 
 $stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default;
-$size:         props.def(--o-icon--size, calc(1 / 14 * 16em)) !default;
-$valign:       props.def(--o-icon--valign, -.18em) !default;
+$size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default;
+$valign: props.def(--o-icon--valign, -0.18em) !default;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index a173d57..2b4abad 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,40 +1,40 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'lightbox.vars';
-@use 'lightbox.vars' as vars;
+@forward "lightbox.vars";
+@use "lightbox.vars" as vars;
 
-@use 'button.vars' as button;
-@use 'backdrop.vars' as backdrop;
-@use 'thumbnail.vars' as thumbnail;
+@use "button.vars" as button;
+@use "backdrop.vars" as backdrop;
+@use "thumbnail.vars" as thumbnail;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('lightbox') {
-                box-sizing:            border-box;
-                display:               none;
-                flex:                  1 1 auto;
-                grid-template-areas:   'image' 'thumbnails';
-                grid-template-rows:    1fr auto;
+        @include bem.object("lightbox") {
+                box-sizing: border-box;
+                display: none;
+                flex: 1 1 auto;
+                grid-template-areas: "image" "thumbnails";
+                grid-template-rows: 1fr auto;
                 grid-template-columns: 1fr;
-                align-items:           center;
-                justify-items:         center;
-                inline-size:           100%;
-                max-inline-size:       none;
-                block-size:            100%;
-                min-block-size:        0;
-                max-block-size:        none;
-                padding:               0;
-                margin:                0;
-                overflow:              hidden;
-                background-color:      transparent;
-                border:                0;
-                pointer-events:        none;
+                align-items: center;
+                justify-items: center;
+                inline-size: 100%;
+                max-inline-size: none;
+                block-size: 100%;
+                min-block-size: 0;
+                max-block-size: none;
+                padding: 0;
+                margin: 0;
+                overflow: hidden;
+                background-color: transparent;
+                border: 0;
+                pointer-events: none;
 
                 &::backdrop {
                         background-color: props.get(backdrop.$bg-color);
@@ -42,7 +42,7 @@
                 }
 
                 &[open],
-                &:popover-open {
+                &:popover-open {
                         display: grid;
                 }
 
@@ -50,80 +50,79 @@
                         pointer-events: auto;
                 }
 
-                @include bem.elem('info', 'controls') {
-                        position:          absolute;
+                @include bem.elem("info", "controls") {
+                        position: absolute;
                         inset-block-start: props.get(vars.$pad);
-                        z-index:           20;
-                        display:           flex;
-                        align-items:       center;
-                        block-size:        props.get(vars.$controls--block-size);
-                        padding-inline:    props.get(vars.$controls--pad-i);
-                        background-color:  props.get(vars.$controls--bg);
-                        border-radius:     10em;
-                        box-shadow:
-                                props.get(vars.$controls--shadow-x)
-                                props.get(vars.$controls--shadow-y)
-                                props.get(vars.$controls--shadow-blur)
-                                props.get(vars.$controls--shadow-grow)
+                        z-index: 20;
+                        display: flex;
+                        align-items: center;
+                        block-size: props.get(vars.$controls--block-size);
+                        padding-inline: props.get(vars.$controls--pad-i);
+                        background-color: props.get(vars.$controls--bg);
+                        border-radius: 10em;
+                        box-shadow: props.get(vars.$controls--shadow-x) props.get(vars.$controls--shadow-y)
+                                props.get(vars.$controls--shadow-blur) props.get(vars.$controls--shadow-grow)
                                 props.get(vars.$controls--shadow-color);
                 }
 
-                @include bem.elem('info') {
-                        inset-inline-start:   props.get(vars.$pad);
+                @include bem.elem("info") {
+                        inset-inline-start: props.get(vars.$pad);
                         font-variant-numeric: tabular-nums;
                 }
 
-                @include bem.elem('controls') {
-                        inset-inline-end:  props.get(vars.$pad);
+                @include bem.elem("controls") {
+                        inset-inline-end: props.get(vars.$pad);
                 }
 
-                @include bem.elem('img') {
-                        position:        relative;
-                        z-index:         10;
-                        display:         block;
-                        grid-area:       image;
-                        inline-size:     auto;
+                @include bem.elem("img") {
+                        position: relative;
+                        z-index: 10;
+                        display: block;
+                        grid-area: image;
+                        inline-size: auto;
                         min-inline-size: 0;
                         max-inline-size: 100%;
-                        block-size:      auto;
-                        min-block-size:  0;
-                        max-block-size:  100%;
-                        user-select:     none;
-                        object-fit:      contain;
+                        block-size: auto;
+                        min-block-size: 0;
+                        max-block-size: 100%;
+                        user-select: none;
+                        object-fit: contain;
 
-                        @include bem.is('hidden') {
+                        @include bem.is("hidden") {
                                 display: none;
 
-                                @include bem.next-elem('placeholder') {
+                                @include bem.next-elem("placeholder") {
                                         display: block;
                                 }
                         }
                 }
 
-                @include bem.elem('placeholder') {
-                        position:           absolute;
-                        inset-block-start:  50%;
+                @include bem.elem("placeholder") {
+                        position: absolute;
+                        inset-block-start: 50%;
                         inset-inline-start: 50%;
-                        z-index:            5;
-                        display:            none;
-                        transform:          translate(-50, -50);
+                        z-index: 5;
+                        display: none;
+                        transform: translate(-50, -50);
                 }
 
-                @include bem.elem('thumbnails') {
-                        display:                 flex;
-                        grid-area:       thumbnails;
-                        gap:             props.get(vars.$thumbnail--spacing);
+                @include bem.elem("thumbnails") {
+                        display: flex;
+                        grid-area: thumbnails;
+                        gap: props.get(vars.$thumbnail--spacing);
                         justify-content: center;
-                        padding:         props.get(vars.$pad);
-                        overflow:        auto;
+                        padding: props.get(vars.$pad);
+                        overflow: auto;
                 }
 
-                @include bem.elem('thumbnail') {
+                @include bem.elem("thumbnail") {
                         inline-size: props.get(vars.$thumbnail--width);
-                        transition:  inline-size .2s ease, margin-inline .2s ease;
+                        transition:
+                                inline-size 0.2s ease,
+                                margin-inline 0.2s ease;
 
-                        @include bem.is('selected') {
-                                inline-size:  props.get(vars.$thumbnail--active--width);
+                        @include bem.is("selected") {
+                                inline-size: props.get(vars.$thumbnail--active--width);
                                 margin-inline: props.get(vars.$thumbnail--active--spacing);
                         }
                 }
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index 6fb84f7..dc9a2a1 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -1,37 +1,80 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
 
-$controls--pad-i:      props.def(--o-lightbox--controls--pad-i, props.get(core.$size--150)) !default;
-$controls--block-size: props.def(--o-lightbox--controls--block-size, props.get(core.$size--550)) !default;
+$controls--pad-i: props.def(--o-lightbox--controls--pad-i, props.get(core.$size--150)) !default;
+$controls--block-size: props.def(
+        --o-lightbox--controls--block-size,
+        props.get(core.$size--550)
+) !default;
 
-$controls--shadow-x:    props.def(--o-lightbox--controls--shadow-x, props.get(core.$shadow--l2--x)) !default;
-$controls--shadow-y:    props.def(--o-lightbox--controls--shadow-y, props.get(core.$shadow--l2--y)) !default;
-$controls--shadow-blur: props.def(--o-lightbox--controls--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
-$controls--shadow-grow: props.def(--o-lightbox--controls--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
+$controls--shadow-x: props.def(
+        --o-lightbox--controls--shadow-x,
+        props.get(core.$shadow--l2--x)
+) !default;
+$controls--shadow-y: props.def(
+        --o-lightbox--controls--shadow-y,
+        props.get(core.$shadow--l2--y)
+) !default;
+$controls--shadow-blur: props.def(
+        --o-lightbox--controls--shadow-blur,
+        props.get(core.$shadow--l2--blur)
+) !default;
+$controls--shadow-grow: props.def(
+        --o-lightbox--controls--shadow-grow,
+        props.get(core.$shadow--l2--grow)
+) !default;
 
-$thumbnail--width:           props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default;
-$thumbnail--spacing:         props.def(--o-lightbox--thumbnail--spacing, props.get(core.$size--100)) !default;
-$thumbnail--active--width:   props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--1000)) !default;
-$thumbnail--active--spacing: props.def(--o-lightbox--thumbnail--active--spacing, props.get(core.$size--250)) !default;
+$thumbnail--width: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default;
+$thumbnail--spacing: props.def(
+        --o-lightbox--thumbnail--spacing,
+        props.get(core.$size--100)
+) !default;
+$thumbnail--active--width: props.def(
+        --o-lightbox--thumbnail--active--width,
+        props.get(core.$size--1000)
+) !default;
+$thumbnail--active--spacing: props.def(
+        --o-lightbox--thumbnail--active--spacing,
+        props.get(core.$size--250)
+) !default;
 
-$thumbnail--width--md:         props.def(--o-lightbox--thumbnail--width, props.get(core.$size--400), 'md') !default;
-$thumbnail--active--width--md: props.def(--o-lightbox--thumbnail--active--width, props.get(core.$size--600), 'md') !default;
+$thumbnail--width--md: props.def(
+        --o-lightbox--thumbnail--width,
+        props.get(core.$size--400),
+        "md"
+) !default;
+$thumbnail--active--width--md: props.def(
+        --o-lightbox--thumbnail--active--width,
+        props.get(core.$size--600),
+        "md"
+) !default;
 
-$controls--bg:           props.def(--o-lightbox--controls--bg, props.get(core.$transparent-colors, --black, --700), 'color') !default;
-$controls--shadow-color: props.def(--o-lightbox--controls--shadow-color, props.get(core.$transparent-colors, --black, --300), 'color') !default;
+$controls--bg: props.def(
+        --o-lightbox--controls--bg,
+        props.get(core.$transparent-colors, --black, --700),
+        "color"
+) !default;
+$controls--shadow-color: props.def(
+        --o-lightbox--controls--shadow-color,
+        props.get(core.$transparent-colors, --black, --300),
+        "color"
+) !default;
 
-$static-themes: props.def(--o-lightbox, (), 'color');
+$static-themes: props.def(--o-lightbox, (), "color");
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
         $lightbox-theme: --static-#{string.slice($theme, 3)};
 
-        $static-themes: props.merge($static-themes, (
-                $lightbox-theme: (
-                        --text: props.get(core.$transparent-colors, $theme, --text),
+        $static-themes: props.merge(
+                $static-themes,
+                (
+                        $lightbox-theme: (
+                                        --text: props.get(core.$transparent-colors, $theme, --text),
+                                ),
                 )
-        ));
+        );
 }
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index dce14a8..c7fbc0e 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,75 +1,82 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use 'icon.vars' as icon;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "icon.vars" as icon;
 
-@forward 'menu.vars';
-@use 'menu.vars' as vars;
+@forward "menu.vars";
+@use "menu.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('menu') {
-                display:        flex;
+        @include bem.object("menu") {
+                display: flex;
                 flex-direction: column;
-                gap:            props.get(vars.$spacing);
+                gap: props.get(vars.$spacing);
 
-                @include bem.elem('header') {
-                        padding-block:  props.get(vars.$item--pad-b);
+                @include bem.elem("header") {
+                        padding-block: props.get(vars.$item--pad-b);
                         padding-inline: props.get(vars.$item--pad-i);
-                        font-size:      props.get(vars.$header--font-size);
-                        font-weight:    500;
-                        color:          props.get(vars.$header--label-color);
+                        font-size: props.get(vars.$header--font-size);
+                        font-weight: 500;
+                        color: props.get(vars.$header--label-color);
                         text-transform: uppercase;
-                        letter-spacing: .5px;
+                        letter-spacing: 0.5px;
 
                         @include bem.next-twin-elem {
-                                margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
+                                margin-block-start: calc(
+                                        props.get(vars.$separator-width) + props.get(vars.$spacing)
+                                );
                         }
                 }
 
-                @include bem.elem('item') {
-                        padding-block:   props.get(vars.$item--pad-b);
-                        padding-inline:  props.get(vars.$item--pad-i);
-                        margin:          calc(-1 * props.get(vars.$item--key-focus--outline-width));
-                        color:           props.get(vars.$item--disabled--label-color);
+                @include bem.elem("item") {
+                        padding-block: props.get(vars.$item--pad-b);
+                        padding-inline: props.get(vars.$item--pad-i);
+                        margin: calc(-1 * props.get(vars.$item--key-focus--outline-width));
+                        color: props.get(vars.$item--disabled--label-color);
                         background-clip: padding-box;
-                        border:          props.get(vars.$item--key-focus--outline-width) solid transparent;
-                        border-radius:   calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width));
+                        border: props.get(vars.$item--key-focus--outline-width) solid transparent;
+                        border-radius: calc(
+                                props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)
+                        );
 
                         &:link,
                         &:visited,
                         &:enabled {
                                 color: currentColor;
 
-                                @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
-                                        color:            props.get(vars.$item--hover--label-color);
+                                @include bem.multi("&:hover, &:focus-visible", "is" "selected") {
+                                        color: props.get(vars.$item--hover--label-color);
                                         background-color: props.get(vars.$item--hover--bg-color);
                                 }
 
                                 &:active {
-                                        color:            props.get(vars.$item--active--label-color);
+                                        color: props.get(vars.$item--active--label-color);
                                         background-color: props.get(vars.$item--active--bg-color);
                                 }
 
                                 &:focus-visible {
-                                        outline:    props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
-                                        box-shadow:
-                                                0
-                                                0
-                                                0
-                                                calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
+                                        outline: props.get(vars.$item--key-focus--border-color) solid
+                                                props.get(vars.$item--key-focus--border-width);
+                                        box-shadow: 0 0 0
+                                                calc(
+                                                        props.get(vars.$item--key-focus--border-width) +
+                                                                props.get(vars.$item--key-focus--outline-width)
+                                                )
                                                 props.get(vars.$item--key-focus--outline-color);
                                 }
                         }
 
-                        @include bem.next-elem('header') {
-                                margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
+                        @include bem.next-elem("header") {
+                                margin-block-start: calc(
+                                        props.get(vars.$separator-width) + props.get(vars.$spacing)
+                                );
                         }
                 }
 
-                @include bem.elem('header') {
+                @include bem.elem("header") {
                         &:link,
                         &:visited,
                         &:enabled {
@@ -77,25 +84,25 @@
                         }
                 }
 
-                @include bem.elem('separator') {
-                        block-size:       1px;
-                        margin-block:     props.get(vars.$separator-width);
-                        margin-inline:    props.get(vars.$item--pad-i);
+                @include bem.elem("separator") {
+                        block-size: 1px;
+                        margin-block: props.get(vars.$separator-width);
+                        margin-inline: props.get(vars.$item--pad-i);
                         background-color: props.get(vars.$separator-color);
                 }
 
-                @include bem.elem('slot') {
-                        padding-block:  props.get(vars.$item--pad-b);
+                @include bem.elem("slot") {
+                        padding-block: props.get(vars.$item--pad-b);
                         padding-inline: props.get(vars.$item--pad-i);
                 }
 
-                @include bem.elem('icon-slot') {
-                        display:         flex;
+                @include bem.elem("icon-slot") {
+                        display: flex;
                         justify-content: center;
-                        inline-size:     props.get(icon.$size);
+                        inline-size: props.get(icon.$size);
                 }
 
-                @include bem.modifier('pull') {
+                @include bem.modifier("pull") {
                         margin: calc(-1 * props.get(vars.$item--pad-i));
                 }
         }
diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss
index 9396117..c168c30 100644
--- a/src/objects/_menu.vars.scss
+++ b/src/objects/_menu.vars.scss
@@ -1,29 +1,74 @@
-@use 'sass:map';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$spacing:           props.def(--o-menu--spacing, 0em) !default;
+$spacing: props.def(--o-menu--spacing, 0em) !default;
 $header--font-size: props.def(--o-menu--header--font-size, props.get(core.$font-size--50)) !default;
-$separator-width:   props.def(--o-menu--separator-width, props.get(core.$size--100)) !default;
+$separator-width: props.def(--o-menu--separator-width, props.get(core.$size--100)) !default;
 
-$item--pad-i:    props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default;
-$item--pad-b:    props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default;
+$item--pad-i: props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default;
+$item--pad-b: props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default;
 $item--rounding: props.def(--o-menu--item--rounding, 0em) !default;
 
-$item--key-focus--border-width:  props.def(--o-menu--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$item--key-focus--outline-width: props.def(--o-menu--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$item--key-focus--border-width: props.def(
+        --o-menu--item--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$item--key-focus--border-offset: props.def(
+        --o-menu--item--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$item--key-focus--outline-width: props.def(
+        --o-menu--item--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$separator-color:     props.def(--o-menu--separator-color, props.get(core.$theme, --border), 'color') !default;
-$header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading), 'color') !default;
+$separator-color: props.def(
+        --o-menu--separator-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
+$header--label-color: props.def(
+        --o-menu--header--label-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
 
-$item--hover--bg-color:    props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
-$item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
+$item--hover--bg-color: props.def(
+        --o-menu--item--hover--bg-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;
+$item--hover--label-color: props.def(
+        --o-menu--item--hover--label-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
 
-$item--active--bg-color:    props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border), 'color') !default;
-$item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading), 'color') !default;
+$item--active--bg-color: props.def(
+        --o-menu--item--active--bg-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
+$item--active--label-color: props.def(
+        --o-menu--item--active--label-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
 
-$item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
+$item--disabled--label-color: props.def(
+        --o-menu--item--disabled--label-color,
+        props.get(core.$theme, --text-disabled),
+        "color"
+) !default;
 
-$item--key-focus--border-color:  props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$item--key-focus--border-color: props.def(
+        --o-menu--item--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$item--key-focus--outline-color: props.def(
+        --o-menu--item--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index cc1eaaa..4b678e0 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -1,151 +1,197 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'navbar.vars';
-@use 'navbar.vars' as vars;
+@forward "navbar.vars";
+@use "navbar.vars" as vars;
 
 @mixin -apply-theme($theme, $key: ()) {
-        @include bem.elem('item-label') {
+        @include bem.elem("item-label") {
                 color: props.get($theme, list.join($key, --disabled --label-color)...);
         }
 
-        @include bem.elem('item-content') {
+        @include bem.elem("item-content") {
                 color: props.get($theme, list.join($key, --disabled --text-color)...);
 
                 &::after {
-                        outline: props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width);
-                        box-shadow:
-                                0
-                                0
-                                0
-                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                        outline: props.get($theme, list.join($key, --key-focus --border)...) solid
+                                props.get(vars.$key-focus--border-width);
+                        box-shadow: 0 0 0
+                                calc(
+                                        props.get(vars.$key-focus--border-width) +
+                                                props.get(vars.$key-focus--outline-width)
+                                )
                                 props.get($theme, list.join($key, --key-focus --outline)...);
                 }
         }
 
-        @include bem.elem('item') {
+        @include bem.elem("item") {
                 &:link,
                 &:visited,
                 &:enabled {
-                        @include bem.elem('item-label') {
+                        @include bem.elem("item-label") {
                                 color: props.get($theme, list.join($key, --label-color)...);
                         }
 
-                        @include bem.elem('item-content') {
+                        @include bem.elem("item-content") {
                                 color: props.get($theme, list.join($key, --text-color)...);
                         }
 
                         &:hover,
                         &:focus-visible {
-                                @include bem.elem('item-label') {
+                                @include bem.elem("item-label") {
                                         color: props.get($theme, list.join($key, --hover --label-color)...);
                                 }
 
-                                @include bem.elem('item-content') {
-                                        color:            props.get($theme, list.join($key, --hover --text-color)...);
+                                @include bem.elem("item-content") {
+                                        color: props.get($theme, list.join($key, --hover --text-color)...);
                                         background-color: props.get($theme, list.join($key, --hover --bg-color)...);
                                 }
                         }
 
                         &:focus-visible {
-                                @include bem.elem('item-label') {
+                                @include bem.elem("item-label") {
                                         color: props.get($theme, list.join($key, --key-focus --label)...);
                                 }
                         }
 
                         &:active {
-                                @include bem.elem('item-label') {
+                                @include bem.elem("item-label") {
                                         color: props.get($theme, list.join($key, --active --label-color)...);
                                 }
 
-                                @include bem.elem('item-content') {
-                                        color:            props.get($theme, list.join($key, --active --text-color)...);
+                                @include bem.elem("item-content") {
+                                        color: props.get($theme, list.join($key, --active --text-color)...);
                                         background-color: props.get($theme, list.join($key, --active --bg-color)...);
                                 }
                         }
                 }
 
-                @include bem.is('selected') {
-                        @include bem.elem('item-label') {
+                @include bem.is("selected") {
+                        @include bem.elem("item-label") {
                                 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
                         }
 
-                        @include bem.elem('item-content') {
-                                color:            props.get($theme, list.join($key, --selected --disabled --text-color)...);
-                                background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
+                        @include bem.elem("item-content") {
+                                color: props.get($theme, list.join($key, --selected --disabled --text-color)...);
+                                background-color: props.get(
+                                        $theme,
+                                        list.join($key, --selected --disabled --bg-color)...
+                                );
                         }
 
                         &:link,
                         &:visited,
                         &:enabled {
-                                @include bem.elem('item-label') {
+                                @include bem.elem("item-label") {
                                         color: props.get($theme, list.join($key, --selected --label-color)...);
                                 }
 
-                                @include bem.elem('item-content') {
-                                        color:            props.get($theme, list.join($key, --selected --text-color)...);
+                                @include bem.elem("item-content") {
+                                        color: props.get($theme, list.join($key, --selected --text-color)...);
                                         background-color: props.get($theme, list.join($key, --selected --bg-color)...);
                                 }
 
                                 &:hover,
                                 &:focus-visible {
-                                        @include bem.elem('item-label') {
-                                                color: props.get($theme, list.join($key, --selected --hover --label-color)...);
+                                        @include bem.elem("item-label") {
+                                                color: props.get(
+                                                        $theme,
+                                                        list.join($key, --selected --hover --label-color)...
+                                                );
                                         }
 
-                                        @include bem.elem('item-content') {
-                                                color:            props.get($theme, list.join($key, --selected --hover --text-color)...);
-                                                background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
+                                        @include bem.elem("item-content") {
+                                                color: props.get(
+                                                        $theme,
+                                                        list.join($key, --selected --hover --text-color)...
+                                                );
+                                                background-color: props.get(
+                                                        $theme,
+                                                        list.join($key, --selected --hover --bg-color)...
+                                                );
                                         }
                                 }
 
                                 &:active {
-                                        @include bem.elem('item-label') {
-                                                color: props.get($theme, list.join($key, --selected --active --label-color)...);
+                                        @include bem.elem("item-label") {
+                                                color: props.get(
+                                                        $theme,
+                                                        list.join($key, --selected --active --label-color)...
+                                                );
                                         }
 
-                                        @include bem.elem('item-content') {
-                                                color:            props.get($theme, list.join($key, --selected --active --text-color)...);
-                                                background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
+                                        @include bem.elem("item-content") {
+                                                color: props.get(
+                                                        $theme,
+                                                        list.join($key, --selected --active --text-color)...
+                                                );
+                                                background-color: props.get(
+                                                        $theme,
+                                                        list.join($key, --selected --active --bg-color)...
+                                                );
                                         }
                                 }
                         }
                 }
         }
 
-        @include bem.modifier('quiet') {
-                @include bem.elem('item') {
-                        @include bem.is('selected') {
-                                @include bem.elem('item-content') {
-                                        color:            props.get($theme, list.join($key, --quiet --selected --disabled --text-color)...);
-                                        background-color: props.get($theme, list.join($key, --quiet --selected --disabled --bg-color)...);
+        @include bem.modifier("quiet") {
+                @include bem.elem("item") {
+                        @include bem.is("selected") {
+                                @include bem.elem("item-content") {
+                                        color: props.get(
+                                                $theme,
+                                                list.join($key, --quiet --selected --disabled --text-color)...
+                                        );
+                                        background-color: props.get(
+                                                $theme,
+                                                list.join($key, --quiet --selected --disabled --bg-color)...
+                                        );
                                 }
 
                                 &:link,
                                 &:visited,
                                 &:enabled {
-                                        @include bem.elem('item-content') {
-                                                color:            props.get($theme, list.join($key, --quiet --selected --text-color)...);
-                                                background-color: props.get($theme, list.join($key, --quiet --selected --bg-color)...);
+                                        @include bem.elem("item-content") {
+                                                color: props.get(
+                                                        $theme,
+                                                        list.join($key, --quiet --selected --text-color)...
+                                                );
+                                                background-color: props.get(
+                                                        $theme,
+                                                        list.join($key, --quiet --selected --bg-color)...
+                                                );
                                         }
 
                                         &:hover,
                                         &:focus-visible {
-                                                @include bem.elem('item-content') {
-                                                        color:            props.get($theme, list.join($key, --quiet --selected --hover --text-color)...);
-                                                        background-color: props.get($theme, list.join($key, --quiet --selected --hover --bg-color)...);
+                                                @include bem.elem("item-content") {
+                                                        color: props.get(
+                                                                $theme,
+                                                                list.join($key, --quiet --selected --hover --text-color)...
+                                                        );
+                                                        background-color: props.get(
+                                                                $theme,
+                                                                list.join($key, --quiet --selected --hover --bg-color)...
+                                                        );
                                                 }
                                         }
 
                                         &:active {
-                                                @include bem.elem('item-content') {
-                                                        color:            props.get($theme, list.join($key, --quiet --selected --active --text-color)...);
-                                                        background-color: props.get($theme, list.join($key, --quiet --selected --active --bg-color)...);
+                                                @include bem.elem("item-content") {
+                                                        color: props.get(
+                                                                $theme,
+                                                                list.join($key, --quiet --selected --active --text-color)...
+                                                        );
+                                                        background-color: props.get(
+                                                                $theme,
+                                                                list.join($key, --quiet --selected --active --bg-color)...
+                                                        );
                                                 }
                                         }
                                 }
@@ -155,64 +201,64 @@
 }
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('navbar') {
-                display:    flex;
+        @include bem.object("navbar") {
+                display: flex;
                 block-size: props.get(vars.$block-size);
 
-                @include bem.elem('item-label') {
-                        order:              2;
+                @include bem.elem("item-label") {
+                        order: 2;
                         margin-block-start: props.get(vars.$item--pad-b-icon);
-                        font-size:          props.get(vars.$item--label-font-size);
-                        font-weight:        bold;
+                        font-size: props.get(vars.$item--label-font-size);
+                        font-weight: bold;
 
-                        @include bem.next-elem('item-content') {
-                                padding-block:  props.get(vars.$item--pad-b-icon);
+                        @include bem.next-elem("item-content") {
+                                padding-block: props.get(vars.$item--pad-b-icon);
                                 padding-inline: props.get(vars.$item--pad-i-icon);
-                                font-size:      props.get(vars.$item--icon-size);
+                                font-size: props.get(vars.$item--icon-size);
                         }
                 }
 
-                @include bem.elem('item-content-text') {
+                @include bem.elem("item-content-text") {
                         margin-inline: props.get(vars.$item--pad-i-label);
                 }
 
-                @include bem.elem('item-content') {
-                        position:        relative;
-                        order:           1;
-                        padding-block:   props.get(vars.$item--pad-b);
-                        padding-inline:  props.get(vars.$item--pad-i);
-                        font-size:       props.get(vars.$item--font-size);
-                        white-space:     nowrap;
-                        border-radius:   100em;
+                @include bem.elem("item-content") {
+                        position: relative;
+                        order: 1;
+                        padding-block: props.get(vars.$item--pad-b);
+                        padding-inline: props.get(vars.$item--pad-i);
+                        font-size: props.get(vars.$item--font-size);
+                        white-space: nowrap;
+                        border-radius: 100em;
 
                         &::after {
-                                position:       absolute;
-                                inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
-                                z-index:        -10;
-                                display:        block;
-                                visibility:     hidden;
+                                position: absolute;
+                                inset: calc(-1 * props.get(vars.$key-focus--border-offset));
+                                z-index: -10;
+                                display: block;
+                                visibility: hidden;
                                 pointer-events: none;
-                                content:        '';
-                                border-radius:  100em;
+                                content: "";
+                                border-radius: 100em;
                         }
                 }
 
-                @include bem.elem('item') {
-                        display:         flex;
-                        flex-direction:  column;
-                        align-items:     center;
+                @include bem.elem("item") {
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
                         justify-content: center;
-                        inline-size:     100%;
-                        padding-inline:  calc(.5 * props.get(vars.$spacing));
-                        font-weight:     500;
+                        inline-size: 100%;
+                        padding-inline: calc(0.5 * props.get(vars.$spacing));
+                        font-weight: 500;
 
                         &:link,
                         &:visited,
                         &:enabled {
                                 &:focus-visible {
-                                        @include bem.elem('item-content') {
+                                        @include bem.elem("item-content") {
                                                 &::after {
                                                         visibility: visible;
                                                 }
@@ -220,7 +266,7 @@
                                 }
                         }
 
-                        @include bem.is('selected') {
+                        @include bem.is("selected") {
                                 font-weight: bold;
                         }
                 }
@@ -233,22 +279,21 @@
                         }
                 }
 
-                @include bem.modifier('hide-unselected') {
-                        @include bem.elem('item') {
+                @include bem.modifier("hide-unselected") {
+                        @include bem.elem("item") {
                                 display: none;
 
-                                @include bem.is('selected') {
+                                @include bem.is("selected") {
                                         display: flex;
                                 }
                         }
                 }
 
-                @include bem.modifier('adapt') {
+                @include bem.modifier("adapt") {
                         block-size: 100%;
                 }
 
-
-                @include bem.modifier('align-block') {
+                @include bem.modifier("align-block") {
                         margin-inline: calc(-1 * props.get(vars.$item--pad-i));
                 }
         }
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index e96b714..b7d7e16 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -1,178 +1,242 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 $block-size: props.def(--o-navbar--block-size, props.get(core.$size--1000)) !default;
-$spacing:    props.def(--o-navbar--spacing, props.get(core.$size--50)) !default;
+$spacing: props.def(--o-navbar--spacing, props.get(core.$size--50)) !default;
 
-$item--pad-i:           props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
-$item--pad-i-label:     props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default;
-$item--pad-i-icon:      props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default;
-$item--pad-b:           props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default;
-$item--pad-b-icon:      props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default;
-$item--font-size:       props.def(--o-navbar--item--font-size, props.get(core.$font-size--100)) !default;
-$item--icon-size:       props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default;
-$item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default;
+$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
+$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default;
+$item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default;
+$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default;
+$item--pad-b-icon: props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default;
+$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--100)) !default;
+$item--icon-size: props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default;
+$item--label-font-size: props.def(
+        --o-navbar--item--label-font-size,
+        props.get(core.$font-size--50)
+) !default;
 
-$key-focus--border-width:  props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --o-navbar--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$key-focus--border-offset: props.def(
+        --o-navbar--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$key-focus--outline-width: props.def(
+        --o-navbar--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$themes: props.def(--o-navbar, (), 'color');
+$themes: props.def(--o-navbar, (), "color");
 
 $default-theme-override: () !default;
-$default-theme: map.deep-merge((
-        --text-color:  props.get(core.$theme, --text),
-        --label-color:  props.get(core.$theme, --text-mute),
-
-        --hover: (
-                --bg-color:    props.get(core.$theme, --border-mute),
-                --text-color:  props.get(core.$theme, --heading),
-                --label-color: props.get(core.$theme, --text),
-        ),
-
-        --active: (
-                --bg-color:    props.get(core.$theme, --border),
-                --text-color:  props.get(core.$theme, --heading),
-                --label-color: props.get(core.$theme, --heading),
-        ),
-
-        --disabled: (
-                --text-color:   props.get(core.$theme, --border-strong),
-                --label-color:  props.get(core.$theme, --text-disabled),
-        ),
-
-        --key-focus: (
-                --label:   props.get(core.$theme, --focus, --text),
-                --border:  props.get(core.$theme, --focus, --border),
-                --outline: props.get(core.$theme, --focus, --outline),
-        ),
-
-        --selected: (
-                --bg-color:    props.get(core.$theme, --heading),
-                --text-color:  props.get(core.$theme, --base, --50),
-                --label-color: props.get(core.$theme, --heading),
-
+$default-theme: map.deep-merge(
+        (
+                --text-color: props.get(core.$theme, --text),
+                --label-color: props.get(core.$theme, --text-mute),
                 --hover: (
-                        --bg-color:    props.get(core.$theme, --text),
-                        --text-color:  props.get(core.$theme, --base, --50),
-                        --label-color: props.get(core.$theme, --heading),
+                        --bg-color: props.get(core.$theme, --border-mute),
+                        --text-color: props.get(core.$theme, --heading),
+                        --label-color: props.get(core.$theme, --text),
                 ),
 
                 --active: (
-                        --bg-color:    props.get(core.$theme, --text-mute),
-                        --text-color:  props.get(core.$theme, --base, --50),
+                        --bg-color: props.get(core.$theme, --border),
+                        --text-color: props.get(core.$theme, --heading),
                         --label-color: props.get(core.$theme, --heading),
                 ),
 
                 --disabled: (
-                        --bg-color:    props.get(core.$theme, --border-mute),
-                        --text-color:  props.get(core.$theme, --border-strong),
+                        --text-color: props.get(core.$theme, --border-strong),
                         --label-color: props.get(core.$theme, --text-disabled),
                 ),
-        ),
-
-        --quiet: (
-                --selected: (
-                        --bg-color:     props.get(core.$theme, --border-mute),
-                        --text-color:  props.get(core.$theme, --heading),
-
-                        --hover: (
-                                --bg-color:     props.get(core.$theme, --border),
-                                --text-color:  props.get(core.$theme, --heading),
-                        ),
-
-                        --active: (
-                                --bg-color:     props.get(core.$theme, --border-strong),
-                                --text-color:  props.get(core.$theme, --heading),
-                        ),
-
-                        --disabled: (
-                                --bg-color:     props.get(core.$theme, --border-mute),
-                                --text-color:  props.get(core.$theme, --border-strong),
-                        ),
-                )
-        )
-), $default-theme-override) !default;
-$default-theme: props.def(--o-navbar, $default-theme, 'color');
-
-@each $theme in map.keys(props.get(core.$transparent-colors)) {
-        $nav-theme: --static-#{string.slice($theme, 3)};
 
-        $themes: props.merge($themes, (
-                $nav-theme: (
-                        --text-color:  props.get(core.$transparent-colors, $theme, --800),
-                        --label-color: props.get(core.$transparent-colors, $theme, --700),
+                --key-focus: (
+                        --label: props.get(core.$theme, --focus, --text),
+                        --border: props.get(core.$theme, --focus, --border),
+                        --outline: props.get(core.$theme, --focus, --outline),
+                ),
 
+                --selected: (
+                        --bg-color: props.get(core.$theme, --heading),
+                        --text-color: props.get(core.$theme, --base, --50),
+                        --label-color: props.get(core.$theme, --heading),
                         --hover: (
-                                --bg-color:    props.get(core.$transparent-colors, $theme, --300),
-                                --text-color:  props.get(core.$transparent-colors, $theme, --900),
-                                --label-color: props.get(core.$transparent-colors, $theme, --800),
+                                --bg-color: props.get(core.$theme, --text),
+                                --text-color: props.get(core.$theme, --base, --50),
+                                --label-color: props.get(core.$theme, --heading),
                         ),
 
                         --active: (
-                                --bg-color:    props.get(core.$transparent-colors, $theme, --400),
-                                --text-color:  props.get(core.$transparent-colors, $theme, --900),
-                                --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                --bg-color: props.get(core.$theme, --text-mute),
+                                --text-color: props.get(core.$theme, --base, --50),
+                                --label-color: props.get(core.$theme, --heading),
                         ),
 
                         --disabled: (
-                                --text-color:   props.get(core.$transparent-colors, $theme, --500),
-                                --label-color:  props.get(core.$transparent-colors, $theme, --500),
-                        ),
-
-                        --key-focus: (
-                                --label:   props.get(core.$transparent-colors, $theme, --800),
-                                --border:  props.get(core.$transparent-colors, $theme, --900),
-                                --outline: props.get(core.$transparent-colors, $theme, --300),
+                                --bg-color: props.get(core.$theme, --border-mute),
+                                --text-color: props.get(core.$theme, --border-strong),
+                                --label-color: props.get(core.$theme, --text-disabled),
                         ),
+                ),
 
+                --quiet: (
                         --selected: (
-                                --bg-color:    props.get(core.$transparent-colors, $theme, --900),
-                                --text-color:  props.get(core.$transparent-colors, $theme, --text),
-                                --label-color: props.get(core.$transparent-colors, $theme, --800),
-
+                                --bg-color: props.get(core.$theme, --border-mute),
+                                --text-color: props.get(core.$theme, --heading),
                                 --hover: (
-                                        --bg-color:    props.get(core.$transparent-colors, $theme, --800),
-                                        --text-color:  props.get(core.$transparent-colors, $theme, --text),
-                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                        --bg-color: props.get(core.$theme, --border),
+                                        --text-color: props.get(core.$theme, --heading),
                                 ),
 
                                 --active: (
-                                        --bg-color:    props.get(core.$transparent-colors, $theme, --800),
-                                        --text-color:  props.get(core.$transparent-colors, $theme, --text),
-                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                        --bg-color: props.get(core.$theme, --border-strong),
+                                        --text-color: props.get(core.$theme, --heading),
                                 ),
 
                                 --disabled: (
-                                        --bg-color:    props.get(core.$transparent-colors, $theme, --200),
-                                        --text-color:  props.get(core.$transparent-colors, $theme, --500),
-                                        --label-color: props.get(core.$transparent-colors, $theme, --100),
+                                        --bg-color: props.get(core.$theme, --border-mute),
+                                        --text-color: props.get(core.$theme, --border-strong),
                                 ),
                         ),
+                ),
+        ),
+        $default-theme-override
+) !default;
+$default-theme: props.def(--o-navbar, $default-theme, "color");
 
-                        --quiet: (
-                                --selected: (
-                                        --bg-color:    props.get(core.$transparent-colors, $theme, --300),
-                                        --text-color:  props.get(core.$transparent-colors, $theme, --900),
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+        $nav-theme: --static-#{string.slice($theme, 3)};
 
+        $themes: props.merge(
+                $themes,
+                (
+                        $nav-theme: (
+                                        --text-color: props.get(core.$transparent-colors, $theme, --800),
+                                        --label-color: props.get(core.$transparent-colors, $theme, --700),
                                         --hover: (
-                                                --bg-color:    props.get(core.$transparent-colors, $theme, --400),
-                                                --text-color:  props.get(core.$transparent-colors, $theme, --900),
-                                        ),
+                                                        --bg-color: props.get(core.$transparent-colors, $theme, --300),
+                                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --label-color: props.get(core.$transparent-colors, $theme, --800),
+                                                ),
 
                                         --active: (
-                                                --bg-color:    props.get(core.$transparent-colors, $theme, --500),
-                                                --text-color:  props.get(core.$transparent-colors, $theme, --900),
-                                        ),
+                                                        --bg-color: props.get(core.$transparent-colors, $theme, --400),
+                                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                                ),
 
                                         --disabled: (
-                                                --bg-color:    props.get(core.$transparent-colors, $theme, --100),
-                                                --text-color:  props.get(core.$transparent-colors, $theme, --500),
-                                        ),
-                                )
-                        )
+                                                        --text-color: props.get(core.$transparent-colors, $theme, --500),
+                                                        --label-color: props.get(core.$transparent-colors, $theme, --500),
+                                                ),
+
+                                        --key-focus: (
+                                                        --label: props.get(core.$transparent-colors, $theme, --800),
+                                                        --border: props.get(core.$transparent-colors, $theme, --900),
+                                                        --outline: props.get(core.$transparent-colors, $theme, --300),
+                                                ),
+
+                                        --selected: (
+                                                        --bg-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --text-color: props.get(core.$transparent-colors, $theme, --text),
+                                                        --label-color: props.get(core.$transparent-colors, $theme, --800),
+                                                        --hover: (
+                                                                        --bg-color: props.get(core.$transparent-colors, $theme, --800),
+                                                                        --text-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --text
+                                                                                ),
+                                                                        --label-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --900
+                                                                                ),
+                                                                ),
+
+                                                        --active: (
+                                                                        --bg-color: props.get(core.$transparent-colors, $theme, --800),
+                                                                        --text-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --text
+                                                                                ),
+                                                                        --label-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --900
+                                                                                ),
+                                                                ),
+
+                                                        --disabled: (
+                                                                        --bg-color: props.get(core.$transparent-colors, $theme, --200),
+                                                                        --text-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --500
+                                                                                ),
+                                                                        --label-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --100
+                                                                                ),
+                                                                ),
+                                                ),
+
+                                        --quiet: (
+                                                        --selected: (
+                                                                        --bg-color: props.get(core.$transparent-colors, $theme, --300),
+                                                                        --text-color: props.get(
+                                                                                        core.$transparent-colors,
+                                                                                        $theme,
+                                                                                        --900
+                                                                                ),
+                                                                        --hover: (
+                                                                                        --bg-color: props.get(
+                                                                                                        core.$transparent-colors,
+                                                                                                        $theme,
+                                                                                                        --400
+                                                                                                ),
+                                                                                        --text-color: props.get(
+                                                                                                        core.$transparent-colors,
+                                                                                                        $theme,
+                                                                                                        --900
+                                                                                                ),
+                                                                                ),
+
+                                                                        --active: (
+                                                                                        --bg-color: props.get(
+                                                                                                        core.$transparent-colors,
+                                                                                                        $theme,
+                                                                                                        --500
+                                                                                                ),
+                                                                                        --text-color: props.get(
+                                                                                                        core.$transparent-colors,
+                                                                                                        $theme,
+                                                                                                        --900
+                                                                                                ),
+                                                                                ),
+
+                                                                        --disabled: (
+                                                                                        --bg-color: props.get(
+                                                                                                        core.$transparent-colors,
+                                                                                                        $theme,
+                                                                                                        --100
+                                                                                                ),
+                                                                                        --text-color: props.get(
+                                                                                                        core.$transparent-colors,
+                                                                                                        $theme,
+                                                                                                        --500
+                                                                                                ),
+                                                                                ),
+                                                                ),
+                                                ),
+                                ),
                 )
-        ));
+        );
 }
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index f503812..88448e0 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,21 +1,27 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use '../config';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "../config";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 @mixin styles {
-        @include bem.object('palette') {
-                display:    flex;
+        @include bem.object("palette") {
+                display: flex;
                 block-size: 3em;
 
-                @include bem.elem('item') {
+                @include bem.elem("item") {
                         flex: 1 1 auto;
 
                         $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base);
-                        $levels:  map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
+                        $levels: map.get(
+                                config.$themes,
+                                config.$theme-default,
+                                light,
+                                --levels,
+                                list.nth($palette, 2)
+                        );
 
                         @for $i from 1 through list.length($levels) {
                                 $key: list.nth(map.keys($levels), $i);
@@ -26,11 +32,19 @@
                         }
                 }
 
-                @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) {
-                        $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
+                @each $palette-name,
+                        $palette in map.get(config.$themes, config.$theme-default, light, --palettes)
+                {
+                        $levels: map.get(
+                                config.$themes,
+                                config.$theme-default,
+                                light,
+                                --levels,
+                                list.nth($palette, 2)
+                        );
 
                         @include bem.modifier(string.slice($palette-name, 3)) {
-                                @include bem.elem('item') {
+                                @include bem.elem("item") {
                                         @for $i from 1 through list.length($levels) {
                                                 $key: list.nth(map.keys($levels), $i);
 
@@ -42,17 +56,21 @@
                         }
                 }
 
-                @include bem.modifier('static') {
+                @include bem.modifier("static") {
                         @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
                                 $levels: map.get(config.$static-colors, --levels);
 
                                 @include bem.modifier(string.slice($palette-name, 3)) {
-                                        @include bem.elem('item') {
+                                        @include bem.elem("item") {
                                                 @for $i from 1 through list.length($levels) {
                                                         $key: list.nth(map.keys($levels), $i);
 
                                                         &:nth-child(#{$i}) {
-                                                                background-color: props.get(core.$theme, #{$palette-name}-static, $key);
+                                                                background-color: props.get(
+                                                                        core.$theme,
+                                                                        #{$palette-name}-static,
+                                                                        $key
+                                                                );
                                                         }
                                                 }
                                         }
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss
index 683f57e..d0af033 100644
--- a/src/objects/_placeholders.scss
+++ b/src/objects/_placeholders.scss
@@ -1,22 +1,22 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'placeholders.vars';
-@use 'placeholders.vars' as vars;
+@forward "placeholders.vars";
+@use "placeholders.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('placeholders') {
-                @include bem.elem('placeholder') {
-                        display:          inline-block;
-                        min-block-size:   props.get(vars.$min-block-size);
-                        vertical-align:   middle;
+        @include bem.object("placeholders") {
+                @include bem.elem("placeholder") {
+                        display: inline-block;
+                        min-block-size: props.get(vars.$min-block-size);
+                        vertical-align: middle;
                         background-color: currentColor;
-                        border-radius:    props.get(vars.$rounding);
-                        opacity:          props.get(vars.$opacity);
+                        border-radius: props.get(vars.$rounding);
+                        opacity: props.get(vars.$opacity);
                 }
         }
 }
diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss
index 1ac4ef7..87e1657 100644
--- a/src/objects/_placeholders.vars.scss
+++ b/src/objects/_placeholders.vars.scss
@@ -1,6 +1,6 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 $min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default;
-$rounding:       props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default;
-$opacity:        props.def(--o-placeholder--opacity, .5) !default;
+$rounding: props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default;
+$opacity: props.def(--o-placeholder--opacity, 0.5) !default;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 1cb5660..90187c1 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,44 +1,40 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'popover.vars';
-@use 'popover.vars' as vars;
+@forward "popover.vars";
+@use "popover.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('popover') {
-                position:           fixed;
-                inset-block-start:  0;
+        @include bem.object("popover") {
+                position: fixed;
+                inset-block-start: 0;
                 inset-inline-start: 0;
-                z-index:            props.get(vars.$z-index);
-                padding-block:      props.get(vars.$pad-b);
-                padding-inline:     props.get(vars.$pad-i);
-                margin:             0;
-                color:              currentColor;
-                background-color:   props.get(vars.$bg-color);
-                border:             props.get(vars.$border-width) solid transparent;
-                border-color:       props.get(vars.$border-color);
-                border-radius:      props.get(vars.$rounding);
-                box-shadow:
-                        props.get(vars.$shadow-x)
-                        props.get(vars.$shadow-y)
-                        props.get(vars.$shadow-blur)
-                        props.get(vars.$shadow-grow)
-                        props.get(vars.$shadow-color);
-                transform:          translate(var(--x), var(--y));
+                z-index: props.get(vars.$z-index);
+                padding-block: props.get(vars.$pad-b);
+                padding-inline: props.get(vars.$pad-i);
+                margin: 0;
+                color: currentColor;
+                background-color: props.get(vars.$bg-color);
+                border: props.get(vars.$border-width) solid transparent;
+                border-color: props.get(vars.$border-color);
+                border-radius: props.get(vars.$rounding);
+                box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur)
+                        props.get(vars.$shadow-grow) props.get(vars.$shadow-color);
+                transform: translate(var(--x), var(--y));
 
-                @include bem.modifier('up-left') {
+                @include bem.modifier("up-left") {
                         transform: translate(var(--x), calc(var(--y) - 100%));
                 }
 
-                @include bem.modifier('up-right') {
+                @include bem.modifier("up-right") {
                         transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
                 }
 
-                @include bem.modifier('down-right') {
+                @include bem.modifier("down-right") {
                         transform: translate(calc(var(--x) - 100%), var(--y));
                 }
         }
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss
index 202d71a..df1072e 100644
--- a/src/objects/_popover.vars.scss
+++ b/src/objects/_popover.vars.scss
@@ -1,19 +1,28 @@
-@use 'sass:map';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$z-index:         props.def(--o-popover--z-index, 11000) !default;
-$pad-i:           props.def(--o-popover--pad-i, 0) !default;
-$pad-b:           props.def(--o-popover--pad-b, props.get(core.$size--85)) !default;
+$z-index: props.def(--o-popover--z-index, 11000) !default;
+$pad-i: props.def(--o-popover--pad-i, 0) !default;
+$pad-b: props.def(--o-popover--pad-b, props.get(core.$size--85)) !default;
 $separator-width: props.def(--o-popover--separator-width, props.get(core.$size--85)) !default;
-$rounding:        props.def(--o-popover--rounding, props.get(core.$rounding)) !default;
-$border-width:    props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default;
+$rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default;
+$border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default;
 
-$shadow-x:    props.def(--o-popover--shadow-x, props.get(core.$shadow--l2--x)) !default;
-$shadow-y:    props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !default;
+$shadow-x: props.def(--o-popover--shadow-x, props.get(core.$shadow--l2--x)) !default;
+$shadow-y: props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !default;
 $shadow-blur: props.def(--o-popover--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
 $shadow-grow: props.def(--o-popover--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
 
-$bg-color:      props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
-$border-color:  props.def(--o-popover--border-color, props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), 'color') !default;
-$shadow-color:  props.def(--o-popover--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
+$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), "color") !default;
+$border-color: props.def(
+        --o-popover--border-color,
+        props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border)
+                props.get(core.$theme, --box, --border-strong),
+        "color"
+) !default;
+$shadow-color: props.def(
+        --o-popover--shadow-color,
+        props.get(core.$theme, --shadow),
+        "color"
+) !default;
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index ae4a85a..c964657 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -1,92 +1,100 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use '../core.vars' as core;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "../core.vars" as core;
 
-@forward 'radio.vars';
-@use 'radio.vars' as vars;
+@forward "radio.vars";
+@use "radio.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('radio') {
-                position:       relative;
-                display:        inline-block;
-                padding-block:  props.get(vars.$pad-b);
+        @include bem.object("radio") {
+                position: relative;
+                display: inline-block;
+                padding-block: props.get(vars.$pad-b);
                 padding-inline: props.get(vars.$pad-i);
-                margin-inline:
-                        calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
-                        calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
+                margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+                        calc(
+                                props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(
+                                                vars.$key-focus--border-offset
+                                        )
+                        );
 
-                @include bem.elem('circle') {
-                        display:            inline-block;
-                        flex:               0 0 auto;
-                        inline-size:        props.get(vars.$diameter);
-                        block-size:         props.get(vars.$diameter);
-                        margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset));
-                        vertical-align:     top;
-                        background-color:   props.get(vars.$circle-border-color);
-                        background-clip:    padding-box;
-                        border:             props.get(vars.$key-focus--border-offset) solid transparent;
-                        border-radius:      2em;
+                @include bem.elem("circle") {
+                        display: inline-block;
+                        flex: 0 0 auto;
+                        inline-size: props.get(vars.$diameter);
+                        block-size: props.get(vars.$diameter);
+                        margin-block-start: calc(
+                                0.5em * props.get(core.$font--standard--line-height) - 0.5 *
+                                        props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)
+                        );
+                        vertical-align: top;
+                        background-color: props.get(vars.$circle-border-color);
+                        background-clip: padding-box;
+                        border: props.get(vars.$key-focus--border-offset) solid transparent;
+                        border-radius: 2em;
 
                         &::after {
-                                position:           relative;
-                                inset-block-start:  props.get(vars.$border-width);
+                                position: relative;
+                                inset-block-start: props.get(vars.$border-width);
                                 inset-inline-start: props.get(vars.$border-width);
-                                display:            block;
-                                inline-size:        calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
-                                block-size:         calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
-                                content:            '';
-                                background-color:   props.get(vars.$circle-bg-color);
-                                border-radius:      props.get(vars.$diameter);
-                                transition:         transform .2s ease;
+                                display: block;
+                                inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
+                                block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
+                                content: "";
+                                background-color: props.get(vars.$circle-bg-color);
+                                border-radius: props.get(vars.$diameter);
+                                transition: transform 0.2s ease;
                         }
                 }
 
-                @include bem.elem('label') {
-                        margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
+                @include bem.elem("label") {
+                        margin-inline-start: calc(
+                                props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)
+                        );
                 }
 
-                @include bem.elem('native') {
-                        position:           absolute;
-                        inset-block-start:  0;
+                @include bem.elem("native") {
+                        position: absolute;
+                        inset-block-start: 0;
                         inset-inline-start: 0;
-                        z-index:            -1;
-                        inline-size:        100%;
-                        block-size:         100%;
-                        padding:            0;
-                        margin:             0;
-                        overflow:           hidden;
-                        appearance:         none;
-                        border-radius:      props.get(vars.$rounding);
+                        z-index: -1;
+                        inline-size: 100%;
+                        block-size: 100%;
+                        padding: 0;
+                        margin: 0;
+                        overflow: hidden;
+                        appearance: none;
+                        border-radius: props.get(vars.$rounding);
 
                         &:hover,
                         &:focus-visible {
-                                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem("label") {
                                         color: props.get(vars.$hover--label-color);
                                 }
 
-                                @include bem.sibling-elem('circle') {
+                                @include bem.sibling-elem("circle") {
                                         background-color: props.get(vars.$hover--circle-border-color);
                                 }
                         }
 
                         &:checked {
-                                @include bem.sibling-elem('circle') {
+                                @include bem.sibling-elem("circle") {
                                         &::after {
-                                                transform: scale(.44);
+                                                transform: scale(0.44);
                                         }
                                 }
                         }
 
                         &:disabled {
-                                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem("label") {
                                         color: props.get(vars.$disabled--label-color);
                                 }
 
-                                @include bem.sibling-elem('circle') {
+                                @include bem.sibling-elem("circle") {
                                         background-color: props.get(vars.$disabled--circle-border-color);
 
                                         &::after {
@@ -96,45 +104,46 @@
                         }
 
                         &:focus-visible {
-                                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem("label") {
                                         color: props.get(vars.$key-focus--label-color);
                                 }
 
-                                @include bem.sibling-elem('circle') {
-                                        outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                                        box-shadow:
-                                                0
-                                                0
-                                                0
-                                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                @include bem.sibling-elem("circle") {
+                                        outline: props.get(vars.$key-focus--border-color) solid
+                                                props.get(vars.$key-focus--border-width);
+                                        box-shadow: 0 0 0
+                                                calc(
+                                                        props.get(vars.$key-focus--border-width) +
+                                                                props.get(vars.$key-focus--outline-width)
+                                                )
                                                 props.get(vars.$key-focus--outline-color);
                                 }
                         }
                 }
 
-                @include bem.modifier('standalone') {
-                        @include bem.elem('circle') {
+                @include bem.modifier("standalone") {
+                        @include bem.elem("circle") {
                                 margin-block-start: 0;
                         }
                 }
 
-                @include bem.modifier('accent') {
-                        @include bem.elem('native') {
+                @include bem.modifier("accent") {
+                        @include bem.elem("native") {
                                 &:checked {
-                                        @include bem.sibling-elem('circle') {
+                                        @include bem.sibling-elem("circle") {
                                                 background-color: props.get(vars.$accent--circle-border-color);
                                         }
 
                                         &:hover,
                                         &:focus-visible {
-                                                @include bem.sibling-elem('circle') {
+                                                @include bem.sibling-elem("circle") {
                                                         background-color: props.get(vars.$accent--hover--circle-border-color);
                                                 }
                                         }
                                 }
 
                                 &:disabled {
-                                        @include bem.sibling-elem('circle') {
+                                        @include bem.sibling-elem("circle") {
                                                 background-color: props.get(vars.$disabled--circle-border-color);
 
                                                 &::after {
@@ -143,7 +152,7 @@
                                         }
 
                                         &:checked {
-                                                @include bem.sibling-elem('circle') {
+                                                @include bem.sibling-elem("circle") {
                                                         background-color: props.get(vars.$disabled--circle-border-color);
                                                 }
                                         }
diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss
index a5f249d..e7a41a4 100644
--- a/src/objects/_radio.vars.scss
+++ b/src/objects/_radio.vars.scss
@@ -1,33 +1,90 @@
-@use 'sass:map';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$diameter:         props.def(--o-radio--diameter, props.get(core.$size--200)) !default;
-$label-gap:        props.def(--o-radio--label-gap, props.get(core.$size--125)) !default;
-$border-width:     props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default;
-$pad-i:            props.def(--o-radio--pad-i, props.get(core.$size--65)) !default;
-$pad-b:            props.def(--o-radio--pad-b, props.get(core.$size--65)) !default;
-$rounding:         props.def(--o-radio--rounding, props.get(core.$rounding--sm)) !default;
-$spacing-sibling:  props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default;
+$diameter: props.def(--o-radio--diameter, props.get(core.$size--200)) !default;
+$label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) !default;
+$border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default;
+$pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default;
+$pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default;
+$rounding: props.def(--o-radio--rounding, props.get(core.$rounding--sm)) !default;
+$spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default;
 
-$key-focus--border-width:  props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-radio--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-radio--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --o-radio--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$key-focus--border-offset: props.def(
+        --o-radio--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$key-focus--outline-width: props.def(
+        --o-radio--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
-$circle-bg-color:     props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
+$circle-border-color: props.def(
+        --o-radio--circle-border-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
+$circle-bg-color: props.def(
+        --o-radio--circle-bg-color,
+        props.get(core.$theme, --base, --75),
+        "color"
+) !default;
 
-$hover--label-color:         props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
-$hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute), 'color') !default;
+$hover--label-color: props.def(
+        --o-radio--hover--label-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
+$hover--circle-border-color: props.def(
+        --o-radio--hover--circle-border-color,
+        props.get(core.$theme, --text-mute),
+        "color"
+) !default;
 
-$accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900), 'color') !default;
+$accent--circle-border-color: props.def(
+        --o-radio--accent--circle-border-color,
+        props.get(core.$theme, --accent, --900),
+        "color"
+) !default;
 
-$accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default;
+$accent--hover--circle-border-color: props.def(
+        --o-radio--accent--hover--circle-border-color,
+        props.get(core.$theme, --accent, --1000),
+        "color"
+) !default;
 
-$disabled--label-color:         props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
-$disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong), 'color') !default;
-$disabled--circle-bg-color:     props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
+$disabled--label-color: props.def(
+        --o-radio--disabled--label-color,
+        props.get(core.$theme, --text-disabled),
+        "color"
+) !default;
+$disabled--circle-border-color: props.def(
+        --o-radio--disabled--circle-border-color,
+        props.get(core.$theme, --border-strong),
+        "color"
+) !default;
+$disabled--circle-bg-color: props.def(
+        --o-radio--disabled--circle-bg-color,
+        props.get(core.$theme, --base, --75),
+        "color"
+) !default;
 
-$key-focus--label-color:   props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
-$key-focus--border-color:  props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$key-focus--label-color: props.def(
+        --o-radio--key-focus--label-color,
+        props.get(core.$theme, --focus, --text),
+        "color"
+) !default;
+$key-focus--border-color: props.def(
+        --o-radio--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$key-focus--outline-color: props.def(
+        --o-radio--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index 272d38c..ed0f3dc 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -1,76 +1,79 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use 'icon.vars' as icon;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "icon.vars" as icon;
 
-@forward 'side-nav.vars';
-@use 'side-nav.vars' as vars;
+@forward "side-nav.vars";
+@use "side-nav.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('side-nav') {
-                display:        flex;
+        @include bem.object("side-nav") {
+                display: flex;
                 flex-direction: column;
-                gap:            props.get(vars.$spacing);
+                gap: props.get(vars.$spacing);
 
-                @include bem.elem('header') {
-                        padding-block:  props.get(vars.$item--pad-b);
+                @include bem.elem("header") {
+                        padding-block: props.get(vars.$item--pad-b);
                         padding-inline: props.get(vars.$item--pad-i);
-                        font-size:      props.get(vars.$header--font-size);
-                        font-weight:    500;
-                        color:          props.get(vars.$header--label-color);
+                        font-size: props.get(vars.$header--font-size);
+                        font-weight: 500;
+                        color: props.get(vars.$header--label-color);
                         text-transform: uppercase;
-                        letter-spacing: .5px;
+                        letter-spacing: 0.5px;
 
                         @include bem.next-twin-elem {
                                 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
                         }
                 }
 
-                @include bem.elem('item') {
-                        display:         block;
-                        padding-block:   props.get(vars.$item--pad-b);
-                        padding-inline:  props.get(vars.$item--pad-i);
-                        margin:          calc(-1 * props.get(vars.$item--key-focus--border-offset));
-                        color:           props.get(vars.$item--disabled--label-color);
+                @include bem.elem("item") {
+                        display: block;
+                        padding-block: props.get(vars.$item--pad-b);
+                        padding-inline: props.get(vars.$item--pad-i);
+                        margin: calc(-1 * props.get(vars.$item--key-focus--border-offset));
+                        color: props.get(vars.$item--disabled--label-color);
                         background-clip: padding-box;
-                        border:          props.get(vars.$item--key-focus--border-offset) solid transparent;
-                        border-radius:   calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset));
+                        border: props.get(vars.$item--key-focus--border-offset) solid transparent;
+                        border-radius: calc(
+                                props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)
+                        );
 
                         &:link,
                         &:visited,
                         &:enabled {
                                 color: currentColor;
 
-                                @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
-                                        color:            props.get(vars.$item--hover--label-color);
+                                @include bem.multi("&:hover, &:focus-visible", "is" "selected") {
+                                        color: props.get(vars.$item--hover--label-color);
                                         background-color: props.get(vars.$item--hover--bg-color);
                                 }
 
                                 &:active {
-                                        color:            props.get(vars.$item--active--label-color);
+                                        color: props.get(vars.$item--active--label-color);
                                         background-color: props.get(vars.$item--active--bg-color);
                                 }
 
                                 &:focus-visible {
-                                        outline:    props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
-                                        box-shadow:
-                                                0
-                                                0
-                                                0
-                                                calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
+                                        outline: props.get(vars.$item--key-focus--border-color) solid
+                                                props.get(vars.$item--key-focus--border-width);
+                                        box-shadow: 0 0 0
+                                                calc(
+                                                        props.get(vars.$item--key-focus--border-width) +
+                                                                props.get(vars.$item--key-focus--outline-width)
+                                                )
                                                 props.get(vars.$item--key-focus--outline-color);
                                 }
                         }
 
-                        @include bem.next-elem('header') {
+                        @include bem.next-elem("header") {
                                 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
                         }
                 }
 
-                @include bem.elem('header') {
+                @include bem.elem("header") {
                         &:link,
                         &:visited,
                         &:enabled {
@@ -78,14 +81,14 @@
                         }
                 }
 
-                @include bem.elem('separator') {
+                @include bem.elem("separator") {
                         block-size: props.get(vars.$separator);
                 }
 
-                @include bem.elem('icon-slot') {
-                        display:         flex;
+                @include bem.elem("icon-slot") {
+                        display: flex;
                         justify-content: center;
-                        inline-size:     props.get(icon.$size);
+                        inline-size: props.get(icon.$size);
                 }
         }
 }
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss
index d6a7de1..8abb0df 100644
--- a/src/objects/_side-nav.vars.scss
+++ b/src/objects/_side-nav.vars.scss
@@ -1,28 +1,72 @@
-@use 'sass:map';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$spacing:           props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default;
-$header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$font-size--50)) !default;
-$separator:         props.def(--o-side-nav--separator, props.get(core.$size--200)) !default;
+$spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default;
+$header--font-size: props.def(
+        --o-side-nav--header--font-size,
+        props.get(core.$font-size--50)
+) !default;
+$separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default;
 
-$item--pad-i:         props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default;
-$item--pad-b:         props.def(--o-side-nav--item--pad-b, props.get(core.$size--75)) !default;
-$item--rounding:      props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default;
+$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default;
+$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--75)) !default;
+$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default;
 
-$item--key-focus--border-width:  props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$item--key-focus--outline-width: props.def(--o-side-nav--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$item--key-focus--border-width: props.def(
+        --o-side-nav--item--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$item--key-focus--border-offset: props.def(
+        --o-side-nav--item--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$item--key-focus--outline-width: props.def(
+        --o-side-nav--item--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$header--label-color: props.def(
+        --o-side-nav--header--label-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
 
-$item--hover--bg-color:    props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
-$item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
+$item--hover--bg-color: props.def(
+        --o-side-nav--item--hover--bg-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;
+$item--hover--label-color: props.def(
+        --o-side-nav--item--hover--label-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
 
-$item--active--bg-color:    props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border), 'color') !default;
-$item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading), 'color') !default;
+$item--active--bg-color: props.def(
+        --o-side-nav--item--active--bg-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
+$item--active--label-color: props.def(
+        --o-side-nav--item--active--label-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
 
-$item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
+$item--disabled--label-color: props.def(
+        --o-side-nav--item--disabled--label-color,
+        props.get(core.$theme, --text-disabled),
+        "color"
+) !default;
 
-$item--key-focus--border-color:  props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$item--key-focus--border-color: props.def(
+        --o-side-nav--item--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$item--key-focus--outline-color: props.def(
+        --o-side-nav--item--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index fe8fe26..8885929 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -1,22 +1,22 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'status-indicator.vars';
-@use 'status-indicator.vars' as vars;
+@forward "status-indicator.vars";
+@use "status-indicator.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('status-indicator') {
-                display:          inline-block;
-                inline-size:      props.get(vars.$size);
-                block-size:       props.get(vars.$size);
+        @include bem.object("status-indicator") {
+                display: inline-block;
+                inline-size: props.get(vars.$size);
+                block-size: props.get(vars.$size);
                 background-color: props.get(vars.$default);
-                border-radius:    10em;
+                border-radius: 10em;
 
                 @each $theme in map.keys(props.get(vars.$themes)) {
                         @include bem.is(string.slice($theme, 3)) {
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss
index dfe628f..66a11e8 100644
--- a/src/objects/_status-indicator.vars.scss
+++ b/src/objects/_status-indicator.vars.scss
@@ -1,26 +1,32 @@
-@use 'sass:map';
-@use 'pkg:iro-sass/src/props';
-@use '../config';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "pkg:iro-sass/props";
+@use "../config";
+@use "../core.vars" as core;
 
 $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default;
 
-$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong), 'color') !default;
-$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default;
+$default: props.def(
+        --o-status-indicator--default,
+        props.get(core.$theme, --border-strong),
+        "color"
+) !default;
+$primary: props.def(
+        --o-status-indicator--primary,
+        props.get(core.$theme, --text),
+        "color"
+) !default;
 
 $themes-config: (
-        accent:   --accent,
+        accent: --accent,
         positive: --positive,
         negative: --negative,
-        warning:  --warning,
+        warning: --warning,
 ) !default;
 
-$themes: props.def(--o-status-indicator, (), 'color');
+$themes: props.def(--o-status-indicator, (), "color");
 
 @each $theme, $key in $themes-config {
         @if $theme != --base {
-                $themes: props.merge($themes, (
-                        --#{$theme}: props.get(core.$theme, $key, --700),
-                ));
+                $themes: props.merge($themes, (--#{$theme}: props.get(core.$theme, $key, --700)));
         }
 }
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 0ef95e6..c1f7411 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,73 +1,79 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use '../core.vars' as core;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "../core.vars" as core;
 
-@forward 'switch.vars';
-@use 'switch.vars' as vars;
+@forward "switch.vars";
+@use "switch.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('switch') {
-                position:       relative;
-                display:        inline-block;
-                padding-block:  props.get(vars.$pad-b);
+        @include bem.object("switch") {
+                position: relative;
+                display: inline-block;
+                padding-block: props.get(vars.$pad-b);
                 padding-inline: props.get(vars.$pad-i);
-                margin-inline:
-                        calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
-                        calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
+                margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+                        calc(
+                                props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(
+                                                vars.$key-focus--border-offset
+                                        )
+                        );
 
-                @include bem.elem('indicator') {
-                        display:            inline-block;
-                        flex:               0 0 auto;
-                        inline-size:        props.get(vars.$inline-size);
-                        block-size:         props.get(vars.$block-size);
-                        margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset));
-                        vertical-align:     top;
-                        background-color:   props.get(vars.$track-bg-color);
-                        background-clip:    padding-box;
-                        border:             props.get(vars.$key-focus--border-offset) solid transparent;
-                        border-radius:      2em;
-                        transition:         background-color .2s ease;
+                @include bem.elem("indicator") {
+                        display: inline-block;
+                        flex: 0 0 auto;
+                        inline-size: props.get(vars.$inline-size);
+                        block-size: props.get(vars.$block-size);
+                        margin-block-start: calc(
+                                0.5em * props.get(core.$font--standard--line-height) - 0.5 *
+                                        props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)
+                        );
+                        vertical-align: top;
+                        background-color: props.get(vars.$track-bg-color);
+                        background-clip: padding-box;
+                        border: props.get(vars.$key-focus--border-offset) solid transparent;
+                        border-radius: 2em;
+                        transition: background-color 0.2s ease;
 
                         &::after {
-                                display:          block;
-                                inline-size:      calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
-                                block-size:       calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
-                                content:          '';
+                                display: block;
+                                inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
+                                block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
+                                content: "";
                                 background-color: props.get(vars.$handle-bg-color);
-                                border:           props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
-                                border-radius:    props.get(vars.$inline-size);
-                                transition:       transform .2s ease;
+                                border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
+                                border-radius: props.get(vars.$inline-size);
+                                transition: transform 0.2s ease;
                         }
                 }
 
-                @include bem.elem('label') {
+                @include bem.elem("label") {
                         margin-inline-start: props.get(vars.$label-gap);
                 }
 
-                @include bem.elem('native') {
-                        position:           absolute;
-                        inset-block-start:  0;
+                @include bem.elem("native") {
+                        position: absolute;
+                        inset-block-start: 0;
                         inset-inline-start: 0;
-                        z-index:            -1;
-                        inline-size:        100%;
-                        block-size:         100%;
-                        padding:            0;
-                        margin:             0;
-                        overflow:           hidden;
-                        appearance:         none;
-                        border-radius:      props.get(vars.$rounding);
+                        z-index: -1;
+                        inline-size: 100%;
+                        block-size: 100%;
+                        padding: 0;
+                        margin: 0;
+                        overflow: hidden;
+                        appearance: none;
+                        border-radius: props.get(vars.$rounding);
 
                         &:hover,
                         &:focus-visible {
-                                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem("label") {
                                         color: props.get(vars.$hover--label-color);
                                 }
 
-                                @include bem.sibling-elem('indicator') {
+                                @include bem.sibling-elem("indicator") {
                                         &::after {
                                                 border-color: props.get(vars.$hover--handle-border-color);
                                         }
@@ -75,18 +81,23 @@
                         }
 
                         &:checked {
-                                @include bem.sibling-elem('indicator') {
+                                @include bem.sibling-elem("indicator") {
                                         background-color: props.get(vars.$handle-border-color);
 
                                         &::after {
                                                 border-color: props.get(vars.$handle-border-color);
-                                                transform:    translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
+                                                transform: translate(
+                                                        calc(
+                                                                props.get(vars.$inline-size) - props.get(vars.$block-size) + 0.5px
+                                                        ),
+                                                        0
+                                                );
                                         }
                                 }
 
                                 &:hover,
                                 &:focus-visible {
-                                        @include bem.sibling-elem('indicator') {
+                                        @include bem.sibling-elem("indicator") {
                                                 background-color: props.get(vars.$hover--handle-border-color);
 
                                                 &::after {
@@ -97,21 +108,21 @@
                         }
 
                         &:disabled {
-                                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem("label") {
                                         color: props.get(vars.$disabled--label-color);
                                 }
 
-                                @include bem.sibling-elem('indicator') {
+                                @include bem.sibling-elem("indicator") {
                                         background-color: props.get(vars.$disabled--track-bg-color);
 
                                         &::after {
                                                 background-color: props.get(vars.$disabled--handle-bg-color);
-                                                border-color:     props.get(vars.$disabled--handle-border-color);
+                                                border-color: props.get(vars.$disabled--handle-border-color);
                                         }
                                 }
 
                                 &:checked {
-                                        @include bem.sibling-elem('indicator') {
+                                        @include bem.sibling-elem("indicator") {
                                                 background-color: props.get(vars.$disabled--handle-border-color);
 
                                                 &::after {
@@ -122,32 +133,33 @@
                         }
 
                         &:focus-visible {
-                                @include bem.sibling-elem('label') {
+                                @include bem.sibling-elem("label") {
                                         color: props.get(vars.$key-focus--label-color);
                                 }
 
-                                @include bem.sibling-elem('indicator') {
-                                        outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                                        box-shadow:
-                                                0
-                                                0
-                                                0
-                                                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                @include bem.sibling-elem("indicator") {
+                                        outline: props.get(vars.$key-focus--border-color) solid
+                                                props.get(vars.$key-focus--border-width);
+                                        box-shadow: 0 0 0
+                                                calc(
+                                                        props.get(vars.$key-focus--border-width) +
+                                                                props.get(vars.$key-focus--outline-width)
+                                                )
                                                 props.get(vars.$key-focus--outline-color);
                                 }
                         }
                 }
 
-                @include bem.modifier('standalone') {
-                        @include bem.elem('indicator') {
+                @include bem.modifier("standalone") {
+                        @include bem.elem("indicator") {
                                 margin-block-start: 0;
                         }
                 }
 
-                @include bem.modifier('accent') {
-                        @include bem.elem('native') {
+                @include bem.modifier("accent") {
+                        @include bem.elem("native") {
                                 &:checked {
-                                        @include bem.sibling-elem('indicator') {
+                                        @include bem.sibling-elem("indicator") {
                                                 background-color: props.get(vars.$accent--handle-border-color);
 
                                                 &::after {
@@ -157,7 +169,7 @@
 
                                         &:hover,
                                         &:focus-visible {
-                                                @include bem.sibling-elem('indicator') {
+                                                @include bem.sibling-elem("indicator") {
                                                         background-color: props.get(vars.$accent--hover--handle-border-color);
 
                                                         &::after {
@@ -168,12 +180,12 @@
                                 }
 
                                 &:disabled {
-                                        @include bem.sibling-elem('label') {
+                                        @include bem.sibling-elem("label") {
                                                 color: props.get(vars.$disabled--label-color);
                                         }
 
                                         &:checked {
-                                                @include bem.sibling-elem('indicator') {
+                                                @include bem.sibling-elem("indicator") {
                                                         background-color: props.get(vars.$disabled--handle-border-color);
 
                                                         &::after {
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss
index 761cacd..6f56ec7 100644
--- a/src/objects/_switch.vars.scss
+++ b/src/objects/_switch.vars.scss
@@ -1,36 +1,101 @@
-@use 'sass:map';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$inline-size:     props.def(--o-switch--inline-size, props.get(core.$size--350)) !default;
-$block-size:      props.def(--o-switch--block-size, props.get(core.$size--200)) !default;
-$label-gap:       props.def(--o-switch--label-gap, props.get(core.$size--125)) !default;
-$border-width:    props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default;
-$pad-i:           props.def(--o-switch--pad-i, props.get(core.$size--65)) !default;
-$pad-b:           props.def(--o-switch--pad-b, props.get(core.$size--65)) !default;
-$rounding:        props.def(--o-switch--rounding, props.get(core.$rounding--sm)) !default;
+$inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default;
+$block-size: props.def(--o-switch--block-size, props.get(core.$size--200)) !default;
+$label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !default;
+$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default;
+$pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default;
+$pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default;
+$rounding: props.def(--o-switch--rounding, props.get(core.$rounding--sm)) !default;
 $spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default;
 
-$key-focus--border-width:  props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --o-switch--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$key-focus--border-offset: props.def(
+        --o-switch--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$key-focus--outline-width: props.def(
+        --o-switch--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$track-bg-color:      props.def(--o-switch--track-bg-color, props.get(core.$theme, --border), 'color') !default;
-$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
-$handle-bg-color:     props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default;
+$track-bg-color: props.def(
+        --o-switch--track-bg-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
+$handle-border-color: props.def(
+        --o-switch--handle-border-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
+$handle-bg-color: props.def(
+        --o-switch--handle-bg-color,
+        props.get(core.$theme, --base, --50),
+        "color"
+) !default;
 
-$hover--label-color:         props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
-$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute), 'color') !default;
+$hover--label-color: props.def(
+        --o-switch--hover--label-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
+$hover--handle-border-color: props.def(
+        --o-switch--hover--handle-border-color,
+        props.get(core.$theme, --text-mute),
+        "color"
+) !default;
 
-$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900), 'color') !default;
+$accent--handle-border-color: props.def(
+        --o-switch--accent--handle-border-color,
+        props.get(core.$theme, --accent, --900),
+        "color"
+) !default;
 
-$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default;
+$accent--hover--handle-border-color: props.def(
+        --o-switch--accent--hover--handle-border-color,
+        props.get(core.$theme, --accent, --1000),
+        "color"
+) !default;
 
-$disabled--label-color:         props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
-$disabled--track-bg-color:      props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border), 'color') !default;
-$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong), 'color') !default;
-$disabled--handle-bg-color:     props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default;
+$disabled--label-color: props.def(
+        --o-switch--disabled--label-color,
+        props.get(core.$theme, --text-disabled),
+        "color"
+) !default;
+$disabled--track-bg-color: props.def(
+        --o-switch--disabled--track-bg-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
+$disabled--handle-border-color: props.def(
+        --o-switch--disabled--handle-border-color,
+        props.get(core.$theme, --border-strong),
+        "color"
+) !default;
+$disabled--handle-bg-color: props.def(
+        --o-switch--disabled--handle-bg-color,
+        props.get(core.$theme, --base, --50),
+        "color"
+) !default;
 
-$key-focus--label-color:   props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
-$key-focus--border-color:  props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$key-focus--label-color: props.def(
+        --o-switch--key-focus--label-color,
+        props.get(core.$theme, --focus, --text),
+        "color"
+) !default;
+$key-focus--border-color: props.def(
+        --o-switch--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$key-focus--outline-color: props.def(
+        --o-switch--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index d43208f..02519f9 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -1,75 +1,77 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'tabbar.vars';
-@use 'tabbar.vars' as vars;
+@forward "tabbar.vars";
+@use "tabbar.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('tabbar') {
+        @include bem.object("tabbar") {
                 min-inline-size: 0;
-                block-size:      props.get(vars.$block-size);
-                overflow:        hidden;
+                block-size: props.get(vars.$block-size);
+                overflow: hidden;
 
                 &::after {
-                        display:            block;
-                        block-size:         props.get(vars.$border--width);
+                        display: block;
+                        block-size: props.get(vars.$border--width);
                         margin-block-start: calc(-1 * props.get(vars.$border--width));
-                        content:            '';
-                        background-color:   props.get(vars.$railing--bg-color);
+                        content: "";
+                        background-color: props.get(vars.$railing--bg-color);
                 }
 
-                @include bem.elem('tabs') {
-                        display:         flex;
-                        block-size:      100%;
+                @include bem.elem("tabs") {
+                        display: flex;
+                        block-size: 100%;
                         overflow-inline: auto;
                 }
 
-                @include bem.modifier('quiet') {
+                @include bem.modifier("quiet") {
                         box-shadow: none;
                 }
 
-                @include bem.modifier('adapt') {
+                @include bem.modifier("adapt") {
                         block-size: 100%;
                 }
 
-                @include bem.modifier('snap') {
+                @include bem.modifier("snap") {
                         scroll-snap-align: start;
                 }
 
-                @include bem.elem('tab') {
-                        position:       relative;
-                        display:        flex;
-                        align-items:    center;
-                        padding-inline: calc(.5 * props.get(vars.$spacing));
-                        margin-inline:  calc(-.5 * props.get(vars.$spacing));
-                        color:          props.get(vars.$tab--text-color);
-                        white-space:    nowrap;
+                @include bem.elem("tab") {
+                        position: relative;
+                        display: flex;
+                        align-items: center;
+                        padding-inline: calc(0.5 * props.get(vars.$spacing));
+                        margin-inline: calc(-0.5 * props.get(vars.$spacing));
+                        color: props.get(vars.$tab--text-color);
+                        white-space: nowrap;
 
                         &::before {
-                                position:          absolute;
+                                position: absolute;
                                 inset-block-start: 50%;
-                                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
-                                z-index:           -10;
-                                block-size:        1.5em;
-                                content:           '';
-                                border-radius:     props.get(vars.$rounding);
-                                transform:         translateY(-50%);
+                                inset-inline: calc(
+                                        -1 * props.get(vars.$tab--pad-i) + 0.5 * props.get(vars.$spacing)
+                                );
+                                z-index: -10;
+                                block-size: 1.5em;
+                                content: "";
+                                border-radius: props.get(vars.$rounding);
+                                transform: translateY(-50%);
                         }
 
                         &::after {
-                                position:         absolute;
-                                inset-block-end:  0;
-                                inset-inline:     calc(.5 * props.get(vars.$spacing));
-                                z-index:          10;
-                                display:          none;
-                                block-size:       props.get(vars.$indicator--width);
-                                content:          '';
+                                position: absolute;
+                                inset-block-end: 0;
+                                inset-inline: calc(0.5 * props.get(vars.$spacing));
+                                z-index: 10;
+                                display: none;
+                                block-size: props.get(vars.$indicator--width);
+                                content: "";
                                 background-color: props.get(vars.$tab--selected--text-color);
                         }
 
@@ -83,21 +85,25 @@
 
                                 &:focus-visible {
                                         &::before {
-                                                color:           props.get(vars.$key-focus--text-color);
+                                                color: props.get(vars.$key-focus--text-color);
                                                 text-decoration: none;
-                                                outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                                outline: props.get(vars.$key-focus--border-color) solid
+                                                        props.get(vars.$key-focus--border-width);
                                                 box-shadow: 0 0 0
-                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                        calc(
+                                                                props.get(vars.$key-focus--border-width) +
+                                                                        props.get(vars.$key-focus--outline-width)
+                                                        )
                                                         props.get(vars.$key-focus--outline-color);
                                         }
                                 }
                         }
 
                         @include bem.next-twin-elem {
-                                margin-inline-start: calc(.5 * props.get(vars.$spacing));
+                                margin-inline-start: calc(0.5 * props.get(vars.$spacing));
                         }
 
-                        @include bem.is('selected') {
+                        @include bem.is("selected") {
                                 color: props.get(vars.$tab--selected--text-color);
 
                                 &::after {
@@ -106,13 +112,13 @@
                         }
                 }
 
-                @include bem.modifier('accent') {
-                        @include bem.elem('tab') {
+                @include bem.modifier("accent") {
+                        @include bem.elem("tab") {
                                 &::after {
                                         background-color: props.get(vars.$tab--accent--text-color);
                                 }
 
-                                @include bem.is('selected') {
+                                @include bem.is("selected") {
                                         color: props.get(vars.$tab--accent--text-color);
                                 }
                         }
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss
index d9cc53e..d26f302 100644
--- a/src/objects/_tabbar.vars.scss
+++ b/src/objects/_tabbar.vars.scss
@@ -1,26 +1,66 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 $block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default;
-$rounding:   props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !default;
-$spacing:    props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default;
+$rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !default;
+$spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default;
 $tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default;
 
-$border--width:    props.def(--o-tabbar--border--width, props.get(core.$border-width--thin)) !default;
-$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default;
+$border--width: props.def(--o-tabbar--border--width, props.get(core.$border-width--thin)) !default;
+$indicator--width: props.def(
+        --o-tabbar--indicator--width,
+        props.get(core.$border-width--medium)
+) !default;
 
-$key-focus--border-width:  props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-tabbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --o-tabbar--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$key-focus--border-offset: props.def(
+        --o-tabbar--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$key-focus--outline-width: props.def(
+        --o-tabbar--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$tab--text-color:           props.def(--o-tabbar--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default;
-$tab--selected--text-color: props.def(--o-tabbar--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
-$tab--accent--text-color:   props.def(--o-tabbar--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
+$tab--text-color: props.def(
+        --o-tabbar--tab--text-color,
+        props.get(core.$theme, --text-mute),
+        "color"
+) !default;
+$tab--selected--text-color: props.def(
+        --o-tabbar--tab--selected--text-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
+$tab--accent--text-color: props.def(
+        --o-tabbar--tab--accent--text-color,
+        props.get(core.$theme, --accent, --1100),
+        "color"
+) !default;
 
-$railing--bg-color: props.def(--o-tabbar--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$railing--bg-color: props.def(
+        --o-tabbar--railing--bg-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;
 
-$key-focus--text-color:    props.def(--o-tabbar--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
-$key-focus--border-color:  props.def(--o-tabbar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--o-tabbar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$key-focus--text-color: props.def(
+        --o-tabbar--key-focus--text-color,
+        props.get(core.$theme, --focus, --text),
+        "color"
+) !default;
+$key-focus--border-color: props.def(
+        --o-tabbar--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$key-focus--outline-color: props.def(
+        --o-tabbar--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index effa61f..a985f78 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,57 +1,57 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'table.vars';
-@use 'table.vars' as vars;
+@forward "table.vars";
+@use "table.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('table') {
-                border-spacing:  0;
+        @include bem.object("table") {
+                border-spacing: 0;
                 border-collapse: separate;
 
-                @include bem.modifier('fixed') {
+                @include bem.modifier("fixed") {
                         table-layout: fixed;
                 }
 
-                @include bem.elem('head-cell') {
-                        padding-block:  props.get(vars.$pad-b);
+                @include bem.elem("head-cell") {
+                        padding-block: props.get(vars.$pad-b);
                         padding-inline: props.get(vars.$pad-i);
-                        font-family:    props.get(vars.$heading--font-family);
-                        font-size:      props.get(vars.$heading--font-size);
-                        font-weight:    props.get(vars.$heading--font-weight);
-                        color:          props.get(vars.$heading-color);
-                        text-align:     start;
+                        font-family: props.get(vars.$heading--font-family);
+                        font-size: props.get(vars.$heading--font-size);
+                        font-weight: props.get(vars.$heading--font-weight);
+                        color: props.get(vars.$heading-color);
+                        text-align: start;
                         text-transform: props.get(vars.$heading--text-transform);
                         letter-spacing: props.get(vars.$heading--letter-spacing);
                 }
 
-                @include bem.elem('cell') {
-                        padding-block:            props.get(vars.$pad-b);
-                        padding-inline:           props.get(vars.$pad-i);
-                        border-color:             props.get(vars.$border-color);
-                        border-style:             solid;
-                        border-width:             0;
+                @include bem.elem("cell") {
+                        padding-block: props.get(vars.$pad-b);
+                        padding-inline: props.get(vars.$pad-i);
+                        border-color: props.get(vars.$border-color);
+                        border-style: solid;
+                        border-width: 0;
                         border-block-start-width: props.get(vars.$border-width);
 
-                        @include bem.modifier('divider') {
+                        @include bem.modifier("divider") {
                                 border-inline-end-width: props.get(vars.$border-width);
                         }
                 }
 
-                @include bem.elem('row') {
+                @include bem.elem("row") {
                         &:last-child {
-                                @include bem.elem('cell') {
+                                @include bem.elem("cell") {
                                         border-block-end-width: props.get(vars.$border-width);
                                 }
                         }
                 }
 
-                @include bem.modifier('flush') {
-                        @include bem.elem('head-cell', 'cell') {
+                @include bem.modifier("flush") {
+                        @include bem.elem("head-cell", "cell") {
                                 &:first-child {
                                         padding-inline-start: 0;
                                 }
@@ -62,8 +62,8 @@
                         }
                 }
 
-                @include bem.modifier('box') {
-                        @include bem.elem('cell') {
+                @include bem.modifier("box") {
+                        @include bem.elem("cell") {
                                 background-color: props.get(vars.$box--bg-color);
 
                                 &:first-child {
@@ -75,9 +75,9 @@
                                 }
                         }
 
-                        @include bem.elem('row') {
+                        @include bem.elem("row") {
                                 &:first-child {
-                                        @include bem.elem('cell') {
+                                        @include bem.elem("cell") {
                                                 &:first-child {
                                                         border-start-start-radius: props.get(vars.$rounding);
                                                 }
@@ -89,7 +89,7 @@
                                 }
 
                                 &:last-child {
-                                        @include bem.elem('cell') {
+                                        @include bem.elem("cell") {
                                                 &:first-child {
                                                         border-end-start-radius: props.get(vars.$rounding);
                                                 }
@@ -102,35 +102,35 @@
                         }
                 }
 
-                @include bem.modifier('interactive') {
-                        @include bem.elem('row') {
-                                @include bem.elem('cell') {
+                @include bem.modifier("interactive") {
+                        @include bem.elem("row") {
+                                @include bem.elem("cell") {
                                         cursor: pointer;
                                 }
 
                                 &:hover {
-                                        @include bem.elem('cell') {
+                                        @include bem.elem("cell") {
                                                 background-color: props.get(vars.$hover--bg-color);
                                         }
                                 }
 
                                 &:active {
-                                        @include bem.elem('cell') {
+                                        @include bem.elem("cell") {
                                                 background-color: props.get(vars.$active--bg-color);
                                         }
                                 }
                         }
 
-                        @include bem.modifier('box') {
-                                @include bem.elem('row') {
+                        @include bem.modifier("box") {
+                                @include bem.elem("row") {
                                         &:hover {
-                                                @include bem.elem('cell') {
+                                                @include bem.elem("cell") {
                                                         background-color: props.get(vars.$box--hover--bg-color);
                                                 }
                                         }
 
                                         &:active {
-                                                @include bem.elem('cell') {
+                                                @include bem.elem("cell") {
                                                         background-color: props.get(vars.$box--active--bg-color);
                                                 }
                                         }
@@ -138,8 +138,8 @@
                         }
                 }
 
-                @include bem.modifier('sm') {
-                        @include bem.elem('head-cell', 'cell') {
+                @include bem.modifier("sm") {
+                        @include bem.elem("head-cell", "cell") {
                                 padding-block: props.get(vars.$pad-b--sm);
                         }
                 }
diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss
index 7c5683c..e00010f 100644
--- a/src/objects/_table.vars.scss
+++ b/src/objects/_table.vars.scss
@@ -1,25 +1,59 @@
-@use 'sass:map';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$pad-i:        props.def(--o-table--pad-i, props.get(core.$size--175)) !default;
-$pad-b:        props.def(--o-table--pad-b, props.get(core.$size--125)) !default;
-$rounding:     props.def(--o-table--rounding, props.get(core.$rounding--sm)) !default;
+$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default;
+$pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default;
+$rounding: props.def(--o-table--rounding, props.get(core.$rounding--sm)) !default;
 $border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default;
 
-$heading--font-family:    props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default;
-$heading--font-size:      props.def(--o-table--heading--font-size, props.get(core.$font-size--50)) !default;
-$heading--font-weight:    props.def(--o-table--heading--font-weight, bold) !default;
+$heading--font-family: props.def(
+        --o-table--heading--font-family,
+        props.get(core.$font--standard--family)
+) !default;
+$heading--font-size: props.def(
+        --o-table--heading--font-size,
+        props.get(core.$font-size--50)
+) !default;
+$heading--font-weight: props.def(--o-table--heading--font-weight, bold) !default;
 $heading--text-transform: props.def(--o-table--heading--text-transform, uppercase) !default;
-$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !default;
+$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, 0.5px) !default;
 
 $pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default;
 
-$border-color:     props.def(--o-table--border-color, props.get(core.$theme, --border), 'color') !default;
-$heading-color:    props.def(--o-table--heading-color, props.get(core.$theme, --heading), 'color') !default;
-$hover--bg-color:  props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
-$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border), 'color') !default;
+$border-color: props.def(
+        --o-table--border-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
+$heading-color: props.def(
+        --o-table--heading-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
+$hover--bg-color: props.def(
+        --o-table--hover--bg-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;
+$active--bg-color: props.def(
+        --o-table--active--bg-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
 
-$box--bg-color:         props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
-$box--hover--bg-color:  props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base), 'color') !default;
-$box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$box--bg-color: props.def(
+        --o-table--box--bg-color,
+        props.get(core.$theme, --base, --50),
+        "color"
+) !default;
+$box--hover--bg-color: props.def(
+        --o-table--box--hover--bg-color,
+        props.get(core.$theme, --bg-base),
+        "color"
+) !default;
+$box--active--bg-color: props.def(
+        --o-table--box--active--bg-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 5a48df3..a8d3ec8 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,84 +1,91 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'text-field.vars';
-@use 'text-field.vars' as vars;
+@forward "text-field.vars";
+@use "text-field.vars" as vars;
 
 @mixin -invalid {
-        $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
+        $focus-border-offset: calc(
+                props.get(vars.$border-width) - props.get(vars.$focus--border-width)
+        );
 
-        @include bem.sibling-elem('bg') {
-                inset-block:   $focus-border-offset;
-                inset-inline:  $focus-border-offset;
-                border:        props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
+        @include bem.sibling-elem("bg") {
+                inset-block: $focus-border-offset;
+                inset-inline: $focus-border-offset;
+                border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
                 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
         }
 
         &:hover {
-                @include bem.sibling-elem('bg') {
+                @include bem.sibling-elem("bg") {
                         border-color: props.get(vars.$error--hover--border-color);
                 }
         }
 
         &:focus {
-                @include bem.sibling-elem('bg') {
+                @include bem.sibling-elem("bg") {
                         border-color: props.get(vars.$error--focus--border-color);
                 }
         }
 }
 
 @mixin -keyboard-focus {
-        @include bem.sibling-elem('bg') {
-                outline:        props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
-                border-color:   props.get(vars.$key-focus--border-color);
+        @include bem.sibling-elem("bg") {
+                outline: props.get(vars.$key-focus--outline-color) solid
+                        props.get(vars.$key-focus--border-width);
+                border-color: props.get(vars.$key-focus--border-color);
                 //outline-offset: props.get(vars.$focus --border);
         }
 }
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('text-field') {
-                $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
+        @include bem.object("text-field") {
+                $focus-border-offset: calc(
+                        props.get(vars.$border-width) - props.get(vars.$focus--border-width)
+                );
 
-                position:         relative;
-                min-inline-size:  0;
+                position: relative;
+                min-inline-size: 0;
                 background-color: props.get(vars.$bg-color);
-                border-radius:    props.get(vars.$rounding);
+                border-radius: props.get(vars.$rounding);
 
-                @include bem.elem('bg') {
-                        position:       absolute;
-                        inset-block:    0;
-                        inset-inline:   0;
-                        display:        block;
+                @include bem.elem("bg") {
+                        position: absolute;
+                        inset-block: 0;
+                        inset-inline: 0;
+                        display: block;
                         pointer-events: none;
-                        border:         props.get(vars.$border-width) solid props.get(vars.$border-color);
-                        border-radius:  props.get(vars.$rounding);
+                        border: props.get(vars.$border-width) solid props.get(vars.$border-color);
+                        border-radius: props.get(vars.$rounding);
                 }
 
-                @include bem.elem('native') {
-                        box-sizing:       border-box;
-                        inline-size:      100%;
-                        padding-block:    calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
-                        padding-inline:   props.get(vars.$pad-i);
-                        font:             inherit;
-                        line-height:      props.get(vars.$line-height);
-                        color:            props.get(vars.$text-color);
-                        appearance:       none;
-                        resize:           none;
+                @include bem.elem("native") {
+                        box-sizing: border-box;
+                        inline-size: 100%;
+                        padding-block: calc(
+                                props.get(vars.$pad-b) - 0.5em * (props.get(vars.$line-height) - 1)
+                        );
+                        padding-inline: props.get(vars.$pad-i);
+                        font: inherit;
+                        line-height: props.get(vars.$line-height);
+                        color: props.get(vars.$text-color);
+                        appearance: none;
+                        resize: none;
                         background-color: transparent;
-                        border:           1px solid transparent;
+                        border: 1px solid transparent;
 
                         &::placeholder {
                                 font-style: italic;
-                                color:      props.get(vars.$placeholder-color);
-                                opacity:    1;
+                                color: props.get(vars.$placeholder-color);
+                                opacity: 1;
                         }
 
                         &:hover {
-                                @include bem.sibling-elem('bg') {
+                                @include bem.sibling-elem("bg") {
                                         border-color: props.get(vars.$hover--border-color);
                                 }
                         }
@@ -86,10 +93,11 @@
                         &:focus {
                                 outline: 0;
 
-                                @include bem.sibling-elem('bg') {
-                                        inset-block:   $focus-border-offset;
-                                        inset-inline:  $focus-border-offset;
-                                        border:        props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
+                                @include bem.sibling-elem("bg") {
+                                        inset-block: $focus-border-offset;
+                                        inset-inline: $focus-border-offset;
+                                        border: props.get(vars.$focus--border-width) solid
+                                                props.get(vars.$focus--border-color);
                                         border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
                                 }
                         }
@@ -104,46 +112,49 @@
                         }
                 }
 
-                @include bem.modifier('extended') {
+                @include bem.modifier("extended") {
                         padding: props.get(vars.$extended--pad);
 
-                        @include bem.multi('&', 'elem' 'bg') {
+                        @include bem.multi("&", "elem" "bg") {
                                 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
                         }
 
-                        @include bem.elem('native') {
+                        @include bem.elem("native") {
                                 &:focus {
-                                        @include bem.sibling-elem('bg') {
-                                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
+                                        @include bem.sibling-elem("bg") {
+                                                border-radius: calc(
+                                                        props.get(vars.$rounding) + props.get(vars.$extended--pad) -
+                                                                $focus-border-offset
+                                                );
                                         }
                                 }
                         }
                 }
 
-                @include bem.modifier('pill') {
-                        @include bem.multi('&', 'elem' 'bg') {
+                @include bem.modifier("pill") {
+                        @include bem.multi("&", "elem" "bg") {
                                 border-radius: 100em;
                         }
 
-                        @include bem.elem('native') {
+                        @include bem.elem("native") {
                                 padding-inline: props.get(vars.$pad-i-pill);
 
                                 &:focus {
-                                        @include bem.sibling-elem('bg') {
+                                        @include bem.sibling-elem("bg") {
                                                 border-radius: 100em;
                                         }
                                 }
                         }
 
-                        @include bem.modifier('extended') {
-                                @include bem.elem('native') {
+                        @include bem.modifier("extended") {
+                                @include bem.elem("native") {
                                         padding-inline: props.get(vars.$pad-i);
                                 }
                         }
                 }
 
-                @include bem.is('invalid') {
-                        @include bem.elem('native') {
+                @include bem.is("invalid") {
+                        @include bem.elem("native") {
                                 @include -invalid;
 
                                 &:focus-visible {
@@ -152,10 +163,10 @@
                         }
                 }
 
-                @include bem.is('disabled') {
+                @include bem.is("disabled") {
                         background-color: props.get(vars.$disabled--bg-color);
 
-                        @include bem.elem('native') {
+                        @include bem.elem("native") {
                                 color: props.get(vars.$disabled--text-color);
 
                                 &::placeholder {
@@ -163,21 +174,21 @@
                                 }
                         }
 
-                        @include bem.elem('bg') {
+                        @include bem.elem("bg") {
                                 border-color: props.get(vars.$disabled--border-color);
                         }
 
-                        @include bem.is('invalid') {
-                                @include bem.elem('native') {
-                                        @include bem.sibling-elem('bg') {
+                        @include bem.is("invalid") {
+                                @include bem.elem("native") {
+                                        @include bem.sibling-elem("bg") {
                                                 border-color: props.get(vars.$disabled--border-color);
                                         }
                                 }
                         }
 
-                        @include bem.elem('native') {
+                        @include bem.elem("native") {
                                 &:invalid {
-                                        @include bem.sibling-elem('bg') {
+                                        @include bem.sibling-elem("bg") {
                                                 border-color: props.get(vars.$disabled--border-color);
                                         }
                                 }
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index ef06822..9a2a16a 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -1,39 +1,108 @@
-@use 'sass:map';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$line-height:  props.def(--o-text-field--line-height, 1.4) !default;
-$pad-i:        props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
-$pad-i-pill:   props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default;
-$pad-b:        props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
-$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
-$rounding:     props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
+$line-height: props.def(--o-text-field--line-height, 1.4) !default;
+$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
+$pad-i-pill: props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default;
+$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
+$border-width: props.def(
+        --o-text-field--border-width,
+        props.get(core.$border-width--thin)
+) !default;
+$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
 
 $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
 
-$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default;
+$focus--border-width: props.def(
+        --o-text-field--focus--border-width,
+        props.get(core.$border-width--medium)
+) !default;
 
-$key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --o-text-field--key-focus--border-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$bg-color:          props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
-$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more), 'color') !default;
-$text-color:        props.def(--o-text-field--text-color, props.get(core.$theme, --text), 'color') !default;
-$border-color:      props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong), 'color') !default;
+$bg-color: props.def(
+        --o-text-field--bg-color,
+        props.get(core.$theme, --base, --50),
+        "color"
+) !default;
+$placeholder-color: props.def(
+        --o-text-field--placeholder-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
+$text-color: props.def(
+        --o-text-field--text-color,
+        props.get(core.$theme, --text),
+        "color"
+) !default;
+$border-color: props.def(
+        --o-text-field--border-color,
+        props.get(core.$theme, --border-strong),
+        "color"
+) !default;
 
-$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$hover--border-color: props.def(
+        --o-text-field--hover--border-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
 
-$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$focus--border-color: props.def(
+        --o-text-field--focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
 
-$key-focus--border-color:  props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$key-focus--border-color: props.def(
+        --o-text-field--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$key-focus--outline-color: props.def(
+        --o-text-field--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
 
-$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700), 'color') !default;
+$error--border-color: props.def(
+        --o-text-field--error--border-color,
+        props.get(core.$theme, --negative, --700),
+        "color"
+) !default;
 
-$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900), 'color') !default;
+$error--hover--border-color: props.def(
+        --o-text-field--error--hover--border-color,
+        props.get(core.$theme, --negative, --900),
+        "color"
+) !default;
 
-$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900), 'color') !default;
+$error--focus--border-color: props.def(
+        --o-text-field--error--focus--border-color,
+        props.get(core.$theme, --negative, --900),
+        "color"
+) !default;
 
-$disabled--bg-color:          props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
-$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled), 'color') !default;
-$disabled--text-color:        props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled), 'color') !default;
-$disabled--border-color:      props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute), 'color') !default;
+$disabled--bg-color: props.def(
+        --o-text-field--disabled--bg-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;
+$disabled--placeholder-color: props.def(
+        --o-text-field--disabled--placeholder-color,
+        props.get(core.$theme, --text-disabled),
+        "color"
+) !default;
+$disabled--text-color: props.def(
+        --o-text-field--disabled--text-color,
+        props.get(core.$theme, --text-disabled),
+        "color"
+) !default;
+$disabled--border-color: props.def(
+        --o-text-field--disabled--border-color,
+        props.get(core.$theme, --border-mute),
+        "color"
+) !default;
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 9925dd0..c7a9791 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -1,65 +1,66 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'thumbnail.vars';
-@use 'thumbnail.vars' as vars;
+@forward "thumbnail.vars";
+@use "thumbnail.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.object('thumbnail') {
-                position:       relative;
-                display:        block;
-                flex:           0 0 auto;
-                inline-size:    props.get(vars.$size);
-                block-size:     props.get(vars.$size);
-                overflow:       hidden;
-                outline:        props.get(vars.$border-color) solid props.get(vars.$border-width);
+        @include bem.object("thumbnail") {
+                position: relative;
+                display: block;
+                flex: 0 0 auto;
+                inline-size: props.get(vars.$size);
+                block-size: props.get(vars.$size);
+                overflow: hidden;
+                outline: props.get(vars.$border-color) solid props.get(vars.$border-width);
                 outline-offset: calc(-1 * props.get(vars.$border-width));
-                border-radius:  props.get(vars.$rounding);
+                border-radius: props.get(vars.$rounding);
 
                 &:hover,
                 &:active,
                 &:focus-visible {
                         outline-color: props.get(vars.$hover--border-color);
-                        opacity:       1;
+                        opacity: 1;
                 }
 
-                @include bem.elem('image') {
-                        position:           absolute;
-                        inset-block-start:  0;
+                @include bem.elem("image") {
+                        position: absolute;
+                        inset-block-start: 0;
                         inset-inline-start: 0;
-                        display:            block;
-                        inline-size:        100%;
-                        block-size:         100%;
-                        object-fit:         cover;
-                        object-position:    center center;
+                        display: block;
+                        inline-size: 100%;
+                        block-size: 100%;
+                        object-fit: cover;
+                        object-position: center center;
                 }
 
-                @include bem.elem('icon') {
-                        position:           absolute;
-                        inset-block-start:  50%;
+                @include bem.elem("icon") {
+                        position: absolute;
+                        inset-block-start: 50%;
                         inset-inline-start: 50%;
-                        transform:          translate(-50%, -50%);
+                        transform: translate(-50%, -50%);
                 }
 
                 &:focus-visible {
                         $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
 
-                        margin:         $focus-border-offset;
-                        outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                        margin: $focus-border-offset;
+                        outline: props.get(vars.$key-focus--border-color) solid
+                                props.get(vars.$key-focus--border-width);
                         outline-offset: 0;
-                        border:         props.get(vars.$key-focus--border-offset) solid transparent;
-                        border-radius:  calc(props.get(vars.$rounding) - $focus-border-offset);
-                        box-shadow:
-                                0
-                                0
-                                0
-                                calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
+                        border: props.get(vars.$key-focus--border-offset) solid transparent;
+                        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
+                        box-shadow: 0 0 0
+                                calc(
+                                        props.get(vars.$key-focus--outline-width) +
+                                                props.get(vars.$key-focus--border-width)
+                                )
                                 props.get(vars.$key-focus--outline-color);
                 }
 
@@ -73,18 +74,18 @@
                                         outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
                                 }
 
-                                @include bem.is('selected') {
+                                @include bem.is("selected") {
                                         border-color: props.get(vars.$static-themes, $theme, --selected, --border);
                                 }
 
                                 &:focus-visible {
                                         outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
-                                        border-color:  transparent;
-                                        box-shadow:
-                                                0
-                                                0
-                                                0
-                                                calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
+                                        border-color: transparent;
+                                        box-shadow: 0 0 0
+                                                calc(
+                                                        props.get(vars.$key-focus--outline-width) +
+                                                                props.get(vars.$key-focus--border-width)
+                                                )
                                                 props.get(vars.$static-themes, $theme, --key-focus, --outline);
                                 }
                         }
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index a5625fc..737a626 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -1,51 +1,85 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$size:         props.def(--o-thumbnail--size, props.get(core.$size--900)) !default;
-$rounding:     props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default;
-$spacing:      props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
+$size: props.def(--o-thumbnail--size, props.get(core.$size--900)) !default;
+$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default;
+$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
 $border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default;
 
-$selected--border-width: props.def(--o-thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default;
+$selected--border-width: props.def(
+        --o-thumbnail--selected--border-width,
+        props.get(core.$border-width--medium)
+) !default;
 
-$key-focus--border-width:  props.def(--o-thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --o-thumbnail--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$key-focus--border-offset: props.def(
+        --o-thumbnail--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$key-focus--outline-width: props.def(
+        --o-thumbnail--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$border-color: props.def(--o-thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default;
+$border-color: props.def(
+        --o-thumbnail--border-color,
+        props.get(core.$theme, --border-strong),
+        "color"
+) !default;
 
-$hover--border-color: props.def(--o-thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$hover--border-color: props.def(
+        --o-thumbnail--hover--border-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
 
-$selected--border-color: props.def(--o-thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default;
+$selected--border-color: props.def(
+        --o-thumbnail--selected--border-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
 
-$key-focus--border-color:  props.def(--o-thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--o-thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$key-focus--border-color: props.def(
+        --o-thumbnail--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$key-focus--outline-color: props.def(
+        --o-thumbnail--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
 
-$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !default;
+$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), "md") !default;
 
-$static-themes: props.def(--o-thumbnail, (), 'color');
+$static-themes: props.def(--o-thumbnail, (), "color");
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
         $thumbnail-theme: --static-#{string.slice($theme, 3)};
 
-        $static-themes: props.merge($static-themes, (
-                $thumbnail-theme: (
-                        --border: props.get(core.$transparent-colors, $theme, --400),
+        $static-themes: props.merge(
+                $static-themes,
+                (
+                        $thumbnail-theme: (
+                                        --border: props.get(core.$transparent-colors, $theme, --400),
+                                        --hover: (
+                                                        --border: props.get(core.$transparent-colors, $theme, --500),
+                                                ),
 
-                        --hover: (
-                                --border: props.get(core.$transparent-colors, $theme, --500),
-                        ),
+                                        --selected: (
+                                                        --border: props.get(core.$transparent-colors, $theme, --900),
+                                                ),
 
-                        --selected: (
-                                --border: props.get(core.$transparent-colors, $theme, --900),
-                        ),
-
-                        --key-focus: (
-                                --border:  props.get(core.$transparent-colors, $theme, --900),
-                                --outline: props.get(core.$transparent-colors, $theme, --300),
-                        ),
+                                        --key-focus: (
+                                                        --border: props.get(core.$transparent-colors, $theme, --900),
+                                                        --outline: props.get(core.$transparent-colors, $theme, --300),
+                                                ),
+                                ),
                 )
-        ));
+        );
 }
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index 10e6d81..bc4fd39 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -1,25 +1,27 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'blockquotes.vars';
-@use 'blockquotes.vars' as vars;
+@forward "blockquotes.vars";
+@use "blockquotes.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.scope('blockquotes') {
+        @include bem.scope("blockquotes") {
                 blockquote {
                         padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
-                        margin-block:         props.get(vars.$margin-bs) 0;
-                        margin-inline:        1px 0;
-                        border-inline-start:  props.get(vars.$border-width) solid props.get(vars.$border-color);
+                        margin-block: props.get(vars.$margin-bs) 0;
+                        margin-inline: 1px 0;
+                        border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color);
                 }
 
-                @include bem.modifier('compact') {
+                @include bem.modifier("compact") {
                         blockquote {
-                                padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width));
+                                padding-inline-start: calc(
+                                        props.get(vars.$compact--indent) - props.get(vars.$border-width)
+                                );
                         }
                 }
         }
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 63c40b0..117b4a6 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -1,11 +1,24 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
-@use './implicit.vars' as implicit;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
+@use "./implicit.vars" as implicit;
 
-$indent:       props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default;
-$margin-bs:    props.def(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
-$border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-width--thick)) !default;
+$indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default;
+$margin-bs: props.def(
+        --s-blockquotes--margin-bs,
+        props.get(implicit.$paragraph--margin-bs)
+) !default;
+$border-width: props.def(
+        --s-blockquotes--border-width,
+        props.get(core.$border-width--thick)
+) !default;
 
-$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default;
+$compact--indent: props.def(
+        --s-blockquotes--compact--indent,
+        props.get(core.$list--compact-indent)
+) !default;
 
-$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border), 'color') !default;
+$border-color: props.def(
+        --s-blockquotes--border-color,
+        props.get(core.$theme, --border),
+        "color"
+) !default;
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
index 77a3eb1..6c5ba63 100644
--- a/src/scopes/_body.scss
+++ b/src/scopes/_body.scss
@@ -1,15 +1,15 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'body.vars';
-@use 'body.vars' as vars;
+@forward "body.vars";
+@use "body.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.scope('body') {
+        @include bem.scope("body") {
                 font-size: props.get(vars.$font-size);
                 line-height: props.get(vars.$line-height);
 
@@ -30,11 +30,11 @@
                 }
 
                 img {
-                        display:            block;
-                        inline-size:        auto;
-                        max-inline-size:    100%;
-                        block-size:         auto;
-                        max-block-size:     props.get(vars.$img--max-block-size);
+                        display: block;
+                        inline-size: auto;
+                        max-inline-size: 100%;
+                        block-size: auto;
+                        max-block-size: props.get(vars.$img--max-block-size);
                         margin-block-start: props.get(vars.$paragraph--margin-bs);
                 }
 
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
index 981ef32..414e0c1 100644
--- a/src/scopes/_body.vars.scss
+++ b/src/scopes/_body.vars.scss
@@ -1,12 +1,25 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-@use '../layouts/container.vars' as container;
+@use "../layouts/container.vars" as container;
 
-$font-size:                  props.def(--s-body--font-size, props.get(core.$font-size--150)) !default;
-$line-height:                props.def(--s-body--line-height, calc(props.get(core.$font--standard--line-height) + .1)) !default;
-$paragraph--margin-bs:       props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default;
-$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default;
-$img--max-block-size:        props.def(--s-body--img--max-block-size, none) !default;
+$font-size: props.def(--s-body--font-size, props.get(core.$font-size--150)) !default;
+$line-height: props.def(
+        --s-body--line-height,
+        calc(props.get(core.$font--standard--line-height) + 0.1)
+) !default;
+$paragraph--margin-bs: props.def(
+        --s-body--paragraph--margin-bs,
+        props.get(core.$size--300)
+) !default;
+$paragraph--max-inline-size: props.def(
+        --s-body--paragraph--max-inline-size,
+        props.get(container.$fixed)
+) !default;
+$img--max-block-size: props.def(--s-body--img--max-block-size, none) !default;
 
-$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default;
+$strong--text-color: props.def(
+        --s-body--strong--text-color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index db43de0..d931c22 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -1,39 +1,39 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'code.vars';
-@use 'code.vars' as vars;
+@forward "code.vars";
+@use "code.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.scope('code') {
+        @include bem.scope("code") {
                 code {
-                        padding-block:    props.get(vars.$inline--pad-b);
-                        padding-inline:   props.get(vars.$inline--pad-i);
-                        color:            props.get(vars.$inline--fg);
+                        padding-block: props.get(vars.$inline--pad-b);
+                        padding-inline: props.get(vars.$inline--pad-i);
+                        color: props.get(vars.$inline--fg);
                         background-color: props.get(vars.$inline--bg);
-                        border-radius:    props.get(vars.$inline--rounding);
+                        border-radius: props.get(vars.$inline--rounding);
                 }
 
                 pre {
-                        padding-block:    props.get(vars.$block--pad-b);
-                        padding-inline:   props.get(vars.$block--pad-i);
-                        margin-block:     props.get(vars.$block--margin-bs) 0;
-                        margin-inline:    0;
-                        color:            props.get(vars.$block--fg);
+                        padding-block: props.get(vars.$block--pad-b);
+                        padding-inline: props.get(vars.$block--pad-i);
+                        margin-block: props.get(vars.$block--margin-bs) 0;
+                        margin-inline: 0;
+                        color: props.get(vars.$block--fg);
                         background-color: props.get(vars.$block--bg);
-                        border-radius:    props.get(vars.$block--rounding);
+                        border-radius: props.get(vars.$block--rounding);
 
                         code {
-                                display:           inline-block;
-                                padding:           0;
+                                display: inline-block;
+                                padding: 0;
                                 margin-inline-end: props.get(vars.$block--pad-i);
-                                color:             currentColor;
-                                background-color:  transparent;
-                                border-radius:     0;
+                                color: currentColor;
+                                background-color: transparent;
+                                border-radius: 0;
                         }
                 }
         }
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
index 329d372..e22421c 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -1,18 +1,25 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
-@use './implicit.vars' as implicit;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
+@use "./implicit.vars" as implicit;
 
-$inline--pad-i:    props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default;
-$inline--pad-b:    props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default;
+$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default;
+$inline--pad-b: props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default;
 $inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding--sm)) !default;
 
-$block--pad-i:     props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default;
-$block--pad-b:     props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default;
-$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
-$block--rounding:  props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default;
+$block--pad-i: props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default;
+$block--pad-b: props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default;
+$block--margin-bs: props.def(
+        --s-code--block--margin-bs,
+        props.get(implicit.$paragraph--margin-bs)
+) !default;
+$block--rounding: props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default;
 
-$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default;
-$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default;
+$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), "color") !default;
+$inline--bg: props.def(
+        --s-code--inline--bg,
+        props.get(core.$theme, --base, --200),
+        "color"
+) !default;
 
-$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), 'color') !default;
-$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), 'color') !default;
+$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), "color") !default;
+$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), "color") !default;
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss
index c993f5a..852ab5a 100644
--- a/src/scopes/_figures.scss
+++ b/src/scopes/_figures.scss
@@ -1,20 +1,20 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../objects/figure.vars' as figure;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../objects/figure.vars" as figure;
 
 @mixin styles {
-        @include bem.scope('figures') {
+        @include bem.scope("figures") {
                 figcaption {
-                        padding-block:    props.get(figure.$pad-b);
-                        font-size:        props.get(figure.$font-size);
-                        color:            props.get(figure.$text-color);
+                        padding-block: props.get(figure.$pad-b);
+                        font-size: props.get(figure.$font-size);
+                        color: props.get(figure.$text-color);
                         border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color);
 
                         &::before {
-                                display:       block;
-                                margin-block:  -100em 100em;
-                                content:       '';
+                                display: block;
+                                margin-block: -100em 100em;
+                                content: "";
                         }
                 }
         }
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 23623fd..a6a7bbb 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,8 +1,8 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../objects/heading.vars' as heading;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../objects/heading.vars" as heading;
 
 @mixin styles {
         /* stylelint-disable-next-line scss/dollar-variable-pattern */
@@ -15,56 +15,62 @@
                 xxl: h1,
         );
 
-        @include bem.scope('headings') {
+        @include bem.scope("headings") {
                 h1,
                 h2,
                 h3,
                 h4,
                 h5,
                 h6 {
-                        display:               block;
-                        margin-block-start:    props.get(heading.$margin-bs);
-                        font-family:           props.get(heading.$font-family);
-                        font-weight:           props.get(heading.$font-weight);
+                        display: block;
+                        margin-block-start: props.get(heading.$margin-bs);
+                        font-family: props.get(heading.$font-family);
+                        font-weight: props.get(heading.$font-weight);
                         font-feature-settings: props.get(heading.$feature-settings);
-                        line-height:           props.get(heading.$line-height);
-                        text-transform:        props.get(heading.$text-transform);
-                        letter-spacing:        normal;
-                        transform:             translateX(props.get(heading.$offset));
+                        line-height: props.get(heading.$line-height);
+                        text-transform: props.get(heading.$text-transform);
+                        letter-spacing: normal;
+                        transform: translateX(props.get(heading.$offset));
                 }
 
-                @include bem.elem('highlight') {
-                        background-image: linear-gradient(to top,
-                        transparent .15em,
-                        props.get(heading.$bg-color) .15em,
-                        props.get(heading.$bg-color) .6em,
-                        transparent .6em);
+                @include bem.elem("highlight") {
+                        background-image: linear-gradient(
+                                to top,
+                                transparent 0.15em,
+                                props.get(heading.$bg-color) 0.15em,
+                                props.get(heading.$bg-color) 0.6em,
+                                transparent 0.6em
+                        );
                 }
 
-                @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$sizes {
+                @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing,
+                        $feature-settings, $text-transform, $text-color in heading.$sizes
+                {
                         #{map.get($-size-map, $mod)} {
-                                font-family:           props.get($font-family);
-                                font-size:             props.get($font-size);
-                                font-weight:           props.get($font-weight);
+                                font-family: props.get($font-family);
+                                font-size: props.get($font-size);
+                                font-weight: props.get($font-weight);
                                 font-feature-settings: props.get($feature-settings);
-                                line-height:           props.get($line-height);
-                                color:                 props.get($text-color);
-                                text-transform:        props.get($text-transform);
-                                letter-spacing:        props.get($letter-spacing);
+                                line-height: props.get($line-height);
+                                color: props.get($text-color);
+                                text-transform: props.get($text-transform);
+                                letter-spacing: props.get($letter-spacing);
                         }
                 }
 
-                @include bem.modifier('display') {
-                        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings, $text-transform, $text-color in heading.$display--sizes {
+                @include bem.modifier("display") {
+                        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing,
+                                $feature-settings, $text-transform, $text-color in heading.$display--sizes
+                        {
                                 #{map.get($-size-map, $mod)} {
-                                        font-family:           props.get($font-family);
-                                        font-size:             props.get($font-size);
-                                        font-weight:           props.get($font-weight);
+                                        font-family: props.get($font-family);
+                                        font-size: props.get($font-size);
+                                        font-weight: props.get($font-weight);
                                         font-feature-settings: props.get($feature-settings);
-                                        line-height:           props.get($line-height);
-                                        color:                 props.get($text-color);
-                                        text-transform:        props.get($text-transform);
-                                        letter-spacing:        props.get($letter-spacing);
+                                        line-height: props.get($line-height);
+                                        color: props.get($text-color);
+                                        text-transform: props.get($text-transform);
+                                        letter-spacing: props.get($letter-spacing);
                                 }
                         }
                 }
@@ -79,10 +85,16 @@
                                         }
                                 }
 
-                                @include bem.modifier('display') {
+                                @include bem.modifier("display") {
                                         @each $mod, $value in heading.$sizes {
                                                 #{map.get($-size-map, $mod)} {
-                                                        color: props.get(heading.$static-themes, $theme, --display, --#{$mod}, --text-color);
+                                                        color: props.get(
+                                                                heading.$static-themes,
+                                                                $theme,
+                                                                --display,
+                                                                --#{$mod},
+                                                                --text-color
+                                                        );
                                                 }
                                         }
                                 }
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 728fd22..f8c575d 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -1,21 +1,21 @@
-@use 'sass:map';
-@use 'sass:math';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "../core.vars" as core;
 
-@forward 'implicit.vars';
-@use 'implicit.vars' as vars;
+@forward "implicit.vars";
+@use "implicit.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
         @layer scope {
                 html {
-                        accent-color:    props.get(core.$theme, --accent, --600);
+                        accent-color: props.get(core.$theme, --accent, --600);
                         scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
 
                         &:has(dialog[open]),
@@ -26,31 +26,31 @@
                 }
 
                 body {
-                        padding:               0;
-                        margin:                0;
-                        font-family:           props.get(vars.$body--font-family);
-                        font-size:             props.get(vars.$body--font-size);
+                        padding: 0;
+                        margin: 0;
+                        font-family: props.get(vars.$body--font-family);
+                        font-size: props.get(vars.$body--font-size);
                         font-feature-settings: props.get(vars.$body--feature-settings);
-                        line-height:           props.get(vars.$body--line-height);
-                        color:                 props.get(core.$theme, --text);
-                        background-color:      props.get(core.$theme, --bg-base);
+                        line-height: props.get(vars.$body--line-height);
+                        color: props.get(core.$theme, --text);
+                        background-color: props.get(core.$theme, --bg-base);
                 }
 
                 pre,
                 code {
-                        font-family:           props.get(vars.$code--font-family);
-                        font-size:             props.get(vars.$code--font-size);
+                        font-family: props.get(vars.$code--font-family);
+                        font-size: props.get(vars.$code--font-size);
                         font-feature-settings: props.get(vars.$code--feature-settings);
-                        line-height:           props.get(vars.$code--line-height);
+                        line-height: props.get(vars.$code--line-height);
                 }
 
                 pre {
-                        margin:     0;
+                        margin: 0;
                         overflow-x: auto;
 
                         code {
                                 font-size: 1em;
-                                color:     currentColor;
+                                color: currentColor;
                         }
                 }
 
@@ -60,13 +60,13 @@
                 h4,
                 h5,
                 h6 {
-                        margin-block:          props.get(vars.$heading--margin-bs) 0;
-                        font-family:           props.get(vars.$heading--font-family);
-                        font-size:             props.get(vars.$heading--font-size);
-                        font-weight:           props.get(vars.$heading--font-weight);
+                        margin-block: props.get(vars.$heading--margin-bs) 0;
+                        font-family: props.get(vars.$heading--font-family);
+                        font-size: props.get(vars.$heading--font-size);
+                        font-weight: props.get(vars.$heading--font-weight);
                         font-feature-settings: props.get(vars.$heading--feature-settings);
-                        line-height:           props.get(vars.$heading--line-height);
-                        color:                 props.get(vars.$heading--color);
+                        line-height: props.get(vars.$heading--line-height);
+                        color: props.get(vars.$heading--color);
 
                         & + & {
                                 margin-block-start: props.get(vars.$heading--margin-bs-sibling);
@@ -91,14 +91,14 @@
 
                 ul,
                 ol {
-                        padding:    0;
-                        margin:     0;
+                        padding: 0;
+                        margin: 0;
                         list-style: none;
                 }
 
                 li {
                         padding: 0;
-                        margin:  0;
+                        margin: 0;
                 }
 
                 :focus,
@@ -108,28 +108,27 @@
 
                 :link,
                 :visited {
-                        color:           currentColor;
+                        color: currentColor;
                         text-decoration: none;
                 }
 
-
                 button,
                 input,
                 textarea {
-                        box-sizing:     content-box;
-                        padding:        0;
-                        margin:         0;
-                        font-family:    inherit;
-                        font-size:      1em;
-                        font-style:     inherit;
-                        font-weight:    inherit;
-                        line-height:    inherit;
-                        color:          currentColor;
-                        text-align:     inherit;
+                        box-sizing: content-box;
+                        padding: 0;
+                        margin: 0;
+                        font-family: inherit;
+                        font-size: 1em;
+                        font-style: inherit;
+                        font-weight: inherit;
+                        line-height: inherit;
+                        color: currentColor;
+                        text-align: inherit;
                         text-transform: inherit;
-                        appearance:     none;
-                        background:     none;
-                        border:         0;
+                        appearance: none;
+                        background: none;
+                        border: 0;
 
                         &::-moz-focus-inner {
                                 border: 0;
@@ -139,7 +138,7 @@
                 input,
                 textarea {
                         &::placeholder {
-                                color:   props.get(core.$theme, --text-mute);
+                                color: props.get(core.$theme, --text-mute);
                                 opacity: 1;
                         }
 
@@ -153,15 +152,15 @@
                 }
 
                 hr {
-                        block-size:       props.get(core.$border-width--thin);
-                        margin:           0;
+                        block-size: props.get(core.$border-width--thin);
+                        margin: 0;
                         background-color: props.get(core.$theme, --border);
-                        border:           0;
+                        border: 0;
                 }
 
                 figure {
                         padding: 0;
-                        margin:  0;
+                        margin: 0;
                 }
 
                 @each $theme in map.keys(props.get(core.$transparent-colors)) {
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 64d4a8f..f0256b0 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -1,26 +1,69 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default;
+$paragraph--margin-bs: props.def(
+        --s-implicit--paragraph--margin-bs,
+        props.get(core.$size--200)
+) !default;
 
-$small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default;
+$small--font-size: props.def(
+        --s-implicit--small--font-size,
+        props.get(core.$font-size--75)
+) !default;
 
-$body--font-family:      props.def(--s-implicit--body--font-family, props.get(core.$font--standard--family)) !default;
-$body--line-height:      props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default;
-$body--font-size:        props.def(--s-implicit--body--font-size, props.get(core.$font-size--100));
-$body--feature-settings: props.def(--s-implicit--body--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$body--font-family: props.def(
+        --s-implicit--body--font-family,
+        props.get(core.$font--standard--family)
+) !default;
+$body--line-height: props.def(
+        --s-implicit--body--line-height,
+        props.get(core.$font--standard--line-height)
+) !default;
+$body--font-size: props.def(--s-implicit--body--font-size, props.get(core.$font-size--100));
+$body--feature-settings: props.def(
+        --s-implicit--body--feature-settings,
+        props.get(core.$font--standard--feature-settings)
+) !default;
 
-$code--font-family:      props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default;
-$code--line-height:      props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default;
-$code--font-size:        props.def(--s-implicit--code--font-size, .93em);
-$code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--feature-settings)) !default;
+$code--font-family: props.def(
+        --s-implicit--code--font-family,
+        props.get(core.$font--mono--family)
+) !default;
+$code--line-height: props.def(
+        --s-implicit--code--line-height,
+        props.get(core.$font--mono--line-height)
+) !default;
+$code--font-size: props.def(--s-implicit--code--font-size, 0.93em);
+$code--feature-settings: props.def(
+        --s-implicit--code--feature-settings,
+        props.get(core.$font--mono--feature-settings)
+) !default;
 
-$heading--margin-bs:         props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default;
-$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default;
-$heading--font-family:       props.def(--s-implicit--heading--font-family, props.get(core.$font--standard--family)) !default;
-$heading--line-height:       props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default;
-$heading--font-weight:       props.def(--s-implicit--heading--font-weight, bold) !default;
-$heading--font-size:         props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100));
-$heading--feature-settings:  props.def(--s-implicit--heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+$heading--margin-bs: props.def(
+        --s-implicit--heading--margin-bs,
+        props.get(core.$size--700)
+) !default;
+$heading--margin-bs-sibling: props.def(
+        --s-implicit--heading--margin-bs-sibling,
+        props.get(core.$size--325)
+) !default;
+$heading--font-family: props.def(
+        --s-implicit--heading--font-family,
+        props.get(core.$font--standard--family)
+) !default;
+$heading--line-height: props.def(
+        --s-implicit--heading--line-height,
+        props.get(core.$font--standard--line-height)
+) !default;
+$heading--font-weight: props.def(--s-implicit--heading--font-weight, bold) !default;
+$heading--font-size: props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100));
+$heading--feature-settings: props.def(
+        --s-implicit--heading--feature-settings,
+        props.get(core.$font--standard--feature-settings)
+) !default;
 
-$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color') !default;
+$heading--color: props.def(
+        --s-implicit--heading--color,
+        props.get(core.$theme, --heading),
+        "color"
+) !default;
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 8498487..fea78f1 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,78 +1,79 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'links.vars';
-@use 'links.vars' as vars;
+@forward "links.vars";
+@use "links.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.scope('links') {
+        @include bem.scope("links") {
                 :link,
                 :visited {
-                        color:                     currentColor;
-                        text-decoration:           underline;
+                        color: currentColor;
+                        text-decoration: underline;
                         text-decoration-thickness: props.get(vars.$underline-width);
-                        text-decoration-color:     props.get(vars.$underline-color);
-                        border-radius:             props.get(vars.$rounding-sm);
-                        box-decoration-break:      clone;
+                        text-decoration-color: props.get(vars.$underline-color);
+                        border-radius: props.get(vars.$rounding-sm);
+                        box-decoration-break: clone;
 
                         &:hover {
-                                text-decoration:           underline;
+                                text-decoration: underline;
                                 text-decoration-thickness: props.get(vars.$hover--underline-width);
-                                text-decoration-skip-ink:  none;
+                                text-decoration-skip-ink: none;
                         }
 
                         &:focus-visible {
-                                color:           props.get(vars.$key-focus--text-color);
+                                color: props.get(vars.$key-focus--text-color);
                                 text-decoration: none;
-                                outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                                box-shadow:
-                                        0
-                                        0
-                                        0
-                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                outline: props.get(vars.$key-focus--border-color) solid
+                                        props.get(vars.$key-focus--border-width);
+                                box-shadow: 0 0 0
+                                        calc(
+                                                props.get(vars.$key-focus--border-width) +
+                                                        props.get(vars.$key-focus--outline-width)
+                                        )
                                         props.get(vars.$key-focus--outline-color);
                         }
                 }
 
-                @include bem.modifier('invisible') {
+                @include bem.modifier("invisible") {
                         :link,
                         :visited {
                                 text-decoration: none;
                         }
                 }
 
-                @include bem.modifier('colored') {
+                @include bem.modifier("colored") {
                         :link {
-                                color:                 props.get(vars.$colored--text-color);
+                                color: props.get(vars.$colored--text-color);
                                 text-decoration-color: props.get(vars.$colored--underline-color);
 
                                 &:hover {
-                                        color:             props.get(vars.$colored--hover--text-color);
+                                        color: props.get(vars.$colored--hover--text-color);
                                 }
                         }
 
                         :visited {
-                                color:                 props.get(vars.$colored--visited--text-color);
+                                color: props.get(vars.$colored--visited--text-color);
                                 text-decoration-color: props.get(vars.$colored--visited--underline-color);
 
                                 &:hover {
-                                        color:             props.get(vars.$colored--visited--hover--text-color);
+                                        color: props.get(vars.$colored--visited--hover--text-color);
                                 }
                         }
                 }
 
-                @include bem.modifier('mark-external') {
+                @include bem.modifier("mark-external") {
                         :link,
                         :visited {
-                                &[href^='http'] {
+                                &[href^="http"] {
                                         &::after {
-                                                content: ' ↗';
+                                                content: " ↗";
                                         }
                                 }
                         }
@@ -82,21 +83,30 @@
                         @include bem.modifier(string.slice($theme, 3)) {
                                 :link,
                                 :visited {
-                                        color:                 props.get(vars.$static-themes, $theme, --text-color);
-                                        text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
+                                        color: props.get(vars.$static-themes, $theme, --text-color);
+                                        text-decoration-color: props.get(
+                                                vars.$static-themes,
+                                                $theme,
+                                                --underline-color
+                                        );
 
                                         &:hover {
-                                                color:             props.get(vars.$static-themes, $theme, --hover, --text-color);
+                                                color: props.get(vars.$static-themes, $theme, --hover, --text-color);
                                         }
 
                                         &:focus-visible {
-                                                color:         props.get(vars.$static-themes, $theme, --key-focus, --text-color);
-                                                outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
-                                                box-shadow:
-                                                        0
-                                                        0
-                                                        0
-                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                color: props.get(vars.$static-themes, $theme, --key-focus, --text-color);
+                                                outline-color: props.get(
+                                                        vars.$static-themes,
+                                                        $theme,
+                                                        --key-focus,
+                                                        --border-color
+                                                );
+                                                box-shadow: 0 0 0
+                                                        calc(
+                                                                props.get(vars.$key-focus--border-width) +
+                                                                        props.get(vars.$key-focus--outline-width)
+                                                        )
                                                         props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
                                         }
                                 }
@@ -106,21 +116,26 @@
                 :has(img) {
                         img {
                                 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
-                                border:        props.get(vars.$key-focus--border-offset) solid transparent;
-                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                                border: props.get(vars.$key-focus--border-offset) solid transparent;
+                                border-radius: calc(
+                                        props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
+                                );
                         }
 
                         &:link,
                         &:visited {
                                 &:focus-visible {
-                                        outline:    none;
+                                        outline: none;
                                         box-shadow: none;
 
                                         img {
                                                 outline: props.get(vars.$key-focus--border-color) solid
                                                         props.get(vars.$key-focus--border-width);
                                                 box-shadow: 0 0 0
-                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                        calc(
+                                                                props.get(vars.$key-focus--border-width) +
+                                                                        props.get(vars.$key-focus--outline-width)
+                                                        )
                                                         props.get(vars.$key-focus--outline-color);
                                         }
                                 }
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index cd80e4c..c06789b 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -1,49 +1,106 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$rounding:               props.def(--s-links--rounding, props.get(core.$rounding)) !default;
-$rounding-sm:            props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default;
-$underline-width:        props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default;
-$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default;
+$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default;
+$rounding-sm: props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default;
+$underline-width: props.def(
+        --s-links--underline-width,
+        props.get(core.$border-width--thin)
+) !default;
+$hover--underline-width: props.def(
+        --s-links--hover--underline-width,
+        props.get(core.$border-width--medium)
+) !default;
 
-$key-focus--border-width:  props.def(--s-links--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width: props.def(
+        --s-links--key-focus--border-width,
+        props.get(core.$key-focus--border-width)
+) !default;
+$key-focus--border-offset: props.def(
+        --s-links--key-focus--border-offset,
+        props.get(core.$key-focus--border-offset)
+) !default;
+$key-focus--outline-width: props.def(
+        --s-links--key-focus--outline-width,
+        props.get(core.$key-focus--outline-width)
+) !default;
 
-$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$underline-color: props.def(
+        --s-links--underline-color,
+        props.get(core.$theme, --text-mute-more),
+        "color"
+) !default;
 
-$colored--text-color:        props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
-$colored--underline-color:   props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default;
-$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default;
+$colored--text-color: props.def(
+        --s-links--colored--text-color,
+        props.get(core.$theme, --accent, --1100),
+        "color"
+) !default;
+$colored--underline-color: props.def(
+        --s-links--colored--underline-color,
+        props.get(core.$theme, --accent, --600),
+        "color"
+) !default;
+$colored--hover--text-color: props.def(
+        --s-links--colored--hover--text-color,
+        props.get(core.$theme, --accent, --1300),
+        "color"
+) !default;
 
-$colored--visited--text-color:        props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default;
-$colored--visited--underline-color:   props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default;
-$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default;
+$colored--visited--text-color: props.def(
+        --s-links--colored--visited--text-color,
+        props.get(core.$theme, --purple, --1100),
+        "color"
+) !default;
+$colored--visited--underline-color: props.def(
+        --s-links--colored--visited--underline-color,
+        props.get(core.$theme, --purple, --600),
+        "color"
+) !default;
+$colored--visited--hover--text-color: props.def(
+        --s-links--colored--visited--hover--text-color,
+        props.get(core.$theme, --purple, --1300),
+        "color"
+) !default;
 
-$key-focus--text-color:    props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
-$key-focus--border-color:  props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+$key-focus--text-color: props.def(
+        --s-links--key-focus--text-color,
+        props.get(core.$theme, --focus, --text),
+        "color"
+) !default;
+$key-focus--border-color: props.def(
+        --s-links--key-focus--border-color,
+        props.get(core.$theme, --focus, --border),
+        "color"
+) !default;
+$key-focus--outline-color: props.def(
+        --s-links--key-focus--outline-color,
+        props.get(core.$theme, --focus, --outline),
+        "color"
+) !default;
 
-$static-themes: props.def(--s-links, (), 'color');
+$static-themes: props.def(--s-links, (), "color");
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
         $link-theme: --static-#{string.slice($theme, 3)};
 
-        $static-themes: props.merge($static-themes, (
-                $link-theme: (
-                        --text-color:        currentColor,
-                        --underline-color:   props.get(core.$transparent-colors, $theme, --500),
+        $static-themes: props.merge(
+                $static-themes,
+                (
+                        $link-theme: (
+                                        --text-color: currentColor,
+                                        --underline-color: props.get(core.$transparent-colors, $theme, --500),
+                                        --hover: (
+                                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                                ),
 
-                        --hover: (
-                                --text-color:    props.get(core.$transparent-colors, $theme, --900),
-                        ),
-
-                        --key-focus: (
-                                --text-color:    props.get(core.$transparent-colors, $theme, --900),
-                                --border-color:  props.get(core.$transparent-colors, $theme, --900),
-                                --outline-color: props.get(core.$transparent-colors, $theme, --300),
-                        ),
+                                        --key-focus: (
+                                                        --text-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --border-color: props.get(core.$transparent-colors, $theme, --900),
+                                                        --outline-color: props.get(core.$transparent-colors, $theme, --300),
+                                                ),
+                                ),
                 )
-        ));
+        );
 }
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index 0285bb0..7b9ddbc 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -1,20 +1,20 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use '../core.vars' as core;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "../core.vars" as core;
 
-@forward 'lists.vars';
-@use 'lists.vars' as vars;
+@forward "lists.vars";
+@use "lists.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.scope('lists') {
+        @include bem.scope("lists") {
                 ul,
                 ol {
                         padding-inline-start: props.get(vars.$indent);
-                        margin-block-start:   props.get(vars.$margin-bs);
+                        margin-block-start: props.get(vars.$margin-bs);
 
                         ul,
                         ol {
@@ -31,22 +31,22 @@
                 }
 
                 dl {
-                        padding:       0;
-                        margin-block:  props.get(vars.$margin-bs) 0;
+                        padding: 0;
+                        margin-block: props.get(vars.$margin-bs) 0;
                         margin-inline: 0;
                 }
 
                 dt {
                         font-weight: bold;
-                        color:       props.get(core.$theme, --heading);
+                        color: props.get(core.$theme, --heading);
                 }
 
                 dd {
-                        margin-block:  0;
+                        margin-block: 0;
                         margin-inline: props.get(vars.$indent) 0;
                 }
 
-                @include bem.modifier('compact') {
+                @include bem.modifier("compact") {
                         ul,
                         ol {
                                 padding-inline-start: calc(props.get(vars.$compact--indent) - 3px);
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
index e40f194..57fcc54 100644
--- a/src/scopes/_lists.vars.scss
+++ b/src/scopes/_lists.vars.scss
@@ -1,8 +1,11 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
-@use './implicit.vars' as implicit;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
+@use "./implicit.vars" as implicit;
 
-$indent:    props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default;
+$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default;
 $margin-bs: props.def(--s-lists--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
 
-$compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default;
+$compact--indent: props.def(
+        --s-lists--compact--indent,
+        props.get(core.$list--compact-indent)
+) !default;
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index cb3a10c..7442874 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -1,40 +1,40 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use '../objects/table.vars' as table;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "../objects/table.vars" as table;
 
-@forward 'tables.vars';
-@use 'tables.vars' as vars;
+@forward "tables.vars";
+@use "tables.vars" as vars;
 
 @mixin styles {
-        @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables("vars"));
 
-        @include bem.scope('tables') {
+        @include bem.scope("tables") {
                 table {
                         margin-block-start: props.get(vars.$margin-bs);
-                        border-spacing:     0;
-                        border-collapse:    separate;
+                        border-spacing: 0;
+                        border-collapse: separate;
                 }
 
                 th {
-                        padding-block:  props.get(table.$pad-b);
+                        padding-block: props.get(table.$pad-b);
                         padding-inline: props.get(table.$pad-i);
-                        font-family:    props.get(table.$heading--font-family);
-                        font-size:      props.get(table.$heading--font-size);
-                        font-weight:    props.get(table.$heading--font-weight);
-                        color:          props.get(table.$heading-color);
-                        text-align:     start;
+                        font-family: props.get(table.$heading--font-family);
+                        font-size: props.get(table.$heading--font-size);
+                        font-weight: props.get(table.$heading--font-weight);
+                        color: props.get(table.$heading-color);
+                        text-align: start;
                         text-transform: props.get(table.$heading--text-transform);
                         letter-spacing: props.get(table.$heading--letter-spacing);
                 }
 
                 td {
-                        padding-block:            props.get(table.$pad-b);
-                        padding-inline:           props.get(table.$pad-i);
-                        border-color:             props.get(table.$border-color);
-                        border-style:             solid;
-                        border-width:             0;
+                        padding-block: props.get(table.$pad-b);
+                        padding-inline: props.get(table.$pad-i);
+                        border-color: props.get(table.$border-color);
+                        border-style: solid;
+                        border-width: 0;
                         border-block-start-width: props.get(table.$border-width);
                 }
 
@@ -46,7 +46,7 @@
                         }
                 }
 
-                @include bem.modifier('flush') {
+                @include bem.modifier("flush") {
                         th,
                         td {
                                 &:first-child {
@@ -59,7 +59,7 @@
                         }
                 }
 
-                @include bem.modifier('box') {
+                @include bem.modifier("box") {
                         td {
                                 background-color: props.get(table.$box--bg-color);
 
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
index dfb4c76..12d0a0c 100644
--- a/src/scopes/_tables.vars.scss
+++ b/src/scopes/_tables.vars.scss
@@ -1,4 +1,4 @@
-@use 'pkg:iro-sass/src/props';
-@use 'implicit.vars' as implicit;
+@use "pkg:iro-sass/props";
+@use "implicit.vars" as implicit;
 
 $margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss
index 20e3bcd..2a88480 100644
--- a/src_demo/components/_box.scss
+++ b/src_demo/components/_box.scss
@@ -1,9 +1,9 @@
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../../src/core.vars';
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../../src/core.vars";
 
-@include bem.component('box') {
-    padding:      2em;
-    margin-block: 2em;
-    border:       1px solid props.get(core.$theme, --border);
+@include bem.component("box") {
+        padding: 2em;
+        margin-block: 2em;
+        border: 1px solid props.get(core.$theme, --border);
 }
diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss
index acfccbe..acd32a5 100644
--- a/src_demo/components/_content.scss
+++ b/src_demo/components/_content.scss
@@ -1,6 +1,6 @@
-@use 'pkg:iro-sass/src/bem';
+@use "pkg:iro-sass/bem";
 
-@include bem.component('content') {
-    grid-area: content;
-    overflow:  auto;
+@include bem.component("content") {
+        grid-area: content;
+        overflow: auto;
 }
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss
index 7643d07..4542847 100644
--- a/src_demo/components/_sidebar.scss
+++ b/src_demo/components/_sidebar.scss
@@ -1,7 +1,7 @@
-@use 'pkg:iro-sass/src/bem';
+@use "pkg:iro-sass/bem";
 
-@include bem.component('sidebar') {
-    grid-area:        sidebar;
-    min-inline-size:  15em;
-    min-block-size:   0;
+@include bem.component("sidebar") {
+        grid-area: sidebar;
+        min-inline-size: 15em;
+        min-block-size: 0;
 }
diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss
index 8d80995..7471cdb 100644
--- a/src_demo/components/_view.scss
+++ b/src_demo/components/_view.scss
@@ -1,9 +1,9 @@
-@use 'pkg:iro-sass/src/bem';
+@use "pkg:iro-sass/bem";
 
-@include bem.component('view') {
-    display: none;
+@include bem.component("view") {
+        display: none;
 
-    &:target {
-        display: block;
-    }
+        &:target {
+                display: block;
+        }
 }