Paths

53 files changed, 3879 insertions, 2524 deletions

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),
+                                                ),
+                                ),
                 )
-        ));
+        );
 }