From aeed08dc46662a0d70e04bcea612a701633736e7 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 13:00:59 +0200
Subject: Revert "Paths"

This reverts commit cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.
---
 src/objects/_alert.scss                 |  49 ++-
 src/objects/_alert.vars.scss            |  52 +--
 src/objects/_avatar.scss                | 173 ++++----
 src/objects/_avatar.vars.scss           | 127 +++---
 src/objects/_backdrop.scss              |  32 +-
 src/objects/_backdrop.vars.scss         |  14 +-
 src/objects/_button.scss                | 281 ++++++-------
 src/objects/_button.vars.scss           | 708 ++++++++++++++------------------
 src/objects/_card.scss                  | 393 ++++++++----------
 src/objects/_card.vars.scss             | 153 ++-----
 src/objects/_checkbox.scss              | 215 +++++-----
 src/objects/_checkbox.vars.scss         | 108 ++---
 src/objects/_dialog.scss                |  72 ++--
 src/objects/_dialog.vars.scss           |  20 +-
 src/objects/_divider.scss               | 136 +++---
 src/objects/_divider.vars.scss          | 181 +++-----
 src/objects/_emoji.scss                 |  58 ++-
 src/objects/_emoji.vars.scss            |  32 +-
 src/objects/_field-label.scss           |  68 +--
 src/objects/_field-label.vars.scss      |  42 +-
 src/objects/_figure.scss                |  30 +-
 src/objects/_figure.vars.scss           |  20 +-
 src/objects/_heading.scss               | 114 +++--
 src/objects/_heading.vars.scss          | 646 +++++++++--------------------
 src/objects/_icon.scss                  |  30 +-
 src/objects/_icon.vars.scss             |   6 +-
 src/objects/_lightbox.scss              | 159 +++----
 src/objects/_lightbox.vars.scss         |  89 ++--
 src/objects/_menu.scss                  | 101 +++--
 src/objects/_menu.vars.scss             |  83 +---
 src/objects/_navbar.scss                | 247 +++++------
 src/objects/_navbar.vars.scss           | 332 ++++++---------
 src/objects/_palette.scss               |  52 +--
 src/objects/_placeholders.scss          |  28 +-
 src/objects/_placeholders.vars.scss     |   8 +-
 src/objects/_popover.scss               |  54 +--
 src/objects/_popover.vars.scss          |  35 +-
 src/objects/_radio.scss                 | 151 ++++---
 src/objects/_radio.vars.scss            | 107 ++---
 src/objects/_side-nav.scss              |  83 ++--
 src/objects/_side-nav.vars.scss         |  84 +---
 src/objects/_status-indicator.scss      |  28 +-
 src/objects/_status-indicator.vars.scss |  30 +-
 src/objects/_switch.scss                | 156 ++++---
 src/objects/_switch.vars.scss           | 121 ++----
 src/objects/_tabbar.scss                | 110 +++--
 src/objects/_tabbar.vars.scss           |  76 +---
 src/objects/_table.scss                 |  88 ++--
 src/objects/_table.vars.scss            |  68 +--
 src/objects/_text-field.scss            | 149 ++++---
 src/objects/_text-field.vars.scss       | 121 ++----
 src/objects/_thumbnail.scss             |  95 +++--
 src/objects/_thumbnail.vars.scss        | 102 ++---
 53 files changed, 2581 insertions(+), 3936 deletions(-)

(limited to 'src/objects')

diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 3aeb781..c2a1c58 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -1,37 +1,44 @@
-@use "sass:map";
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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 aedd917..bbd3dad 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -1,50 +1,36 @@
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'pkg:iro-sass/src/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 f805502..272c213 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,135 +1,118 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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);
-
-		@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
-			);
+		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);
 		}
 	}
 }
 
 @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: 0.05em;
-		border-radius: props.get(vars.$rounding);
+	@include bem.object('avatar') {
+		position:       relative;
+		display:        inline-block;
+		font-style:     normal;
+		vertical-align: .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)));
 			}
 		}
 
@@ -139,19 +122,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 7d1c342..467d7cc 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -1,102 +1,79 @@
-@use "sass:math";
+@use 'sass:math';
 
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'pkg:iro-sass/src/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(0.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(.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(0.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(.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(0.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(.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(0.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(.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(0.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(.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(0.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(.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(0.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(.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 1a7d1fa..6660abf 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -1,23 +1,23 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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 78f4742..9206117 100644
--- a/src/objects/_backdrop.vars.scss
+++ b/src/objects/_backdrop.vars.scss
@@ -1,10 +1,6 @@
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'pkg:iro-sass/src/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 8adc0f7..a3c8187 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,119 +1,115 @@
-@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 *;
+@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 *;
 
-@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 {
@@ -125,27 +121,32 @@
 
 			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,
@@ -153,67 +154,47 @@
 		&: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 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;
+	@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;
 
 		&::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,
@@ -228,7 +209,7 @@
 			}
 		}
 
-		@include bem.elem("label") {
+		@include bem.elem('label') {
 			display: inline-block;
 			margin-inline: props.get(vars.$pad-i-label);
 		}
@@ -241,91 +222,79 @@
 			}
 		}
 
-		@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) - 0.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) - .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) - 0.5em *
-								(props.get(vars.$line-height) - 1)
-						);
+					@include bem.modifier('icon') {
+						margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
 					}
 				}
 			}
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index a137d6d..3f835ae 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -1,456 +1,386 @@
-@use "sass:map";
-@use "sass:string";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/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: 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-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--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),
+$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),
+
 		--hover: (
-			--bg-color: props.get(core.$theme, --bg-l1),
-			--label-color: props.get(core.$theme, --heading),
+			--bg-color:     props.get(core.$theme, --text),
+			--label-color:  props.get(core.$theme, --base, --50),
+			--border-color: props.get(core.$theme, --text),
+		),
+
+		--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),
+		),
+	),
+
+	--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-mute),
-			--label-color: props.get(core.$theme, --heading),
+			--bg-color:     props.get(core.$theme, --border-strong),
+			--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),
+	--quiet: (
+		--label-color:  props.get(core.$theme, --text),
+
+		--hover: (
+			--bg-color:    props.get(core.$theme, --border-mute),
+			--label-color: props.get(core.$theme, --heading),
 		),
 
-		--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),
+			--label-color: props.get(core.$theme, --heading),
 		),
 
-		--highlighted: (
-			--border-color: props.get(core.$theme, --focus, --border),
-			--shadow-color: props.get(core.$theme, --focus, --outline),
+		--disabled: (
+			--label-color: props.get(core.$theme, --border-strong),
 		),
+	),
+), $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),
+	),
+
+	--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),
+	),
+), $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),
 
-		--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),
+				--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.$theme, --text-mute),
-				--label-color: props.get(core.$theme, --base, --50),
-				--border-color: props.get(core.$theme, --text-mute),
+				--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.$theme, --border-mute),
-				--label-color: props.get(core.$theme, --border-strong),
-				--border-color: props.get(core.$theme, --border-mute),
+				--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),
 			),
-		),
 
-		--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.$transparent-colors, $theme, --900),
+				--outline-color: props.get(core.$transparent-colors, $theme, --300),
 			),
 
-			--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.$transparent-colors, $theme, --900),
+				--shadow-color: props.get(core.$transparent-colors, --black, --200),
 			),
-		),
 
-		--quiet: (
-			--label-color: props.get(core.$theme, --text),
-			--hover: (
-				--bg-color: props.get(core.$theme, --border-mute),
-				--label-color: props.get(core.$theme, --heading),
-			),
+			--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),
 
-			--active: (
-				--bg-color: props.get(core.$theme, --border),
-				--label-color: props.get(core.$theme, --heading),
-			),
+				--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),
+				),
 
-			--disabled: (
-				--label-color: props.get(core.$theme, --border-strong),
+				--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),
+				),
 			),
-		),
-	),
-	$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),
-		),
+			--badge: (
+				--bg-color:     props.get(core.$transparent-colors, $theme, --200),
+				--label-color:  props.get(core.$transparent-colors, $theme, --900),
+				--border-color: transparent,
 
-		--active: (
-			--bg-color: props.get(core.$theme, --border-strong),
-			--border-color: props.get(core.$theme, --border-strong),
-		),
+				--hover: (
+					--bg-color:     props.get(core.$transparent-colors, $theme, --300),
+					--label-color:  props.get(core.$transparent-colors, $theme, --900),
+					--border-color: transparent,
+				),
 
-		--selected: (
-			--border-color: props.get(core.$theme, --text),
-		),
-	),
-	$default-theme-override
-) !default;
-$default-theme-dark: props.def(--o-button, $default-theme-dark, "dark");
+				--active: (
+					--bg-color:     props.get(core.$transparent-colors, $theme, --400),
+					--label-color:  props.get(core.$transparent-colors, $theme, --900),
+					--border-color: transparent,
+				),
+			),
 
-@each $theme in map.keys(props.get(core.$transparent-colors)) {
-	$button-theme: --static-#{string.slice($theme, 3)};
+			--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),
+				),
 
-	$themes: props.merge(
-		$themes,
-		(
-			$button-theme: (
-					--bg-color: props.get(core.$transparent-colors, $theme, --200),
+				--active: (
+					--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, --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),
-						),
-
-					--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),
-						),
-
-					--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),
-							--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
-										),
-								),
-
-							--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,
-
-							--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,
-								),
-						),
-
-					--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
-										),
-								),
-
-							--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
-										),
-								),
-						),
 				),
+
+				--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),
-					--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),
-						),
-
-					--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),
-						),
-
-					--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),
-								),
-
-							--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),
-								),
-
-							--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),
-							--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),
-								),
-
-							--disabled: (
-									--label-color: props.get(core.$theme, --border-strong),
-								),
-						),
-				)
+	$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),
+			),
+
+			--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),
+			),
+
+			--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),
+			),
+
+			--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),
+				),
+
+				--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),
+				),
+
+				--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),
+
+				--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),
+				),
+
+				--disabled: (
+					--label-color: props.get(core.$theme, --border-strong),
+				),
+			),
 		)
-	);
+	));
 }
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 3275bc8..b8bc727 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,95 +1,84 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
-@use "avatar.vars" as avatar;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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 0.2s,
-			background-color 0.2s,
-			border-color 0.2s,
-			box-shadow 0.2s;
-
-		@include bem.multi(
-			"&:link, &:visited, &:enabled",
-			"modifier" "interactive",
-			"modifier" "collapsible"
-		) {
+		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;
+
+		@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 0.2s;
+				transition:    transform .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);
@@ -97,238 +86,207 @@
 			}
 		}
 
-		@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 0.2s,
-				transform 0.2s,
-				opacity 0.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 .2s, transform .2s, opacity .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(-0.7 * props.get(avatar.$size--xl));
+			@include bem.next-elem('avatar') {
+				margin-block-start: calc(-.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;
-
-			@include bem.multi(
-				"&:link, &:visited, &:enabled",
-				"modifier" "interactive",
-				"modifier" "collapsible"
-			) {
+			border:           0;
+			box-shadow:       none;
+
+			@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: 0.75;
-						transform: translateY(props.get(vars.$hover--offset-b));
+						opacity:          .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 0.2s ease,
-					opacity 0.2s ease,
-					visibility 0s 0.2s linear;
+					border-color .2s ease,
+					opacity .2s ease,
+					visibility 0s .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 0.2s ease,
-							opacity 0.2s ease,
-							visibility 0.2s linear;
+							border-color .2s ease,
+							opacity .2s ease,
+							visibility .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 {
@@ -337,38 +295,37 @@
 				}
 			}
 
-			@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") {
@@ -377,7 +334,7 @@
 			}
 
 			&::details-content {
-				opacity: 0;
+				opacity:    0;
 				block-size: 0;
 				overflow-y: clip;
 				transition:
@@ -394,7 +351,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 96f3cb9..4616c80 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -1,130 +1,51 @@
-@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;
+@use 'sass:map';
+@use 'pkg:iro-sass/src/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;
 $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 60cee65..f3fb793 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,140 +1,130 @@
-@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;
+@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;
 
-@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
-					)
-			);
-
-		@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)
-			);
+		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));
 
 			&::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 0.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 .2s ease;
 			}
 
 			&::after {
-				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;
+				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;
 				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 0.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 .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);
 					}
@@ -143,18 +133,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 {
@@ -164,59 +154,58 @@
 			}
 
 			&: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 {
@@ -225,13 +214,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 8362aa7..278aac8 100644
--- a/src/objects/_checkbox.vars.scss
+++ b/src/objects/_checkbox.vars.scss
@@ -1,92 +1,32 @@
-@use "sass:map";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'pkg:iro-sass/src/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 f5584e6..d2ee8c3 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -1,29 +1,29 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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,40 +31,38 @@
 		}
 
 		&[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(
-					0.5 * props.get(vars.$body--pad-b) - props.get(divider.$margin-b)
-				);
+			@include bem.next-elem('body') {
+				padding-block-start: calc(.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 8650e51..39c47ba 100644
--- a/src/objects/_dialog.vars.scss
+++ b/src/objects/_dialog.vars.scss
@@ -1,10 +1,10 @@
-@use "sass:map";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
-@use "../layouts/container.vars" as container;
+@use 'sass:map';
+@use 'pkg:iro-sass/src/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,9 +12,5 @@ $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 f082d12..d81284b 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/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
-@use "../core.vars" as core;
+@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;
 
-@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 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 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);
 		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 38224d4..a8b0f9f 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -1,153 +1,80 @@
-@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;
+@use 'sass:map';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/props';
+@use '../core.vars' as core;
 
-$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;
+$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;
 
-$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;
+$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;
 
-$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;
+$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;
 
-$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;
+$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;
 
-$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;
+$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;
 
-$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;
+$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;
 
-$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;
+$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;
 
-$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;
+$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;
 
-$vertical--quiet--bg-color: props.def(
-	--o-divider--vertical--quiet--bg-color,
-	props.get(core.$theme, --border-mute),
-	"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;
 
-$dot--quiet--bg-color: props.def(
-	--o-divider--dot--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;
 
-$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 0257b32..655e662 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,55 +1,49 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
-@use "icon.vars" as icon;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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 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 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));
 		vertical-align: props.get(vars.$valign);
-		object-fit: contain;
+		object-fit:     contain;
 
-		@include bem.modifier("icon") {
-			margin: calc(
-				-1 * props.get(vars.$pad) - 0.5 * (props.get(vars.$size) - props.get(icon.$size))
-			);
+		@include bem.modifier('icon') {
+			margin:         calc(-1 * props.get(vars.$pad) - .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) - 0.5 * (props.get($size) - props.get(icon.$size))
-					);
+				@include bem.modifier('icon') {
+					margin: calc(-1 * props.get(vars.$pad) - .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 0.2s ease,
-				background-color 0.2s ease;
+			transition:    transform .2s ease, background-color .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 1c2a0e2..cf940cf 100644
--- a/src/objects/_emoji.vars.scss
+++ b/src/objects/_emoji.vars.scss
@@ -1,26 +1,26 @@
-@use "sass:map";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'pkg:iro-sass/src/props';
+@use '../core.vars' as core;
 
-$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
-$pad: props.def(--o-emoji--pad, 0.3em) !default;
+$size:     props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
+$pad:      props.def(--o-emoji--pad, .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, -0.25em) !default;
+$zoom:     props.def(--o-emoji--zoom, 3) !default;
+$valign:   props.def(--o-emoji--valign, -.25em) !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--125:   props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default;
+$valign--125: props.def(--o-emoji--125--valign, -.45em) !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--150:   props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default;
+$valign--150: props.def(--o-emoji--150--valign, -.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 fb664b4..23875f5 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,74 +1,74 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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 4588e70..5bd4547 100644
--- a/src/objects/_field-label.vars.scss
+++ b/src/objects/_field-label.vars.scss
@@ -1,34 +1,12 @@
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'pkg:iro-sass/src/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 d3e37b3..04b9bdf 100644
--- a/src/objects/_figure.scss
+++ b/src/objects/_figure.scss
@@ -1,25 +1,25 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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 936932d..3de3406 100644
--- a/src/objects/_figure.vars.scss
+++ b/src/objects/_figure.vars.scss
@@ -1,17 +1,9 @@
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'pkg:iro-sass/src/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 87a6269..0e8392e 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,70 +1,64 @@
-@use "sass:map";
-@use "sass:meta";
-@use "sass:string";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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));
 				}
 			}
 		}
@@ -79,26 +73,18 @@
 					}
 				}
 
-				@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 8943622..4267b8c 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -1,472 +1,208 @@
-@use "sass:map";
-@use "sass:string";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/props';
+@use '../core.vars' as core;
 
-$offset: props.def(--o-heading--offset, -0.02em) !default;
-$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default;
+$offset:            props.def(--o-heading--offset, -.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--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;
-
-$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--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--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--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;
+$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;
+
+$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;
+
+$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--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--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--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
-) !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--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--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-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;
+	'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--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--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--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--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),
+	$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),
-					--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 7baa3f8..1d046e0 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,24 +1,24 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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 4fdbfae..2a37212 100644
--- a/src/objects/_icon.vars.scss
+++ b/src/objects/_icon.vars.scss
@@ -1,5 +1,5 @@
-@use "pkg:iro-sass/props";
+@use 'pkg:iro-sass/src/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, -0.18em) !default;
+$size:         props.def(--o-icon--size, calc(1 / 14 * 16em)) !default;
+$valign:       props.def(--o-icon--valign, -.18em) !default;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 2b4abad..a173d57 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/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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 bem.object("lightbox") {
-		box-sizing: border-box;
-		display: none;
-		flex: 1 1 auto;
-		grid-template-areas: "image" "thumbnails";
-		grid-template-rows: 1fr auto;
+	@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;
 		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,79 +50,80 @@
 			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 0.2s ease,
-				margin-inline 0.2s ease;
+			transition:  inline-size .2s ease, margin-inline .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 dc9a2a1..6fb84f7 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -1,80 +1,37 @@
-@use "sass:map";
-@use "sass:string";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/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 c7fbc0e..dce14a8 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,82 +1,75 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
-@use "icon.vars" as icon;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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: 0.5px;
+			letter-spacing: .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 {
@@ -84,25 +77,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 c168c30..9396117 100644
--- a/src/objects/_menu.vars.scss
+++ b/src/objects/_menu.vars.scss
@@ -1,74 +1,29 @@
-@use "sass:map";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'pkg:iro-sass/src/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 4b678e0..cc1eaaa 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -1,197 +1,151 @@
-@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 *;
+@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 *;
 
-@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)...);
 						}
 					}
 				}
@@ -201,64 +155,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(0.5 * props.get(vars.$spacing));
-			font-weight: 500;
+			inline-size:     100%;
+			padding-inline:  calc(.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;
 						}
@@ -266,7 +220,7 @@
 				}
 			}
 
-			@include bem.is("selected") {
+			@include bem.is('selected') {
 				font-weight: bold;
 			}
 		}
@@ -279,21 +233,22 @@
 			}
 		}
 
-		@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 b7d7e16..e96b714 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -1,242 +1,178 @@
-@use "sass:map";
-@use "sass:string";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/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;
-
-$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;
-
-$themes: props.def(--o-navbar, (), "color");
+$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;
+
+$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');
 
 $default-theme-override: () !default;
-$default-theme: map.deep-merge(
-	(
-		--text-color: props.get(core.$theme, --text),
-		--label-color: props.get(core.$theme, --text-mute),
+$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),
+
 		--hover: (
-			--bg-color: props.get(core.$theme, --border-mute),
-			--text-color: props.get(core.$theme, --heading),
-			--label-color: props.get(core.$theme, --text),
+			--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.$theme, --border),
-			--text-color: props.get(core.$theme, --heading),
+			--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.$theme, --border-strong),
+			--bg-color:    props.get(core.$theme, --border-mute),
+			--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),
-		),
-
+	--quiet: (
 		--selected: (
-			--bg-color: props.get(core.$theme, --heading),
-			--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),
+
 			--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),
+				--text-color:  props.get(core.$theme, --heading),
 			),
 
 			--active: (
-				--bg-color: props.get(core.$theme, --text-mute),
-				--text-color: props.get(core.$theme, --base, --50),
-				--label-color: props.get(core.$theme, --heading),
+				--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),
-				--label-color: props.get(core.$theme, --text-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),
+
+			--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),
+			),
+
+			--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),
+			),
+
+			--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),
 			),
-		),
 
-		--quiet: (
 			--selected: (
-				--bg-color: props.get(core.$theme, --border-mute),
-				--text-color: props.get(core.$theme, --heading),
+				--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.$theme, --border),
-					--text-color: props.get(core.$theme, --heading),
+					--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.$theme, --border-strong),
-					--text-color: props.get(core.$theme, --heading),
+					--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.$theme, --border-mute),
-					--text-color: props.get(core.$theme, --border-strong),
+					--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),
 				),
 			),
-		),
-	),
-	$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)};
+			--quiet: (
+				--selected: (
+					--bg-color:    props.get(core.$transparent-colors, $theme, --300),
+					--text-color:  props.get(core.$transparent-colors, $theme, --900),
 
-	$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, --300),
-							--text-color: props.get(core.$transparent-colors, $theme, --900),
-							--label-color: props.get(core.$transparent-colors, $theme, --800),
-						),
+						--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, --400),
-							--text-color: props.get(core.$transparent-colors, $theme, --900),
-							--label-color: props.get(core.$transparent-colors, $theme, --900),
-						),
+						--bg-color:    props.get(core.$transparent-colors, $theme, --500),
+						--text-color:  props.get(core.$transparent-colors, $theme, --900),
+					),
 
 					--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),
-						),
-
-					--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
-												),
-										),
-								),
-						),
-				),
+						--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 88448e0..f503812 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,27 +1,21 @@
-@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;
+@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;
 
 @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);
@@ -32,19 +26,11 @@
 			}
 		}
 
-		@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);
 
@@ -56,21 +42,17 @@
 			}
 		}
 
-		@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 d0af033..683f57e 100644
--- a/src/objects/_placeholders.scss
+++ b/src/objects/_placeholders.scss
@@ -1,22 +1,22 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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 87e1657..1ac4ef7 100644
--- a/src/objects/_placeholders.vars.scss
+++ b/src/objects/_placeholders.vars.scss
@@ -1,6 +1,6 @@
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'pkg:iro-sass/src/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, 0.5) !default;
+$rounding:       props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default;
+$opacity:        props.def(--o-placeholder--opacity, .5) !default;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 90187c1..1cb5660 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,40 +1,44 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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 df1072e..202d71a 100644
--- a/src/objects/_popover.vars.scss
+++ b/src/objects/_popover.vars.scss
@@ -1,28 +1,19 @@
-@use "sass:map";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'pkg:iro-sass/src/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 c964657..ae4a85a 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -1,100 +1,92 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
-@use "../core.vars" as core;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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
-					)
-			);
-
-		@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;
+		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;
 
 			&::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 0.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 .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(0.44);
+						transform: scale(.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 {
@@ -104,46 +96,45 @@
 			}
 
 			&: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 {
@@ -152,7 +143,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 e7a41a4..a5f249d 100644
--- a/src/objects/_radio.vars.scss
+++ b/src/objects/_radio.vars.scss
@@ -1,90 +1,33 @@
-@use "sass:map";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'pkg:iro-sass/src/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 ed0f3dc..272d38c 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -1,79 +1,76 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
-@use "icon.vars" as icon;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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: 0.5px;
+			letter-spacing: .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 {
@@ -81,14 +78,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 8abb0df..d6a7de1 100644
--- a/src/objects/_side-nav.vars.scss
+++ b/src/objects/_side-nav.vars.scss
@@ -1,72 +1,28 @@
-@use "sass:map";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'pkg:iro-sass/src/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 8885929..fe8fe26 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/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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 66a11e8..dfe628f 100644
--- a/src/objects/_status-indicator.vars.scss
+++ b/src/objects/_status-indicator.vars.scss
@@ -1,32 +1,26 @@
-@use "sass:map";
-@use "pkg:iro-sass/props";
-@use "../config";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'pkg:iro-sass/src/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 c1f7411..0ef95e6 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,79 +1,73 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
-@use "../core.vars" as core;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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
-					)
-			);
-
-		@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;
+		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;
 
 			&::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 0.2s ease;
+				border:           props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
+				border-radius:    props.get(vars.$inline-size);
+				transition:       transform .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);
 					}
@@ -81,23 +75,18 @@
 			}
 
 			&: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) + 0.5px
-							),
-							0
-						);
+						transform:    translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .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 {
@@ -108,21 +97,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 {
@@ -133,33 +122,32 @@
 			}
 
 			&: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 {
@@ -169,7 +157,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 {
@@ -180,12 +168,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 6f56ec7..761cacd 100644
--- a/src/objects/_switch.vars.scss
+++ b/src/objects/_switch.vars.scss
@@ -1,101 +1,36 @@
-@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;
+@use 'sass:map';
+@use 'pkg:iro-sass/src/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;
 $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 02519f9..d43208f 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -1,77 +1,75 @@
-@use "sass:map";
-@use "sass:meta";
-@use "sass:string";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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(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;
+		@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;
 
 			&::before {
-				position: absolute;
+				position:          absolute;
 				inset-block-start: 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%);
+				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%);
 			}
 
 			&::after {
-				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: "";
+				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:          '';
 				background-color: props.get(vars.$tab--selected--text-color);
 			}
 
@@ -85,25 +83,21 @@
 
 				&: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(0.5 * props.get(vars.$spacing));
+				margin-inline-start: calc(.5 * props.get(vars.$spacing));
 			}
 
-			@include bem.is("selected") {
+			@include bem.is('selected') {
 				color: props.get(vars.$tab--selected--text-color);
 
 				&::after {
@@ -112,13 +106,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 d26f302..d9cc53e 100644
--- a/src/objects/_tabbar.vars.scss
+++ b/src/objects/_tabbar.vars.scss
@@ -1,66 +1,26 @@
-@use "sass:map";
-@use "sass:string";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/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 a985f78..effa61f 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,57 +1,57 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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 e00010f..7c5683c 100644
--- a/src/objects/_table.vars.scss
+++ b/src/objects/_table.vars.scss
@@ -1,59 +1,25 @@
-@use "sass:map";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'pkg:iro-sass/src/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, 0.5px) !default;
+$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .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 a8d3ec8..5a48df3 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,91 +1,84 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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)
-	);
-
-	@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);
+	$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);
 		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) - 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;
+		@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;
 			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);
 				}
 			}
@@ -93,11 +86,10 @@
 			&: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);
 				}
 			}
@@ -112,49 +104,46 @@
 			}
 		}
 
-		@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 {
@@ -163,10 +152,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 {
@@ -174,21 +163,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 9a2a16a..ef06822 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -1,108 +1,39 @@
-@use "sass:map";
-@use "pkg:iro-sass/props";
-@use "../core.vars" as core;
+@use 'sass:map';
+@use 'pkg:iro-sass/src/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 c7a9791..9925dd0 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -1,66 +1,65 @@
-@use "sass:map";
-@use "sass:meta";
-@use "sass:string";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/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);
 		}
 
@@ -74,18 +73,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 737a626..a5625fc 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -1,85 +1,51 @@
-@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;
+@use 'sass:map';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/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;
 $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),
-					--hover: (
-							--border: props.get(core.$transparent-colors, $theme, --500),
-						),
+	$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),
+			),
 
-					--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),
+			),
 		)
-	);
+	));
 }
-- 
cgit v1.3.1