91 files changed, 4678 insertions, 4501 deletions

diff --git a/src/_apca.scss b/src/_apca.scss
index c65f46e..c5da4a0 100644
--- a/src/_apca.scss
+++ b/src/_apca.scss
@@ -7,121 +7,121 @@
 @use 'sass:math';
 
 $SA98G: (
-    mainTRC:     2.4,
+        mainTRC:     2.4,
 
-    sRco:        .2126729, 
-    sGco:        .7151522, 
-    sBco:        .072175,
+        sRco:        .2126729, 
+        sGco:        .7151522, 
+        sBco:        .072175,
 
-    normBG:      .56, 
-    normTXT:     .57,
-    revTXT:      .62,
-    revBG:       .65,
+        normBG:      .56, 
+        normTXT:     .57,
+        revTXT:      .62,
+        revBG:       .65,
 
-    blkThrs:     .022,
-    blkClmp:     1.414,
-    scaleBoW:    1.14,
-    scaleWoB:    1.14,
-    loBoWoffset: .027,
-    loWoBoffset: .027,
-    deltaYmin:   .0005,
-    loClip:      .0001,
+        blkThrs:     .022,
+        blkClmp:     1.414,
+        scaleBoW:    1.14,
+        scaleWoB:    1.14,
+        loBoWoffset: .027,
+        loWoBoffset: .027,
+        deltaYmin:   .0005,
+        loClip:      .0001,
 
-    mFactor:     1.9468554433171,
-    mOffsetIn:   .0387393816571401,
-    mExpAdj:     .283343396420869,
-    mOffsetOut:  .312865795870758,
+        mFactor:     1.9468554433171,
+        mOffsetIn:   .0387393816571401,
+        mExpAdj:     .283343396420869,
+        mOffsetOut:  .312865795870758,
 );
 
 @function sRGB_to_Y($color) {
-    $rgb: color.to-space($color, rgb);
+        $rgb: color.to-space($color, rgb);
 
-    @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) +
-        map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) +
-        map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC));
+        @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) +
+                map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) +
+                map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC));
 }
 
 @function Y_to_sRGB($y) {
-    $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255);
-    @return rgb($c, $c, $c);
+        $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255);
+        @return rgb($c, $c, $c);
 }
 
 @function contrast($txtY, $bgY) {
-    /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */
-    $icp: .0 1.1;
+        /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */
+        $icp: .0 1.1;
 
-    @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) {
-        @return 0;
-    }
+        @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) {
+                @return 0;
+        }
 
-    @if $txtY <= map.get($SA98G, blkThrs) {
-        $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp));
-    }
-    @if $bgY <= map.get($SA98G, blkThrs) {
-        $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp));
-    }
+        @if $txtY <= map.get($SA98G, blkThrs) {
+                $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp));
+        }
+        @if $bgY <= map.get($SA98G, blkThrs) {
+                $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp));
+        }
 
-    @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) {
-        @return 0;
-    }
+        @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) {
+                @return 0;
+        }
 
-    $outputContrast: 0;
+        $outputContrast: 0;
 
-    @if $bgY > $txtY {
-        $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT)));
+        @if $bgY > $txtY {
+                $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT)));
         
-        @if $SAPC >= map.get($SA98G, loClip) {
-            $outputContrast: $SAPC - map.get($SA98G, loBoWoffset);
-        }
-    } @else {
-        $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT)));
+                @if $SAPC >= map.get($SA98G, loClip) {
+                        $outputContrast: $SAPC - map.get($SA98G, loBoWoffset);
+                }
+        } @else {
+                $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT)));
         
-        @if $SAPC <= -1 * map.get($SA98G, loClip) {
-            $outputContrast: $SAPC + map.get($SA98G, loWoBoffset);
-        }
-    }
+                @if $SAPC <= -1 * map.get($SA98G, loClip) {
+                        $outputContrast: $SAPC + map.get($SA98G, loWoBoffset);
+                }
+        }
 
-    @return $outputContrast * 100;
+        @return $outputContrast * 100;
 }
 
 @function reverse($contrast, $knownY, $knownType: 'bg') {
-    $unknownY:   $knownY;
+        $unknownY:   $knownY;
 
-    $knownExp:   0;
-    $unknownExp: 0;
+        $knownExp:   0;
+        $unknownExp: 0;
 
-    $scale:  map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB));
-    $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset));
+        $scale:  map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB));
+        $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset));
 
-    $contrast: math.div($contrast * .01 + $offset, $scale);
+        $contrast: math.div($contrast * .01 + $offset, $scale);
 
-    @if $knownY <= map.get($SA98G, blkThrs) {
-        $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp));
-    }
+        @if $knownY <= map.get($SA98G, blkThrs) {
+                $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp));
+        }
 
-    @if $knownType == 'bg' {
-        $knownExp:   map.get($SA98G, if($contrast > 0, normBG, revBG));
-        $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT));
-        $unknownY:   math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp));
-    } @else {
-        $knownExp:   map.get($SA98G, if($contrast > 0, normTXT, revTXT));
-        $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG));
-        $unknownY:   math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp));
-    }
+        @if $knownType == 'bg' {
+                $knownExp:   map.get($SA98G, if($contrast > 0, normBG, revBG));
+                $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT));
+                $unknownY:   math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp));
+        } @else {
+                $knownExp:   map.get($SA98G, if($contrast > 0, normTXT, revTXT));
+                $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG));
+                $unknownY:   math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp));
+        }
 
-    @if '#{$unknownY}' == '#{math.sqrt(-1)}' {
-        @return false;
-    }
+        @if '#{$unknownY}' == '#{math.sqrt(-1)}' {
+                @return false;
+        }
 
-    @if $unknownY > 1.06 or $unknownY < 0 {
-        @return false;
-    }
+        @if $unknownY > 1.06 or $unknownY < 0 {
+                @return false;
+        }
 
-    @if $unknownY <= map.get($SA98G, blkThrs) {
-        $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut);
-    }
+        @if $unknownY <= map.get($SA98G, blkThrs) {
+                $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut);
+        }
 
-    $unknownY: math.max(math.min($unknownY, 1), 0);
+        $unknownY: math.max(math.min($unknownY, 1), 0);
 
-    @return $unknownY;
+        @return $unknownY;
 }
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index cf23f29..861b600 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -4,184 +4,194 @@
 @use 'iro-sass/src/easing' as easing;
 
 $static-colors: (
-    --base: hsl(0, 0%, 98%),
+        --base: hsl(0, 0%, 98%),
 
-    --levels: (
-        --100:  math.div(0, 12) * 110 - 10,
-        --200:  math.div(1, 12) * 110 - 10,
-        --300:  math.div(2, 12) * 110 - 10,
-        --400:  math.div(3, 12) * 110 - 10,
-        --500:  math.div(4, 12) * 110 - 10,
-        --600:  math.div(5, 12) * 110 - 10,
-        --700:  math.div(6, 12) * 110 - 10,
-        --800:  math.div(7, 12) * 110 - 10,
-        --900:  math.div(8, 12) * 110 - 10,
-        --1000: math.div(9, 12) * 110 - 10,
-        --1100: math.div(10, 12) * 110 - 10,
-        --1200: math.div(11, 12) * 110 - 10,
-        --1300: math.div(12, 12) * 110 - 10,
-    ),
+        --levels: (
+                --100:  math.div(0, 12) * 110 - 10,
+                --200:  math.div(1, 12) * 110 - 10,
+                --300:  math.div(2, 12) * 110 - 10,
+                --400:  math.div(3, 12) * 110 - 10,
+                --500:  math.div(4, 12) * 110 - 10,
+                --600:  math.div(5, 12) * 110 - 10,
+                --700:  math.div(6, 12) * 110 - 10,
+                --800:  math.div(7, 12) * 110 - 10,
+                --900:  math.div(8, 12) * 110 - 10,
+                --1000: math.div(9, 12) * 110 - 10,
+                --1100: math.div(10, 12) * 110 - 10,
+                --1200: math.div(11, 12) * 110 - 10,
+                --1300: math.div(12, 12) * 110 - 10,
+        ),
 
-    --palettes: (
-        --blue:   oklch(56% .14 275.25),
-        --purple: oklch(56% .14 305.58),
-        --red:    oklch(56% .14 14.69),
-        --green:  oklch(56% .14 150.48),
-        --yellow: oklch(56% .14 84.08),
-    ),
+        --palettes: (
+                --blue:   oklch(56% .14 275.25),
+                --purple: oklch(56% .14 305.58),
+                --red:    oklch(56% .14 14.69),
+                --green:  oklch(56% .14 150.48),
+                --yellow: oklch(56% .14 84.08),
+        ),
 
-    --transparents: (
-        --100: 0,
-        --200: .1,
-        --300: .25,
-        --400: .4,
-        --500: .55,
-        --600: .7,
-        --700: .8,
-        --800: .9,
-        --900: 1,
-    ),
+        --transparents: (
+                --100: 0,
+                --200: .1,
+                --300: .25,
+                --400: .4,
+                --500: .55,
+                --600: .7,
+                --700: .8,
+                --800: .9,
+                --900: 1,
+        ),
 );
 
 $semantic-colors-common: (
-    --accent:          --blue,
-    --accent-static:   --blue-static,
-    --positive:        --green,
-    --positive-static: --green-static,
-    --negative:        --red,
-    --negative-static: --red-static,
-    --warning:         --yellow,
-    --warning-static:  --yellow-static,
+        --accent:          --blue,
+        --accent-static:   --blue-static,
+        --positive:        --green,
+        --positive-static: --green-static,
+        --negative:        --red,
+        --negative-static: --red-static,
+        --warning:         --yellow,
+        --warning-static:  --yellow-static,
 
-    --focus-raw:       --accent,
-    --focus-static:    --accent-static,
+        --focus-raw:       --accent,
+        --focus-static:    --accent-static,
 
-    --border-mute:     --base --200,
-    --border:          --base --300,
-    --border-strong:   --base --400,
+        --border-mute:     --base --200,
+        --border:          --base --300,
+        --border-strong:   --base --400,
 
-    --text-disabled:   --base --500,
-    --text-mute-more:  --base --600,
-    --text-mute:       --base --700,
-    --text:            --base --800,
-    --heading:         --base --900,
+        --text-disabled:   --base --500,
+        --text-mute-more:  --base --600,
+        --text-mute:       --base --700,
+        --text:            --base --800,
+        --heading:         --base --900,
 
-    --focus: (
-        --outline:       --focus-raw --400,
-        --border-mute:   --focus-raw --900,
-        --border:        --focus-raw --1000,
-        --border-text:   --focus-raw --1000-text,
-        --border-strong: --focus-raw --1100,
-        --text:          --focus-raw --1100,
-    ),
+        --focus: (
+                --outline:       --focus-raw --400,
+                --border-mute:   --focus-raw --900,
+                --border:        --focus-raw --1000,
+                --border-text:   --focus-raw --1000-text,
+                --border-strong: --focus-raw --1100,
+                --text:          --focus-raw --1100,
+        ),
 );
 
 $theme-light: (
-    --levels: (
-        --grays: (
-            --50:  (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
-            --75:  (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
-            --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
+        --levels: (
+                --grays: (
+                        --50:  (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
+                        --75:  (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
+                        --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
         
-            --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
-            --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
-            --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
+                        --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
+                        --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
+                        --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
         
-            --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
-            --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
-            --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
-            --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
-            --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
-        ),
+                        --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
+                        --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
+                        --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
+                        --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
+                        --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
+                ),
 
-        --colors: (
-            --100:  (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
-            --200:  (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
-            --300:  (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
-            --400:  (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
-            --500:  (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
-            --600:  (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
-            --700:  (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
-            --800:  (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
-            --900:  (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
-            --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
-            --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
-            --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
-            --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
-        ),
-    ),
+                --colors: (
+                        --100:  (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
+                        --200:  (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
+                        --300:  (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
+                        --400:  (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
+                        --500:  (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
+                        --600:  (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
+                        --700:  (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
+                        --800:  (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
+                        --900:  (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
+                        --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
+                        --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
+                        --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
+                        --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
+                ),
+        ),
     
-    --palettes: (
-        --base:   hsl(260, 70%, 98%)    --grays,
-        --blue:   oklch(56% .16 275.25) --colors,
-        --purple: oklch(56% .16 305.58) --colors,
-        --red:    oklch(56% .16 14.69)  --colors,
-        --green:  oklch(56% .16 150.48) --colors,
-        --yellow: oklch(56% .16 84.08)  --colors,
-    ),
+        --palettes: (
+                --base:   hsl(260, 70%, 98%)    --grays,
+                --blue:   oklch(56% .16 275.25) --colors,
+                --purple: oklch(56% .16 305.58) --colors,
+                --red:    oklch(56% .16 14.69)  --colors,
+                --green:  oklch(56% .16 150.48) --colors,
+                --yellow: oklch(56% .16 84.08)  --colors,
+        ),
 
-    --semantic: map.merge($semantic-colors-common, (
-        --bg-l2:   --base --50,
-        --bg-l1:   --base --100,
-        --bg-base: --base --200,
-    )),
+        --semantic: map.merge($semantic-colors-common, (
+                --bg-l2:   --base --50,
+                --bg-l1:   --base --100,
+                --bg-base: --base --200,
 
-    --constants: (
-        --shadow: rgba(#000, .15),
-    ),
+                --box: (
+                        --border:        --base --200,
+                        --border-strong: --base --300,
+                ),
+        )),
+
+        --constants: (
+                --shadow: rgba(#000, .1),
+        ),
 );
 
 $theme-dark: (
-    --levels: (
-        --grays: (
-            --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
-            --75:  (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
-            --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
+        --levels: (
+                --grays: (
+                        --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
+                        --75:  (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
+                        --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
         
-            --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
-            --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
-            --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
+                        --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
+                        --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
+                        --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
         
-            --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
-            --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
-            --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
-            --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
-            --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
-        ),
+                        --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
+                        --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
+                        --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
+                        --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
+                        --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
+                ),
 
-        --colors: (
-            --100:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
-            --200:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
-            --300:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),
-            --400:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),
-            --500:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
-            --600:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),
-            --700:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),
-            --800:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
-            --900:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),
-            --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),
-            --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
-            --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),
-            --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
-        ),
-    ),
+                --colors: (
+                        --100:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
+                        --200:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
+                        --300:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),
+                        --400:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),
+                        --500:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
+                        --600:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),
+                        --700:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),
+                        --800:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
+                        --900:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),
+                        --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),
+                        --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
+                        --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),
+                        --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
+                ),
+        ),
     
-    --palettes: (
-        --base:   hsl(257, 7%, 20%)     --grays,
-        --blue:   oklch(56% .16 275.25) --colors,
-        --purple: oklch(56% .16 305.58) --colors,
-        --red:    oklch(56% .16 14.69)  --colors,
-        --green:  oklch(56% .16 150.48) --colors,
-        --yellow: oklch(56% .16 84.08)  --colors,
-    ),
+        --palettes: (
+                --base:   hsl(257, 7%, 20%)     --grays,
+                --blue:   oklch(56% .16 275.25) --colors,
+                --purple: oklch(56% .16 305.58) --colors,
+                --red:    oklch(56% .16 14.69)  --colors,
+                --green:  oklch(56% .16 150.48) --colors,
+                --yellow: oklch(56% .16 84.08)  --colors,
+        ),
+
+        --semantic: map.merge($semantic-colors-common, (
+                --bg-base: --base --50,
+                --bg-l1:   --base --75,
+                --bg-l2:   --base --100,
 
-    --semantic: map.merge($semantic-colors-common, (
-        --bg-base: --base --50,
-        --bg-l1:   --base --75,
-        --bg-l2:   --base --100,
-    )),
+                --box: (
+                        --border:        --base --100,
+                        --border-strong: --base --100,
+                ),
+        )),
 
-    --constants: (
-        --shadow: rgba(#000, .5),
-    ),
+        --constants: (
+                --shadow: rgba(#000, .35),
+        ),
 );
diff --git a/src/_config.scss b/src/_config.scss
index 284d6e7..764d953 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -18,10 +18,12 @@ $theme-dark: map.deep-merge(def.$theme-dark, $theme-dark-override) !default;
 
 $themes-override: () !default;
 $themes: map.deep-merge((
-    --main: (
-        light: $theme-light,
-        dark:  $theme-dark,
-    ),
+        --main: (
+                light: $theme-light,
+                dark:  $theme-dark,
+        ),
 ), $themes-override) !default;
 
 $theme-default: list.nth(map.keys($themes), 1) !default;
+
+$explicit-dark-theme: false !default;
diff --git a/src/_core.scss b/src/_core.scss
index 7b7a384..7be4b0d 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -9,30 +9,37 @@
 @forward 'core.vars';
 
 @mixin styles {
-    @each $theme-name, $theme in vars.$themes {
-        @if $theme-name == config.$theme-default {
-            :root {
-                @include props.materialize(map.values(meta.module-variables('vars')));
+        @each $theme-name, $theme in vars.$themes {
+                @if $theme-name == config.$theme-default {
+                        :root {
+                                @include props.materialize(map.values(meta.module-variables('vars')));
                 
-                @if map.has-key($theme, 'dark') {
-                    @media (prefers-color-scheme: dark) {
-                        @include props.materialize(map.get($theme, 'dark'));
-                    }
-                }
-            }
-        } @else {
-            @include bem.theme(string.slice($theme-name, 3)) {
-                @include props.materialize(map.get($theme, 'light'));
+                                @if map.has-key($theme, 'dark') {
+                                        @media (prefers-color-scheme: dark) {
+                                                @include props.materialize(map.get($theme, 'dark'));
+                                        }
+                                }
+                        }
 
-                color:            props.get(vars.$theme, --text);
-                background-color: props.get(vars.$theme, --bg-base);
+                        @if map.has-key($theme, 'dark') and config.$explicit-dark-theme {
+                                @include bem.theme('dark') {
+                                        @include props.materialize(map.values(meta.module-variables('vars')));
+                                        @include props.materialize(map.get($theme, 'dark'));
+                                }
+                        }
+                } @else {
+                        @include bem.theme(string.slice($theme-name, 3)) {
+                                @include props.materialize(map.get($theme, 'light'));
 
-                @if map.has-key($theme, 'dark') {
-                    @media (prefers-color-scheme: dark) {
-                        @include props.materialize(map.get($theme, 'dark'));
-                    }
-                }
-            }
-        }
-    }
+                                color:            props.get(vars.$theme, --text);
+                                background-color: props.get(vars.$theme, --bg-base);
+
+                                @if map.has-key($theme, 'dark') {
+                                        @media (prefers-color-scheme: dark) {
+                                                @include props.materialize(map.get($theme, 'dark'));
+                                        }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 0a94534..f7a9ebc 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -89,11 +89,18 @@ $border-width--thick:  props.def(--border-width--thick, 4px) !default;
 $border-width--medium: props.def(--border-width--medium, 2px) !default;
 $border-width--thin:   props.def(--border-width--thin, 1px) !default;
 
-$shadow--x:    props.def(--shadow--x, 0) !default;
-$shadow--y:    props.def(--shadow--y, 1px) !default;
-$shadow--blur: props.def(--shadow--blur, 4px) !default;
+$shadow--l1--x:    props.def(--shadow--l1--x, 0) !default;
+$shadow--l1--y:    props.def(--shadow--l1--y, 2px) !default;
+$shadow--l1--blur: props.def(--shadow--l1--blur, 3px) !default;
+$shadow--l1--grow: props.def(--shadow--l1--grow, -1px) !default;
 
-$rounding: props.def(--rounding, 4px) !default;
+$shadow--l2--x:    props.def(--shadow--l2--x, 0) !default;
+$shadow--l2--y:    props.def(--shadow--l2--y, 5px) !default;
+$shadow--l2--blur: props.def(--shadow--l2--blur, 12px) !default;
+$shadow--l2--grow: props.def(--shadow--l2--grow, -4px) !default;
+
+$rounding:     props.def(--rounding, 12px) !default;
+$rounding--sm: props.def(--rounding--sm, 4px) !default;
 
 $key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default;
 $key-focus--border-width:  props.def(--key-focus--border-width, props.get($border-width--medium)) !default;
@@ -109,8 +116,8 @@ $sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default;
 $-static-colors: ();
 
 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
-    $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base));
-    $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
+        $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base));
+        $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
 }
 
 //
@@ -118,11 +125,11 @@ $-static-colors: ();
 $transparent-colors: props.def(--transparent-colors, (), 'color');
 
 @each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
-    $color: list.nth($palette, 1);
-    $text:  list.nth($palette, 2);
+        $color: list.nth($palette, 1);
+        $text:  list.nth($palette, 2);
 
-    $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents));
-    $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
+        $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents));
+        $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
 }
 
 //
@@ -130,47 +137,47 @@ $transparent-colors: props.def(--transparent-colors, (), 'color');
 $themes: ();
 
 @each $theme-name, $theme in config.$themes {
-    @each $variant-name, $variant in $theme {
-        @if $variant != null {
-            $compiled: props.def(--colors, (), 'color');
+        @each $variant-name, $variant in $theme {
+                @if $variant != null {
+                        $compiled: props.def(--colors, (), 'color');
 
-            @each $palette-name, $palette in $-static-colors {
-                $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette ));
-            }
+                        @each $palette-name, $palette in $-static-colors {
+                                $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette ));
+                        }
 
-            @each $palette-name, $palette in map.get($variant, --palettes) {
-                $base-color: list.nth($palette, 1);
-                $levels:     list.nth($palette, 2);
+                        @each $palette-name, $palette in map.get($variant, --palettes) {
+                                $base-color: list.nth($palette, 1);
+                                $levels:     list.nth($palette, 2);
 
-                $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1));
-                $compiled: props.merge($compiled, ( $palette-name: $palette ));
-            }
+                                $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1));
+                                $compiled: props.merge($compiled, ( $palette-name: $palette ));
+                        }
 
-            @each $color, $value in map.get($variant, --constants) {
-                $compiled: props.merge($compiled, ( $color: $value ));
-            }
+                        @each $color, $value in map.get($variant, --constants) {
+                                $compiled: props.merge($compiled, ( $color: $value ));
+                        }
 
-            @each $color, $ref in map.get($variant, --semantic) {
-                $res: ();
+                        @each $color, $ref in map.get($variant, --semantic) {
+                                $res: ();
 
-                @if meta.type-of($ref) == 'map' {
-                    @each $key, $r in $ref {
-                        $re1: list.nth($r, 1);
-                        $re2: functions.list-slice($r, 2);
-                        $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
-                    }
-                } @else {
-                    $ref1: list.nth($ref, 1);
-                    $ref2: functions.list-slice($ref, 2);
-                    $res:  props.get($compiled, $ref1, $ref2...);
-                }
+                                @if meta.type-of($ref) == 'map' {
+                                        @each $key, $r in $ref {
+                                                $re1: list.nth($r, 1);
+                                                $re2: functions.list-slice($r, 2);
+                                                $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
+                                        }
+                                } @else {
+                                        $ref1: list.nth($ref, 1);
+                                        $ref2: functions.list-slice($ref, 2);
+                                        $res:  props.get($compiled, $ref1, $ref2...);
+                                }
 
-                $compiled: props.merge($compiled, ( $color: $res ));
-            }
+                                $compiled: props.merge($compiled, ( $color: $res ));
+                        }
 
-            $themes: map.set($themes, $theme-name, $variant-name, $compiled);
-        }
-    }
+                        $themes: map.set($themes, $theme-name, $variant-name, $compiled);
+                }
+        }
 }
 
 $theme: map.get($themes, config.$theme-default, light) !default;
diff --git a/src/_functions.scss b/src/_functions.scss
index 62caf8c..ec1f9d8 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -8,59 +8,63 @@
 @use 'apca';
 
 @function palette($base-color, $levels, $ref-color: $base-color) {
-    $base-lch: color.to-space($base-color, oklch);
-    $ref-lch: color.to-space($ref-color, oklch);
+        $base-lch: color.to-space($base-color, oklch);
+        $ref-lch: color.to-space($ref-color, oklch);
 
-    $ref-l: color.channel($ref-lch, 'lightness');
-    $ref-y: apca.sRGB_to_Y($ref-lch);
+        $ref-l: color.channel($ref-lch, 'lightness');
+        $ref-y: apca.sRGB_to_Y($ref-lch);
 
-    $black-y: apca.sRGB_to_Y(#000);
-    $white-y: apca.sRGB_to_Y(#fff);
+        $black-y: apca.sRGB_to_Y(#000);
+        $white-y: apca.sRGB_to_Y(#fff);
 
-    $palette: ();
+        $palette: ();
 
-    @each $key, $level in $levels {
-        $color: list.nth($level, 1);
-        $y: 0;
-        $c: 1;
+        @each $key, $level in $levels {
+                $color: list.nth($level, 1);
+                $y: 0;
+                $c: 1;
+                $h: 0deg;
 
-        @if list.length($level) > 1 {
-            $c: list.nth($level, 2);
-        }
+                @if list.length($level) > 1 {
+                        $c: list.nth($level, 2);
+                }
+                @if list.length($level) > 2 {
+                        $h: list.nth($level, 3);
+                }
 
-        @if meta.type-of($color) != 'color' {
-            $y: apca.reverse($color, $ref-y);
-            $l: color.channel($base-lch, 'lightness');
+                @if meta.type-of($color) != 'color' {
+                        $y: apca.reverse($color, $ref-y);
+                        $l: color.channel($base-lch, 'lightness');
 
-            @if $y != false {
-                $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
-            } @else {
-                $y: $ref-y;
-            }
+                        @if $y != false {
+                                $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
+                        } @else {
+                                $y: $ref-y;
+                        }
 
-            $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue'));
-        } @else {
-            $y: apca.sRGB_to_Y($color);
-        }
+                        $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue')));
+                } @else {
+                        $y: apca.sRGB_to_Y($color);
+                }
 
-        $contrast-black: apca.contrast($black-y, $y);
-        $contrast-white: apca.contrast($white-y, $y);
+                $contrast-black: apca.contrast($black-y, $y);
+                $contrast-white: apca.contrast($white-y, $y);
 
-        $palette: map.set($palette, $key, $color);
-        $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
-    }
+                $palette: map.set($palette, $key, $color);
+                $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
+        }
 
-    @return $palette;
+        @return $palette;
 }
 
 @function transparent-palette($color, $text, $alphas) {
-    $palette: (
-        --text: $text,
-    );
+        $palette: (
+                --text: $text,
+        );
 
-    @each $key, $alpha in $alphas {
-        $palette: map.set($palette, $key, rgba($color, $alpha));
-    }
+        @each $key, $alpha in $alphas {
+                $palette: map.set($palette, $key, rgba($color, $alpha));
+        }
 
-    @return $palette;
+        @return $palette;
 }
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 204e889..22e50c0 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -1,28 +1,29 @@
 $breakpoints: (
-    lg: 1340px,
-    md: 900px,
-    sm: 620px,
-    xs: 400px,
+        lg: 1340px,
+        md: 900px,
+        sm: 620px,
+        xs: 400px,
 ) !default;
 
 @use 'iro-sass/src/responsive' with (
-    $named-viewports: $breakpoints
+        $named-viewports: $breakpoints
 );
 
 @forward 'include-media/dist/include-media' as media--* with (
-    $breakpoints: $breakpoints,
-    $unit-intervals: (
-        'px':  1,
-        'em':  .01,
-        'rem': .01,
-        '':    0
-    ) !default,
+        $breakpoints: $breakpoints,
+        $unit-intervals: (
+                'px':  1,
+                'em':  .01,
+                'rem': .01,
+                '':    0
+        ) !default,
 );
 
 @forward 'config.defaults' as config-defaults--*;
 @forward 'config' as config--*;
 @forward 'props' as props--*;
 @forward 'core' as core--*;
+@forward 'layers' as layers--*;
 
 @forward 'layouts/button-group' as l-button-group--*;
 @forward 'layouts/card-list' as l-card-list--*;
@@ -43,16 +44,15 @@ $breakpoints: (
 @forward 'scopes/lists' as s-lists--*;
 @forward 'scopes/tables' as s-tables--*;
 
-@forward 'objects/action-button' as o-action-button--*;
 @forward 'objects/alert' as o-alert--*;
 @forward 'objects/avatar' as o-avatar--*;
 @forward 'objects/backdrop' as o-backdrop--*;
-@forward 'objects/badge' as o-badge--*;
 @forward 'objects/button' as o-button--*;
 @forward 'objects/card' as o-card--*;
 @forward 'objects/checkbox' as o-checkbox--*;
 @forward 'objects/divider' as o-divider--*;
 @forward 'objects/emoji' as o-emoji--*;
+@forward 'objects/figure' as o-figure--*;
 @forward 'objects/field-label' as o-field-label--*;
 @forward 'objects/heading' as o-heading--*;
 @forward 'objects/icon' as o-icon--*;
@@ -60,13 +60,14 @@ $breakpoints: (
 @forward 'objects/menu' as o-menu--*;
 @forward 'objects/navbar' as o-navbar--*;
 @forward 'objects/palette' as o-palette--*;
+@forward 'objects/placeholders' as o-placeholders--*;
 @forward 'objects/popover' as o-popover--*;
 @forward 'objects/radio' as o-radio--*;
 @forward 'objects/side-nav' as o-side-nav--*;
 @forward 'objects/status-indicator' as o-status-indicator--*;
 @forward 'objects/switch' as o-switch--*;
 @forward 'objects/table' as o-table--*;
-@forward 'objects/tabs' as o-tabs--*;
+@forward 'objects/tabbar' as o-tabbar--*;
 @forward 'objects/text-field' as o-text-field--*;
 @forward 'objects/thumbnail' as o-thumbnail--*;
 
diff --git a/src/_layers.scss b/src/_layers.scss
new file mode 100644
index 0000000..2a80190
--- /dev/null
+++ b/src/_layers.scss
@@ -0,0 +1,3 @@
+@mixin styles {
+        @layer scope, theme, object, layout, component, utility;
+}
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 49d3b6f..8899778 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -2,37 +2,37 @@
 @use 'functions' as fn;
 
 @mixin set-font($basis, $values: ()) {
-    $values: fn.set-font($basis, $values);
+        $values: fn.set-font($basis, $values);
 
-    @each $prop, $value in $values {
-        @if $value != null {
-            #{$prop}: $value;
-        }
-    }
+        @each $prop, $value in $values {
+                @if $value != null {
+                        #{$prop}: $value;
+                }
+        }
 }
 
 @mixin heading-strong($size) {
-    font-size: fn.global-dim(list.join(--heading, $size));
-    color:     fn.global-color(--heading);
+        font-size: fn.global-dim(list.join(--heading, $size));
+        color:     fn.global-color(--heading);
 }
 
 @mixin heading-medium($size) {
-    @include set-font(--standard, (
-        --line-height: null,
-        --size:        fn.global-dim(list.join(--heading, $size)),
-        --weight:      bold
-    ));
+        @include set-font(--standard, (
+                --line-height: null,
+                --size:        fn.global-dim(list.join(--heading, $size)),
+                --weight:      bold
+        ));
 
-    color: fn.global-color(--heading);
+        color: fn.global-color(--heading);
 }
 
 @mixin heading-faint($size) {
-    @include set-font(--standard, (
-        --line-height: null,
-        --size:        fn.global-dim(list.join(--heading, $size)),
-        --weight:      500,
-        --spacing:     1px
-    ));
+        @include set-font(--standard, (
+                --line-height: null,
+                --size:        fn.global-dim(list.join(--heading, $size)),
+                --weight:      500,
+                --spacing:     1px
+        ));
 
-    color: fn.global-color(--text-mute);
+        color: fn.global-color(--text-mute);
 }
diff --git a/src/_props.scss b/src/_props.scss
index ffba054..0b2306d 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -8,34 +8,41 @@
 @use 'iro-sass/src/props';
 
 @mixin materialize-at-root($ref) {
-    @if meta.type-of($ref) == 'map' {
-        $ref: map.values($ref);
-    }
+        @if meta.type-of($ref) == 'map' {
+                $ref: map.values($ref);
+        }
 
-    :root {
-        @include props.materialize($ref, null);
-        @include props.materialize($ref, 'color');
+        :root {
+                @include props.materialize($ref, null);
+                @include props.materialize($ref, 'color');
 
-        @each $breakpoint in map.keys(media.$breakpoints) {
-            @include media.media('<=#{$breakpoint}') {
-                @include props.materialize($ref, $breakpoint);
-            }
-        }
+                @each $breakpoint in map.keys(media.$breakpoints) {
+                        @include media.media('<=#{$breakpoint}') {
+                                @include props.materialize($ref, $breakpoint);
+                        }
+                }
 
-        @media (prefers-color-scheme: dark) {
-            @include props.materialize($ref, 'dark');
-        }
-    }
+                @media (prefers-color-scheme: dark) {
+                        @include props.materialize($ref, 'dark');
+                }
+        }
 
-    @each $theme-name in map.keys(config.$themes) {
-        @if $theme-name != config.$theme-default {
-            @include bem.theme(string.slice($theme-name, 3)) {
-                @include props.materialize($ref, 'color');
+        @if config.$explicit-dark-theme {
+                @include bem.theme('dark') {
+                        @include props.materialize($ref, 'color');
+                        @include props.materialize($ref, 'dark');
+                }
+        }
 
-                @media (prefers-color-scheme: dark) {
-                    @include props.materialize($ref, 'dark');
-                }
-            }
-        }
-    }
+        @each $theme-name in map.keys(config.$themes) {
+                @if $theme-name != config.$theme-default {
+                        @include bem.theme(string.slice($theme-name, 3)) {
+                                @include props.materialize($ref, 'color');
+
+                                @media (prefers-color-scheme: dark) {
+                                        @include props.materialize($ref, 'dark');
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/_themes.scss b/src/_themes.scss
index 32b617b..fe5a0cb 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use 'include-media/dist/include-media' as media;
@@ -7,67 +8,67 @@
 @forward 'core.vars';
 
 @mixin styles {
-    @include bem.theme('base') {
-        background-color: props.get(vars.$theme, --bg-base);
+        @include bem.theme('base') {
+                background-color: props.get(vars.$theme, --bg-base);
 
-        @include bem.suffix('light') {
-            @media (prefers-color-scheme: light) {
-                background-color: props.get(vars.$theme, --bg-base);
-            }
-        }
+                @include bem.suffix('light') {
+                        @media (prefers-color-scheme: light) {
+                                background-color: props.get(vars.$theme, --bg-base);
+                        }
+                }
 
-        @include bem.suffix('dark') {
-            @media (prefers-color-scheme: dark) {
-                background-color: props.get(vars.$theme, --bg-base);
-            }
-        }
-    }
+                @include bem.suffix('dark') {
+                        @media (prefers-color-scheme: dark) {
+                                background-color: props.get(vars.$theme, --bg-base);
+                        }
+                }
+        }
 
-    @include bem.theme('l1') {
-        background-color: props.get(vars.$theme, --bg-l1);
+        @include bem.theme('l1') {
+                background-color: props.get(vars.$theme, --bg-l1);
 
-        @include bem.suffix('light') {
-            @media (prefers-color-scheme: light) {
-                background-color: props.get(vars.$theme, --bg-l1);
-            }
-        }
+                @include bem.suffix('light') {
+                        @media (prefers-color-scheme: light) {
+                                background-color: props.get(vars.$theme, --bg-l1);
+                        }
+                }
 
-        @include bem.suffix('dark') {
-            @media (prefers-color-scheme: dark) {
-                background-color: props.get(vars.$theme, --bg-l1);
-            }
-        }
-    }
+                @include bem.suffix('dark') {
+                        @media (prefers-color-scheme: dark) {
+                                background-color: props.get(vars.$theme, --bg-l1);
+                        }
+                }
+        }
 
-    @include bem.theme('l2') {
-        background-color: props.get(vars.$theme, --bg-l2);
+        @include bem.theme('l2') {
+                background-color: props.get(vars.$theme, --bg-l2);
 
-        @include bem.suffix('light') {
-            @media (prefers-color-scheme: light) {
-                background-color: props.get(vars.$theme, --bg-l2);
-            }
-        }
+                @include bem.suffix('light') {
+                        @media (prefers-color-scheme: light) {
+                                background-color: props.get(vars.$theme, --bg-l2);
+                        }
+                }
 
-        @include bem.suffix('dark') {
-            @media (prefers-color-scheme: dark) {
-                background-color: props.get(vars.$theme, --bg-l2);
-            }
-        }
-    }
+                @include bem.suffix('dark') {
+                        @media (prefers-color-scheme: dark) {
+                                background-color: props.get(vars.$theme, --bg-l2);
+                        }
+                }
+        }
 
-    @include bem.theme('50') {
-        background-color: props.get(vars.$theme, --base, --50);
+        @include bem.theme('50') {
+                background-color: props.get(vars.$theme, --base, --50);
 
-        @include bem.suffix('light') {
-            @media (prefers-color-scheme: light) {
-                background-color: props.get(vars.$theme, --base, --50);
-            }
-        }
+                @include bem.suffix('light') {
+                        @media (prefers-color-scheme: light) {
+                                background-color: props.get(vars.$theme, --base, --50);
+                        }
+                }
 
-        @include bem.suffix('dark') {
-            @media (prefers-color-scheme: dark) {
-                background-color: props.get(vars.$theme, --base, --50);
-            }
-        }
-    }
+                @include bem.suffix('dark') {
+                        @media (prefers-color-scheme: dark) {
+                                background-color: props.get(vars.$theme, --base, --50);
+                        }
+                }
+        }
 }
diff --git a/src/_utils.scss b/src/_utils.scss
index bd92454..3dae3b6 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use 'include-media/dist/include-media' as media;
@@ -8,313 +9,372 @@
 
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
 $-dirs: (
-    '': '',
-    'bs': '-block-start',
-    'be': '-block-end',
-    'b':  '-block',
-    'is': '-inline-start',
-    'ie': '-inline-end',
-    'i':  '-inline',
+        '': '',
+        'b':  '-block',
+        'bs': '-block-start',
+        'be': '-block-end',
+        'i':  '-inline',
+        'is': '-inline-start',
+        'ie': '-inline-end',
 ) !default;
 
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
 $-sizes: (
-    0: vars.$size--0,
-    10: vars.$size--10,
-    50: vars.$size--50,
-    75: vars.$size--75,
-    100: vars.$size--100,
-    125: vars.$size--125,
-    200: vars.$size--200,
-    400: vars.$size--400,
-    700: vars.$size--700,
-    800: vars.$size--800,
+        0: vars.$size--0,
+        10: vars.$size--10,
+        50: vars.$size--50,
+        75: vars.$size--75,
+        100: vars.$size--100,
+        125: vars.$size--125,
+        200: vars.$size--200,
+        400: vars.$size--400,
+        700: vars.$size--700,
+        800: vars.$size--800,
+) !default;
+
+$-font-sizes: (
+        50: vars.$font-size--50,
+        75: vars.$font-size--75,
+        100: vars.$font-size--100,
+        150: vars.$font-size--150,
+        200: vars.$font-size--200,
+        300: vars.$font-size--300,
 ) !default;
 
 @mixin styles {
-    @include bem.utility('d-block') {
-        display: block;
-    }
+        @include bem.utility('d-block') {
+                display: block;
+        }
+
+        @include bem.utility('d-inline-block') {
+                display: inline-block;
+        }
+
+        @include bem.utility('d-contents') {
+                display: contents;
+        }
+
+        @include bem.utility('d-flex') {
+                display: flex;
+        }
+
+        @include bem.utility('td-none') {
+                text-decoration: none;
+        }
+
+        @include bem.utility('d-none') {
+                display: none;
 
-    @include bem.utility('d-inline-block') {
-        display: inline-block;
-    }
+                @each $breakpoint in map.keys(media.$breakpoints) {
+                        @include media.media('<=#{$breakpoint}') {
+                                @include bem.suffix('#{$breakpoint}-lo') {
+                                        display: none;
+                                }
+                        }
 
-    @include bem.utility('d-contents') {
-        display: contents;
-    }
+                        @include media.media('>#{$breakpoint}') {
+                                @include bem.suffix('#{$breakpoint}-hi') {
+                                        display: none;
+                                }
+                        }
+                }
 
-    @include bem.utility('d-flex') {
-        display: flex;
-    }
+                @include bem.at-theme('js') {
+                        @include bem.suffix('js') {
+                                display: none;
+                        }
+                }
 
-    @include bem.utility('td-none') {
-        text-decoration: none;
-    }
+                @include bem.at-theme('no-js') {
+                        @include bem.suffix('no-js') {
+                                display: none;
+                        }
+                }
 
-    @include bem.utility('d-none') {
-        display: none;
+                @include bem.suffix('empty') {
+                        &:empty {
+                                display: none;
+                        }
+                }
+        }
 
-        @each $breakpoint in map.keys(media.$breakpoints) {
-            @include media.media('<=#{$breakpoint}') {
-                @include bem.suffix('#{$breakpoint}-lo') {
-                    display: none;
-                }
-            }
+        @include bem.utility('va-top') {
+                vertical-align: top;
+        }
 
-            @include media.media('>#{$breakpoint}') {
-                @include bem.suffix('#{$breakpoint}-hi') {
-                    display: none;
-                }
-            }
-        }
+        @include bem.utility('va-baseline') {
+                vertical-align: baseline;
+        }
 
-        @include bem.at-theme('js') {
-            @include bem.suffix('js') {
-                display: none;
-            }
-        }
+        @include bem.utility('va-middle') {
+                vertical-align: middle;
+        }
 
-        @include bem.at-theme('no-js') {
-            @include bem.suffix('no-js') {
-                display: none;
-            }
-        }
+        @include bem.utility('va-bottom') {
+                vertical-align: bottom;
+        }
 
-        @include bem.suffix('empty') {
-            &:empty {
-                display: none;
-            }
-        }
-    }
+        @include bem.utility('ta-start') {
+                text-align: start;
+        }
 
-    @include bem.utility('va-top') {
-        vertical-align: top;
-    }
+        @include bem.utility('ta-end') {
+                text-align: end;
+        }
 
-    @include bem.utility('va-baseline') {
-        vertical-align: baseline;
-    }
+        @include bem.utility('ta-center') {
+                text-align: center;
+        }
 
-    @include bem.utility('va-middle') {
-        vertical-align: middle;
-    }
+        @include bem.utility('fw-normal') {
+                font-weight: normal;
+        }
 
-    @include bem.utility('va-bottom') {
-        vertical-align: bottom;
-    }
+        @include bem.utility('ai-center') {
+                align-items: center;
+        }
 
-    @include bem.utility('ta-start') {
-        text-align: start;
-    }
+        @include bem.utility('ai-start') {
+                align-items: flex-start;
+        }
 
-    @include bem.utility('ta-end') {
-        text-align: end;
-    }
+        @include bem.utility('ai-end') {
+                align-items: flex-end;
+        }
 
-    @include bem.utility('ta-center') {
-        text-align: center;
-    }
+        @include bem.utility('ac-center') {
+                align-content: center;
+        }
 
-    @include bem.utility('fw-normal') {
-        font-weight: normal;
-    }
+        @include bem.utility('jc-center') {
+                justify-content: center;
+        }
 
-    @include bem.utility('ai-center') {
-        align-items: center;
-    }
+        @include bem.utility('jc-start') {
+                justify-content: flex-start;
+        }
 
-    @include bem.utility('ai-start') {
-        align-items: flex-start;
-    }
+        @include bem.utility('jc-end') {
+                justify-content: flex-end;
+        }
 
-    @include bem.utility('ai-end') {
-        align-items: flex-end;
-    }
+        @include bem.utility('tt-upper') {
+                text-transform: uppercase;
+        }
 
-    @include bem.utility('jc-center') {
-        justify-content: center;
-    }
+        @include bem.utility('tt-lower') {
+                text-transform: lowercase;
+        }
 
-    @include bem.utility('jc-start') {
-        justify-content: flex-start;
-    }
+        @include bem.utility('c-heading') {
+                color: props.get(vars.$theme, --heading);
 
-    @include bem.utility('jc-end') {
-        justify-content: flex-end;
-    }
+                @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+                        $theme-name: static-#{string.slice($theme, 3)};
+    
+                        @include bem.at-theme($theme-name) {
+                                color: props.get(vars.$transparent-colors, $theme, --900);
+                        }
+                }
+        }
 
-    @include bem.utility('tt-upper') {
-        text-transform: uppercase;
-    }
+        @include bem.utility('c-text') {
+                color: props.get(vars.$theme, --text);
 
-    @include bem.utility('tt-lower') {
-        text-transform: lowercase;
-    }
+                @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+                        $theme-name: static-#{string.slice($theme, 3)};
+    
+                        @include bem.at-theme($theme-name) {
+                                color: props.get(vars.$transparent-colors, $theme, --800);
+                        }
+                }
+        }
 
-    @include bem.utility('c-heading') {
-        color: props.get(vars.$theme, --heading);
-    }
+        @include bem.utility('c-mute') {
+                color: props.get(vars.$theme, --text-mute);
 
-    @include bem.utility('c-text') {
-        color: props.get(vars.$theme, --text);
-    }
+                @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+                        $theme-name: static-#{string.slice($theme, 3)};
+    
+                        @include bem.at-theme($theme-name) {
+                                color: props.get(vars.$transparent-colors, $theme, --700);
+                        }
+                }
+        }
 
-    @include bem.utility('c-mute') {
-        color: props.get(vars.$theme, --text-mute);
-    }
+        @include bem.utility('c-mute-more') {
+                color: props.get(vars.$theme, --text-mute-more);
 
-    @include bem.utility('c-mute-more') {
-        color: props.get(vars.$theme, --text-mute-more);
-    }
+                @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+                        $theme-name: static-#{string.slice($theme, 3)};
+    
+                        @include bem.at-theme($theme-name) {
+                                color: props.get(vars.$transparent-colors, $theme, --600);
+                        }
+                }
+        }
 
-    @each $dir, $prop in (is: inline-size, bs: block-size) {
-        @include bem.utility('#{$dir}-100') {
-            #{$prop}: 100%;
-        }
+        @each $mod, $size in $-font-sizes {
+                @include bem.utility('fs-#{$mod}') {
+                        font-size: props.get($size);
+                }
+        }
+
+        @each $dir, $prop in (is: inline-size, bs: block-size) {
+                @include bem.utility('#{$dir}-100') {
+                        #{$prop}: 100%;
+                }
         
-        @include bem.utility('#{$dir}-75') {
-            #{$prop}: 75%;
-        }
+                @include bem.utility('#{$dir}-75') {
+                        #{$prop}: 75%;
+                }
         
-        @include bem.utility('#{$dir}-50') {
-            #{$prop}: 50%;
-        }
+                @include bem.utility('#{$dir}-50') {
+                        #{$prop}: 50%;
+                }
         
-        @include bem.utility('#{$dir}-25') {
-            #{$prop}: 25%;
-        }
+                @include bem.utility('#{$dir}-25') {
+                        #{$prop}: 25%;
+                }
         
-        @include bem.utility('#{$dir}-1px') {
-            #{$prop}: 1px;
-        }
+                @include bem.utility('#{$dir}-1px') {
+                        #{$prop}: 1px;
+                }
         
-        @include bem.utility('#{$dir}-0') {
-            #{$prop}: 0;
-        }
-    }
+                @include bem.utility('#{$dir}-0') {
+                        #{$prop}: 0;
+                }
+        }
+
+        @include bem.utility('elp') {
+                overflow:      hidden;
+                text-overflow: ellipsis;
+                white-space:   nowrap;
+        }
+
+        @include bem.utility('o-auto') {
+                overflow: auto;
+        }
 
-    @include bem.utility('elp') {
-        overflow:      hidden;
-        text-overflow: ellipsis;
-        white-space:   nowrap;
-    }
+        @include bem.utility('o-hidden') {
+                overflow: hidden;
+        }
 
-    @include bem.utility('o-hidden') {
-        overflow: hidden;
-    }
+        @include bem.utility('p-static') {
+                position: static;
+        }
 
-    @include bem.utility('p-static') {
-        position: static;
-    }
+        @include bem.utility('p-relative') {
+                position: relative;
+        }
 
-    @include bem.utility('p-relative') {
-        position: relative;
-    }
+        @include bem.utility('p-fixed') {
+                position: fixed;
+        }
 
-    @include bem.utility('p-fixed') {
-        position: fixed;
-    }
+        @include bem.utility('p-sticky-bs') {
+                position:          sticky;
+                inset-block-start: props.get(vars.$sticky-top-offset);
+        }
 
-    @include bem.utility('p-sticky-bs') {
-        position:          sticky;
-        inset-block-start: props.get(vars.$sticky-top-offset);
-    }
+        @include bem.utility('p-sticky-be') {
+                position:        sticky;
+                inset-block-end: 0;
+        }
 
-    @include bem.utility('p-sticky-be') {
-        position:        sticky;
-        inset-block-end: 0;
-    }
+        @include bem.utility('br-round') {
+                border-radius: props.get(vars.$rounding);
+        }
 
-    @include bem.utility('br-round') {
-        border-radius: props.get(vars.$rounding);
-    }
+        @include bem.utility('br-round-sm') {
+                border-radius: props.get(vars.$rounding--sm);
+        }
 
-    @each $dir, $suffix in $-dirs {
-        @include bem.utility('m#{$dir}-auto') {
-            margin#{$suffix}: auto;
-        }
+        @each $dir, $suffix in $-dirs {
+                @include bem.utility('m#{$dir}-auto') {
+                        margin#{$suffix}: auto;
+                }
         
-        @include bem.utility('p#{$dir}-auto') {
-            padding#{$suffix}: auto;
-        }
+                @include bem.utility('p#{$dir}-auto') {
+                        padding#{$suffix}: auto;
+                }
 
-        @each $mod, $size in $-sizes {
-            @include bem.utility('m#{$dir}-#{$mod}') {
-                margin#{$suffix}: props.get($size);
-            }
+                @each $mod, $size in $-sizes {
+                        @include bem.utility('m#{$dir}-#{$mod}') {
+                                margin#{$suffix}: props.get($size);
+                        }
             
-            @include bem.utility('p#{$dir}-#{$mod}') {
-                padding#{$suffix}: props.get($size);
-            }
-        }
+                        @include bem.utility('p#{$dir}-#{$mod}') {
+                                padding#{$suffix}: props.get($size);
+                        }
+                }
         
-        @include bem.utility('b#{$dir}-0') {
-            border#{$suffix}: 0;
+                @include bem.utility('b#{$dir}-0') {
+                        border#{$suffix}: 0;
 
-            @include bem.suffix('light') {
-                @media (prefers-color-scheme: light) {
-                    border#{$suffix}: 0;
-                }
-            }
+                        @include bem.suffix('light') {
+                                @media (prefers-color-scheme: light) {
+                                        border#{$suffix}: 0;
+                                }
+                        }
         
-            @include bem.suffix('dark') {
-                @media (prefers-color-scheme: dark) {
-                    border#{$suffix}: 0;
-                }
-            }
-        }
+                        @include bem.suffix('dark') {
+                                @media (prefers-color-scheme: dark) {
+                                        border#{$suffix}: 0;
+                                }
+                        }
+                }
         
-        @include bem.utility('b#{$dir}-1') {
-            border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                @include bem.utility('b#{$dir}-1') {
+                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
 
-            @include bem.suffix('light') {
-                @media (prefers-color-scheme: light) {
-                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
-                }
-            }
+                        @include bem.suffix('light') {
+                                @media (prefers-color-scheme: light) {
+                                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                                }
+                        }
         
-            @include bem.suffix('dark') {
-                @media (prefers-color-scheme: dark) {
-                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
-                }
-            }
-        }
+                        @include bem.suffix('dark') {
+                                @media (prefers-color-scheme: dark) {
+                                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                                }
+                        }
+                }
         
-        @include bem.utility('b#{$dir}-1-mute') {
-            border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                @include bem.utility('b#{$dir}-1-mute') {
+                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
 
-            @include bem.suffix('light') {
-                @media (prefers-color-scheme: light) {
-                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
-                }
-            }
+                        @include bem.suffix('light') {
+                                @media (prefers-color-scheme: light) {
+                                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                                }
+                        }
         
-            @include bem.suffix('dark') {
-                @media (prefers-color-scheme: dark) {
-                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
-                }
-            }
-        }
-    }
+                        @include bem.suffix('dark') {
+                                @media (prefers-color-scheme: dark) {
+                                        border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                                }
+                        }
+                }
+        }
 
-    @include bem.utility('mbs-neutralize') {
-        &::before {
-            display:       block;
-            margin-block:  -100em 100em;
-            content:       '';
-        }
-    }
+        @include bem.utility('mbs-neutralize') {
+                &::before {
+                        display:       block;
+                        margin-block:  -100em 100em;
+                        content:       '';
+                }
+        }
     
-    @include bem.utility('sr-only') {
-        position:    absolute;
-        width:       1px;
-        height:      1px;
-        padding:     0;
-        margin:      -1px;
-        overflow:    hidden;
-        clip-path:   inset(50%);
-        white-space: nowrap;
-        border:      0;
-    }
+        @include bem.utility('sr-only') {
+                position:    absolute;
+                width:       1px;
+                height:      1px;
+                padding:     0;
+                margin:      -1px;
+                overflow:    hidden;
+                white-space: nowrap;
+                border:      0;
+                clip-path:   inset(50%);
+        }
 }
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index c51ae7e..44719be 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -5,13 +5,46 @@
 
 @forward 'button-group.vars';
 @use 'button-group.vars' as vars;
+@use '../objects/button.vars' as button;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.layout('button-group') {
-        display:   flex;
-        flex-wrap: wrap;
-        gap:       props.get(vars.$spacing);
-    }
+        @include bem.layout('button-group') {
+                display:   inline-flex;
+                flex-wrap: wrap;
+                gap:       props.get(vars.$gap);
+
+                @each $mod, $size in vars.$sizes {
+                        @include bem.modifier($mod) {
+                                gap: props.get($size);
+                        }
+                }
+
+                @include bem.modifier('align-block') {
+                        margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
+
+                        @include bem.modifier('pill') {
+                                margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
+                        }
+
+                        @include bem.modifier('icon') {
+                                margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+                        }
+
+                        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
+                                @include bem.modifier('action-#{$mod}') {
+                                        margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
+    
+                                        @include bem.modifier('pill') {
+                                                margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
+                                        }
+
+                                        @include bem.modifier('icon') {
+                                                margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+                                        }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
index 95ac8f8..b56eec7 100644
--- a/src/layouts/_button-group.vars.scss
+++ b/src/layouts/_button-group.vars.scss
@@ -1,4 +1,16 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$spacing: props.def(--l-button-group--spacing, props.get(core.$size--150)) !default;
+$gap: props.def(--l-button-group--gap, props.get(core.$size--150)) !default;
+
+$gapless: props.def(--l-button-group--gapless, 0) !default;
+$sm:      props.def(--l-button-group--sm, props.get(core.$size--100)) !default;
+$lg:      props.def(--l-button-group--lg, props.get(core.$size--300)) !default;
+$xl:      props.def(--l-button-group--xl, props.get(core.$size--450)) !default;
+
+$sizes: (
+        'gapless': $gapless,
+        'sm':      $sm,
+        'lg':      $lg,
+        'xl':      $xl,
+) !default;
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 8ef40c5..aedbfd0 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -8,75 +8,151 @@
 @use 'card-list.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.layout('card-list') {
-        display:        flex;
-        flex-direction: column;
-        gap:            props.get(vars.$row-gap);
+        @include bem.layout('card-list') {
+                display:        flex;
+                flex-direction: column;
+                gap:            props.get(vars.$row-gap);
 
-        @include bem.modifier('quiet') {
-            row-gap: props.get(vars.$quiet--row-gap);
-        }
+                @include bem.modifier('merge') {
+                        position:         relative;
+                        gap:              calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
+                        padding:          props.get(vars.$merge-padding);
+                        background-color: props.get(vars.$card-bg-color);
+                        border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
+                        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
 
-        @include bem.modifier('grid') {
-            display:               grid;
-            grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
-            gap:                   props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
+                        @include bem.elem('card') {
+                                &:not(:last-child) {
+                                        position:                relative;
+                                        border-end-start-radius: 0;
+                                        border-end-end-radius:   0;
 
-            @include bem.modifier('quiet') {
-                row-gap: props.get(vars.$grid--quiet--row-gap);
-            }
-        }
+                                        &::after {
+                                                position:          absolute;
+                                                inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
+                                                inset-inline:      calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
+                                                display:           block;
+                                                block-size:        props.get(vars.$border-width);
+                                                content:           '';
+                                                background-color:  props.get(vars.$border-color);
+                                        }
+                                }
 
-        @include bem.modifier('masonry') {
-            display:    block;
-            columns:    auto props.get(vars.$masonry--col-width);
-            column-gap: props.get(vars.$masonry--col-gap);
+                                &:hover,
+                                &:active,
+                                &:focus-visible {
+                                        transform:  none;
+                                }
 
-            @include bem.elem('card') {
-                margin-block-end: props.get(vars.$masonry--row-gap);
-                break-inside:     avoid;
-            }
+                                @include bem.next-twin-elem {
+                                        border-start-start-radius: 0;
+                                        border-start-end-radius:   0;
+                                }
+                        }
 
-            @include bem.modifier('quiet') {
-                @include bem.elem('card') {
-                    margin-block-end: props.get(vars.$masonry--quiet--row-gap);
-                }
-            }
-        }
+                        @include bem.modifier('borderless') {
+                                border-color: props.get(vars.$card-bg-color);
 
-        @include bem.modifier('masonry-h') {
-            flex-flow: row wrap;
-            gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
+                                @include bem.elem('card') {
+                                        &:not(:last-child) {
+                                                &::after {
+                                                        inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
+                                                }
+                                        }
+                                }
+                        }
 
-            @include bem.modifier('no-flush') {
-                &::after {
-                    display:     block;
-                    flex:        1 0 auto;
-                    inline-size: props.get(vars.$masonry-h--row-height);
-                    content:     '';
-                }
-            }
+                        @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.elem('card') {
-                flex:            1 0 auto;
-                max-inline-size: 100%;
-            }
+                @include bem.modifier('quiet') {
+                        row-gap: props.get(vars.$quiet--row-gap);
+                }
 
-            @include bem.elem('card-image') {
-                block-size: props.get(vars.$masonry-h--row-height);
-            }
+                @include bem.modifier('grid') {
+                        display:               grid;
+                        grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
+                        gap:                   props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
 
-            @include bem.modifier('quiet') {
-                row-gap: props.get(vars.$masonry-h--quiet--row-gap);
-            }
-        }
+                        @include bem.modifier('quiet') {
+                                row-gap: props.get(vars.$grid--quiet--row-gap);
+                        }
+                }
 
-        @include bem.modifier('aspect-5\\/4') {
-            @include bem.elem('card-image') {
-                aspect-ratio: 5 / 4;
-            }
-        }
-    }
+                @include bem.modifier('grid-sm') {
+                        display:               grid;
+                        grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
+                        gap:                   props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
+
+                        @include bem.modifier('grid-sm') {
+                                @include media.media('<=md') {
+                                        display: flex;
+                                        gap:     props.get(vars.$row-gap);
+                                }
+                        }
+
+                        @include bem.modifier('quiet') {
+                                row-gap: props.get(vars.$grid-sm--quiet--row-gap);
+                        }
+                }
+
+                @include bem.modifier('masonry') {
+                        display:    block;
+                        columns:    auto props.get(vars.$masonry--col-width);
+                        column-gap: props.get(vars.$masonry--col-gap);
+
+                        @include bem.elem('card') {
+                                margin-block-end: props.get(vars.$masonry--row-gap);
+                                break-inside:     avoid;
+                        }
+
+                        @include bem.modifier('quiet') {
+                                @include bem.elem('card') {
+                                        margin-block-end: props.get(vars.$masonry--quiet--row-gap);
+                                }
+                        }
+                }
+
+                @include bem.modifier('masonry-h') {
+                        flex-flow: row wrap;
+                        gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
+
+                        @include bem.modifier('no-flush') {
+                                &::after {
+                                        display:     block;
+                                        flex:        1 0 auto;
+                                        inline-size: props.get(vars.$masonry-h--row-height);
+                                        content:     '';
+                                }
+                        }
+
+                        @include bem.elem('card') {
+                                flex:            1 0 auto;
+                                max-inline-size: 100%;
+                        }
+
+                        @include bem.elem('card-image') {
+                                block-size: props.get(vars.$masonry-h--row-height);
+                        }
+
+                        @include bem.modifier('quiet') {
+                                row-gap: props.get(vars.$masonry-h--quiet--row-gap);
+                        }
+                }
+
+                @include bem.modifier('aspect-5\\/4') {
+                        @include bem.elem('card-image') {
+                                aspect-ratio: 5 / 4;
+                        }
+                }
+        }
 }
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index f77bfbf..75e72cc 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,5 +1,10 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
+@use '../objects/card' as card;
+
+$border-width:   props.def(--l-card-list--border-width, props.get(card.$border-width)) !default;
+$merge-padding:  props.def(--l-card-list--merge-padding, props.get(core.$border-width--thick)) !default;
+$rounding:       props.def(--l-card-list--rounding, props.get(card.$rounding)) !default;
 
 $row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
 $quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
@@ -9,6 +14,11 @@ $grid--col-gap:        props.def(--l-card-list--grid--col-gap, props.get(core.$s
 $grid--col-width:      props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
 $grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
 
+$grid-sm--row-gap:        props.def(--l-card-list--grid-md--row-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-gap:        props.def(--l-card-list--grid-md--col-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-width:      props.def(--l-card-list--grid-md--col-width, props.get(core.$size--4600)) !default;
+$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default;
+
 $masonry--row-gap:        props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
 $masonry--col-gap:        props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
 $masonry--col-width:      props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
@@ -19,4 +29,13 @@ $masonry-h--col-gap:        props.def(--l-card-list--masonry-h--col-gap, props.g
 $masonry-h--row-height:     props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
 $masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default;
 
-$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border), 'color') !default;
+$shadow-x:    props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
+$shadow-y:    props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
+$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
+$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default;
+
+$card-bg-color:      props.def(--l-card-list--bg-color, props.get(card.$bg-color), 'color') !default;
+$border-color:       props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default;
+$shadow-color:       props.def(--l-card-list--shadow-color, props.get(card.$shadow-color), 'color') !default;
+
+$border-color-dark:  props.def(--l-card-list--border-color, props.get(core.$theme, --bg-l1), 'dark') !default;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 17ab2f0..0ae68c1 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -7,22 +7,22 @@
 @use 'container.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.layout('container') {
-        @each $mod, $size in vars.$fixed-sizes {
-            @include bem.modifier($mod) {
-                max-inline-size: props.get($size);
-                margin-inline:   auto;
-            }
-        }
+        @include bem.layout('container') {
+                @each $mod, $size in vars.$fixed-sizes {
+                        @include bem.modifier($mod) {
+                                max-inline-size: props.get($size);
+                                margin-inline:   auto;
+                        }
+                }
 
-        @include bem.modifier('pad-i') {
-            padding-inline: props.get(vars.$pad-i);
-        }
+                @include bem.modifier('pad-i') {
+                        padding-inline: props.get(vars.$pad-i);
+                }
 
-        @include bem.modifier('pad-b') {
-            padding-block: props.get(vars.$pad-b);
-        }
-    }
+                @include bem.modifier('pad-b') {
+                        padding-block: props.get(vars.$pad-b);
+                }
+        }
 }
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index cba7574..8f0cef6 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -2,14 +2,14 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$fixed-125: props.def(--l-container--fixed-125, fn.px-to-rem(720px)) !default;
-$fixed:     props.def(--l-container--fixed, fn.px-to-rem(610px)) !default;
-$fixed-75:  props.def(--l-container--fixed-75, fn.px-to-rem(500px)) !default;
+$fixed-200: props.def(--l-container--fixed-200, fn.px-to-rem(1300px)) !default;
+$fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default;
+$fixed:     props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
 
 $fixed-sizes: (
-    'fixed-125': $fixed-125,
-    'fixed':     $fixed,
-    'fixed-75':  $fixed-75
+        'fixed-200': $fixed-200,
+        'fixed-150': $fixed-150,
+        'fixed':     $fixed
 ) !default;
 
 $pad-i: props.def(--l-container--pad-i, props.get(core.$size--400)) !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index 902ecdb..c99b253 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,19 +1,19 @@
 @use 'iro-sass/src/bem';
 
 @mixin styles {
-    @include bem.layout('flex') {
-        display: flex;
+        @include bem.layout('flex') {
+                display: flex;
 
-        @include bem.modifier('column') {
-            flex-direction: column;
-        }
+                @include bem.modifier('column') {
+                        flex-direction: column;
+                }
 
-        @include bem.modifier('wrap') {
-            flex-wrap: wrap;
-        }
+                @include bem.modifier('wrap') {
+                        flex-wrap: wrap;
+                }
 
-        @include bem.modifier('wrap-reverse') {
-            flex-wrap: wrap-reverse;
-        }
-    }
+                @include bem.modifier('wrap-reverse') {
+                        flex-wrap: wrap-reverse;
+                }
+        }
 }
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 5f0567b..c804262 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -7,53 +7,53 @@
 @use 'form.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.layout('form') {
-        display:        flex;
-        flex-direction: column;
-        gap:            props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
+        @include bem.layout('form') {
+                display:        flex;
+                flex-direction: column;
+                gap:            props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
 
-        @include bem.elem('item') {
-            display: block;
-        }
+                @include bem.elem('item') {
+                        display: block;
+                }
         
-        @include bem.elem('item-content') {
-            @include bem.modifier('align-start') {
-                align-self: start;
-            }
-        }
+                @include bem.elem('item-content') {
+                        @include bem.modifier('align-start') {
+                                align-self: start;
+                        }
+                }
 
-        @include bem.modifier('row') {
-            flex-direction: row;
-            align-items:    flex-end;
-        }
+                @include bem.modifier('row') {
+                        flex-direction: row;
+                        align-items:    flex-end;
+                }
 
-        @include bem.modifier('labels-start', 'labels-end') {
-            display:               grid;
-            grid-template-rows:    auto;
-            grid-template-columns: auto 1fr;
-            align-items:           baseline;
+                @include bem.modifier('labels-start', 'labels-end') {
+                        display:               grid;
+                        grid-template-rows:    auto;
+                        grid-template-columns: auto 1fr;
+                        align-items:           baseline;
 
-            @include bem.elem('item') {
-                display: contents;
-            }
+                        @include bem.elem('item') {
+                                display: contents;
+                        }
         
-            @include bem.elem('item-label') {
-                grid-column:        1;
-                padding-inline-end: 0;
-            }
+                        @include bem.elem('item-label') {
+                                grid-column:        1;
+                                padding-inline-end: 0;
+                        }
         
-            @include bem.elem('item-content') {
-                grid-column:        2;
-                margin-block-start: 0;
-            }
-        }
+                        @include bem.elem('item-content') {
+                                grid-column:        2;
+                                margin-block-start: 0;
+                        }
+                }
 
-        @include bem.modifier('labels-end') {
-            @include bem.elem('item-label') {
-                text-align: end;
-            }
-        }
-    }
+                @include bem.modifier('labels-end') {
+                        @include bem.elem('item-label') {
+                                text-align: end;
+                        }
+                }
+        }
 }
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 2192db5..929e60f 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -7,35 +7,35 @@
 @use 'media.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.layout('media') {
-        display:     flex;
-        gap:         props.get(vars.$gap);
-        align-items: center;
-        line-height: 1.4;
+        @include bem.layout('media') {
+                display:     flex;
+                gap:         props.get(vars.$gap);
+                align-items: center;
+                line-height: 1.4;
 
-        @each $mod, $size in vars.$sizes {
-            @include bem.modifier($mod) {
-                gap: props.get($size);
-            }
-        }
+                @each $mod, $size in vars.$sizes {
+                        @include bem.modifier($mod) {
+                                gap: props.get($size);
+                        }
+                }
 
-        @include bem.modifier('wrap') {
-            flex-wrap: wrap;
-        }
+                @include bem.modifier('wrap') {
+                        flex-wrap: wrap;
+                }
 
-        @include bem.elem('block') {
-            flex: 0 0 auto;
+                @include bem.elem('block') {
+                        flex: 0 0 auto;
 
-            @include bem.modifier('shrink', 'main') {
-                flex-shrink:     1;
-                min-inline-size: 0;
-            }
+                        @include bem.modifier('shrink', 'main') {
+                                flex-shrink:     1;
+                                min-inline-size: 0;
+                        }
 
-            @include bem.modifier('main') {
-                inline-size: 100%;
-            }
-        }
-    }
+                        @include bem.modifier('main') {
+                                inline-size: 100%;
+                        }
+                }
+        }
 }
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index fd6d986..dcb10de 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -9,8 +9,8 @@ $lg:      props.def(--l-media--lg, props.get(core.$size--300)) !default;
 $xl:      props.def(--l-media--xl, props.get(core.$size--450)) !default;
 
 $sizes: (
-    'gapless': $gapless,
-    'sm':      $sm,
-    'lg':      $lg,
-    'xl':      $xl,
+        'gapless': $gapless,
+        'sm':      $sm,
+        'lg':      $lg,
+        'xl':      $xl,
 ) !default;
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index 9fba7eb..6d31d37 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -3,9 +3,9 @@
 @use '../core.vars' as core;
 
 @mixin styles {
-    @include bem.layout('overflow') {
-        overflow:        auto;
-        scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
-    }
+        @include bem.layout('overflow') {
+                overflow:        auto;
+                scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
+        }
 }
 
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index 2744510..6469a7d 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -8,69 +8,84 @@
 @use 'split-view.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.layout('split-view') {
-        display:     flex;
-        gap:         props.get(vars.$col-gap);
-        align-items: start;
+        @include bem.layout('split-view') {
+                display:     flex;
+                gap:         props.get(vars.$col-gap);
+                align-items: start;
 
-        @include bem.modifier('gapless') {
-            gap: props.get(vars.$gapless);
-        }
+                @include bem.elem('panel') {
+                        flex:            1 1 auto;
+                        inline-size:     100%;
+                        min-inline-size: 0;
 
-        @include bem.elem('panel') {
-            flex:            1 1 auto;
-            inline-size:     100%;
-            min-inline-size: 0;
+                        @include bem.modifier('side-25') {
+                                flex:            0 0 auto;
+                                inline-size:     25%;
+                                min-inline-size: props.get(vars.$panel--side-25--min);
+                        }
 
-            @include bem.modifier('side-25') {
-                flex:            0 0 auto;
-                inline-size:     25%;
-                min-inline-size: props.get(vars.$panel--side-25--min);
-            }
+                        @include bem.modifier('sticky-0') {
+                                position:          sticky;
+                                inset-block-start: 0;
+                        }
 
-            @include bem.modifier('sticky-0') {
-                position:          sticky;
-                inset-block-start: 0;
-            }
+                        @include bem.modifier('sticky') {
+                                position:          sticky;
+                                inset-block-start: props.get(vars.$panel--sticky-offset);
+                        }
 
-            @include bem.modifier('sticky') {
-                position:          sticky;
-                inset-block-start: props.get(vars.$panel--sticky-offset);
-            }
+                        @include bem.modifier('sticky-400') {
+                                position:          sticky;
+                                inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
+                        }
 
-            @include bem.modifier('sticky-400') {
-                position:          sticky;
-                inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
-            }
-        }
+                        @include bem.modifier('sticky-1200') {
+                                position:          sticky;
+                                inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset));
+                        }
+                }
 
-        @include bem.elem('content') {
-            inline-size: 100%;
-        }
+                @include bem.modifier('gapless') {
+                        gap: props.get(vars.$gapless);
 
-        @include media.media('<=md') {
-            flex-direction: column;
-            gap:            props.get(vars.$row-gap);
-            align-items:    stretch;
+                        @include bem.elem('panel') {
+                                @include bem.modifier('side-25') {
+                                        min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+                                }
+                        }
+                }
 
-            @include bem.modifier('wrap-reverse') {
-                flex-direction: column-reverse;
-            }
+                @include bem.elem('content') {
+                        inline-size: 100%;
+                }
 
-            @include bem.elem('panel') {
-                flex: 1 1 auto;
+                @include media.media('<=md') {
+                        flex-direction: column;
+                        gap:            props.get(vars.$row-gap);
+                        align-items:    stretch;
 
-                @include bem.modifier('side-25') {
-                    inline-size:     auto;
-                    min-inline-size: 0;
-                }
+                        @include bem.modifier('gapless') {
+                                gap: props.get(vars.$gapless);
+                        }
 
-                @include bem.modifier('sticky', 'sticky-400') {
-                    position: static;
-                }
-            }
-        }
-    }
+                        @include bem.modifier('wrap-reverse') {
+                                flex-direction: column-reverse;
+                        }
+
+                        @include bem.elem('panel') {
+                                inline-size: auto;
+                
+                                @include bem.modifier('side-25') {
+                                        inline-size:     auto;
+                                        min-inline-size: 0;
+                                }
+
+                                @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') {
+                                        position: static;
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index 01562e1..d519939 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -4,9 +4,10 @@
 $col-gap:  props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
 $row-gap:  props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
 
-$gapless: props.def(--l-split-view--gapless, 0) !default;
+$gapless: props.def(--l-split-view--gapless, 0rem) !default;
 
 $panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default;
 $panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default;
+$panel--sticky-1200--inset: props.def(--l-split-view--panel--sticky-1200--inset, props.get(core.$size--1200)) !default;
 
 $panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
deleted file mode 100644
index 1dd4b84..0000000
--- a/src/objects/_action-button.scss
+++ /dev/null
@@ -1,213 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
-@use '../props' as *;
-
-@forward 'action-button.vars';
-@use 'action-button.vars' as vars;
-
-@mixin -apply-theme($theme, $key: ()) {
-    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)...);
-
-    &::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))
-            props.get($theme, list.join($key, --key-focus --outline-color)...);
-    }
-
-    &:link,
-    &:visited,
-    &:enabled {
-        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)...);
-
-        &:hover,
-        &:focus-visible {
-            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)...);
-        }
-
-        &:active {
-            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)...);
-        }
-    }
-
-    @include bem.modifier('quiet') {
-        color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
-        background-color: transparent;
-        border-color:     transparent;
-
-        &:link,
-        &:visited,
-        &:enabled {
-            color:            props.get($theme, list.join($key, --quiet --label-color)...);
-            background-color: transparent;
-            border-color:     transparent;
-
-            &:hover,
-            &:focus-visible {
-                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;
-            }
-
-            &: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;
-            }
-        }
-    }
-
-    @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)...);
-
-        &:link,
-        &:visited,
-        &:enabled {
-            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)...);
-    
-            &: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)...);
-            }
-    
-            &: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)...);
-            }
-        }
-    }
-}
-
-@mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
-
-    @include bem.object('action-button') {
-        position:         relative;
-        display:          inline-block;
-        padding-block:    props.get(vars.$pad-b);
-        padding-inline:   props.get(vars.$pad-i);
-        line-height:      props.get(vars.$line-height);
-        text-align:       center;
-        text-decoration:  none;
-        text-overflow:    ellipsis;
-        white-space:      nowrap;
-        border:           props.get(vars.$border-width) solid transparent;
-        border-radius:    props.get(vars.$rounding);
-
-        &::after {
-            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;
-            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);
-        }
-
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
-            }
-        }
-
-        @include bem.elem('label') {
-            margin-inline: props.get(vars.$pad-i-label);
-        }
-
-        @include -apply-theme(vars.$default-theme);
-
-        @each $theme in map.keys(props.get(vars.$themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                @include -apply-theme(vars.$themes, $theme);
-            }
-        }
-
-        @include bem.modifier('pill') {
-            padding-inline: props.get(vars.$pad-i-pill);
-            border-radius:  100em;
-
-            &::after {
-                border-radius:  100em;
-            }
-        }
-
-        @include bem.modifier('icon') {
-            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
-            padding-inline: 0;
-        }
-
-        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
-            @include bem.modifier($mod) {
-                padding-block:  props.get($pad-b);
-                padding-inline: props.get($pad-i);
-                font-size:      props.get($font-size);
-
-                @include bem.elem('label') {
-                    margin-inline: props.get($pad-i-label);
-                }
-
-                @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));
-                    padding-inline: 0;
-                }
-            }
-        }
-
-        @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('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('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/_action-button.vars.scss b/src/objects/_action-button.vars.scss
deleted file mode 100644
index 8c3d510..0000000
--- a/src/objects/_action-button.vars.scss
+++ /dev/null
@@ -1,193 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'iro-sass/src/props';
-@use '../core.vars' as core;
-
-$line-height:  props.def(--o-action-button--line-height, 1.4) !default;
-$pad-i:        props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default;
-$pad-i-label:  props.def(--o-action-button--pad-i-label, props.get(core.$size--50)) !default;
-$pad-i-pill:   props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default;
-$pad-b:        props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
-$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
-$rounding:     props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
-$font-size:    props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
-
-$pad-i--sm:       props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default;
-$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default;
-$pad-i-pill--sm:  props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default;
-$pad-b--sm:       props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
-$font-size--sm:   props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
-
-$pad-i--lg:       props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default;
-$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--100)) !default;
-$pad-i-pill--lg:  props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--250)) !default;
-$pad-b--lg:       props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
-$font-size--lg:   props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
-
-$pad-i--xl:       props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default;
-$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--150)) !default;
-$pad-i-pill--xl:  props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default;
-$pad-b--xl:       props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
-$font-size--xl:   props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
-
-$key-focus--border-width:  props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
-
-$fixed-sizes: (
-    'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
-    'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
-    'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
-) !default;
-
-$themes: props.def(--o-action-button, (), 'color');
-
-$default-theme-override: () !default;
-$default-theme: map.deep-merge((
-    --bg-color:     props.get(core.$theme, --base, --75),
-    --label-color:  props.get(core.$theme, --text),
-    --border-color: props.get(core.$theme, --border-strong),
-
-    --hover: (
-        --bg-color:     props.get(core.$theme, --border-mute),
-        --label-color:  props.get(core.$theme, --heading),
-        --border-color: props.get(core.$theme, --text-mute-more),
-    ),
-
-    --active: (
-        --bg-color:     props.get(core.$theme, --border),
-        --label-color:  props.get(core.$theme, --heading),
-        --border-color: props.get(core.$theme, --text-mute),
-    ),
-
-    --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),
-    ),
-
-    --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),
-        ),
-
-        --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),
-        ),
-    ),
-
-    --quiet: (
-        --label-color:  props.get(core.$theme, --text),
-
-        --hover: (
-            --bg-color:    props.get(core.$theme, --border-mute),
-            --label-color: props.get(core.$theme, --heading),
-        ),
-
-        --active: (
-            --bg-color:    props.get(core.$theme, --border),
-            --label-color: props.get(core.$theme, --heading),
-        ),
-
-        --disabled: (
-            --label-color: props.get(core.$theme, --border-strong),
-        ),
-    ),
-), $default-theme-override) !default;
-$default-theme: props.def(--o-action-button, $default-theme, 'color');
-
-@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, --100),
-            --label-color:  props.get(core.$transparent-colors, $theme, --900),
-            --border-color: props.get(core.$transparent-colors, $theme, --400),
-
-            --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, --500),
-            ),
-
-            --active: (
-                --bg-color:     props.get(core.$transparent-colors, $theme, --400),
-                --label-color:  props.get(core.$transparent-colors, $theme, --900),
-                --border-color: props.get(core.$transparent-colors, $theme, --600),
-            ),
-
-            --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),
-            ),
-
-            --selected: (
-                --bg-color:     props.get(core.$transparent-colors, $theme, --800),
-                --label-color:  props.get(core.$transparent-colors, $theme, --text),
-                --border-color: props.get(core.$transparent-colors, $theme, --100),
-
-                --hover: (
-                    --bg-color:     props.get(core.$transparent-colors, $theme, --900),
-                    --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, --900),
-                    --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),
-                ),
-            ),
-
-            --quiet: (
-                --label-color:  props.get(core.$transparent-colors, $theme, --900),
-        
-                --hover: (
-                    --bg-color:    props.get(core.$transparent-colors, $theme, --300),
-                    --label-color: props.get(core.$transparent-colors, $theme, --900),
-                ),
-        
-                --active: (
-                    --bg-color:    props.get(core.$transparent-colors, $theme, --400),
-                    --label-color: props.get(core.$transparent-colors, $theme, --900),
-                ),
-        
-                --disabled: (
-                    --label-color: props.get(core.$transparent-colors, $theme, --500),
-                ),
-            ),
-        )
-    ));
-}
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 825f7ce..697ac18 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -8,19 +8,33 @@
 @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);
-        background-color: props.get(vars.$bg-color);
-        border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
-        border-radius:    props.get(vars.$rounding);
+        @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);
 
-        @each $mod, $theme in vars.$themes-config {
-            @include bem.modifier($mod) {
-                border-color: props.get(vars.$themes, $theme, --border-color);
-            }
-        }
-    }
+                @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)
+                                        props.get(vars.$themes, $theme, --shadow-color);
+                        }
+                }
+        }
 }
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
index 53c9e68..62d3414 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -6,22 +6,31 @@ $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-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), '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;
 
 $themes-config: (
-    accent:   --accent,
-    positive: --positive,
-    negative: --negative,
-    warning:  --warning,
+        accent:   --accent,
+        positive: --positive,
+        negative: --negative,
+        warning:  --warning,
 ) !default;
 
 $themes: props.def(--o-alert, (), 'color');
 
 @each $theme, $key in $themes-config {
-    $themes: props.merge($themes, (
-        $key: (
-            --border-color: props.get(core.$theme, $key, --700),
-        )
-    ));
+        $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 fc4ffcd..9d51ffb 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -7,111 +7,120 @@
 @use 'avatar.vars' as vars;
 
 @mixin status($indicator-size) {
-    @include bem.elem('status') {
-        inline-size: props.get($indicator-size);
-        block-size:  props.get($indicator-size);
+        @include bem.elem('status') {
+                inline-size: props.get($indicator-size);
+                block-size:  props.get($indicator-size);
 
-        @include bem.next-elem('content') {
-            mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
-            calc(100% - .5 * props.get($indicator-size))
-            calc(100% - .5 * props.get($indicator-size)),
-            transparent 95%,
-            #fff);
-        }
-    }
+                @include bem.sibling-elem('content') {
+                        mask-image: radial-gradient(circle calc(.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-size:      props.get(vars.$font-size);
-        font-style:     normal;
-        vertical-align: .05em;
-        border-radius:  props.get(vars.$rounding);
+        @include bem.object('avatar') {
+                position:       relative;
+                display:        inline-block;
+                font-size:      props.get(vars.$font-size);
+                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;
-            pointer-events: none;
-            content:        '';
-            border:         props.get(vars.$key-focus--border-offset) solid transparent;
-            border-radius:  props.get(vars.$rounding);
-            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);
-        }
+                &::after {
+                        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))
+                                props.get(vars.$key-focus--outline-color);
+                }
 
-        @include bem.elem('status') {
-            position:         absolute;
-            inset-block-end:  0;
-            inset-inline-end: 0;
-        }
+                @include bem.elem('status') {
+                        position:         absolute;
+                        inset-block-end:  0;
+                        inset-inline-end: 0;
+                }
 
-        @include status(vars.$indicator-size);
+                @include status(vars.$indicator-size);
 
-        @include bem.elem('content') {
-            display:          block;
-            inline-size:      props.get(vars.$size);
-            block-size:       props.get(vars.$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);
+                        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') {
-            border-radius: 100%;
+                @include bem.modifier('circle') {
+                        border-radius: 100%;
 
-            &::after {
-                border-radius: 100%;
-            }
+                        &::after {
+                                border-radius: 100%;
+                        }
 
-            @include bem.elem('content') {
-                border-radius: 100%;
-            }
-        }
+                        @include bem.elem('content') {
+                                border-radius: 100%;
+                        }
+                }
 
-        @include bem.modifier('placeholder') {
-            @include bem.elem('content') {
-                background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
-            }
-        }
+                @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));
+                        }
+                }
 
-        @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
-            @include bem.modifier($mod) {
-                font-size: props.get($font-size);
+                @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)));
+                        }
+                }
+
+                @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
+                        @include bem.modifier($mod) {
+                                font-size: props.get($font-size);
     
-                @include status($indicator-size);
+                                @include status($indicator-size);
     
-                @include bem.elem('content') {
-                    inline-size: props.get($size);
-                    block-size:  props.get($size);
-                    line-height: props.get($size);
-                }
-            }
-        }
+                                @include bem.elem('content') {
+                                        inline-size: props.get($size);
+                                        block-size:  props.get($size);
+                                        line-height: props.get($size);
+                                }
+                        }
+                }
     
-        &:focus-visible {
-            &::after {
-                display: block;
-            }
-        }
-    }
+                &:focus-visible {
+                        &::after {
+                                display: block;
+                        }
+                }
+        }
 }
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index 72fb397..2374f5a 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -39,14 +39,20 @@ $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-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;
 
 $sizes: (
-    'xs'   $size--xs   $font-size--xs   $indicator-size--xs,
-    'sm'   $size--sm   $font-size--sm   $indicator-size--sm,
-    'lg'   $size--lg   $font-size--lg   $indicator-size--lg,
-    'xl'   $size--xl   $font-size--xl   $indicator-size--xl,
-    'xxl'  $size--xxl  $font-size--xxl  $indicator-size--xxl,
-    'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl,
+        'xs'   $size--xs   $font-size--xs   $indicator-size--xs,
+        'sm'   $size--sm   $font-size--sm   $indicator-size--sm,
+        'lg'   $size--lg   $font-size--lg   $indicator-size--lg,
+        'xl'   $size--xl   $font-size--xl   $indicator-size--xl,
+        'xxl'  $size--xxl  $font-size--xxl  $indicator-size--xxl,
+        'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl,
 ) !default;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 9cc9e2e..346cf5f 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -7,17 +7,17 @@
 @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;
-        background-color: props.get(vars.$bg-color);
-        backdrop-filter:  blur(props.get(vars.$blur));
-    }
+        @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));
+        }
 }
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
deleted file mode 100644
index 9f3e307..0000000
--- a/src/objects/_badge.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
-@use '../props' as *;
-@use '../core.vars' as core;
-
-@forward 'badge.vars';
-@use 'badge.vars' as vars;
-
-@mixin -apply-theme($theme, $key: (), $static: false) {
-    color:            props.get($theme, list.join($key, --label)...);
-    background-color: props.get($theme, list.join($key, --bg)...);
-
-    &:link,
-    &:visited,
-    &:enabled {
-        &:hover,
-        &:focus-visible {
-            color:            props.get($theme, list.join($key, --hover --label)...);
-            background-color: props.get($theme, list.join($key, --hover --bg)...);
-        }
-
-        &:active {
-            color:            props.get($theme, list.join($key, --active --label)...);
-            background-color: props.get($theme, list.join($key, --active --bg)...);
-        }
-    }
-
-    @include bem.modifier('quiet') {
-        color:            props.get($theme, list.join($key, --quiet --label)...);
-        background-color: props.get($theme, list.join($key, --quiet --bg)...);
-
-        &:link,
-        &:visited,
-        &:enabled {
-            &:hover,
-            &:focus-visible {
-                color:            props.get($theme, list.join($key, --quiet --hover --label)...);
-                background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
-            }
-
-            &:active {
-                color:            props.get($theme, list.join($key, --quiet --active --label)...);
-                background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
-            }
-        }
-    }
-
-    @if $static {
-        &::after {
-            outline-color: props.get($theme, list.join($key, --key-focus --border)...);
-            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)...);
-        }
-    }
-}
-
-@mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
-
-    @include bem.object('badge') {
-        position:         relative;
-        display:          inline-block;
-        padding-block:    props.get(vars.$pad-b);
-        padding-inline:   props.get(vars.$pad-i);
-        font-size:        props.get(vars.$font-size);
-        line-height:      props.get(core.$font--standard--line-height);
-        text-align:       center;
-        text-decoration:  none;
-        background-clip:  padding-box;
-        border-radius:    props.get(vars.$rounding);
-
-        &::after {
-            position:       absolute;
-            inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
-            z-index:        1;
-            display:        none;
-            pointer-events: none;
-            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);
-        }
-
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
-            }
-        }
-
-        @include bem.elem('label') {
-            margin-inline: props.get(vars.$pad-i-label);
-        }
-
-        @include -apply-theme(vars.$default-theme, $static: true);
-
-        @each $theme in map.keys(props.get(vars.$themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                @include -apply-theme(vars.$themes, $theme);
-            }
-        }
-
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                @include -apply-theme(vars.$static-themes, $theme, true);
-            }
-        }
-    
-        @include bem.modifier('pill') {
-            padding-inline: props.get(vars.$pad-i-pill);
-            border-radius:  10em;
-
-            &::after {
-                border-radius: 10em;
-            }
-        }
-
-        @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
-            @include bem.modifier($mod) {
-                padding-block:  props.get($pad-b);
-                padding-inline: props.get($pad-i);
-                font-size:      props.get($font-size);
-
-                @include bem.elem('label') {
-                    margin-inline: props.get($pad-i-label);
-                }
-        
-                @include bem.modifier('pill') {
-                    padding-inline: props.get($pad-i-pill);
-                }
-            }
-        }
-    }
-}
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
deleted file mode 100644
index ff07148..0000000
--- a/src/objects/_badge.vars.scss
+++ /dev/null
@@ -1,161 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'iro-sass/src/props';
-@use '../core.vars' as core;
-
-$pad-b:       props.def(--o-badge--pad-b, props.get(core.$size--50)) !default;
-$pad-i:       props.def(--o-badge--pad-i, props.get(core.$size--100)) !default;
-$pad-i-pill:  props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default;
-$pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default;
-$rounding:    props.def(--o-badge--rounding, props.get(core.$rounding)) !default;
-$font-size:   props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default;
-
-$pad-b--sm:       props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default;
-$pad-i--sm:       props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default;
-$pad-i-pill--sm:  props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default;
-$pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default;
-$font-size--sm:   props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default;
-
-$pad-b--lg:       props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default;
-$pad-i--lg:       props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default;
-$pad-i-pill--lg:  props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default;
-$pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default;
-$font-size--lg:   props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default;
-
-$pad-b--xl:       props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default;
-$pad-i--xl:       props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default;
-$pad-i-pill--xl:  props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default;
-$pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default;
-$font-size--xl:   props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default;
-
-$key-focus--border-width:  props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
-
-$sizes: (
-    'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm,
-    'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg,
-    'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
-) !default;
-
-$default-theme-override: () !default;
-$default-theme: props.def(--o-badge, (
-    --bg:    props.get(core.$theme, --heading),
-    --label: props.get(core.$theme, --bg-l2),
-    
-    --hover: (
-        --bg:    props.get(core.$theme, --text),
-        --label: props.get(core.$theme, --bg-l2),
-    ),
-
-    --active: (
-        --bg:    props.get(core.$theme, --text-mute),
-        --label: props.get(core.$theme, --bg-l2),
-    ),
-
-    --key-focus: (
-        --label:   props.get(core.$theme, --focus, --text),
-        --border:  props.get(core.$theme, --focus, --border),
-        --outline: props.get(core.$theme, --focus, --outline),
-    ),
-
-    --quiet: (
-        --bg:    props.get(core.$theme, --border-mute),
-        --label: props.get(core.$theme, --heading),
-
-        --hover: (
-            --bg:    props.get(core.$theme, --border),
-            --label: props.get(core.$theme, --heading),
-        ),
-
-        --active: (
-            --bg:     props.get(core.$theme, --border-strong),
-            --label: props.get(core.$theme, --heading),
-        ),
-    )
-), 'color') !default;
-$default-theme: props.merge($default-theme, $default-theme-override);
-
-$static-themes: props.def(--o-badge, (), 'color');
-
-@each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $badge-theme: --static-#{string.slice($theme, 3)};
-
-    $static-themes: props.merge($static-themes, (
-        $badge-theme: (
-            --bg:    props.get(core.$transparent-colors, $theme, --800),
-            --label: props.get(core.$transparent-colors, $theme, --text),
-
-            --hover: (
-                --bg:    props.get(core.$transparent-colors, $theme, --900),
-                --label: props.get(core.$transparent-colors, $theme, --text),
-            ),
-
-            --active: (
-                --bg:    props.get(core.$transparent-colors, $theme, --900),
-                --label: props.get(core.$transparent-colors, $theme, --text),
-            ),
-
-            --key-focus: (
-                --bg:      props.get(core.$transparent-colors, $theme, --100),
-                --label:   props.get(core.$transparent-colors, $theme, --900),
-                --border:  props.get(core.$transparent-colors, $theme, --900),
-                --outline: props.get(core.$transparent-colors, $theme, --300),
-            ),
-
-            --quiet: (
-                --bg:    props.get(core.$transparent-colors, $theme, --200),
-                --label: props.get(core.$transparent-colors, $theme, --900),
-                --hover: (
-                    --bg:    props.get(core.$transparent-colors, $theme, --300),
-                    --label: props.get(core.$transparent-colors, $theme, --900),
-                ),
-                --active: (
-                    --bg:    props.get(core.$transparent-colors, $theme, --400),
-                    --label: props.get(core.$transparent-colors, $theme, --900),
-                ),
-            )
-        )
-    ));
-}
-
-$themes-config: (
-    accent:   --accent,
-    positive: --positive,
-    negative: --negative,
-    warning:  --warning,
-) !default;
-
-$themes: props.def(--o-badge, (), 'color');
-
-@each $theme, $key in $themes-config {
-    $themes: props.merge($themes, (
-        --#{$theme}: (
-            --bg:    props.get(core.$theme, #{$key}-static, --900),
-            --label: props.get(core.$theme, #{$key}-static, --900-text),
-            
-            --hover: (
-                --bg:    props.get(core.$theme, #{$key}-static, --1000),
-                --label: props.get(core.$theme, #{$key}-static, --1000-text),
-            ),
-
-            --active: (
-                --bg:    props.get(core.$theme, #{$key}-static, --1100),
-                --label: props.get(core.$theme, #{$key}-static, --1000-text),
-            ),
-
-            --quiet: (
-                --bg:    props.get(core.$theme, $key, --200),
-                --label: props.get(core.$theme, $key, --1100),
-                --hover: (
-                    --bg:    props.get(core.$theme, $key, --300),
-                    --label: props.get(core.$theme, $key, --1200),
-                ),
-                --active: (
-                    --bg:    props.get(core.$theme, $key, --400),
-                    --label: props.get(core.$theme, $key, --1300),
-                ),
-            )
-        )
-    ));
-}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index aaf55b5..8163cf9 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -5,154 +5,281 @@
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use '../props' as *;
-@use '../core.vars' as core;
 
 @forward 'button.vars';
 @use 'button.vars' as vars;
 
 @mixin -apply-theme($theme, $key: ()) {
-    &:link,
-    &:visited,
-    &:enabled {
-        color:            props.get($theme, list.join($key, --label)...);
-        background-color: props.get($theme, list.join($key, --bg)...);
-        border-color:     transparent;
-    }
-    
-    @include bem.modifier('outline') {
-        &:link,
-        &:visited,
-        &:enabled {
-            color:            props.get($theme, list.join($key, --outline-label)...);
-            background-color: transparent;
-            border-color:     props.get($theme, list.join($key, --outline-border)...);
-        }
-    }
+        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)...);
 
-    &:link,
-    &:visited,
-    &:enabled {
-        &:hover,
-        &:focus-visible {
-            color:            props.get($theme, list.join($key, --hover --label)...);
-            background-color: props.get($theme, list.join($key, --hover --bg)...);
-            border-color:     transparent;
-        }
+        &::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))
+                        props.get($theme, list.join($key, --key-focus --outline-color)...);
+        }
 
-        &:active {
-            color:            props.get($theme, list.join($key, --active --label)...);
-            background-color: props.get($theme, list.join($key, --active --bg)...);
-            border-color:     transparent;
-        }
-    }
-}
+        &:link,
+        &:visited,
+        &:enabled {
+                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)...);
+            
+                &:hover,
+                &:focus-visible {
+                        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)...);
+                }
 
-@mixin -apply-static-theme($theme, $key: ()) {
-    color:            props.get($theme, list.join($key, --disabled --label)...);
-    background-color: props.get($theme, list.join($key, --disabled --bg)...);
-    border-color:     transparent;
+                &:active {
+                        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;
+                }
+        }
 
-    &::after {
-        outline-color: props.get($theme, list.join($key, --key-focus --border)...);
-        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.modifier('outline') {
-        background-color: transparent;
-        border-color:     props.get($theme, list.join($key, --disabled --outline-border)...);
-    }
+        @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;
+
+                &:link,
+                &:visited,
+                &:enabled {
+                        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;
+
+                        &:hover,
+                        &:focus-visible {
+                                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)...);
+                        }
+
+                        &: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)...);
+                        }
+                }
+        }
+
+        @include bem.modifier('quiet') {
+                color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
+                background-color: transparent;
+                border-color:     transparent;
+
+                &:link,
+                &:visited,
+                &:enabled {
+                        color:            props.get($theme, list.join($key, --quiet --label-color)...);
+                        background-color: transparent;
+                        border-color:     transparent;
+                        box-shadow:       none;
+
+                        &:hover,
+                        &:focus-visible {
+                                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;
+                        }
+
+                        &: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;
+                        }
+                }
+        }
+
+        @include bem.is('highlighted') {
+                &:link,
+                &:visited,
+                &:enabled {
+                        &,
+                        &:hover,
+                        &:focus-visible {
+                                border-color: props.get($theme, list.join($key, --highlighted --border-color)...);
+                        }
+
+                        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)...);
+
+                        &:focus-visible {
+                                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)...);
+                background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
 
-    @include -apply-theme($theme, $key);
+                @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)...);
+                }
 
-    @include bem.modifier('primary') {
-        @include -apply-theme($theme, list.join($key, --primary));
-    }
+                &:link,
+                &:visited,
+                &: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)...);
+                        }
+    
+                        &: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)...);
+                        }
+                }
+        }
 }
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.object('button') {
-        position:         relative;
-        display:          inline-block;
-        padding-block:    props.get(vars.$pad-b);
-        padding-inline:   props.get(vars.$pad-i);
-        font-size:        props.get(vars.$font-size);
-        font-weight:      500;
-        line-height:      props.get(vars.$line-height);
-        text-align:       center;
-        text-decoration:  none;
-        border:           props.get(vars.$border-width) solid transparent;
-        border-radius:    props.get(vars.$rounding);
+        @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;
-            pointer-events: none;
-            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);
-        }
+                &::after {
+                        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));
+                }
 
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
-            }
-        }
+                &:link,
+                &:visited,
+                &:enabled {
+                        &:focus-visible {
+                                transition: none;
 
-        @include bem.elem('label') {
-            margin-inline: props.get(vars.$pad-i-label);
-        }
-    
-        @include bem.modifier('block') {
-            display: block;
-        }
-    
-        @include bem.modifier('outline') {
-            background-color: transparent;
-        }
+                                &::after {
+                                        display: block;
+                                }
+                        }
+                }
+
+                @include bem.elem('label') {
+                        margin-inline: props.get(vars.$pad-i-label);
+                }
+
+                @include -apply-theme(vars.$default-theme);
+
+                @each $theme in map.keys(props.get(vars.$themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                @include -apply-theme(vars.$themes, $theme);
+                        }
+                }
+
+                @include bem.modifier('pill') {
+                        padding-inline: props.get(vars.$pad-i-pill);
+                        border-radius:  100em;
 
-        @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes {
-            @include bem.modifier($mod) {
-                padding-block:  props.get($pad-b);
-                padding-inline: props.get($pad-i);
-                font-size:      props.get($font-size);
+                        &::after {
+                                border-radius:  100em;
+                        }
+                }
 
-                @include bem.elem('label') {
-                    margin-inline: props.get($pad-i-label);
-                }
-            }
-        }
+                @include bem.modifier('icon') {
+                        inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
+                        padding-inline: 0;
+                }
 
-        @include -apply-static-theme(vars.$default-theme);
+                @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
+                        @include bem.modifier($mod) {
+                                padding-block:  props.get($pad-b);
+                                padding-inline: props.get($pad-i);
+                                font-size:      props.get($font-size);
 
-        @each $theme in map.keys(props.get(vars.$themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                @include -apply-theme(vars.$themes, $theme);
-            }
-        }
+                                @include bem.elem('label') {
+                                        margin-inline: props.get($pad-i-label);
+                                }
 
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                @include -apply-static-theme(vars.$static-themes, $theme);
-            }
-        }
+                                @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));
+                                        padding-inline: 0;
+                                }
+                        }
+                }
+
+                @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('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('round') {
-            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
-            padding-inline: 0;
-            border-radius:  100em;
-        }
-    }
+                                        @include bem.modifier('pill') {
+                                                margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
+                                        }
+
+                                        @include bem.modifier('icon') {
+                                                margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
+                                        }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 4f7b552..6e2298f 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -4,165 +4,371 @@
 @use '../core.vars' as core;
 
 $line-height:  props.def(--o-button--line-height, 1.4) !default;
-$pad-i:        props.def(--o-button--pad-i, props.get(core.$size--200)) !default;
-$pad-i-label:  props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
-$pad-b:        props.def(--o-button--pad-b, props.get(core.$size--65)) !default;
-$border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default;
-$rounding:     props.def(--o-button--rounding, 10em) !default;
-$font-size:    props.def(--o-button--font-size, props.get(core.$font-size--100)) !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;
 
-$pad-i--sm:       props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default;
+$pad-i--sm:       props.def(--o-button--sm--pad-i, props.get(core.$size--75)) !default;
 $pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
-$pad-b--sm:       props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default;
+$pad-i-pill--sm:  props.def(--o-button--sm--pad-i-pill, props.get(core.$size--115)) !default;
+$pad-b--sm:       props.def(--o-button--sm--pad-b, props.get(core.$size--40)) !default;
 $font-size--sm:   props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
 
-$pad-i--lg:       props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default;
-$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default;
-$pad-b--lg:       props.def(--o-button--lg--pad-b, props.get(core.$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--40)) !default;
+$pad-i-pill:   props.def(--o-button--pad-i-pill, props.get(core.$size--150)) !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-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--300)) !default;
-$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !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-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-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;
 
-$sizes: (
-    'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm,
-    'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg,
-    'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl,
+$fixed-sizes: (
+        'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
+        'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
+        'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
 ) !default;
 
+$themes: props.def(--o-button, (), 'color');
+
 $default-theme-override: () !default;
-$default-theme: props.def(--o-button, (
-    --bg:             props.get(core.$theme, --border-mute),
-    --label:          props.get(core.$theme, --text),
-    --outline-border: props.get(core.$theme, --border),
-    --outline-label:  props.get(core.$theme, --text),
+$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, --text),
+                --label-color:  props.get(core.$theme, --base, --50),
+                --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading),
+
+                --hover: (
+                        --bg-color:     props.get(core.$theme, --heading),
+                        --label-color:  props.get(core.$theme, --base, --50),
+                        --border-color: props.get(core.$theme, --heading),
+                ),
+
+                --active: (
+                        --bg-color:     props.get(core.$theme, --heading),
+                        --label-color:  props.get(core.$theme, --base, --50),
+                        --border-color: props.get(core.$theme, --heading),
+                ),
+
+                --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),
+                ),
 
-    --hover: (
-        --bg:     props.get(core.$theme, --border),
-        --label:  props.get(core.$theme, --heading),
-    ),
+                --active: (
+                        --bg-color:     props.get(core.$theme, --border-strong),
+                        --label-color:  props.get(core.$theme, --heading),
+                        --border-color: props.get(core.$theme, --border-strong),
+                ),
+        ),
 
-    --active: (
-        --bg:     props.get(core.$theme, --border-strong),
-        --label:  props.get(core.$theme, --heading),
-    ),
+        --quiet: (
+                --label-color:  props.get(core.$theme, --text),
 
-    --disabled: (
-        --bg:             props.get(core.$theme, --border-mute),
-        --outline-border: props.get(core.$theme, --border),
-        --label:          props.get(core.$theme, --text-disabled),
-    ),
+                --hover: (
+                        --bg-color:    props.get(core.$theme, --border-mute),
+                        --label-color: props.get(core.$theme, --heading),
+                ),
 
-    --key-focus: (
-        --label:   props.get(core.$theme, --focus, --text),
-        --border:  props.get(core.$theme, --focus, --border),
-        --outline: props.get(core.$theme, --focus, --outline),
-    ),
+                --active: (
+                        --bg-color:    props.get(core.$theme, --border),
+                        --label-color: props.get(core.$theme, --heading),
+                ),
 
-    --primary: (
-        --bg:             props.get(core.$theme, --base, --900),
-        --label:          props.get(core.$theme, --base, --900-text),
-        --outline-border: props.get(core.$theme, --base, --900),
-        --outline-label:  props.get(core.$theme, --text),
+                --disabled: (
+                        --label-color: props.get(core.$theme, --border-strong),
+                ),
+        ),
+), $default-theme-override) !default;
+$default-theme: props.def(--o-button, $default-theme, 'color');
 
-        --hover: (
-            --bg:     props.get(core.$theme, --base, --800),
-            --label:  props.get(core.$theme, --base, --800-text),
-        ),
+$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),
 
-        --active: (
-            --bg:     props.get(core.$theme, --base, --700),
-            --label:  props.get(core.$theme, --base, --700-text),
-        ),
-    ),
-), 'color') !default;
-$default-theme: props.merge($default-theme, $default-theme-override);
+        --hover: (
+                --bg-color:     props.get(core.$theme, --border),
+                --border-color: props.get(core.$theme, --border),
+        ),
 
-$static-themes: props.def(--o-button, (), 'color');
+        --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)};
+        $button-theme: --static-#{string.slice($theme, 3)};
+
+        $themes: props.merge($themes, (
+                $button-theme: (
+                        --bg-color:     props.get(core.$transparent-colors, $theme, --200),
+                        --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                        --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
+                        --shadow-color: props.get(core.$transparent-colors, --black, --200),
+
+                        --hover: (
+                                --bg-color:     props.get(core.$transparent-colors, $theme, --300),
+                                --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                                --border-color: props.get(core.$transparent-colors, $theme, --400),
+                        ),
+
+                        --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),
+                        ),
 
-    $static-themes: props.merge($static-themes, (
-        $button-theme: (
-            --bg:             props.get(core.$transparent-colors, $theme, --200),
-            --label:          props.get(core.$transparent-colors, $theme, --900),
-            --outline-border: props.get(core.$transparent-colors, $theme, --300),
-            --outline-label:  props.get(core.$transparent-colors, $theme, --900),
+                        --key-focus: (
+                                --border-color:  props.get(core.$transparent-colors, $theme, --900),
+                                --outline-color: props.get(core.$transparent-colors, $theme, --300),
+                        ),
 
-            --hover: (
-                --bg:     props.get(core.$transparent-colors, $theme, --300),
-                --label:  props.get(core.$transparent-colors, $theme, --900),
-            ),
+                        --highlighted: (
+                                --border-color: props.get(core.$transparent-colors, $theme, --900),
+                                --shadow-color: props.get(core.$transparent-colors, --black, --200),
+                        ),
 
-            --active: (
-                --bg:     props.get(core.$transparent-colors, $theme, --400),
-                --label:  props.get(core.$transparent-colors, $theme, --900),
-            ),
+                        --selected: (
+                                --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) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
 
-            --disabled: (
-                --bg:             props.get(core.$transparent-colors, $theme, --200),
-                --outline-border: props.get(core.$transparent-colors, $theme, --300),
-                --label:          props.get(core.$transparent-colors, $theme, --500),
-            ),
+                                --hover: (
+                                        --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),
+                                ),
 
-            --key-focus: (
-                --bg:      props.get(core.$transparent-colors, $theme, --100),
-                --label:   props.get(core.$transparent-colors, $theme, --900),
-                --border:  props.get(core.$transparent-colors, $theme, --900),
-                --outline: props.get(core.$transparent-colors, $theme, --300),
-            ),
+                                --active: (
+                                        --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),
+                                ),
 
-            --primary: (
-                --bg:             props.get(core.$transparent-colors, $theme, --800),
-                --label:          props.get(core.$transparent-colors, $theme, --text),
-                --outline-border: props.get(core.$transparent-colors, $theme, --800),
-                --outline-label:  props.get(core.$transparent-colors, $theme, --900),
-    
-                --hover: (
-                    --bg:     props.get(core.$transparent-colors, $theme, --900),
-                    --label:  props.get(core.$transparent-colors, $theme, --text),
-                ),
+                                --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),
+                                ),
+                        ),
 
-                --active: (
-                    --bg:     props.get(core.$transparent-colors, $theme, --900),
-                    --label:  props.get(core.$transparent-colors, $theme, --text),
-                ),
-            )
-        )
-    ));
+                        --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),
+                                ),
+                        ),
+                )
+        ));
 }
 
 $themes-config: (
-    accent:   --accent,
-    negative: --negative,
+        accent:   --accent,
+        positive: --positive,
+        negative: --negative,
+        warning:  --warning,
 ) !default;
 
-$themes: props.def(--o-button, (), 'color');
-
 @each $theme, $key in $themes-config {
-    $themes: props.merge($themes, (
-        --#{$theme}: (
-            --bg:             props.get(core.$theme, #{$key}-static, --900),
-            --label:          props.get(core.$theme, #{$key}-static, --900-text),
-            --outline-border: props.get(core.$theme, $key, --900),
-            --outline-label:  props.get(core.$theme, $key, --1000),
+        $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),
+                                ),
+                        ),
 
-            --hover: (
-                --bg:     props.get(core.$theme, #{$key}-static, --1000),
-                --label:  props.get(core.$theme, #{$key}-static, --1000-text),
-            ),
+                        --badge: (
+                                --bg-color:     props.get(core.$theme, $key, --100),
+                                --label-color:  props.get(core.$theme, $key, --1100),
+                                --border-color: props.get(core.$theme, $key, --300),
+        
+                                --hover: (
+                                        --bg-color:     props.get(core.$theme, $key, --200),
+                                        --label-color:  props.get(core.$theme, $key, --1200),
+                                        --border-color: props.get(core.$theme, $key, --400),
+                                ),
+        
+                                --active: (
+                                        --bg-color:     props.get(core.$theme, $key, --300),
+                                        --label-color:  props.get(core.$theme, $key, --1300),
+                                        --border-color: props.get(core.$theme, $key, --500),
+                                ),
+                        ),
 
-            --active: (
-                --bg:     props.get(core.$theme, #{$key}-static, --1100),
-                --label:  props.get(core.$theme, #{$key}-static, --1100-text),
-            ),
-        )
-    ));
+                        --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 e6f266d..ebab339 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -8,194 +8,270 @@
 @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;
-        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
-        background-color: props.get(vars.$bg-color);
-        background-clip:  content-box;
-        border:           props.get(vars.$key-focus--border-offset) solid transparent;
-        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-        transition:       transform .2s;
+        @include bem.object('card') {
+                position:         relative;
+                display:          flex;
+                flex-direction:   column;
+                background-color: props.get(vars.$bg-color);
+                border:           props.get(vars.$border-width) solid transparent;
+                border-color:     props.get(vars.$border-color);
+                border-radius:    props.get(vars.$rounding);
+                transition:       transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
 
-        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-            &:hover,
-            &:active,
-            &:focus-visible {
-                transform: translateY(props.get(vars.$hover--offset-b));
+                @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                        &: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));
+                        }
 
-                @include bem.elem('body') {
-                    @include bem.modifier('hidden') {
-                        visibility: visible;
-                        opacity:    1;
-                        transition:
-                            opacity .2s ease,
-                            visibility .2s linear;
-                    }
-                }
-            }
+                        &: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))
+                                        props.get(vars.$key-focus--outline-color);
+                                transition:    transform .2s;
+                        }
+                }
 
-            &:focus-visible {
-                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('borderless') {
+                        border-color: props.get(vars.$bg-color);
+                }
 
-        @include bem.elem('avatar') {
-            margin-block-start:  props.get(vars.$pad-b);
-            margin-inline-start: props.get(vars.$pad-i);
-        }
+                @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.elem('image') {
-            display:     block;
-            flex:        0 0 auto;
-            inline-size: 100%;
-            object-fit:  cover;
-            transition:  transform .2s, opacity .2s;
+                        @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);
+                                }
+                        }
+                }
 
-            &:first-child {
-                border-start-start-radius: props.get(vars.$rounding);
-                border-start-end-radius:   props.get(vars.$rounding);
-            }
+                @include bem.elem('avatar') {
+                        margin-block-start:  props.get(vars.$pad-b);
+                        margin-inline-start: props.get(vars.$pad-i);
+                }
 
-            &:last-child {
-                border-end-start-radius: props.get(vars.$rounding);
-                border-end-end-radius:   props.get(vars.$rounding);
-            }
+                @include bem.elem('image') {
+                        position:      relative;
+                        display:       block;
+                        flex:          0 0 auto;
+                        inline-size:   calc(100% + 2 * props.get(vars.$border-width));
+                        margin:        calc(-1 * props.get(vars.$border-width));
+                        overflow:      hidden;
+                        object-fit:    cover;
+                        transition:    background-color .2s, transform .2s, opacity .2s;
 
-            @include bem.next-elem('avatar') {
-                margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
-            }
-        }
+                        &: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));
+                        }
 
-        @include bem.elem('body') {
-            flex:            1 0 auto;
-            padding-block:   props.get(vars.$pad-b);
-            padding-inline:  props.get(vars.$pad-i);
+                        &: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));
+                        }
 
-            &::before {
-                display:       block;
-                margin-block:  -100em 100em;
-                content:       '';
-            }
+                        @include bem.next-elem('avatar') {
+                                margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
+                        }
+                }
 
-            @include bem.modifier('hidden') {
-                position:                absolute;
-                inset-block-end:         0;
-                inset-inline:            0;
-                z-index:                 10;
-                visibility:              hidden;
-                background-color:        props.get(vars.$bg-color);
-                //border-end-start-radius: props.get(vars.$rounding);
-                //border-end-end-radius:   props.get(vars.$rounding);
-                opacity:                 0;
-                transition:
-                    opacity .2s ease,
-                    visibility 0s .2s linear;
+                @include bem.elem('image-img') {
+                        display:     block;
+                        inline-size: 100%;
+                        object-fit:  cover;
+                }
 
-                @include bem.next-elem('image') {
-                    border-start-start-radius: props.get(vars.$rounding);
-                    border-start-end-radius:   props.get(vars.$rounding);
-                }
-            }
-        }
+                @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);
+                }
 
-        @include bem.elem('content') {
-            margin-block-start: props.get(vars.$spacing);
-        }
+                @include bem.elem('body') {
+                        flex:            1 0 auto;
+                        padding-block:   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;
+                                margin-block:  -100em 100em;
+                                content:       '';
+                        }
+                }
 
-            &::before {
-                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.elem('content') {
+                        margin-block-start: props.get(vars.$spacing);
+                }
 
-        @include bem.modifier('quiet') {
-            position:         relative;
-            margin:           0;
-            background-color: transparent;
-            border:           0;
+                @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));
 
-            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-                &:hover,
-                &:active,
-                &:focus-visible {
-                    transform: none;
+                        &::before {
+                                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.elem('image') {
-                        background-color: props.get(vars.$quiet--hover--image-color);
-                        opacity:          .75;
-                        transform:        translateY(props.get(vars.$hover--offset-b));
-                    }
-                }
+                @include bem.modifier('quiet') {
+                        margin-inline:    0;
+                        background-color: transparent;
+                        border:           0;
+                        box-shadow:       none;
 
-                &:focus-visible {
-                    outline:    none;
-                    box-shadow: none;
+                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                                &:hover,
+                                &:active,
+                                &:focus-visible {
+                                        background-color: transparent;
+                                        transform:        none;
 
-                    @include bem.elem('image') {
-                        background-color: props.get(vars.$quiet--hover--image-color);
-                        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);
-                        opacity:          1;
-                    }
-                }
-            }
+                                        @include bem.elem('image') {
+                                                background-color: props.get(vars.$quiet--hover--image-color);
+                                                opacity:          .75;
+                                                transform:        translateY(props.get(vars.$hover--offset-b));
+                                        }
+                                }
 
-            @include bem.elem('image') {
-                position:         relative;
-                margin:           calc(-1 * props.get(vars.$key-focus--border-width));
-                background-color: props.get(vars.$quiet--image-color);
-                background-clip:  padding-box;
-                border:           props.get(vars.$key-focus--border-offset) solid transparent;
-                border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-            }
+                                &:focus-visible {
+                                        margin:     0;
+                                        outline:    none;
+                                        border:     0;
+                                        box-shadow: none;
 
-            @include bem.elem('body') {
-                padding:             0;
-                padding-block-start: props.get(vars.$spacing);
-            }
+                                        @include bem.elem('image') {
+                                                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);
+                                                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))
+                                                        props.get(vars.$key-focus--outline-color);
+                                                opacity:          1;
+                                        }
+                                }
+                        }
 
-            @include bem.elem('footer') {
-                padding-inline: 0;
-            }
-        }
+                        @include bem.elem('image') {
+                                position:         relative;
+                                background-color: props.get(vars.$quiet--image-color);
+                                background-clip:  padding-box;
+                                border-radius:    props.get(vars.$rounding);
+                        }
 
-        @include bem.modifier('horizontal') {
-            flex-direction: row;
-            align-items:    center;
+                        @include bem.elem('body') {
+                                padding:             0;
+                                padding-block-start: props.get(vars.$spacing);
+                        }
 
-            @include bem.elem('body') {
-                flex: 0 0 auto;
+                        @include bem.elem('footer') {
+                                padding-inline: 0;
+                        }
+                }
 
-                @include bem.modifier('main') {
-                    flex-shrink:     1;
-                    inline-size:     100%;
-                    min-inline-size: 0;
-                }
-            }
-        }
-    }
+                @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;
+                                transition:
+                                        border-color .2s ease,
+                                        opacity .2s ease,
+                                        visibility 0s .2s linear;
+                        }
+
+                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                                &:hover,
+                                &:active,
+                                &:focus-visible {
+                                        @include bem.elem('body') {
+                                                visibility:   visible;
+                                                border-color: props.get(vars.$hover--border-color);
+                                                opacity:      1;
+                                                transition:
+                                                        border-color .2s ease,
+                                                        opacity .2s ease,
+                                                        visibility .2s linear;
+                                        }
+                                }
+                        }
+                }
+
+                @include bem.modifier('horizontal') {
+                        flex-direction: row;
+                        align-items:    center;
+
+                        @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);
+                                }
+    
+                                &:last-child {
+                                        border-start-end-radius: props.get(vars.$rounding);
+                                        border-end-start-radius: 0;
+                                }
+                        }
+
+                        @include bem.elem('body') {
+                                flex: 0 0 auto;
+
+                                @include bem.modifier('main') {
+                                        flex-shrink:     1;
+                                        inline-size:     100%;
+                                        min-inline-size: 0;
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 8ee7158..ebfba10 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -2,21 +2,35 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
-$pad-i:         props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
-$pad-b:         props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
-$spacing:       props.def(--o-card--spacing, props.get(core.$size--200)) !default;
-$rounding:      props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+$divider-width:        props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
+$border-width:         props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default;
+$sub-border-width:     props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default;
+$pad-i:                props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
+$pad-b:                props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
+$spacing:              props.def(--o-card--spacing, props.get(core.$size--200)) !default;
+$rounding:             props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default;
+$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default;
 
 $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;
 
+$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;
 
+$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;
 
+$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;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 82dd596..5faafb9 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -9,223 +9,223 @@
 @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);
-        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.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(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
-            vertical-align:     top;
-            background-color:   props.get(vars.$box-border-color);
-            background-clip:    padding-box;
-            border:             props.get(vars.$key-focus--border-offset) solid transparent;
-            border-radius:      calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
+                @include bem.elem('box') {
+                        position:           relative;
+                        display:            inline-block;
+                        flex:               0 0 auto;
+                        inline-size:        props.get(vars.$size);
+                        block-size:         props.get(vars.$size);
+                        margin-block-start: calc(.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:  '';
-            }
+                        &::before,
+                        &::after {
+                                position: absolute;
+                                display:  block;
+                                content:  '';
+                        }
     
-            &::before {
-                inset-block-start:  props.get(vars.$border-width);
-                inset-inline-start: props.get(vars.$border-width);
-                z-index:            2;
-                inline-size:        calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
-                block-size:         calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
-                background-color:   props.get(vars.$box-bg-color);
-                transition:         transform .2s ease;
-            }
+                        &::before {
+                                inset-block-start:  props.get(vars.$border-width);
+                                inset-inline-start: props.get(vars.$border-width);
+                                z-index:            2;
+                                inline-size:        calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
+                                block-size:         calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
+                                background-color:   props.get(vars.$box-bg-color);
+                                transition:         transform .2s ease;
+                        }
     
-            &::after {
-                inset-block-start:   calc(.5 * props.get(vars.$size) - 1px);
-                inset-inline-start:  calc(1.5 * props.get(vars.$border-width));
-                z-index:             3;
-                box-sizing:          border-box;
-                inline-size:         calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
-                block-size:          0;
-                border-color:        props.get(vars.$box-bg-color);
-                border-style:        solid;
-                border-radius:       2px;
-                transition:          transform .2s ease;
-                transform:           scale(0);
-                border-block-width:  0 2px;
-                border-inline-width: 0 2px;
-            }
-        }
+                        &::after {
+                                inset-block-start:   calc(.5 * props.get(vars.$size) - 1px);
+                                inset-inline-start:  calc(1.5 * props.get(vars.$border-width));
+                                z-index:             3;
+                                box-sizing:          border-box;
+                                inline-size:         calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
+                                block-size:          0;
+                                border-color:        props.get(vars.$box-bg-color);
+                                border-style:        solid;
+                                border-radius:       2px;
+                                transform:           scale(0);
+                                transition:          transform .2s ease;
+                                border-block-width:  0 2px;
+                                border-inline-width: 0 2px;
+                        }
+                }
     
-        @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);
-            transition:         transform .2s ease;
-            transform:          scale(0);
-            transform-origin:   40% 90%;
-        }
+                @include bem.elem('check-icon') {
+                        position:           absolute;
+                        inset-block-start:  calc(1 * props.get(vars.$border-width));
+                        inset-inline-start: calc(1 * props.get(vars.$border-width));
+                        z-index:            2;
+                        display:            block;
+                        inline-size:        calc(100% - 2 * props.get(vars.$border-width));
+                        block-size:         calc(100% - 2 * props.get(vars.$border-width));
+                        margin:             0;
+                        color:              props.get(vars.$box-bg-color);
+                        stroke-width:       fn.px-to-rem(3px);
+                        transform:          scale(0);
+                        transform-origin:   40% 90%;
+                        transition:         transform .2s ease;
+                }
     
-        @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;
-            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);
+                @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);
     
-            &:hover,
-            &:focus-visible {
-                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$hover--label-color);
-                }
+                        &:hover,
+                        &:focus-visible {
+                                @include bem.sibling-elem('label') {
+                                        color: props.get(vars.$hover--label-color);
+                                }
     
-                @include bem.sibling-elem('box') {
-                    background-color: props.get(vars.$hover--box-border-color);
-                }
-            }
+                                @include bem.sibling-elem('box') {
+                                        background-color: props.get(vars.$hover--box-border-color);
+                                }
+                        }
     
-            &:checked {
-                @include bem.sibling-elem('box') {
-                    &::before {
-                        transform: scale(0);
-                    }
+                        &:checked {
+                                @include bem.sibling-elem('box') {
+                                        &::before {
+                                                transform: scale(0);
+                                        }
     
-                    @include bem.elem('check-icon') {
-                        transform: scale(1);
-                    }
-                }
-            }
+                                        @include bem.elem('check-icon') {
+                                                transform: scale(1);
+                                        }
+                                }
+                        }
     
-            &:indeterminate {
-                @include bem.sibling-elem('box') {
-                    &::before {
-                        transform: scale(0);
-                    }
+                        &:indeterminate {
+                                @include bem.sibling-elem('box') {
+                                        &::before {
+                                                transform: scale(0);
+                                        }
     
-                    &::after {
-                        transform: scale(1);
-                    }
+                                        &::after {
+                                                transform: scale(1);
+                                        }
     
-                    @include bem.elem('check-icon') {
-                        transform: scale(0);
-                    }
-                }
-            }
+                                        @include bem.elem('check-icon') {
+                                                transform: scale(0);
+                                        }
+                                }
+                        }
     
-            &:disabled {
-                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$disabled--label-color);
-                }
+                        &:disabled {
+                                @include bem.sibling-elem('label') {
+                                        color: props.get(vars.$disabled--label-color);
+                                }
     
-                @include bem.sibling-elem('box') {
-                    background-color: props.get(vars.$disabled--box-border-color);
+                                @include bem.sibling-elem('box') {
+                                        background-color: props.get(vars.$disabled--box-border-color);
     
-                    &::before {
-                        background-color: props.get(vars.$disabled--box-bg-color);
-                    }
-                }
-            }
+                                        &::before {
+                                                background-color: props.get(vars.$disabled--box-bg-color);
+                                        }
+                                }
+                        }
     
-            &:focus-visible {
-                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$key-focus--label-color);
-                }
+                        &:focus-visible {
+                                @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))
-                        props.get(vars.$key-focus--outline-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))
+                                                props.get(vars.$key-focus--outline-color);
+                                }
+                        }
+                }
     
-        @include bem.modifier('standalone') {
-            @include bem.elem('box') {
-                margin-block-start: 0;
-            }
-        }
+                @include bem.modifier('standalone') {
+                        @include bem.elem('box') {
+                                margin-block-start: 0;
+                        }
+                }
     
-        @include bem.modifier('accent') {
-            @include bem.elem('native') {
-                &:checked {
-                    @include bem.sibling-elem('box') {
-                        background-color: props.get(vars.$accent--box-border-color);
-                    }
+                @include bem.modifier('accent') {
+                        @include bem.elem('native') {
+                                &:checked {
+                                        @include bem.sibling-elem('box') {
+                                                background-color: props.get(vars.$accent--box-border-color);
+                                        }
         
-                    &:hover,
-                    &:focus-visible {
-                        @include bem.sibling-elem('box') {
-                            background-color: props.get(vars.$accent--hover--box-border-color);
-                        }
-                    }
-                }
+                                        &:hover,
+                                        &:focus-visible {
+                                                @include bem.sibling-elem('box') {
+                                                        background-color: props.get(vars.$accent--hover--box-border-color);
+                                                }
+                                        }
+                                }
     
-                &:indeterminate {
-                    @include bem.sibling-elem('box') {
-                        background-color: props.get(vars.$accent--box-border-color);
-                    }
+                                &:indeterminate {
+                                        @include bem.sibling-elem('box') {
+                                                background-color: props.get(vars.$accent--box-border-color);
+                                        }
         
-                    &:hover,
-                    &:focus-visible {
-                        @include bem.sibling-elem('box') {
-                            background-color: props.get(vars.$accent--hover--box-border-color);
-                        }
-                    }
-                }
+                                        &:hover,
+                                        &:focus-visible {
+                                                @include bem.sibling-elem('box') {
+                                                        background-color: props.get(vars.$accent--hover--box-border-color);
+                                                }
+                                        }
+                                }
     
-                &:disabled {
-                    @include bem.sibling-elem('box') {
-                        background-color: props.get(vars.$disabled--box-border-color);
+                                &:disabled {
+                                        @include bem.sibling-elem('box') {
+                                                background-color: props.get(vars.$disabled--box-border-color);
         
-                        &::before {
-                            background-color: props.get(vars.$disabled--box-bg-color);
-                        }
-                    }
+                                                &::before {
+                                                        background-color: props.get(vars.$disabled--box-bg-color);
+                                                }
+                                        }
 
-                    &:checked {
-                        @include bem.sibling-elem('box') {
-                            background-color: props.get(vars.$disabled--box-border-color);
-                        }
-                    }
+                                        &:checked {
+                                                @include bem.sibling-elem('box') {
+                                                        background-color: props.get(vars.$disabled--box-border-color);
+                                                }
+                                        }
         
-                    &:indeterminate {
-                        @include bem.sibling-elem('box') {
-                            background-color: props.get(vars.$disabled--box-border-color);
-                        }
-                    }
-                }
-            }
-        }
-    }
+                                        &:indeterminate {
+                                                @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 aee26e6..25a0d3d 100644
--- a/src/objects/_checkbox.vars.scss
+++ b/src/objects/_checkbox.vars.scss
@@ -7,7 +7,7 @@ $label-gap:       props.def(--o-checkbox--label-gap, props.get(core.$size--125))
 $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)) !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;
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 65f1718..27af173 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -10,138 +10,195 @@
 @use 'divider.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.object('divider') {
-        display:          flex;
-        flex:             0 0 auto;
-        flex-direction:   row;
-        align-items:      center;
-        block-size:       1em;
-        margin-block:     props.get(vars.$margin-b);
-        font-size:        props.get(vars.$strong--label-font-size);
-        font-weight:      700;
-        line-height:      1;
-        color:            props.get(vars.$strong--label-color);
-        text-transform:   uppercase;
-        letter-spacing:   .5px;
-        background-color: transparent;
+        @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:   .5px;
+                background-color: transparent;
 
-        &::before,
-        &::after {
-            flex:             1 1 auto;
-            inline-size:      100%;
-            block-size:       props.get(vars.$strong--border-width);
-            content:          '';
-            background-color: props.get(vars.$strong--bg-color);
-        }
+                &::before,
+                &::after {
+                        flex:             1 1 auto;
+                        inline-size:      100%;
+                        block-size:       props.get(vars.$strong--border-width);
+                        content:          '';
+                        background-color: props.get(vars.$strong--bg-color);
+                }
 
-        &::before {
-            display: block;
-        }
+                &::before {
+                        display: block;
+                }
 
-        @include bem.elem('label') {
-            flex: 0 0 auto;
-        }
+                @include bem.elem('label') {
+                        flex: 0 0 auto;
+                }
 
-        @include bem.modifier('vertical') {
-            align-self:       stretch;
-            inline-size:      1px;
-            block-size:       auto;
-            margin-block:     0;
-            background-color: props.get(vars.$faint--bg-color);
+                @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,
-            &::after {
-                display: none;
-            }
-        }
+                        &::before,
+                        &::after {
+                                display: none;
+                        }
+                }
 
-        @include bem.modifier('medium') {
-            font-size:   props.get(vars.$medium--label-font-size);
-            font-weight: 500;
-            color:       props.get(vars.$medium--label-color);
+                @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);
 
-            &::before,
-            &::after {
-                block-size:       props.get(vars.$medium--border-width);
-                background-color: props.get(vars.$medium--bg-color);
-            }
-        }
+                        &::before,
+                        &::after {
+                                display: none;
+                        }
+                }
 
-        @include bem.modifier('faint') {
-            font-size:   props.get(vars.$faint--label-font-size);
-            font-weight: 500;
-            color:       props.get(vars.$faint--label-color);
+                @include bem.modifier('medium') {
+                        font-size:   props.get(vars.$medium--label-font-size);
+                        font-weight: 500;
+                        color:       props.get(vars.$medium--label-color);
 
-            &::before,
-            &::after {
-                block-size:       props.get(vars.$faint--border-width);
-                background-color: props.get(vars.$faint--bg-color);
-            }
+                        &::before,
+                        &::after {
+                                block-size:       props.get(vars.$medium--border-width);
+                                background-color: props.get(vars.$medium--bg-color);
+                        }
 
-            @include bem.modifier('vertical') {
-                background-color: props.get(vars.$vertical--faint--bg-color);
-            }
-        }
+                        @include bem.modifier('vertical') {
+                                background-color: props.get(vars.$medium--bg-color);
+                        }
 
-        @include bem.modifier('labelled') {
-            &::before {
-                margin-inline-end: 1em;
-            }
+                        @include bem.modifier('dot') {
+                                background-color: props.get(vars.$medium--bg-color);
+                        }
+                }
 
-            &::after {
-                display:             block;
-                margin-inline-start: 1em;
-            }
-        }
+                @include bem.modifier('quiet') {
+                        font-size:   props.get(vars.$quiet--label-font-size);
+                        font-weight: 500;
+                        color:       props.get(vars.$quiet--label-color);
 
-        @each $theme in map.keys(props.get(vars.$themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                &::before,
-                &::after {
-                    background-color: props.get(vars.$themes, $theme, --bg);
-                }
+                        &::before,
+                        &::after {
+                                block-size:       props.get(vars.$quiet--border-width);
+                                background-color: props.get(vars.$quiet--bg-color);
+                        }
 
-                @include bem.elem('label') {
-                    color: props.get(vars.$themes, $theme, --label);
-                }
-            }
-        }
+                        @include bem.modifier('vertical') {
+                                background-color: props.get(vars.$vertical--quiet--bg-color);
+                        }
 
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                &::before,
-                &::after {
-                    background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
-                }
+                        @include bem.modifier('dot') {
+                                background-color: props.get(vars.$dot--quiet--bg-color);
+                        }
+                }
 
-                @include bem.elem('label') {
-                    color: props.get(vars.$static-themes, $theme, --strong, --label);
-                }
+                @include bem.modifier('faint') {
+                        font-size:   props.get(vars.$faint--label-font-size);
+                        font-weight: 500;
+                        color:       props.get(vars.$faint--label-color);
 
-                @include bem.modifier('medium') {
-                    &::before,
-                    &::after {
-                        background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
-                    }
+                        &::before,
+                        &::after {
+                                block-size:       props.get(vars.$faint--border-width);
+                                background-color: props.get(vars.$faint--bg-color);
+                        }
+
+                        @include bem.modifier('vertical') {
+                                background-color: props.get(vars.$vertical--quiet--bg-color);
+                        }
+
+                        @include bem.modifier('dot') {
+                                background-color: props.get(vars.$dot--quiet--bg-color);
+                        }
+                }
+
+                @include bem.modifier('labelled') {
+                        &::before {
+                                margin-inline-end: 1em;
+                        }
+
+                        &::after {
+                                display:             block;
+                                margin-inline-start: 1em;
+                        }
+                }
+
+                @each $theme in map.keys(props.get(vars.$themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                &::before,
+                                &::after {
+                                        background-color: props.get(vars.$themes, $theme, --bg);
+                                }
+
+                                @include bem.elem('label') {
+                                        color: props.get(vars.$themes, $theme, --label);
+                                }
+                        }
+                }
+
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                &::before,
+                                &::after {
+                                        background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
+                                }
+
+                                @include bem.elem('label') {
+                                        color: props.get(vars.$static-themes, $theme, --strong, --label);
+                                }
+
+                                @include bem.modifier('medium') {
+                                        &::before,
+                                        &::after {
+                                                background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
+                                        }
+    
+                                        @include bem.elem('label') {
+                                                color: props.get(vars.$static-themes, $theme, --medium, --label);
+                                        }
+                                }
+    
+                                @include bem.modifier('quiet') {
+                                        &::before,
+                                        &::after {
+                                                background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
+                                        }
     
-                    @include bem.elem('label') {
-                        color: props.get(vars.$static-themes, $theme, --medium, --label);
-                    }
-                }
+                                        @include bem.elem('label') {
+                                                color: props.get(vars.$static-themes, $theme, --quiet, --label);
+                                        }
+                                }
     
-                @include bem.modifier('faint') {
-                    &::before,
-                    &::after {
-                        background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
-                    }
+                                @include bem.modifier('faint') {
+                                        &::before,
+                                        &::after {
+                                                background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
+                                        }
     
-                    @include bem.elem('label') {
-                        color: props.get(vars.$static-themes, $theme, --faint, --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 1117fd5..688fbb3 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -3,7 +3,9 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !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;
 
 $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;
@@ -11,6 +13,9 @@ $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.
 $medium--border-width:    props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default;
 $medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default;
 
+$quiet--border-width:    props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default;
+$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default;
+
 $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;
 
@@ -20,46 +25,55 @@ $strong--label-color: props.def(--o-divider--strong--label-color, props.get(core
 $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), 'color') !default;
-$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$quiet--bg-color:    props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default;
+$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+
+$faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
+
+$vertical--quiet--bg-color:    props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
 
-$vertical--faint--bg-color:    props.def(--o-divider--faint--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');
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $button-theme: --static-#{string.slice($theme, 3)};
+        $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),
-            ),
-            --faint: (
-                --bg:    props.get(core.$transparent-colors, $theme, --300),
-                --label: props.get(core.$transparent-colors, $theme, --500),
-            ),
-        )
-    ));
+        $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,
-    negative: --negative,
+        accent:   --accent,
+        negative: --negative,
 ) !default;
 
 $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 ce2dfa7..fd36535 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -8,43 +8,43 @@
 @use 'emoji.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.object('emoji') {
-        position:       relative;
-        display:        inline-block;
-        inline-size:    calc(props.get(vars.$size));
-        block-size:     calc(props.get(vars.$size));
-        padding:        calc(props.get(vars.$pad));
-        margin:         calc(-1 * props.get(vars.$pad));
-        vertical-align: props.get(vars.$valign);
-        object-fit:     contain;
+        @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;
 
-        @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);
-        }
+                @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);
-                vertical-align: props.get($valign);
+                @each $mod, $size, $valign in vars.$sizes {
+                        @include bem.modifier($mod) {
+                                inline-size:    props.get($size);
+                                block-size:     props.get($size);
+                                vertical-align: props.get($valign);
 
-                @include bem.modifier('icon') {
-                    margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
-                }
-            }
-        }
+                                @include bem.modifier('icon') {
+                                        margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
+                                }
+                        }
+                }
 
-        @include bem.modifier('zoomable') {
-            border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
-            transition:    transform .2s ease, background-color .2s ease;
+                @include bem.modifier('zoomable') {
+                        border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
+                        transition:    transform .2s ease, background-color .2s ease;
 
-            &:hover {
-                background-color: props.get(vars.$bg-color);
-                transform:        scale(props.get(vars.$zoom));
-            }
-        }
-    }
+                        &:hover {
+                                background-color: props.get(vars.$bg-color);
+                                transform:        scale(props.get(vars.$zoom));
+                        }
+                }
+        }
 }
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss
index fbfb935..b7a8a43 100644
--- a/src/objects/_emoji.vars.scss
+++ b/src/objects/_emoji.vars.scss
@@ -4,7 +4,7 @@
 
 $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)) !default;
+$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding--sm)) !default;
 $zoom:     props.def(--o-emoji--zoom, 3) !default;
 $valign:   props.def(--o-emoji--valign, -.25em) !default;
 
@@ -18,9 +18,9 @@ $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;
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 564ab2b..aa12eb5 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -7,70 +7,70 @@
 @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;
-            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);
+        @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);
     
-            @include bem.next-elem('content') {
-                margin-block-start: props.get(vars.$spacing-b);
-            }
-        }
+                        @include bem.next-elem('content') {
+                                margin-block-start: props.get(vars.$spacing-b);
+                        }
+                }
     
-        @include bem.elem('content') {
-            display: block;
-            flex:    1 1 auto;
-        }
+                @include bem.elem('content') {
+                        display: block;
+                        flex:    1 1 auto;
+                }
     
-        @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);
-        }
+                @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);
+                }
     
-        @include bem.is('invalid') {
-            @include bem.elem('hint') {
-                color: props.get(vars.$error-hint-color);
-            }
-        }
+                @include bem.is('invalid') {
+                        @include bem.elem('hint') {
+                                color: props.get(vars.$error-hint-color);
+                        }
+                }
     
-        @include bem.is('disabled') {
-            @include bem.elem('label', 'hint') {
-                color: props.get(vars.$disabled-color);
-            }
-        }
+                @include bem.is('disabled') {
+                        @include bem.elem('label', 'hint') {
+                                color: props.get(vars.$disabled-color);
+                        }
+                }
     
-        @include bem.modifier('align-start', 'align-end') {
-            display:     flex;
-            align-items: baseline;
+                @include bem.modifier('align-start', 'align-end') {
+                        display:     flex;
+                        align-items: baseline;
     
-            @include bem.elem('label') {
-                display: inline-block;
+                        @include bem.elem('label') {
+                                display: inline-block;
     
-                @include bem.next-elem('content') {
-                    margin-block-start: 0;
-                }
-            }
-        }
+                                @include bem.next-elem('content') {
+                                        margin-block-start: 0;
+                                }
+                        }
+                }
     
-        @include bem.modifier('align-start') {
-            @include bem.elem('label') {
-                text-align: start;
-            }
-        }
+                @include bem.modifier('align-start') {
+                        @include bem.elem('label') {
+                                text-align: start;
+                        }
+                }
     
-        @include bem.modifier('align-end') {
-            @include bem.elem('label') {
-                text-align: end;
-            }
-        }
-    }
+                @include bem.modifier('align-end') {
+                        @include bem.elem('label') {
+                                text-align: end;
+                        }
+                }
+        }
 }
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss
new file mode 100644
index 0000000..27e0f6a
--- /dev/null
+++ b/src/objects/_figure.scss
@@ -0,0 +1,26 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'figure.vars';
+@use 'figure.vars' as vars;
+
+@mixin styles {
+        @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);
+                        border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color);
+
+                        &::before {
+                                display:       block;
+                                margin-block:  -100em 100em;
+                                content:       '';
+                        }
+                }
+        }
+}
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss
new file mode 100644
index 0000000..78f5d15
--- /dev/null
+++ b/src/objects/_figure.vars.scss
@@ -0,0 +1,9 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$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;
+
+$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 f5932f5..d27b595 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -7,54 +7,54 @@
 @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);
-        font-feature-settings: props.get(vars.$feature-settings);
-        line-height:           props.get(vars.$line-height);
-        color:                 props.get(vars.$text-color);
-        text-transform:        none;
-        letter-spacing:        normal;
-        transform:             translateX(props.get(vars.$offset));
+        @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:        none;
+                letter-spacing:        normal;
 
-        & + & {
-            margin-block-start: props.get(vars.$margin-bs-sibling);
-        }
+                & + & {
+                        margin-block-start: props.get(vars.$margin-bs-sibling);
+                }
 
-        @include bem.elem('highlight') {
-            background-image: linear-gradient(to top,
-            transparent               .05em,
-            props.get(vars.$bg-color) .05em,
-            props.get(vars.$bg-color) .5em,
-            transparent               .5em);
-        }
+                @include bem.elem('highlight') {
+                        background-image: linear-gradient(to top,
+                        transparent               .05em,
+                        props.get(vars.$bg-color) .05em,
+                        props.get(vars.$bg-color) .5em,
+                        transparent               .5em);
+                }
 
-        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings 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-feature-settings: props.get($feature-settings);
-                line-height:           props.get($line-height);
-                letter-spacing:        props.get($letter-spacing);
-            }
-        }
+                @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings 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-feature-settings: props.get($feature-settings);
+                                line-height:           props.get($line-height);
+                                letter-spacing:        props.get($letter-spacing);
+                        }
+                }
 
-        @include bem.modifier('display') {
-            @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings 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-feature-settings: props.get($feature-settings);
-                    line-height:           props.get($line-height);
-                    letter-spacing:        props.get($letter-spacing);
-                }
-            }
-        }
-    }
+                @include bem.modifier('display') {
+                        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings 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-feature-settings: props.get($feature-settings);
+                                        line-height:           props.get($line-height);
+                                        letter-spacing:        props.get($letter-spacing);
+                                        transform:             translateX(props.get(vars.$offset));
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index 90278c8..1d6df26 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -56,12 +56,12 @@ $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;
 
 $sizes: (
-    'xs'  $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs,
-    'sm'  $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm,
-    'md'  $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md,
-    'lg'  $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg,
-    'xl'  $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl,
-    'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl,
+        'xs'  $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs,
+        'sm'  $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm,
+        'md'  $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md,
+        'lg'  $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg,
+        'xl'  $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl,
+        'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl,
 ) !default;
 
 $display--font-family--xxl:      props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
@@ -114,10 +114,10 @@ $display--font-size--sm--md:  props.def(--o-heading--display--sm--font-size, pro
 $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,
-    '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,
-    '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,
-    '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,
-    '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,
-    '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,
+        '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,
+        '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,
+        '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,
+        '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,
+        '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,
+        '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,
 ) !default;
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 187938e..1941960 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -7,19 +7,19 @@
 @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-linecap:  round;
-        stroke-linejoin: round;
-        stroke-width:    props.get(vars.$stroke-width);
+        @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') {
-            display: block;
-        }
-    }
+                @include bem.modifier('block') {
+                        display: block;
+                }
+        }
 }
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b62c353..b95148f 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -9,127 +9,127 @@
 @use 'lightbox.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.object('lightbox') {
-        flex:           1 1 auto;
-        min-block-size: 0;
+        @include bem.object('lightbox') {
+                flex:           1 1 auto;
+                min-block-size: 0;
 
-        @include bem.elem('header') {
-            display:             flex;
-            grid-area:           header;
-            align-items:         flex-start;
-            padding-block-start: props.get(vars.$pad);
-            padding-inline:      props.get(vars.$pad);
-        }
+                @include bem.elem('header') {
+                        display:             flex;
+                        grid-area:           header;
+                        align-items:         flex-start;
+                        padding-block-start: props.get(vars.$pad);
+                        padding-inline:      props.get(vars.$pad);
+                }
 
-        @include bem.elem('img') {
-            box-sizing:      border-box;
-            display:         block;
-            grid-area:       content;
-            place-self:      center;
-            inline-size:     auto;
-            max-inline-size: 100%;
-            block-size:      auto;
-            max-block-size:  props.get(vars.$image--max-height);
-            padding:         props.get(vars.$pad);
-            margin-inline:   auto;
-            border-radius:   calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
-        }
+                @include bem.elem('img') {
+                        box-sizing:      border-box;
+                        display:         block;
+                        grid-area:       content;
+                        place-self:      center;
+                        inline-size:     auto;
+                        max-inline-size: 100%;
+                        block-size:      auto;
+                        max-block-size:  props.get(vars.$image--max-height);
+                        padding:         props.get(vars.$pad);
+                        margin-inline:   auto;
+                        border-radius:   calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
+                }
 
-        @include bem.elem('thumbnails') {
-            display:            none;
-            grid-area:          thumbnails;
-            gap:                props.get(vars.$thumbnails--spacing);
-            padding:            props.get(vars.$pad);
-            margin-block-start: calc(-1 * props.get(vars.$pad));
-            overflow:           auto;
-        }
+                @include bem.elem('thumbnails') {
+                        display:            none;
+                        grid-area:          thumbnails;
+                        gap:                props.get(vars.$thumbnails--spacing);
+                        padding:            props.get(vars.$pad);
+                        margin-block-start: calc(-1 * props.get(vars.$pad));
+                        overflow:           auto;
+                }
 
-        @include bem.elem('close-btn') {
-            display:            none;
-            flex:               0 0 auto;
-            margin-block-start: calc(-.5 * props.get(vars.$pad));
-            margin-inline:      auto calc(-.5 * props.get(vars.$pad));
-            font-size:          props.get(vars.$close-button--font-size);
-        }
+                @include bem.elem('close-btn') {
+                        display:            none;
+                        flex:               0 0 auto;
+                        margin-block-start: calc(-.5 * props.get(vars.$pad));
+                        margin-inline:      auto calc(-.5 * props.get(vars.$pad));
+                        font-size:          props.get(vars.$close-button--font-size);
+                }
 
-        @include bem.elem('nav-btn') {
-            position:   relative;
-            display:    none;
-            align-self: center;
-            overflow:   visible;
-            font-size:  props.get(vars.$nav-button--font-size);
+                @include bem.elem('nav-btn') {
+                        position:   relative;
+                        display:    none;
+                        align-self: center;
+                        overflow:   visible;
+                        font-size:  props.get(vars.$nav-button--font-size);
 
-            &::before {
-                position:           absolute;
-                inset-block-start:  50%;
-                display:            block;
-                inline-size:        props.get(vars.$nav-button--inline-size);
-                block-size:         props.get(vars.$nav-button--block-size);
-                content:            '';
-                transform:          translateY(-50%);
-            }
+                        &::before {
+                                position:           absolute;
+                                inset-block-start:  50%;
+                                display:            block;
+                                inline-size:        props.get(vars.$nav-button--inline-size);
+                                block-size:         props.get(vars.$nav-button--block-size);
+                                content:            '';
+                                transform:          translateY(-50%);
+                        }
 
-            @include bem.modifier('prev') {
-                grid-area:     prev;
-                margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
+                        @include bem.modifier('prev') {
+                                grid-area:     prev;
+                                margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
 
-                &::before {
-                    inset-inline-start: 0;
-                }
-            }
+                                &::before {
+                                        inset-inline-start: 0;
+                                }
+                        }
     
-            @include bem.modifier('next') {
-                grid-area:     next;
-                margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
+                        @include bem.modifier('next') {
+                                grid-area:     next;
+                                margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
 
-                &::before {
-                    inset-inline-end: 0;
-                }
-            }
-        }
+                                &::before {
+                                        inset-inline-end: 0;
+                                }
+                        }
+                }
 
-        @include bem.modifier('interactive') {
-            display:               grid;
-            grid-template-areas:
-                'header     header     header'
-                'prev       content    next'
-                'thumbnails thumbnails thumbnails';
-            grid-template-rows:    auto minmax(0, 1fr) auto auto;
-            grid-template-columns: auto minmax(0, 1fr) auto;
+                @include bem.modifier('interactive') {
+                        display:               grid;
+                        grid-template-areas:
+                                'header     header     header'
+                                'prev       content    next'
+                                'thumbnails thumbnails thumbnails';
+                        grid-template-rows:    auto minmax(0, 1fr) auto auto;
+                        grid-template-columns: auto minmax(0, 1fr) auto;
 
-            @include bem.modifier('fullscreen') {
-                block-size: props.get(vars.$fullscreen--height);
-            }
+                        @include bem.modifier('fullscreen') {
+                                block-size: props.get(vars.$fullscreen--height);
+                        }
 
-            @include bem.elem('img') {
-                display:        none;
-                max-block-size: 100%;
-                margin-inline:  0;
+                        @include bem.elem('img') {
+                                display:        none;
+                                max-block-size: 100%;
+                                margin-inline:  0;
 
-                @include bem.multi('&:target', 'is' 'visible') {
-                    display: block;
-                }
-            }
+                                @include bem.multi('&:target', 'is' 'visible') {
+                                        display: block;
+                                }
+                        }
 
-            @include bem.elem('thumbnails') {
-                display: flex;
-            }
+                        @include bem.elem('thumbnails') {
+                                display: flex;
+                        }
 
-            @include bem.elem('close-btn') {
-                display: block;
-            }
+                        @include bem.elem('close-btn') {
+                                display: block;
+                        }
 
-            @include bem.elem('nav-btn') {
-                display: block;
-            }
-        }
+                        @include bem.elem('nav-btn') {
+                                display: block;
+                        }
+                }
 
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                color: props.get(vars.$static-themes, $theme, --text);
-            }
-        }
-    }
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                color: props.get(vars.$static-themes, $theme, --text);
+                        }
+                }
+        }
 }
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index cc926e4..6d22aa8 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -23,11 +23,11 @@ $thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(cor
 $static-themes: props.def(--o-lightbox, (), 'color');
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $lightbox-theme: --static-#{string.slice($theme, 3)};
+        $lightbox-theme: --static-#{string.slice($theme, 3)};
 
-    $static-themes: props.merge($static-themes, (
-        $lightbox-theme: (
-            --text: props.get(core.$transparent-colors, $theme, --800),
-        )
-    ));
+        $static-themes: props.merge($static-themes, (
+                $lightbox-theme: (
+                        --text: props.get(core.$transparent-colors, $theme, --800),
+                )
+        ));
 }
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 4d31874..f370067 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -8,95 +8,95 @@
 @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;
-        flex-direction: column;
-        gap:            props.get(vars.$spacing);
+        @include bem.object('menu') {
+                display:        flex;
+                flex-direction: column;
+                gap:            props.get(vars.$spacing);
 
-        @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);
-            text-transform: uppercase;
-            letter-spacing: .5px;
+                @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);
+                        text-transform: uppercase;
+                        letter-spacing: .5px;
 
-            @include bem.next-twin-elem {
-                margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
-            }
-        }
+                        @include bem.next-twin-elem {
+                                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);
-            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));
+                @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));
 
-            &:link,
-            &:visited,
-            &:enabled {
-                color: currentColor;
+                        &:link,
+                        &:visited,
+                        &:enabled {
+                                color: currentColor;
 
-                @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);
-                }
+                                @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);
-                    background-color: props.get(vars.$item--active--bg-color);
-                }
+                                &:active {
+                                        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))
-                        props.get(vars.$item--key-focus--outline-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))
+                                                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') {
-            &:link,
-            &:visited,
-            &:enabled {
-                color: props.get(vars.$header--label-color);
-            }
-        }
+                @include bem.elem('header') {
+                        &:link,
+                        &:visited,
+                        &:enabled {
+                                color: props.get(vars.$header--label-color);
+                        }
+                }
 
-        @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('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);
-            padding-inline: props.get(vars.$item--pad-i);
-        }
+                @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;
-            justify-content: center;
-            inline-size:     props.get(icon.$size);
-        }
+                @include bem.elem('icon-slot') {
+                        display:         flex;
+                        justify-content: center;
+                        inline-size:     props.get(icon.$size);
+                }
 
-        @include bem.modifier('pull') {
-            margin: calc(-1 * props.get(vars.$item--pad-i));
-        }
-    }
+                @include bem.modifier('pull') {
+                        margin: calc(-1 * props.get(vars.$item--pad-i));
+                }
+        }
 }
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index 59d4c51..ec03c62 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -9,183 +9,183 @@
 @use 'navbar.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.object('navbar') {
-        display:    flex;
-        block-size: props.get(vars.$block-size);
+        @include bem.object('navbar') {
+                display:    flex;
+                block-size: props.get(vars.$block-size);
 
-        @include bem.elem('item-content-text') {
-            margin-inline: props.get(vars.$item--pad-i-label);
-        }
+                @include bem.elem('item-content-text') {
+                        margin-inline: props.get(vars.$item--pad-i-label);
+                }
 
-        @include bem.elem('item-content') {
-            position:        relative;
-            padding-block:   props.get(vars.$item--pad-b);
-            padding-inline:  props.get(vars.$item--pad-i);
-            font-size:       props.get(vars.$item--font-size);
-            color:           currentColor;
-            white-space:     nowrap;
-            border-radius:   100em;
+                @include bem.elem('item-content') {
+                        position:        relative;
+                        padding-block:   props.get(vars.$item--pad-b);
+                        padding-inline:  props.get(vars.$item--pad-i);
+                        font-size:       props.get(vars.$item--font-size);
+                        color:           currentColor;
+                        white-space:     nowrap;
+                        border-radius:   100em;
 
-            &::after {
-                position:       absolute;
-                inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
-                z-index:        -10;
-                display:        block;
-                pointer-events: none;
-                visibility:     hidden;
-                content:        '';
-                border-radius:  100em;
-                outline:        props.get(vars.$default-theme, --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(vars.$default-theme, --key-focus, --outline);
-            }
-        }
+                        &::after {
+                                position:       absolute;
+                                inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
+                                z-index:        -10;
+                                display:        block;
+                                visibility:     hidden;
+                                pointer-events: none;
+                                outline:        props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width);
+                                content:        '';
+                                border-radius:  100em;
+                                box-shadow:
+                                        0
+                                        0
+                                        0
+                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                        props.get(vars.$default-theme, --key-focus, --outline);
+                        }
+                }
 
-        @include bem.elem('item') {
-            display:         flex;
-            flex-direction:  column;
-            align-items:     center;
-            justify-content: center;
-            inline-size:     100%;
-            padding-inline:  calc(.5 * props.get(vars.$spacing));
-            font-weight:     500;
-            color:           props.get(vars.$default-theme, --disabled, --label-color);
+                @include bem.elem('item') {
+                        display:         flex;
+                        flex-direction:  column;
+                        align-items:     center;
+                        justify-content: center;
+                        inline-size:     100%;
+                        padding-inline:  calc(.5 * props.get(vars.$spacing));
+                        font-weight:     500;
+                        color:           props.get(vars.$default-theme, --disabled, --label-color);
 
-            &:link,
-            &:visited,
-            &:enabled {
-                color: props.get(vars.$default-theme, --label-color);
+                        &:link,
+                        &:visited,
+                        &:enabled {
+                                color: props.get(vars.$default-theme, --label-color);
 
-                &:hover,
-                &:focus-visible {
-                    color: props.get(vars.$default-theme, --hover, --label-color);
+                                &:hover,
+                                &:focus-visible {
+                                        color: props.get(vars.$default-theme, --hover, --label-color);
 
-                    @include bem.elem('item-content') {
-                        background-color: props.get(vars.$default-theme, --hover, --bg-color);
-                    }
-                }
+                                        @include bem.elem('item-content') {
+                                                background-color: props.get(vars.$default-theme, --hover, --bg-color);
+                                        }
+                                }
 
-                &:focus-visible {
-                    @include bem.elem('item-content') {
-                        &::after {
-                            visibility: visible;
-                        }
-                    }
-                }
+                                &:focus-visible {
+                                        @include bem.elem('item-content') {
+                                                &::after {
+                                                        visibility: visible;
+                                                }
+                                        }
+                                }
 
-                &:active {
-                    color: props.get(vars.$default-theme, --active, --label-color);
+                                &:active {
+                                        color: props.get(vars.$default-theme, --active, --label-color);
 
-                    @include bem.elem('item-content') {
-                        background-color: props.get(vars.$default-theme, --active, --bg-color);
-                    }
-                }
-            }
+                                        @include bem.elem('item-content') {
+                                                background-color: props.get(vars.$default-theme, --active, --bg-color);
+                                        }
+                                }
+                        }
 
-            @include bem.is('selected') {
-                font-weight: bold;
-                color:       props.get(vars.$default-theme, --selected, --disabled, --label-color);
+                        @include bem.is('selected') {
+                                font-weight: bold;
+                                color:       props.get(vars.$default-theme, --selected, --disabled, --label-color);
 
-                @include bem.elem('item-content') {
-                    background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
-                }
+                                @include bem.elem('item-content') {
+                                        background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
+                                }
 
-                &:link,
-                &:visited,
-                &:enabled {
-                    color: props.get(vars.$default-theme, --selected, --label-color);
+                                &:link,
+                                &:visited,
+                                &:enabled {
+                                        color: props.get(vars.$default-theme, --selected, --label-color);
 
-                    @include bem.elem('item-content') {
-                        background-color: props.get(vars.$default-theme, --selected, --bg-color);
-                    }
+                                        @include bem.elem('item-content') {
+                                                background-color: props.get(vars.$default-theme, --selected, --bg-color);
+                                        }
 
-                    &:hover,
-                    &:focus-visible {
-                        color: props.get(vars.$default-theme, --selected, --hover, --label-color);
+                                        &:hover,
+                                        &:focus-visible {
+                                                color: props.get(vars.$default-theme, --selected, --hover, --label-color);
 
-                        @include bem.elem('item-content') {
-                            background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
-                        }
-                    }
+                                                @include bem.elem('item-content') {
+                                                        background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
+                                                }
+                                        }
 
-                    &:active {
-                        color: props.get(vars.$default-theme, --selected, --active, --label-color);
+                                        &:active {
+                                                color: props.get(vars.$default-theme, --selected, --active, --label-color);
 
-                        @include bem.elem('item-content') {
-                            background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
-                        }
-                    }
-                }
-            }
-        }
+                                                @include bem.elem('item-content') {
+                                                        background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
+                                                }
+                                        }
+                                }
+                        }
+                }
 
-        @include bem.modifier('hide-unselected') {
-            @include bem.elem('item') {
-                display: none;
+                @include bem.modifier('hide-unselected') {
+                        @include bem.elem('item') {
+                                display: none;
 
-                @include bem.is('selected') {
-                    display: flex;
-                }
-            }
-        }
+                                @include bem.is('selected') {
+                                        display: flex;
+                                }
+                        }
+                }
 
-        @include bem.modifier('adapt') {
-            gap:        props.get(vars.$spacing);
-            block-size: 100%;
+                @include bem.modifier('adapt') {
+                        gap:        props.get(vars.$spacing);
+                        block-size: 100%;
 
-            @include bem.elem('item') {
-                padding-inline: 0;
-            }
-        }
+                        @include bem.elem('item') {
+                                padding-inline: 0;
+                        }
+                }
 
 
-        @include bem.modifier('align-block') {
-            margin-inline: calc(-1 * props.get(vars.$item--pad-i));
-        }
+                @include bem.modifier('align-block') {
+                        margin-inline: calc(-1 * props.get(vars.$item--pad-i));
+                }
 
-        @include bem.modifier('quiet') {
-            @include bem.elem('item') {
-                @include bem.is('selected') {
-                    color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
+                @include bem.modifier('quiet') {
+                        @include bem.elem('item') {
+                                @include bem.is('selected') {
+                                        color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
 
-                    @include bem.elem('item-content') {
-                        background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
-                    }
+                                        @include bem.elem('item-content') {
+                                                background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
+                                        }
 
-                    &:link,
-                    &:visited,
-                    &:enabled {
-                        color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
+                                        &:link,
+                                        &:visited,
+                                        &:enabled {
+                                                color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
 
-                        @include bem.elem('item-content') {
-                            background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
-                        }
+                                                @include bem.elem('item-content') {
+                                                        background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
+                                                }
 
-                        &:hover,
-                        &:focus-visible {
-                            color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
+                                                &:hover,
+                                                &:focus-visible {
+                                                        color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
 
-                            @include bem.elem('item-content') {
-                                background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
-                            }
-                        }
+                                                        @include bem.elem('item-content') {
+                                                                background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
+                                                        }
+                                                }
 
-                        &:active {
-                            color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
+                                                &:active {
+                                                        color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
 
-                            @include bem.elem('item-content') {
-                                background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
+                                                        @include bem.elem('item-content') {
+                                                                background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
+                                                        }
+                                                }
+                                        }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index da280fd..8e18def 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -7,7 +7,7 @@ $block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !defa
 $spacing:    props.def(--o-navbar--spacing, props.get(core.$size--200)) !default;
 
 $item--pad-i:       props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
-$item--pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--25)) !default;
+$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--25)) !default;
 $item--pad-b:       props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default;
 $item--font-size:   props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
 
@@ -17,68 +17,68 @@ $key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props
 
 $default-theme-override: () !default;
 $default-theme: map.deep-merge((
-    --label-color:  props.get(core.$theme, --text),
+        --label-color:  props.get(core.$theme, --text),
 
-    --hover: (
-        --bg-color:    props.get(core.$theme, --border-mute),
-        --label-color: props.get(core.$theme, --heading),
-    ),
+        --hover: (
+                --bg-color:    props.get(core.$theme, --border-mute),
+                --label-color: props.get(core.$theme, --heading),
+        ),
 
-    --active: (
-        --bg-color:    props.get(core.$theme, --border),
-        --label-color: props.get(core.$theme, --heading),
-    ),
+        --active: (
+                --bg-color:    props.get(core.$theme, --border),
+                --label-color: props.get(core.$theme, --heading),
+        ),
 
-    --disabled: (
-        --label-color: props.get(core.$theme, --border-strong),
-    ),
+        --disabled: (
+                --label-color: props.get(core.$theme, --border-strong),
+        ),
 
-    --key-focus: (
-        --label:   props.get(core.$theme, --focus, --text),
-        --border:  props.get(core.$theme, --focus, --border),
-        --outline: props.get(core.$theme, --focus, --outline),
-    ),
+        --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),
-        --label-color:  props.get(core.$theme, --base, --50),
+        --selected: (
+                --bg-color:     props.get(core.$theme, --heading),
+                --label-color:  props.get(core.$theme, --base, --50),
 
-        --hover: (
-            --bg-color:     props.get(core.$theme, --text),
-            --label-color:  props.get(core.$theme, --base, --50),
-        ),
+                --hover: (
+                        --bg-color:     props.get(core.$theme, --text),
+                        --label-color:  props.get(core.$theme, --base, --50),
+                ),
 
-        --active: (
-            --bg-color:     props.get(core.$theme, --text-mute),
-            --label-color:  props.get(core.$theme, --base, --50),
-        ),
+                --active: (
+                        --bg-color:     props.get(core.$theme, --text-mute),
+                        --label-color:  props.get(core.$theme, --base, --50),
+                ),
 
-        --disabled: (
-            --bg-color:     props.get(core.$theme, --border-mute),
-            --label-color:  props.get(core.$theme, --border-strong),
-        ),
-    ),
+                --disabled: (
+                        --bg-color:     props.get(core.$theme, --border-mute),
+                        --label-color:  props.get(core.$theme, --border-strong),
+                ),
+        ),
 
-    --quiet: (
-        --selected: (
-            --bg-color:     props.get(core.$theme, --accent, --200),
-            --label-color:  props.get(core.$theme, --accent, --1100),
+        --quiet: (
+                --selected: (
+                        --bg-color:     props.get(core.$theme, --accent, --200),
+                        --label-color:  props.get(core.$theme, --accent, --1100),
 
-            --hover: (
-                --bg-color:     props.get(core.$theme, --accent, --300),
-                --label-color:  props.get(core.$theme, --accent, --1200),
-            ),
+                        --hover: (
+                                --bg-color:     props.get(core.$theme, --accent, --300),
+                                --label-color:  props.get(core.$theme, --accent, --1200),
+                        ),
     
-            --active: (
-                --bg-color:     props.get(core.$theme, --accent, --400),
-                --label-color:  props.get(core.$theme, --accent, --1300),
-            ),
+                        --active: (
+                                --bg-color:     props.get(core.$theme, --accent, --400),
+                                --label-color:  props.get(core.$theme, --accent, --1300),
+                        ),
 
-            --disabled: (
-                --bg-color:     props.get(core.$theme, --accent, --200),
-                --label-color:  props.get(core.$theme, --accent, --800),
-            ),
-        )
-    )
+                        --disabled: (
+                                --bg-color:     props.get(core.$theme, --accent, --200),
+                                --label-color:  props.get(core.$theme, --accent, --800),
+                        ),
+                )
+        )
 ), $default-theme-override) !default;
 $default-theme: props.def(--o-navbar, $default-theme, 'color');
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 8a6cdb2..79c0f6c 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -7,57 +7,57 @@
 @use '../core.vars' as core;
 
 @mixin styles {
-    @include bem.object('palette') {
-        display:    flex;
-        block-size: 3em;
+        @include bem.object('palette') {
+                display:    flex;
+                block-size: 3em;
 
-        @include bem.elem('item') {
-            flex: 1 1 auto;
+                @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));
+                        $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));
 
-            @for $i from 1 through list.length($levels) {
-                $key: list.nth(map.keys($levels), $i);
+                        @for $i from 1 through list.length($levels) {
+                                $key: list.nth(map.keys($levels), $i);
 
-                &:nth-child(#{$i}) {
-                    background-color: props.get(core.$theme, --base, $key);
-                }
-            }
-        }
+                                &:nth-child(#{$i}) {
+                                        background-color: props.get(core.$theme, --base, $key);
+                                }
+                        }
+                }
 
-        @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') {
-                    @for $i from 1 through list.length($levels) {
-                        $key: list.nth(map.keys($levels), $i);
+                        @include bem.modifier(string.slice($palette-name, 3)) {
+                                @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, $key);
-                        }
-                    }
-                }
-            }
-        }
+                                                &:nth-child(#{$i}) {
+                                                        background-color: props.get(core.$theme, $palette-name, $key);
+                                                }
+                                        }
+                                }
+                        }
+                }
 
-        @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('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') {
-                        @for $i from 1 through list.length($levels) {
-                            $key: list.nth(map.keys($levels), $i);
+                                @include bem.modifier(string.slice($palette-name, 3)) {
+                                        @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);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
+                                                        &:nth-child(#{$i}) {
+                                                                background-color: props.get(core.$theme, #{$palette-name}-static, $key);
+                                                        }
+                                                }
+                                        }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss
new file mode 100644
index 0000000..80fc913
--- /dev/null
+++ b/src/objects/_placeholders.scss
@@ -0,0 +1,22 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'placeholders.vars';
+@use 'placeholders.vars' as vars;
+
+@mixin styles {
+        @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;
+                        background-color: currentColor;
+                        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
new file mode 100644
index 0000000..a2e41e2
--- /dev/null
+++ b/src/objects/_placeholders.vars.scss
@@ -0,0 +1,6 @@
+@use '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, .5) !default;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 3fe6310..2746477 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -7,33 +7,39 @@
 @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;
-        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);
-        filter:             props.get(vars.$filter);
-        border:             props.get(vars.$border-width) solid props.get(vars.$border-color);
-        border-radius:      props.get(vars.$rounding);
-        transform:          translate(var(--x), var(--y));
+        @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));
 
-        @include bem.modifier('up-left') {
-            transform: translate(var(--x), calc(var(--y) - 100%));
-        }
+                @include bem.modifier('up-left') {
+                        transform: translate(var(--x), calc(var(--y) - 100%));
+                }
 
-        @include bem.modifier('up-right') {
-            transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
-        }
+                @include bem.modifier('up-right') {
+                        transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
+                }
 
-        @include bem.modifier('down-right') {
-            transform: translate(calc(var(--x) - 100%), var(--y));
-        }
-    }
+                @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 b76112e..e560d1b 100644
--- a/src/objects/_popover.vars.scss
+++ b/src/objects/_popover.vars.scss
@@ -9,6 +9,11 @@ $separator-width: props.def(--o-popover--separator-width, props.get(core.$size--
 $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;
 
-$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, --border), 'color') !default;
-$filter:       props.def(--o-popover--filter, drop-shadow(props.get(core.$shadow--x) props.get(core.$shadow--y) props.get(core.$shadow--blur) props.get(core.$theme, --shadow)), 'color') !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;
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index aef6b92..8327a15 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -8,147 +8,147 @@
 @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);
-        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.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(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset));
-            vertical-align:     top;
-            background-color:   props.get(vars.$circle-border-color);
-            background-clip:    padding-box;
-            border:             props.get(vars.$key-focus--border-offset) solid transparent;
-            border-radius:      2em;
+                @include bem.elem('circle') {
+                        display:            inline-block;
+                        flex:               0 0 auto;
+                        inline-size:        props.get(vars.$diameter);
+                        block-size:         props.get(vars.$diameter);
+                        margin-block-start: calc(.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);
-                inset-inline-start: props.get(vars.$border-width);
-                display:            block;
-                inline-size:        calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
-                block-size:         calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
-                content:            '';
-                background-color:   props.get(vars.$circle-bg-color);
-                border-radius:      props.get(vars.$diameter);
-                transition:         transform .2s ease;
-            }
-        }
+                        &::after {
+                                position:           relative;
+                                inset-block-start:  props.get(vars.$border-width);
+                                inset-inline-start: props.get(vars.$border-width);
+                                display:            block;
+                                inline-size:        calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
+                                block-size:         calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
+                                content:            '';
+                                background-color:   props.get(vars.$circle-bg-color);
+                                border-radius:      props.get(vars.$diameter);
+                                transition:         transform .2s ease;
+                        }
+                }
     
-        @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;
-            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);
+                @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);
     
-            &:hover,
-            &:focus-visible {
-                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$hover--label-color);
-                }
+                        &:hover,
+                        &:focus-visible {
+                                @include bem.sibling-elem('label') {
+                                        color: props.get(vars.$hover--label-color);
+                                }
     
-                @include bem.sibling-elem('circle') {
-                    background-color: props.get(vars.$hover--circle-border-color);
-                }
-            }
+                                @include bem.sibling-elem('circle') {
+                                        background-color: props.get(vars.$hover--circle-border-color);
+                                }
+                        }
     
-            &:checked {
-                @include bem.sibling-elem('circle') {
-                    &::after {
-                        transform: scale(.44);
-                    }
-                }
-            }
+                        &:checked {
+                                @include bem.sibling-elem('circle') {
+                                        &::after {
+                                                transform: scale(.44);
+                                        }
+                                }
+                        }
     
-            &:disabled {
-                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$disabled--label-color);
-                }
+                        &:disabled {
+                                @include bem.sibling-elem('label') {
+                                        color: props.get(vars.$disabled--label-color);
+                                }
     
-                @include bem.sibling-elem('circle') {
-                    background-color: props.get(vars.$disabled--circle-border-color);
+                                @include bem.sibling-elem('circle') {
+                                        background-color: props.get(vars.$disabled--circle-border-color);
     
-                    &::after {
-                        background-color: props.get(vars.$disabled--circle-bg-color);
-                    }
-                }
-            }
+                                        &::after {
+                                                background-color: props.get(vars.$disabled--circle-bg-color);
+                                        }
+                                }
+                        }
 
-            &:focus-visible {
-                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$key-focus--label-color);
-                }
+                        &:focus-visible {
+                                @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))
-                        props.get(vars.$key-focus--outline-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))
+                                                props.get(vars.$key-focus--outline-color);
+                                }
+                        }
+                }
     
-        @include bem.modifier('standalone') {
-            @include bem.elem('circle') {
-                margin-block-start: 0;
-            }
-        }
+                @include bem.modifier('standalone') {
+                        @include bem.elem('circle') {
+                                margin-block-start: 0;
+                        }
+                }
     
-        @include bem.modifier('accent') {
-            @include bem.elem('native') {
-                &:checked {
-                    @include bem.sibling-elem('circle') {
-                        background-color: props.get(vars.$accent--circle-border-color);
-                    }
+                @include bem.modifier('accent') {
+                        @include bem.elem('native') {
+                                &:checked {
+                                        @include bem.sibling-elem('circle') {
+                                                background-color: props.get(vars.$accent--circle-border-color);
+                                        }
         
-                    &:hover,
-                    &:focus-visible {
-                        @include bem.sibling-elem('circle') {
-                            background-color: props.get(vars.$accent--hover--circle-border-color);
-                        }
-                    }
-                }
+                                        &:hover,
+                                        &:focus-visible {
+                                                @include bem.sibling-elem('circle') {
+                                                        background-color: props.get(vars.$accent--hover--circle-border-color);
+                                                }
+                                        }
+                                }
     
-                &:disabled {
-                    @include bem.sibling-elem('circle') {
-                        background-color: props.get(vars.$disabled--circle-border-color);
+                                &:disabled {
+                                        @include bem.sibling-elem('circle') {
+                                                background-color: props.get(vars.$disabled--circle-border-color);
         
-                        &::after {
-                            background-color: props.get(vars.$disabled--circle-bg-color);
-                        }
-                    }
+                                                &::after {
+                                                        background-color: props.get(vars.$disabled--circle-bg-color);
+                                                }
+                                        }
         
-                    &:checked {
-                        @include bem.sibling-elem('circle') {
-                            background-color: props.get(vars.$disabled--circle-border-color);
-                        }
-                    }
-                }
-            }
-        }
-    }
+                                        &:checked {
+                                                @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 51ea581..b18ae2b 100644
--- a/src/objects/_radio.vars.scss
+++ b/src/objects/_radio.vars.scss
@@ -7,7 +7,7 @@ $label-gap:        props.def(--o-radio--label-gap, props.get(core.$size--125)) !
 $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)) !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;
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index 6c60777..4a1feda 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -8,83 +8,83 @@
 @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;
-        flex-direction: column;
-        gap:            props.get(vars.$spacing);
+        @include bem.object('side-nav') {
+                display:        flex;
+                flex-direction: column;
+                gap:            props.get(vars.$spacing);
 
-        @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);
-            text-transform: uppercase;
-            letter-spacing: .5px;
+                @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);
+                        text-transform: uppercase;
+                        letter-spacing: .5px;
 
-            @include bem.next-twin-elem {
-                margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
-            }
-        }
+                        @include bem.next-twin-elem {
+                                margin-block-start: calc(props.get(vars.$separator) + 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--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));
+                @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--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));
 
-            &:link,
-            &:visited,
-            &:enabled {
-                color: currentColor;
+                        &:link,
+                        &:visited,
+                        &:enabled {
+                                color: currentColor;
 
-                @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);
-                }
+                                @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);
-                    background-color: props.get(vars.$item--active--bg-color);
-                }
+                                &:active {
+                                        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))
-                        props.get(vars.$item--key-focus--outline-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))
+                                                props.get(vars.$item--key-focus--outline-color);
+                                }
+                        }
 
-            @include bem.next-elem('header') {
-                margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
-            }
-        }
+                        @include bem.next-elem('header') {
+                                margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
+                        }
+                }
 
-        @include bem.elem('header') {
-            &:link,
-            &:visited,
-            &:enabled {
-                color: props.get(vars.$header--label-color);
-            }
-        }
+                @include bem.elem('header') {
+                        &:link,
+                        &:visited,
+                        &:enabled {
+                                color: props.get(vars.$header--label-color);
+                        }
+                }
 
-        @include bem.elem('separator') {
-            block-size: props.get(vars.$separator);
-        }
+                @include bem.elem('separator') {
+                        block-size: props.get(vars.$separator);
+                }
 
-        @include bem.elem('icon-slot') {
-            display:         flex;
-            justify-content: center;
-            inline-size:     props.get(icon.$size);
-        }
-    }
+                @include bem.elem('icon-slot') {
+                        display:         flex;
+                        justify-content: center;
+                        inline-size:     props.get(icon.$size);
+                }
+        }
 }
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss
index 122dba6..711b2a7 100644
--- a/src/objects/_side-nav.vars.scss
+++ b/src/objects/_side-nav.vars.scss
@@ -8,7 +8,7 @@ $separator:         props.def(--o-side-nav--separator, props.get(core.$size--200
 
 $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--100)) !default;
-$item--rounding:      props.def(--o-side-nav--item--rounding, props.get(core.$rounding)) !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;
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 1fcdf02..4e4aa42 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -9,19 +9,19 @@
 @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);
-        background-color: props.get(vars.$default);
-        border-radius:    10em;
+        @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;
 
-        @each $theme in map.keys(props.get(vars.$themes)) {
-            @include bem.is(string.slice($theme, 3)) {
-                background-color: props.get(vars.$themes, $theme);
-            }
-        }
-    }
+                @each $theme in map.keys(props.get(vars.$themes)) {
+                        @include bem.is(string.slice($theme, 3)) {
+                                background-color: props.get(vars.$themes, $theme);
+                        }
+                }
+        }
 }
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss
index 6289145..55b446a 100644
--- a/src/objects/_status-indicator.vars.scss
+++ b/src/objects/_status-indicator.vars.scss
@@ -9,18 +9,18 @@ $default: props.def(--o-status-indicator--default, props.get(core.$theme, --bord
 $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default;
 
 $themes-config: (
-    accent:   --accent,
-    positive: --positive,
-    negative: --negative,
-    warning:  --warning,
+        accent:   --accent,
+        positive: --positive,
+        negative: --negative,
+        warning:  --warning,
 ) !default;
 
 $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),
-        ));
-    }
+        @if $theme != --base {
+                $themes: props.merge($themes, (
+                        --#{$theme}: props.get(core.$theme, $key, --700),
+                ));
+        }
 }
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 8612d31..48cec24 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -8,181 +8,181 @@
 @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);
-        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.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(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset));
-            vertical-align:     top;
-            background-color:   props.get(vars.$track-bg-color);
-            background-clip:    padding-box;
-            border:             props.get(vars.$key-focus--border-offset) solid transparent;
-            border-radius:      2em;
-            transition:         background-color .2s ease;
+                @include bem.elem('indicator') {
+                        display:            inline-block;
+                        flex:               0 0 auto;
+                        inline-size:        props.get(vars.$inline-size);
+                        block-size:         props.get(vars.$block-size);
+                        margin-block-start: calc(.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:          '';
-                background-color: props.get(vars.$handle-bg-color);
-                border:           props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
-                border-radius:    props.get(vars.$inline-size);
-                transition:       transform .2s ease;
-            }
-        }
+                        &::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:          '';
+                                background-color: props.get(vars.$handle-bg-color);
+                                border:           props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
+                                border-radius:    props.get(vars.$inline-size);
+                                transition:       transform .2s ease;
+                        }
+                }
     
-        @include bem.elem('label') {
-            margin-inline-start: props.get(vars.$label-gap);
-        }
+                @include bem.elem('label') {
+                        margin-inline-start: props.get(vars.$label-gap);
+                }
     
-        @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);
+                @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);
     
-            &:hover,
-            &:focus-visible {
-                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$hover--label-color);
-                }
+                        &:hover,
+                        &:focus-visible {
+                                @include bem.sibling-elem('label') {
+                                        color: props.get(vars.$hover--label-color);
+                                }
     
-                @include bem.sibling-elem('indicator') {
-                    &::after {
-                        border-color: props.get(vars.$hover--handle-border-color);
-                    }
-                }
-            }
+                                @include bem.sibling-elem('indicator') {
+                                        &::after {
+                                                border-color: props.get(vars.$hover--handle-border-color);
+                                        }
+                                }
+                        }
     
-            &:checked {
-                @include bem.sibling-elem('indicator') {
-                    background-color: props.get(vars.$handle-border-color);
+                        &:checked {
+                                @include bem.sibling-elem('indicator') {
+                                        background-color: props.get(vars.$handle-border-color);
     
-                    &::after {
-                        border-color: props.get(vars.$handle-border-color);
-                        transform:    translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
-                    }
-                }
+                                        &::after {
+                                                border-color: props.get(vars.$handle-border-color);
+                                                transform:    translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
+                                        }
+                                }
     
-                &:hover,
-                &:focus-visible {
-                    @include bem.sibling-elem('indicator') {
-                        background-color: props.get(vars.$hover--handle-border-color);
+                                &:hover,
+                                &:focus-visible {
+                                        @include bem.sibling-elem('indicator') {
+                                                background-color: props.get(vars.$hover--handle-border-color);
 
-                        &::after {
-                            border-color: props.get(vars.$hover--handle-border-color);
-                        }
-                    }
-                }
-            }
+                                                &::after {
+                                                        border-color: props.get(vars.$hover--handle-border-color);
+                                                }
+                                        }
+                                }
+                        }
     
-            &:disabled {
-                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$disabled--label-color);
-                }
+                        &:disabled {
+                                @include bem.sibling-elem('label') {
+                                        color: props.get(vars.$disabled--label-color);
+                                }
     
-                @include bem.sibling-elem('indicator') {
-                    background-color: props.get(vars.$disabled--track-bg-color);
+                                @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);
-                    }
-                }
+                                        &::after {
+                                                background-color: props.get(vars.$disabled--handle-bg-color);
+                                                border-color:     props.get(vars.$disabled--handle-border-color);
+                                        }
+                                }
     
-                &:checked {
-                    @include bem.sibling-elem('indicator') {
-                        background-color: props.get(vars.$disabled--handle-border-color);
+                                &:checked {
+                                        @include bem.sibling-elem('indicator') {
+                                                background-color: props.get(vars.$disabled--handle-border-color);
     
-                        &::after {
-                            border-color: props.get(vars.$disabled--handle-border-color);
-                        }
-                    }
-                }
-            }
+                                                &::after {
+                                                        border-color: props.get(vars.$disabled--handle-border-color);
+                                                }
+                                        }
+                                }
+                        }
     
-            &:focus-visible {
-                @include bem.sibling-elem('label') {
-                    color: props.get(vars.$key-focus--label-color);
-                }
+                        &:focus-visible {
+                                @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))
-                        props.get(vars.$key-focus--outline-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))
+                                                props.get(vars.$key-focus--outline-color);
+                                }
+                        }
+                }
     
-        @include bem.modifier('standalone') {
-            @include bem.elem('indicator') {
-                margin-block-start: 0;
-            }
-        }
+                @include bem.modifier('standalone') {
+                        @include bem.elem('indicator') {
+                                margin-block-start: 0;
+                        }
+                }
     
-        @include bem.modifier('accent') {
-            @include bem.elem('native') {
-                &:checked {
-                    @include bem.sibling-elem('indicator') {
-                        background-color: props.get(vars.$accent--handle-border-color);
+                @include bem.modifier('accent') {
+                        @include bem.elem('native') {
+                                &:checked {
+                                        @include bem.sibling-elem('indicator') {
+                                                background-color: props.get(vars.$accent--handle-border-color);
         
-                        &::after {
-                            border-color: props.get(vars.$accent--handle-border-color);
-                        }
-                    }
+                                                &::after {
+                                                        border-color: props.get(vars.$accent--handle-border-color);
+                                                }
+                                        }
         
-                    &:hover,
-                    &:focus-visible {
-                        @include bem.sibling-elem('indicator') {
-                            background-color: props.get(vars.$accent--hover--handle-border-color);
+                                        &:hover,
+                                        &:focus-visible {
+                                                @include bem.sibling-elem('indicator') {
+                                                        background-color: props.get(vars.$accent--hover--handle-border-color);
     
-                            &::after {
-                                border-color: props.get(vars.$accent--hover--handle-border-color);
-                            }
-                        }
-                    }
-                }
+                                                        &::after {
+                                                                border-color: props.get(vars.$accent--hover--handle-border-color);
+                                                        }
+                                                }
+                                        }
+                                }
         
-                &:disabled {
-                    @include bem.sibling-elem('label') {
-                        color: props.get(vars.$disabled--label-color);
-                    }
+                                &:disabled {
+                                        @include bem.sibling-elem('label') {
+                                                color: props.get(vars.$disabled--label-color);
+                                        }
 
-                    &:checked {
-                        @include bem.sibling-elem('indicator') {
-                            background-color: props.get(vars.$disabled--handle-border-color);
+                                        &:checked {
+                                                @include bem.sibling-elem('indicator') {
+                                                        background-color: props.get(vars.$disabled--handle-border-color);
 
-                            &::after {
-                                border-color: props.get(vars.$disabled--handle-border-color);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
+                                                        &::after {
+                                                                border-color: props.get(vars.$disabled--handle-border-color);
+                                                        }
+                                                }
+                                        }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss
index 85596af..10489a5 100644
--- a/src/objects/_switch.vars.scss
+++ b/src/objects/_switch.vars.scss
@@ -8,7 +8,7 @@ $label-gap:       props.def(--o-switch--label-gap, props.get(core.$size--125)) !
 $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)) !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;
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
new file mode 100644
index 0000000..a9daaae
--- /dev/null
+++ b/src/objects/_tabbar.scss
@@ -0,0 +1,113 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'tabbar.vars';
+@use 'tabbar.vars' as vars;
+
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
+
+        @include bem.object('tabbar') {
+                min-inline-size: 0;
+                block-size:      props.get(vars.$block-size);
+                overflow:        hidden;
+
+                &::after {
+                        display:            block;
+                        block-size:         props.get(vars.$indicator--width);
+                        margin-block-start: calc(-1 * props.get(vars.$indicator--width));
+                        content:            '';
+                        background-color:   props.get(vars.$railing--bg-color);
+                }
+
+                @include bem.elem('tabs') {
+                        display:         flex;
+                        block-size:      100%;
+                        margin-inline:   calc(-.5 * props.get(vars.$spacing));
+                        overflow-inline: auto;
+                }
+
+                @include bem.modifier('quiet') {
+                        box-shadow: none;
+                }
+
+                @include bem.modifier('adapt') {
+                        block-size: 100%;
+                }
+
+                @include bem.elem('tab') {
+                        position:       relative;
+                        display:        flex;
+                        align-items:    center;
+                        padding-inline: calc(.5 * props.get(vars.$spacing));
+                        color:          props.get(vars.$tab--text-color);
+                        white-space:    nowrap;
+
+                        &::before {
+                                position:          absolute;
+                                inset-block-start: 50%;
+                                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
+                                z-index:           -10;
+                                block-size:        1.5em;
+                                content:           '';
+                                border-radius:     props.get(vars.$rounding);
+                                transform:         translateY(-50%);
+                        }
+
+                        &::after {
+                                position:         absolute;
+                                inset-block-end:  0;
+                                inset-inline:     calc(.5 * props.get(vars.$spacing));
+                                z-index:          10;
+                                display:          none;
+                                block-size:       props.get(vars.$indicator--width);
+                                content:          '';
+                                background-color: props.get(vars.$tab--selected--text-color);
+                        }
+
+                        &:link,
+                        &:visited {
+                                &:hover,
+                                &:active,
+                                &:focus-visible {
+                                        color: props.get(vars.$tab--selected--text-color);
+                                }
+
+                                &:focus-visible {
+                                        &::before {
+                                                color:           props.get(vars.$key-focus--text-color);
+                                                text-decoration: none;
+                                                outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                                box-shadow: 0 0 0
+                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                        props.get(vars.$key-focus--outline-color);
+                                        }
+                                }
+                        }
+
+                        @include bem.is('selected') {
+                                color: props.get(vars.$tab--selected--text-color);
+                
+                                &::after {
+                                        display: block;
+                                }
+                        }
+                }
+
+                @include bem.modifier('accent') {
+                        @include bem.elem('tab') {
+                                &::after {
+                                        background-color: props.get(vars.$tab--accent--text-color);
+                                }
+
+                                @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
new file mode 100644
index 0000000..4095629
--- /dev/null
+++ b/src/objects/_tabbar.vars.scss
@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use 'sass:string';
+@use '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;
+$tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !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;
+
+$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;
+
+$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 2b63737..9e4891d 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -7,141 +7,141 @@
 @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;
-        border-collapse: separate;
+        @include bem.object('table') {
+                border-spacing:  0;
+                border-collapse: separate;
 
-        @include bem.modifier('fixed') {
-            table-layout: fixed;
-        }
+                @include bem.modifier('fixed') {
+                        table-layout: fixed;
+                }
 
-        @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;
-            text-transform: props.get(vars.$heading--text-transform);
-            letter-spacing: props.get(vars.$heading--letter-spacing);
-        }
+                @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;
+                        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;
-            border-block-start-width: props.get(vars.$border-width);
+                @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') {
-                border-inline-end-width: props.get(vars.$border-width);
-            }
-        }
+                        @include bem.modifier('divider') {
+                                border-inline-end-width: props.get(vars.$border-width);
+                        }
+                }
 
-        @include bem.elem('row') {
-            &:last-child {
-                @include bem.elem('cell') {
-                    border-block-end-width: props.get(vars.$border-width);
-                }
-            }
-        }
+                @include bem.elem('row') {
+                        &:last-child {
+                                @include bem.elem('cell') {
+                                        border-block-end-width: props.get(vars.$border-width);
+                                }
+                        }
+                }
 
-        @include bem.modifier('flush') {
-            @include bem.elem('head-cell', 'cell') {
-                &:first-child {
-                    padding-inline-start: 0;
-                }
+                @include bem.modifier('flush') {
+                        @include bem.elem('head-cell', 'cell') {
+                                &:first-child {
+                                        padding-inline-start: 0;
+                                }
 
-                &:last-child {
-                    padding-inline-end: 0;
-                }
-            }
-        }
+                                &:last-child {
+                                        padding-inline-end: 0;
+                                }
+                        }
+                }
 
-        @include bem.modifier('box') {
-            @include bem.elem('cell') {
-                background-color: props.get(vars.$box--bg-color);
+                @include bem.modifier('box') {
+                        @include bem.elem('cell') {
+                                background-color: props.get(vars.$box--bg-color);
             
-                &:first-child {
-                    border-inline-start-width: props.get(vars.$border-width);
-                }
+                                &:first-child {
+                                        border-inline-start-width: props.get(vars.$border-width);
+                                }
             
-                &:last-child {
-                    border-inline-end-width: props.get(vars.$border-width);
-                }
-            }
+                                &:last-child {
+                                        border-inline-end-width: props.get(vars.$border-width);
+                                }
+                        }
     
-            @include bem.elem('row') {
-                &:first-child {
-                    @include bem.elem('cell') {
-                        &:first-child {
-                            border-start-start-radius: props.get(vars.$rounding);
-                        }
+                        @include bem.elem('row') {
+                                &:first-child {
+                                        @include bem.elem('cell') {
+                                                &:first-child {
+                                                        border-start-start-radius: props.get(vars.$rounding);
+                                                }
             
-                        &:last-child {
-                            border-start-end-radius: props.get(vars.$rounding);
-                        }
-                    }
-                }
+                                                &:last-child {
+                                                        border-start-end-radius: props.get(vars.$rounding);
+                                                }
+                                        }
+                                }
     
-                &:last-child {
-                    @include bem.elem('cell') {
-                        &:first-child {
-                            border-end-start-radius: props.get(vars.$rounding);
-                        }
+                                &:last-child {
+                                        @include bem.elem('cell') {
+                                                &:first-child {
+                                                        border-end-start-radius: props.get(vars.$rounding);
+                                                }
             
-                        &:last-child {
-                            border-end-end-radius: props.get(vars.$rounding);
-                        }
-                    }
-                }
-            }
-        }
+                                                &:last-child {
+                                                        border-end-end-radius: props.get(vars.$rounding);
+                                                }
+                                        }
+                                }
+                        }
+                }
 
-        @include bem.modifier('interactive') {
-            @include bem.elem('row') {
-                @include bem.elem('cell') {
-                    cursor: pointer;
-                }
+                @include bem.modifier('interactive') {
+                        @include bem.elem('row') {
+                                @include bem.elem('cell') {
+                                        cursor: pointer;
+                                }
 
-                &:hover {
-                    @include bem.elem('cell') {
-                        background-color: props.get(vars.$hover--bg-color);
-                    }
-                }
+                                &:hover {
+                                        @include bem.elem('cell') {
+                                                background-color: props.get(vars.$hover--bg-color);
+                                        }
+                                }
     
-                &:active {
-                    @include bem.elem('cell') {
-                        background-color: props.get(vars.$active--bg-color);
-                    }
-                }
-            }
+                                &:active {
+                                        @include bem.elem('cell') {
+                                                background-color: props.get(vars.$active--bg-color);
+                                        }
+                                }
+                        }
 
-            @include bem.modifier('box') {
-                @include bem.elem('row') {
-                    &:hover {
-                        @include bem.elem('cell') {
-                            background-color: props.get(vars.$box--hover--bg-color);
-                        }
-                    }
+                        @include bem.modifier('box') {
+                                @include bem.elem('row') {
+                                        &:hover {
+                                                @include bem.elem('cell') {
+                                                        background-color: props.get(vars.$box--hover--bg-color);
+                                                }
+                                        }
         
-                    &:active {
-                        @include bem.elem('cell') {
-                            background-color: props.get(vars.$box--active--bg-color);
-                        }
-                    }
-                }
-            }
-        }
+                                        &:active {
+                                                @include bem.elem('cell') {
+                                                        background-color: props.get(vars.$box--active--bg-color);
+                                                }
+                                        }
+                                }
+                        }
+                }
 
-        @include bem.modifier('sm') {
-            @include bem.elem('head-cell', 'cell') {
-                padding-block: props.get(vars.$pad-b--sm);
-            }
-        }
-    }
+                @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 d1d53d7..b8d8093 100644
--- a/src/objects/_table.vars.scss
+++ b/src/objects/_table.vars.scss
@@ -4,7 +4,7 @@
 
 $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)) !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;
diff --git a/src/objects/_tabs.scss b/src/objects/_tabs.scss
deleted file mode 100644
index 61085c2..0000000
--- a/src/objects/_tabs.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
-@use '../props' as *;
-
-@forward 'tabs.vars';
-@use 'tabs.vars' as vars;
-
-@mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
-
-    @include bem.object('tabs') {
-        position:        relative;
-        display:         flex;
-        gap:             props.get(vars.$spacing);
-        min-inline-size: 0;
-        block-size:      props.get(vars.$block-size);
-        padding-inline:  calc(.5 * props.get(vars.$spacing));
-        margin-inline:   calc(-.5 * props.get(vars.$spacing));
-        overflow-inline: auto;
-
-        &::after {
-            position:         absolute;
-            inset-block-end:  0;
-            inset-inline:     calc(.5 * props.get(vars.$spacing));
-            z-index:          -10;
-            block-size:       props.get(vars.$indicator--width);
-            content:          '';
-            background-color: props.get(vars.$railing--bg-color);
-        }
-
-        @include bem.modifier('quiet') {
-            &::after {
-                display: none;
-            }
-        }
-
-        @include bem.modifier('adapt') {
-            block-size:      100%;
-        }
-
-        @include bem.elem('tab') {
-            position:               relative;
-            display:                flex;
-            align-items:            center;
-            color:                  props.get(vars.$tab--text-color);
-            white-space:            nowrap;
-            border-block:           props.get(vars.$indicator--width) solid transparent;
-
-            &::before {
-                position:          absolute;
-                inset-block-start: 50%;
-                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i));
-                z-index:           -10;
-                block-size:        1.5em;
-                content:           '';
-                border-radius:     props.get(vars.$rounding);
-                transform:         translateY(-50%);
-            }
-
-            &:link,
-            &:visited {
-                &:hover,
-                &:active,
-                &:focus-visible {
-                    color: props.get(vars.$tab--selected--text-color);
-                }
-
-                &:focus-visible {
-                    &::before {
-                        color:           props.get(vars.$key-focus--text-color);
-                        text-decoration: none;
-                        outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                        box-shadow: 0 0 0
-                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                            props.get(vars.$key-focus--outline-color);
-                    }
-                }
-            }
-
-            @include bem.is('selected') {
-                color:                  props.get(vars.$tab--selected--text-color);
-                border-block-end-color: props.get(vars.$tab--selected--text-color);
-            }
-        }
-
-        @include bem.elem('caret') {
-            display: none;
-        }
-
-        @include bem.modifier('accent') {
-            @include bem.elem('tab') {
-                @include bem.is('selected') {
-                    color:                  props.get(vars.$tab--accent--text-color);
-                    border-block-end-color: props.get(vars.$tab--accent--text-color);
-                }
-            }
-        }
-
-        @include bem.is('collapsed') {
-            @include bem.elem('tab') {
-                display: none;
-
-                @include bem.is('selected') {
-                    display:                flex;
-                    color:                  props.get(vars.$tab--text-color);
-                    border-block-end-color: transparent;
-
-                    &:link,
-                    &:visited {
-                        &:hover,
-                        &:active,
-                        &:focus-visible {
-                            color: props.get(vars.$tab--selected--text-color);
-                        }
-                    }
-                }
-            }
-
-            @include bem.elem('caret') {
-                display: block;
-            }
-        }
-    }
-}
diff --git a/src/objects/_tabs.vars.scss b/src/objects/_tabs.vars.scss
deleted file mode 100644
index 08b24cb..0000000
--- a/src/objects/_tabs.vars.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'iro-sass/src/props';
-@use '../core.vars' as core;
-
-$block-size: props.def(--o-tabs--block-size, props.get(core.$size--700)) !default;
-$rounding:   props.def(--o-tabs--rounding, props.get(core.$rounding)) !default;
-$spacing:    props.def(--o-tabs--spacing, props.get(core.$size--400)) !default;
-$tab--pad-i: props.def(--o-tabs--tab--pad-i, props.get(core.$size--50)) !default;
-
-$indicator--width: props.def(--o-tabs--indicator--width, props.get(core.$border-width--medium)) !default; 
-
-$key-focus--border-width:  props.def(--o-tabs--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-tabs--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-tabs--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
-
-$tab--text-color:           props.def(--o-tabs--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default;
-$tab--selected--text-color: props.def(--o-tabs--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
-$tab--accent--text-color:   props.def(--o-tabs--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
-
-$railing--bg-color: props.def(--o-tabs--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
-
-$key-focus--text-color:    props.def(--o-tabs--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
-$key-focus--border-color:  props.def(--o-tabs--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--o-tabs--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 6c0e7d2..b89e148 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -7,159 +7,181 @@
 @use 'text-field.vars' as vars;
 
 @mixin -invalid {
-    $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
+        $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
     
-    @include bem.sibling-elem('bg') {
-        inset-block:   $focus-border-offset;
-        inset-inline:  $focus-border-offset;
-        border:        props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
-        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
-    }
+        @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') {
-            border-color: props.get(vars.$error--hover--border-color);
-        }
-    }
+        &:hover {
+                @include bem.sibling-elem('bg') {
+                        border-color: props.get(vars.$error--hover--border-color);
+                }
+        }
 
-    &:focus {
-        @include bem.sibling-elem('bg') {
-            border-color: props.get(vars.$error--focus--border-color);
-        }
-    }
+        &:focus {
+                @include bem.sibling-elem('bg') {
+                        border-color: props.get(vars.$error--focus--border-color);
+                }
+        }
 }
 
 @mixin -keyboard-focus {
-    @include bem.sibling-elem('bg') {
-        border-color:   props.get(vars.$key-focus--border-color);
-        outline:        props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
-        //outline-offset: props.get(vars.$focus --border);
-    }
+        @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;
-        background-color: props.get(vars.$bg-color);
-        border-radius:    props.get(vars.$rounding);
+                position:         relative;
+                min-inline-size:  0;
+                background-color: props.get(vars.$bg-color);
+                border-radius:    props.get(vars.$rounding);
 
-        @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);
-        }
+                @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);
+                }
 
-        @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;
+                @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;
 
-            &::placeholder {
-                font-style: italic;
-                color:      props.get(vars.$placeholder-color);
-                opacity:    1;
-            }
+                        &::placeholder {
+                                font-style: italic;
+                                color:      props.get(vars.$placeholder-color);
+                                opacity:    1;
+                        }
 
-            &:hover {
-                @include bem.sibling-elem('bg') {
-                    border-color: props.get(vars.$hover--border-color);
-                }
-            }
+                        &:hover {
+                                @include bem.sibling-elem('bg') {
+                                        border-color: props.get(vars.$hover--border-color);
+                                }
+                        }
 
-            &:focus {
-                outline: 0;
+                        &: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);
-                    border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
-                }
-            }
+                                @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);
+                                }
+                        }
 
-            &:invalid {
-                @include -invalid;
-            }
+                        &:invalid {
+                                @include -invalid;
+                        }
 
-            &:focus-visible,
-            &:invalid:focus-visible {
-                @include -keyboard-focus;
-            }
-        }
+                        &:focus-visible,
+                        &:invalid:focus-visible {
+                                @include -keyboard-focus;
+                        }
+                }
 
-        @include bem.modifier('extended') {
-            padding: props.get(vars.$extended--pad);
+                @include bem.modifier('extended') {
+                        padding: props.get(vars.$extended--pad);
 
-            @include bem.multi('&', 'elem' 'bg') {
-                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
-            }
+                        @include bem.multi('&', 'elem' 'bg') {
+                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
+                        }
 
-            @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.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.is('invalid') {
-            @include bem.elem('native') {
-                @include -invalid;
+                @include bem.modifier('pill') {
+                        @include bem.multi('&', 'elem' 'bg') {
+                                border-radius: 100em;
+                        }
 
-                &:focus-visible {
-                    @include -keyboard-focus;
-                }
-            }
-        }
+                        @include bem.elem('native') {
+                                padding-inline: props.get(vars.$pad-i-pill);
 
-        @include bem.is('disabled') {
-            background-color: props.get(vars.$disabled--bg-color);
+                                &:focus {
+                                        @include bem.sibling-elem('bg') {
+                                                border-radius: 100em;
+                                        }
+                                }
+                        }
 
-            @include bem.elem('native') {
-                color: props.get(vars.$disabled--text-color);
+                        @include bem.modifier('extended') {
+                                @include bem.elem('native') {
+                                        padding-inline: props.get(vars.$pad-i);
+                                }
+                        }
+                }
 
-                &::placeholder {
-                    color: props.get(vars.$disabled--placeholder-color);
-                }
-            }
+                @include bem.is('invalid') {
+                        @include bem.elem('native') {
+                                @include -invalid;
 
-            @include bem.elem('bg') {
-                border-color: props.get(vars.$disabled--border-color);
-            }
+                                &:focus-visible {
+                                        @include -keyboard-focus;
+                                }
+                        }
+                }
 
-            @include bem.is('invalid') {
-                @include bem.elem('native') {
-                    @include bem.sibling-elem('bg') {
-                        border-color: props.get(vars.$disabled--border-color);
-                    }
-                }
-            }
+                @include bem.is('disabled') {
+                        background-color: props.get(vars.$disabled--bg-color);
 
-            @include bem.elem('native') {
-                &:invalid {
-                    @include bem.sibling-elem('bg') {
-                        border-color: props.get(vars.$disabled--border-color);
-                    }
-                }
-            }
-        }
-    }
+                        @include bem.elem('native') {
+                                color: props.get(vars.$disabled--text-color);
+
+                                &::placeholder {
+                                        color: props.get(vars.$disabled--placeholder-color);
+                                }
+                        }
+
+                        @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') {
+                                                border-color: props.get(vars.$disabled--border-color);
+                                        }
+                                }
+                        }
+
+                        @include bem.elem('native') {
+                                &:invalid {
+                                        @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 833eacb..51099d8 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -4,9 +4,10 @@
 
 $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)) !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;
 
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 73a8cb0..60a98af 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -9,96 +9,96 @@
 @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;
-        border-radius:  props.get(vars.$rounding);
-        outline:        props.get(vars.$border-color) solid props.get(vars.$border-width);
-        outline-offset: calc(-1 * props.get(vars.$border-width));
-        opacity:       .75;
+        @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);
+                opacity:       .75;
 
-        &:hover,
-        &:active,
-        &:focus-visible {
-            outline-color: props.get(vars.$hover--border-color);
-            opacity:       1;
-        }
+                &:hover,
+                &:active,
+                &:focus-visible {
+                        outline-color: props.get(vars.$hover--border-color);
+                        opacity:       1;
+                }
 
-        @include bem.is('selected') {
-            $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
+                @include bem.is('selected') {
+                        $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
 
-            margin:        $focus-border-offset;
-            border:        props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
-            border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
-            outline:       none;
-            opacity:       1;
-        }
+                        margin:        $focus-border-offset;
+                        outline:       none;
+                        border:        props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
+                        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
+                        opacity:       1;
+                }
 
-        @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;
-        }
+                @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;
+                }
 
-        @include bem.elem('icon') {
-            position:           absolute;
-            inset-block-start:  50%;
-            inset-inline-start: 50%;
-            transform:          translate(-50%, -50%);
-        }
+                @include bem.elem('icon') {
+                        position:           absolute;
+                        inset-block-start:  50%;
+                        inset-inline-start: 50%;
+                        transform:          translate(-50%, -50%);
+                }
 
-        &:focus-visible {
-            $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
+                &:focus-visible {
+                        $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
 
-            margin:         $focus-border-offset;
-            border:         props.get(vars.$key-focus--border-offset) solid transparent;
-            border-radius:  calc(props.get(vars.$rounding) - $focus-border-offset);
-            outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-            outline-offset: 0;
-            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);
-        }
+                        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))
+                                props.get(vars.$key-focus--outline-color);
+                }
 
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                outline-color: props.get(vars.$static-themes, $theme, --border);
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                outline-color: props.get(vars.$static-themes, $theme, --border);
 
-                &:hover,
-                &:active,
-                &:focus-visible {
-                    outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
-                }
+                                &:hover,
+                                &:active,
+                                &:focus-visible {
+                                        outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
+                                }
     
-                @include bem.is('selected') {
-                    border-color: props.get(vars.$static-themes, $theme, --selected, --border);
-                }
+                                @include bem.is('selected') {
+                                        border-color: props.get(vars.$static-themes, $theme, --selected, --border);
+                                }
 
-                &:focus-visible {
-                    border-color:  transparent;
-                    outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
-                    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);
-                }
-            }
-        }
-    }
+                                &: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))
+                                                props.get(vars.$static-themes, $theme, --key-focus, --outline);
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index ba8cebe..e49e52e 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -4,7 +4,7 @@
 @use '../core.vars' as core;
 
 $size:         props.def(--o-thumbnail--size, props.get(core.$size--700)) !default;
-$rounding:     props.def(--o-thumbnail--rounding, props.get(core.$rounding)) !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;
 
@@ -28,24 +28,24 @@ $size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !def
 $static-themes: props.def(--o-thumbnail, (), 'color');
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $thumbnail-theme: --static-#{string.slice($theme, 3)};
+        $thumbnail-theme: --static-#{string.slice($theme, 3)};
 
-    $static-themes: props.merge($static-themes, (
-        $thumbnail-theme: (
-            --border: props.get(core.$transparent-colors, $theme, --400),
+        $static-themes: props.merge($static-themes, (
+                $thumbnail-theme: (
+                        --border: props.get(core.$transparent-colors, $theme, --400),
     
-            --hover: (
-                --border: props.get(core.$transparent-colors, $theme, --500),
-            ),
+                        --hover: (
+                                --border: props.get(core.$transparent-colors, $theme, --500),
+                        ),
             
-            --selected: (
-                --border: props.get(core.$transparent-colors, $theme, --900),
-            ),
+                        --selected: (
+                                --border: props.get(core.$transparent-colors, $theme, --900),
+                        ),
 
-            --key-focus: (
-                --border:  props.get(core.$transparent-colors, $theme, --900),
-                --outline: props.get(core.$transparent-colors, $theme, --300),
-            ),
-        )
-    ));
+                        --key-focus: (
+                                --border:  props.get(core.$transparent-colors, $theme, --900),
+                                --outline: props.get(core.$transparent-colors, $theme, --300),
+                        ),
+                )
+        ));
 }
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index 91a7785..a99add8 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -7,20 +7,20 @@
 @use 'blockquotes.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.scope('blockquotes') {
-        blockquote {
-            padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
-            margin-block:         props.get(vars.$margin-bs) 0;
-            margin-inline:        1px 0;
-            border-inline-start:  props.get(vars.$border-width) solid props.get(vars.$border-color);
-        }
+        @include bem.scope('blockquotes') {
+                blockquote {
+                        padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
+                        margin-block:         props.get(vars.$margin-bs) 0;
+                        margin-inline:        1px 0;
+                        border-inline-start:  props.get(vars.$border-width) solid props.get(vars.$border-color);
+                }
 
-        @include bem.modifier('compact') {
-            blockquote {
-                padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width));
-            }
-        }
-    }
+                @include bem.modifier('compact') {
+                        blockquote {
+                                padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width));
+                        }
+                }
+        }
 }
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
index 65c6d2f..f307f58 100644
--- a/src/scopes/_body.scss
+++ b/src/scopes/_body.scss
@@ -7,52 +7,53 @@
 @use 'body.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.scope('body') {
-        font-size: props.get(vars.$font-size);
+        @include bem.scope('body') {
+                font-size: props.get(vars.$font-size);
+                line-height: props.get(vars.$line-height);
 
-        strong {
-            color: props.get(vars.$strong--text-color);
-        }
+                strong {
+                        color: props.get(vars.$strong--text-color);
+                }
 
-        p,
-        ul,
-        ol {
-            max-inline-size: props.get(vars.$paragraph--max-inline-size);
-            margin-block-start: props.get(vars.$paragraph--margin-bs);
-        }
+                p,
+                ul,
+                ol {
+                        max-inline-size: props.get(vars.$paragraph--max-inline-size);
+                        margin-block-start: props.get(vars.$paragraph--margin-bs);
+                }
 
-        ul,
-        ol {
-            box-sizing: border-box;
-        }
+                ul,
+                ol {
+                        box-sizing: border-box;
+                }
 
-        img {
-            display:            block;
-            inline-size:        auto;
-            max-inline-size:    100%;
-            block-size:         auto;
-            max-block-size:     props.get(vars.$img--max-block-size);
-            margin-block-start: props.get(vars.$paragraph--margin-bs);
-        }
+                img {
+                        display:            block;
+                        inline-size:        auto;
+                        max-inline-size:    100%;
+                        block-size:         auto;
+                        max-block-size:     props.get(vars.$img--max-block-size);
+                        margin-block-start: props.get(vars.$paragraph--margin-bs);
+                }
 
-        figure {
-            margin-block-start: props.get(vars.$paragraph--margin-bs);
+                figure {
+                        margin-block-start: props.get(vars.$paragraph--margin-bs);
 
-            img {
-                margin-block: 0;
-            }
-        }
+                        img {
+                                margin-block: 0;
+                        }
+                }
 
-        hr {
-            margin-block: calc(2 * props.get(vars.$paragraph--margin-bs));
-        }
+                hr {
+                        margin-block: calc(2 * props.get(vars.$paragraph--margin-bs));
+                }
 
-        table,
-        pre,
-        blockquote {
-            margin-block-start: props.get(vars.$paragraph--margin-bs);
-        }
-    } 
+                table,
+                pre,
+                blockquote {
+                        margin-block-start: props.get(vars.$paragraph--margin-bs);
+                }
+        } 
 }
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
index 6c38c3f..1de2cfd 100644
--- a/src/scopes/_body.vars.scss
+++ b/src/scopes/_body.vars.scss
@@ -4,8 +4,9 @@
 @use '../layouts/container.vars' as container;
 
 $font-size:                  props.def(--s-body--font-size, props.get(core.$font-size--150)) !default;
+$line-height:                props.def(--s-body--line-height, calc(props.get(core.$font--standard--line-height) + .1)) !default;
 $paragraph--margin-bs:       props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default;
 $paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default;
-$img--max-block-size:        props.def(--s-body--img--max-block-size, calc(100vh - props.get(core.$size--2400))) !default;
+$img--max-block-size:        props.def(--s-body--img--max-block-size, none) !default;
 
 $strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default;
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index 9b2a63d..8147a14 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -7,34 +7,34 @@
 @use 'code.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.scope('code') {
-        code {
-            padding-block:    props.get(vars.$inline--pad-b);
-            padding-inline:   props.get(vars.$inline--pad-i);
-            color:            props.get(vars.$inline--fg);
-            background-color: props.get(vars.$inline--bg);
-            border-radius:    props.get(vars.$inline--rounding);
-        }
+        @include bem.scope('code') {
+                code {
+                        padding-block:    props.get(vars.$inline--pad-b);
+                        padding-inline:   props.get(vars.$inline--pad-i);
+                        color:            props.get(vars.$inline--fg);
+                        background-color: props.get(vars.$inline--bg);
+                        border-radius:    props.get(vars.$inline--rounding);
+                }
 
-        pre {
-            padding-block:    props.get(vars.$block--pad-b);
-            padding-inline:   props.get(vars.$block--pad-i);
-            margin-block:     props.get(vars.$block--margin-bs) 0;
-            margin-inline:    0;
-            color:            props.get(vars.$block--fg);
-            background-color: props.get(vars.$block--bg);
-            border-radius:    props.get(vars.$block--rounding);
+                pre {
+                        padding-block:    props.get(vars.$block--pad-b);
+                        padding-inline:   props.get(vars.$block--pad-i);
+                        margin-block:     props.get(vars.$block--margin-bs) 0;
+                        margin-inline:    0;
+                        color:            props.get(vars.$block--fg);
+                        background-color: props.get(vars.$block--bg);
+                        border-radius:    props.get(vars.$block--rounding);
 
-            code {
-                display:           inline-block;
-                padding:           0;
-                margin-inline-end: props.get(vars.$block--pad-i);
-                color:             currentColor;
-                background-color:  transparent;
-                border-radius:     0;
-            }
-        }
-    }
+                        code {
+                                display:           inline-block;
+                                padding:           0;
+                                margin-inline-end: props.get(vars.$block--pad-i);
+                                color:             currentColor;
+                                background-color:  transparent;
+                                border-radius:     0;
+                        }
+                }
+        }
 }
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
index 8a040c2..08472f2 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -4,12 +4,12 @@
 
 $inline--pad-i:    props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default;
 $inline--pad-b:    props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default;
-$inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding)) !default;
+$inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding--sm)) !default;
 
 $block--pad-i:     props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default;
 $block--pad-b:     props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default;
 $block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
-$block--rounding:  props.def(--s-code--block--rounding, props.get(core.$rounding)) !default;
+$block--rounding:  props.def(--s-code--block--rounding, props.get(core.$rounding--sm)) !default;
 
 $inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default;
 $inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default;
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss
index f619506..d931820 100644
--- a/src/scopes/_figures.scss
+++ b/src/scopes/_figures.scss
@@ -1,20 +1,21 @@
 @use 'sass:meta';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
-@use '../props' as *;
-
-@forward 'figures.vars';
-@use 'figures.vars' as vars;
+@use '../objects/figure.vars' as figure;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include bem.scope('figures') {
+                figcaption {
+                        padding-block:    props.get(figure.$pad-b);
+                        font-size:        props.get(figure.$font-size);
+                        color:            props.get(figure.$text-color);
+                        border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color);
 
-    @include bem.scope('figures') {
-        figcaption {
-            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:       '';
+                        }
+                }
+        }
 }
diff --git a/src/scopes/_figures.vars.scss b/src/scopes/_figures.vars.scss
deleted file mode 100644
index 67c8cd5..0000000
--- a/src/scopes/_figures.vars.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@use 'iro-sass/src/props';
-@use '../core.vars' as core;
-@use './implicit.vars' as implicit;
-
-$pad-b:        props.def(--s-figures--pad-b, props.get(core.$size--100)) !default;
-$border-width: props.def(--s-figures--border-width, props.get(core.$border-width--thin)) !default;
-$font-size:    props.def(--s-figures--font-size, props.get(core.$font-size--100)) !default;
-
-$text-color:   props.def(--s-figures--text-color, props.get(core.$theme, --text-mute), 'color') !default;
-$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border), 'color') !default;
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 32559cd..f8a7854 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -4,64 +4,64 @@
 @use '../objects/heading.vars' as heading;
 
 @mixin styles {
-    /* stylelint-disable-next-line scss/dollar-variable-pattern */
-    $-size-map: (
-        xs: h6,
-        sm: h5,
-        md: h4,
-        lg: h3,
-        xl: h2,
-        xxl: h1,
-    );
+        /* stylelint-disable-next-line scss/dollar-variable-pattern */
+        $-size-map: (
+                xs: h6,
+                sm: h5,
+                md: h4,
+                lg: h3,
+                xl: h2,
+                xxl: h1,
+        );
 
-    @include bem.scope('headings') {
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-            display:               block;
-            margin-block-start:    props.get(heading.$margin-bs);
-            font-family:           props.get(heading.$font-family);
-            font-weight:           props.get(heading.$font-weight);
-            font-feature-settings: props.get(heading.$feature-settings);
-            line-height:           props.get(heading.$line-height);
-            text-transform:        none;
-            letter-spacing:        normal;
-            transform:             translateX(props.get(heading.$offset));
-        }
+        @include bem.scope('headings') {
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                        display:               block;
+                        margin-block-start:    props.get(heading.$margin-bs);
+                        font-family:           props.get(heading.$font-family);
+                        font-weight:           props.get(heading.$font-weight);
+                        font-feature-settings: props.get(heading.$feature-settings);
+                        line-height:           props.get(heading.$line-height);
+                        text-transform:        none;
+                        letter-spacing:        normal;
+                        transform:             translateX(props.get(heading.$offset));
+                }
 
-        @include bem.elem('highlight') {
-            background-image: linear-gradient(to top,
-            transparent .15em,
-            props.get(heading.$bg-color) .15em,
-            props.get(heading.$bg-color) .6em,
-            transparent .6em);
-        }
+                @include bem.elem('highlight') {
+                        background-image: linear-gradient(to top,
+                        transparent .15em,
+                        props.get(heading.$bg-color) .15em,
+                        props.get(heading.$bg-color) .6em,
+                        transparent .6em);
+                }
 
-        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes {
-            #{map.get($-size-map, $mod)} {
-                font-family:           props.get($font-family);
-                font-size:             props.get($font-size);
-                font-weight:           props.get($font-weight);
-                font-feature-settings: props.get($feature-settings);
-                line-height:           props.get($line-height);
-                letter-spacing:        props.get($letter-spacing);
-            }
-        }
+                @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes {
+                        #{map.get($-size-map, $mod)} {
+                                font-family:           props.get($font-family);
+                                font-size:             props.get($font-size);
+                                font-weight:           props.get($font-weight);
+                                font-feature-settings: props.get($feature-settings);
+                                line-height:           props.get($line-height);
+                                letter-spacing:        props.get($letter-spacing);
+                        }
+                }
 
-        @include bem.modifier('display') {
-            @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes {
-                #{map.get($-size-map, $mod)} {
-                    font-family:           props.get($font-family);
-                    font-size:             props.get($font-size);
-                    font-weight:           props.get($font-weight);
-                    font-feature-settings: props.get($feature-settings);
-                    line-height:           props.get($line-height);
-                    letter-spacing:        props.get($letter-spacing);
-                }
-            }
-        }
-    }
+                @include bem.modifier('display') {
+                        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes {
+                                #{map.get($-size-map, $mod)} {
+                                        font-family:           props.get($font-family);
+                                        font-size:             props.get($font-size);
+                                        font-weight:           props.get($font-weight);
+                                        font-feature-settings: props.get($feature-settings);
+                                        line-height:           props.get($line-height);
+                                        letter-spacing:        props.get($letter-spacing);
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 020e311..cee1639 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -1,5 +1,7 @@
+@use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use '../props' as *;
@@ -9,151 +11,170 @@
 @use 'implicit.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @layer scope {
-        html {
-            accent-color:    props.get(core.$theme, --accent, --600);
-            scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
-        }
+        @layer scope {
+                html {
+                        accent-color:    props.get(core.$theme, --accent, --600);
+                        scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
+                }
 
-        body {
-            padding:               0;
-            margin:                0;
-            font-family:           props.get(vars.$body--font-family);
-            font-size:             props.get(vars.$body--font-size);
-            font-feature-settings: props.get(vars.$body--feature-settings);
-            line-height:           props.get(vars.$body--line-height);
-            color:                 props.get(core.$theme, --text);
-            background-color:      props.get(core.$theme, --bg-base);
-        }
+                body {
+                        padding:               0;
+                        margin:                0;
+                        font-family:           props.get(vars.$body--font-family);
+                        font-size:             props.get(vars.$body--font-size);
+                        font-feature-settings: props.get(vars.$body--feature-settings);
+                        line-height:           props.get(vars.$body--line-height);
+                        color:                 props.get(core.$theme, --text);
+                        background-color:      props.get(core.$theme, --bg-base);
+                }
 
-        pre,
-        code {
-            font-family:           props.get(vars.$code--font-family);
-            font-size:             props.get(vars.$code--font-size);
-            font-feature-settings: props.get(vars.$code--feature-settings);
-            line-height:           props.get(vars.$code--line-height);
-        }
+                pre,
+                code {
+                        font-family:           props.get(vars.$code--font-family);
+                        font-size:             props.get(vars.$code--font-size);
+                        font-feature-settings: props.get(vars.$code--feature-settings);
+                        line-height:           props.get(vars.$code--line-height);
+                }
 
-        pre {
-            margin:     0;
-            overflow-x: auto;
+                pre {
+                        margin:     0;
+                        overflow-x: auto;
 
-            code {
-                font-size: 1em;
-                color:     currentColor;
-            }
-        }
+                        code {
+                                font-size: 1em;
+                                color:     currentColor;
+                        }
+                }
 
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-            margin-block:          props.get(vars.$heading--margin-bs) 0;
-            font-family:           props.get(vars.$heading--font-family);
-            font-size:             props.get(vars.$heading--font-size);
-            font-weight:           props.get(vars.$heading--font-weight);
-            font-feature-settings: props.get(vars.$heading--feature-settings);
-            line-height:           props.get(vars.$heading--line-height);
-            color:                 props.get(vars.$heading--color);
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                        margin-block:          props.get(vars.$heading--margin-bs) 0;
+                        font-family:           props.get(vars.$heading--font-family);
+                        font-size:             props.get(vars.$heading--font-size);
+                        font-weight:           props.get(vars.$heading--font-weight);
+                        font-feature-settings: props.get(vars.$heading--feature-settings);
+                        line-height:           props.get(vars.$heading--line-height);
+                        color:                 props.get(vars.$heading--color);
 
-            & + & {
-                margin-block-start: props.get(vars.$heading--margin-bs-sibling);
-            }
-        }
+                        & + & {
+                                margin-block-start: props.get(vars.$heading--margin-bs-sibling);
+                        }
+                }
 
-        p {
-            margin-block: props.get(vars.$paragraph--margin-bs) 0;
+                p {
+                        margin-block: props.get(vars.$paragraph--margin-bs) 0;
 
-            &:empty {
-                display: none;
-            }
-        }
+                        &:empty {
+                                display: none;
+                        }
+                }
 
-        strong {
-            font-weight: bold;
-        }
+                strong {
+                        font-weight: bold;
+                }
 
-        small {
-            font-size: props.get(vars.$small--font-size);
-        }
+                small {
+                        font-size: props.get(vars.$small--font-size);
+                }
 
-        ul,
-        ol {
-            padding:    0;
-            margin:     0;
-            list-style: none;
-        }
+                ul,
+                ol {
+                        padding:    0;
+                        margin:     0;
+                        list-style: none;
+                }
 
-        li {
-            padding: 0;
-            margin:  0;
-        }
+                li {
+                        padding: 0;
+                        margin:  0;
+                }
 
-        :focus,
-        :focus-visible {
-            outline: 0;
-        }
+                :focus,
+                :focus-visible {
+                        outline: 0;
+                }
 
-        :link,
-        :visited {
-            color:           currentColor;
-            text-decoration: none;
-        }
+                :link,
+                :visited {
+                        color:           currentColor;
+                        text-decoration: none;
+                }
 
 
-        button,
-        input,
-        textarea {
-            box-sizing:     content-box;
-            padding:        0;
-            margin:         0;
-            font-family:    inherit;
-            font-size:      1em;
-            font-style:     inherit;
-            font-weight:    inherit;
-            line-height:    inherit;
-            color:          currentColor;
-            text-align:     inherit;
-            text-transform: inherit;
-            appearance:     none;
-            background:     none;
-            border:         0;
+                button,
+                input,
+                textarea {
+                        box-sizing:     content-box;
+                        padding:        0;
+                        margin:         0;
+                        font-family:    inherit;
+                        font-size:      1em;
+                        font-style:     inherit;
+                        font-weight:    inherit;
+                        line-height:    inherit;
+                        color:          currentColor;
+                        text-align:     inherit;
+                        text-transform: inherit;
+                        appearance:     none;
+                        background:     none;
+                        border:         0;
 
-            &::-moz-focus-inner {
-                border: 0;
-            }
-        }
+                        &::-moz-focus-inner {
+                                border: 0;
+                        }
+                }
 
-        input,
-        textarea {
-            &::placeholder {
-                color:   props.get(core.$theme, --text-mute);
-                opacity: 1;
-            }
+                input,
+                textarea {
+                        &::placeholder {
+                                color:   props.get(core.$theme, --text-mute);
+                                opacity: 1;
+                        }
 
-            &:disabled {
-                color: props.get(core.$theme, --text-disabled);
-            }
-        }
+                        &:disabled {
+                                color: props.get(core.$theme, --text-disabled);
+                        }
+                }
 
-        textarea {
-            block-size: calc(1em * props.get(core.$font--standard--line-height));
-        }
+                textarea {
+                        block-size: calc(1em * props.get(core.$font--standard--line-height));
+                }
 
-        hr {
-            block-size:       props.get(core.$border-width--thin);
-            margin:           0;
-            background-color: props.get(core.$theme, --border);
-            border:           0;
-        }
+                hr {
+                        block-size:       props.get(core.$border-width--thin);
+                        margin:           0;
+                        background-color: props.get(core.$theme, --border);
+                        border:           0;
+                }
 
-        figure {
-            padding: 0;
-            margin:  0;
-        }
-    }
+                figure {
+                        padding: 0;
+                        margin:  0;
+                }
+
+                @each $theme in map.keys(props.get(core.$transparent-colors)) {
+                        .t-static-#{string.slice($theme, 3)} {
+                                color: props.get(core.$transparent-colors, $theme, --800);
+
+                                h1,
+                                h2,
+                                h3,
+                                h4,
+                                h5,
+                                h6 {
+                                        color: props.get(core.$transparent-colors, $theme, --900);
+                                }
+
+                                hr {
+                                        color: props.get(core.$transparent-colors, $theme, --400);
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 4092633..9ade0c2 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -9,111 +9,111 @@
 @use 'links.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.scope('links') {
-        :link,
-        :visited {
-            color:                     currentColor;
-            text-decoration:           underline;
-            text-decoration-thickness: props.get(vars.$underline-width);
-            text-decoration-color:     props.get(vars.$underline-color);
-            border-radius:             props.get(vars.$rounding);
-            box-decoration-break:      clone;
+        @include bem.scope('links') {
+                :link,
+                :visited {
+                        color:                     currentColor;
+                        text-decoration:           underline;
+                        text-decoration-thickness: props.get(vars.$underline-width);
+                        text-decoration-color:     props.get(vars.$underline-color);
+                        border-radius:             props.get(vars.$rounding-sm);
+                        box-decoration-break:      clone;
 
-            &:hover {
-                text-decoration:           underline;
-                text-decoration-skip-ink:  none;
-                text-decoration-thickness: props.get(vars.$hover--underline-width);
-            }
+                        &:hover {
+                                text-decoration:           underline;
+                                text-decoration-thickness: props.get(vars.$hover--underline-width);
+                                text-decoration-skip-ink:  none;
+                        }
 
-            &:focus-visible {
-                color:           props.get(vars.$key-focus--text-color);
-                text-decoration: none;
-                outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                box-shadow:
-                    0
-                    0
-                    0
-                    calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                    props.get(vars.$key-focus--outline-color);
-            }
-        }
+                        &:focus-visible {
+                                color:           props.get(vars.$key-focus--text-color);
+                                text-decoration: none;
+                                outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                box-shadow:
+                                        0
+                                        0
+                                        0
+                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                        props.get(vars.$key-focus--outline-color);
+                        }
+                }
 
-        @include bem.modifier('invisible') {
-            :link,
-            :visited {
-                text-decoration: none;
-            }
-        }
+                @include bem.modifier('invisible') {
+                        :link,
+                        :visited {
+                                text-decoration: none;
+                        }
+                }
 
-        @include bem.modifier('colored') {
-            :link {
-                color:                 props.get(vars.$colored--text-color);
-                text-decoration-color: props.get(vars.$colored--underline-color);
+                @include bem.modifier('colored') {
+                        :link {
+                                color:                 props.get(vars.$colored--text-color);
+                                text-decoration-color: props.get(vars.$colored--underline-color);
 
-                &:hover {
-                    color:             props.get(vars.$colored--hover--text-color);
-                }
-            }
+                                &:hover {
+                                        color:             props.get(vars.$colored--hover--text-color);
+                                }
+                        }
 
-            :visited {
-                color:                 props.get(vars.$colored--visited--text-color);
-                text-decoration-color: props.get(vars.$colored--visited--underline-color);
+                        :visited {
+                                color:                 props.get(vars.$colored--visited--text-color);
+                                text-decoration-color: props.get(vars.$colored--visited--underline-color);
 
-                &:hover {
-                    color:             props.get(vars.$colored--visited--hover--text-color);
-                }
-            }
-        }
+                                &:hover {
+                                        color:             props.get(vars.$colored--visited--hover--text-color);
+                                }
+                        }
+                }
 
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include bem.modifier(string.slice($theme, 3)) {
-                :link,
-                :visited {
-                    color:                 props.get(vars.$static-themes, $theme, --text-color);
-                    text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                :link,
+                                :visited {
+                                        color:                 props.get(vars.$static-themes, $theme, --text-color);
+                                        text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
 
-                    &:hover {
-                        color:             props.get(vars.$static-themes, $theme, --hover, --text-color);
-                    }
+                                        &:hover {
+                                                color:             props.get(vars.$static-themes, $theme, --hover, --text-color);
+                                        }
 
-                    &:focus-visible {
-                        color:         props.get(vars.$static-themes, $theme, --key-focus, --text-color);
-                        outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
-                        box-shadow:
-                            0
-                            0
-                            0
-                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                            props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
-                    }
-                }
-            }
-        }
+                                        &:focus-visible {
+                                                color:         props.get(vars.$static-themes, $theme, --key-focus, --text-color);
+                                                outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
+                                                box-shadow:
+                                                        0
+                                                        0
+                                                        0
+                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                        props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
+                                        }
+                                }
+                        }
+                }
 
-        @include bem.elem('image') {
-            img {
-                margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
-                border:        props.get(vars.$key-focus--border-offset) solid transparent;
-                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-            }
+                @include bem.elem('image') {
+                        img {
+                                margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
+                                border:        props.get(vars.$key-focus--border-offset) solid transparent;
+                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                        }
     
-            &:link,
-            &:visited {
-                &:focus-visible {
-                    outline:    none;
-                    box-shadow: none;
+                        &:link,
+                        &:visited {
+                                &:focus-visible {
+                                        outline:    none;
+                                        box-shadow: none;
     
-                    img {
-                        outline: props.get(vars.$key-focus--border-color) solid
-                            props.get(vars.$key-focus--border-width);
-                        box-shadow: 0 0 0
-                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                            props.get(vars.$key-focus--outline-color);
-                    }
-                }
-            }
-        }
-    }
+                                        img {
+                                                outline: props.get(vars.$key-focus--border-color) solid
+                                                        props.get(vars.$key-focus--border-width);
+                                                box-shadow: 0 0 0
+                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                        props.get(vars.$key-focus--outline-color);
+                                        }
+                                }
+                        }
+                }
+        }
 }
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index 91a73ab..c69cc32 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -4,6 +4,7 @@
 @use '../core.vars' as core;
 
 $rounding:               props.def(--s-links--rounding, props.get(core.$rounding)) !default;
+$rounding-sm:            props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default;
 $underline-width:        props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default;
 $hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default;
 
@@ -27,22 +28,22 @@ $key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.
 
 $static-themes: props.def(--s-links, (), 'color');
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $link-theme: --static-#{string.slice($theme, 3)};
+        $link-theme: --static-#{string.slice($theme, 3)};
 
-    $static-themes: props.merge($static-themes, (
-        $link-theme: (
-            --text-color:        props.get(core.$transparent-colors, $theme, --800),
-            --underline-color:   props.get(core.$transparent-colors, $theme, --500),
+        $static-themes: props.merge($static-themes, (
+                $link-theme: (
+                        --text-color:        currentColor,
+                        --underline-color:   props.get(core.$transparent-colors, $theme, --500),
 
-            --hover: (
-                --text-color:    props.get(core.$transparent-colors, $theme, --900),
-            ),
+                        --hover: (
+                                --text-color:    props.get(core.$transparent-colors, $theme, --900),
+                        ),
 
-            --key-focus: (
-                --text-color:    props.get(core.$transparent-colors, $theme, --900),
-                --border-color:  props.get(core.$transparent-colors, $theme, --900),
-                --outline-color: props.get(core.$transparent-colors, $theme, --300),
-            ),
-        )
-    ));
+                        --key-focus: (
+                                --text-color:    props.get(core.$transparent-colors, $theme, --900),
+                                --border-color:  props.get(core.$transparent-colors, $theme, --900),
+                                --outline-color: props.get(core.$transparent-colors, $theme, --300),
+                        ),
+                )
+        ));
 }
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index 98b1df1..fc8a577 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -8,53 +8,53 @@
 @use 'lists.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.scope('lists') {
-        ul,
-        ol {
-            padding-inline-start: props.get(vars.$indent);
-            margin-block-start:   props.get(vars.$margin-bs);
+        @include bem.scope('lists') {
+                ul,
+                ol {
+                        padding-inline-start: props.get(vars.$indent);
+                        margin-block-start:   props.get(vars.$margin-bs);
 
-            ul,
-            ol {
-                margin-block-start: 0;
-            }
-        }
+                        ul,
+                        ol {
+                                margin-block-start: 0;
+                        }
+                }
 
-        ul {
-            list-style: disc;
-        }
+                ul {
+                        list-style: disc;
+                }
 
-        ol {
-            list-style: decimal;
-        }
+                ol {
+                        list-style: decimal;
+                }
 
-        dl {
-            padding:       0;
-            margin-block:  props.get(vars.$margin-bs) 0;
-            margin-inline: 0;
-        }
+                dl {
+                        padding:       0;
+                        margin-block:  props.get(vars.$margin-bs) 0;
+                        margin-inline: 0;
+                }
 
-        dt {
-            font-weight: bold;
-            color:       props.get(core.$theme, --heading);
-        }
+                dt {
+                        font-weight: bold;
+                        color:       props.get(core.$theme, --heading);
+                }
 
-        dd {
-            margin-block:  0;
-            margin-inline: props.get(vars.$indent) 0;
-        }
+                dd {
+                        margin-block:  0;
+                        margin-inline: props.get(vars.$indent) 0;
+                }
 
-        @include bem.modifier('compact') {
-            ul,
-            ol {
-                padding-inline-start: calc(props.get(vars.$compact--indent) - 3px);
-            }
+                @include bem.modifier('compact') {
+                        ul,
+                        ol {
+                                padding-inline-start: calc(props.get(vars.$compact--indent) - 3px);
+                        }
 
-            dd {
-                margin-inline-start: calc(props.get(vars.$compact--indent) - 3px);
-            }
-        }
-    }
+                        dd {
+                                margin-inline-start: calc(props.get(vars.$compact--indent) - 3px);
+                        }
+                }
+        }
 }
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index 0a87eaa..5b64301 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -8,95 +8,95 @@
 @use 'tables.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.scope('tables') {
-        table {
-            margin-block-start: props.get(vars.$margin-bs);
-            border-spacing:     0;
-            border-collapse:    separate;
-        }
+        @include bem.scope('tables') {
+                table {
+                        margin-block-start: props.get(vars.$margin-bs);
+                        border-spacing:     0;
+                        border-collapse:    separate;
+                }
 
-        th {
-            padding-block:  props.get(table.$pad-b);
-            padding-inline: props.get(table.$pad-i);
-            font-family:    props.get(table.$heading--font-family);
-            font-size:      props.get(table.$heading--font-size);
-            font-weight:    props.get(table.$heading--font-weight);
-            color:          props.get(table.$heading-color);
-            text-align:     start;
-            text-transform: props.get(table.$heading--text-transform);
-            letter-spacing: props.get(table.$heading--letter-spacing);
-        }
+                th {
+                        padding-block:  props.get(table.$pad-b);
+                        padding-inline: props.get(table.$pad-i);
+                        font-family:    props.get(table.$heading--font-family);
+                        font-size:      props.get(table.$heading--font-size);
+                        font-weight:    props.get(table.$heading--font-weight);
+                        color:          props.get(table.$heading-color);
+                        text-align:     start;
+                        text-transform: props.get(table.$heading--text-transform);
+                        letter-spacing: props.get(table.$heading--letter-spacing);
+                }
 
-        td {
-            padding-block:            props.get(table.$pad-b);
-            padding-inline:           props.get(table.$pad-i);
-            border-color:             props.get(table.$border-color);
-            border-style:             solid;
-            border-width:             0;
-            border-block-start-width: props.get(table.$border-width);
-        }
+                td {
+                        padding-block:            props.get(table.$pad-b);
+                        padding-inline:           props.get(table.$pad-i);
+                        border-color:             props.get(table.$border-color);
+                        border-style:             solid;
+                        border-width:             0;
+                        border-block-start-width: props.get(table.$border-width);
+                }
 
-        tr {
-            &:last-child {
-                td {
-                    border-block-end-width: props.get(table.$border-width);
-                }
-            }
-        }
+                tr {
+                        &:last-child {
+                                td {
+                                        border-block-end-width: props.get(table.$border-width);
+                                }
+                        }
+                }
 
-        @include bem.modifier('flush') {
-            th,
-            td {
-                &:first-child {
-                    padding-inline-start: 0;
-                }
+                @include bem.modifier('flush') {
+                        th,
+                        td {
+                                &:first-child {
+                                        padding-inline-start: 0;
+                                }
 
-                &:last-child {
-                    padding-inline-end: 0;
-                }
-            }
-        }
+                                &:last-child {
+                                        padding-inline-end: 0;
+                                }
+                        }
+                }
 
-        @include bem.modifier('box') {
-            td {
-                background-color: props.get(table.$box--bg-color);
+                @include bem.modifier('box') {
+                        td {
+                                background-color: props.get(table.$box--bg-color);
             
-                &:first-child {
-                    border-inline-start-width: props.get(table.$border-width);
-                }
+                                &:first-child {
+                                        border-inline-start-width: props.get(table.$border-width);
+                                }
             
-                &:last-child {
-                    border-inline-end-width: props.get(table.$border-width);
-                }
-            }
+                                &:last-child {
+                                        border-inline-end-width: props.get(table.$border-width);
+                                }
+                        }
     
-            tr {
-                &:first-child {
-                    td {
-                        &:first-child {
-                            border-start-start-radius: props.get(table.$rounding);
-                        }
+                        tr {
+                                &:first-child {
+                                        td {
+                                                &:first-child {
+                                                        border-start-start-radius: props.get(table.$rounding);
+                                                }
             
-                        &:last-child {
-                            border-start-end-radius: props.get(table.$rounding);
-                        }
-                    }
-                }
+                                                &:last-child {
+                                                        border-start-end-radius: props.get(table.$rounding);
+                                                }
+                                        }
+                                }
     
-                &:last-child {
-                    td {
-                        &:first-child {
-                            border-end-start-radius: props.get(table.$rounding);
-                        }
+                                &:last-child {
+                                        td {
+                                                &:first-child {
+                                                        border-end-start-radius: props.get(table.$rounding);
+                                                }
             
-                        &:last-child {
-                            border-end-end-radius: props.get(table.$rounding);
-                        }
-                    }
-                }
-            }
-        }
-    }
+                                                &:last-child {
+                                                        border-end-end-radius: props.get(table.$rounding);
+                                                }
+                                        }
+                                }
+                        }
+                }
+        }
 }