Refactoring

61 files changed, 5020 insertions, 360 deletions

diff --git a/src/functions/colors/_apca.scss b/src/_apca.scss
index 0c03529..c65f46e 100644
--- a/src/functions/colors/_apca.scss
+++ b/src/_apca.scss
@@ -1,5 +1,5 @@
-/* stylelint-disable scss/dollar-variable-pattern */
-/* stylelint-disable scss/at-function-pattern */
+// stylelint-disable scss/dollar-variable-pattern
+// stylelint-disable scss/at-function-pattern
 
 @use 'sass:color';
 @use 'sass:list';
@@ -33,7 +33,7 @@ $SA98G: (
     mOffsetOut:  .312865795870758,
 );
 
-@function apca_sRGB_to_Y($color) {
+@function sRGB_to_Y($color) {
     $rgb: color.to-space($color, rgb);
 
     @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) +
@@ -41,12 +41,12 @@ $SA98G: (
         map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC));
 }
 
-@function apca_Y_to_sRGB($y) {
+@function Y_to_sRGB($y) {
     $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255);
     @return rgb($c, $c, $c);
 }
 
-@function apcaContrast($txtY, $bgY) {
+@function contrast($txtY, $bgY) {
     /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */
     $icp: .0 1.1;
 
@@ -84,7 +84,7 @@ $SA98G: (
     @return $outputContrast * 100;
 }
 
-@function apcaReverse($contrast, $knownY, $knownType: 'bg') {
+@function reverse($contrast, $knownY, $knownType: 'bg') {
     $unknownY:   $knownY;
 
     $knownExp:   0;
diff --git a/src/_functions.scss b/src/_functions.scss
index 4807cc1..ad45975 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -4,67 +4,40 @@
 @use 'sass:list';
 @use 'sass:meta';
 
-@use 'iro-sass/src/index' as iro;
-@use 'iro-sass/src/easing' as easing;
-@use 'functions/colors' as iro-colors;
-@use 'palettes';
-
-@function font-prop($data, $overrides, $key, $prop) {
-    @if (map.has-key($overrides, $prop)) {
-        @return map.get($overrides, $prop);
-    } @else if (map.has-key($data, $prop)) {
-        @return global-dim(--font $key $prop);
-    }
-    @return null;
-}
-
-@function set-font($key, $overrides: ()) {
-    $font: iro.props-get-static(list.join(--dims --font, $key), $global: true);
-
-    $map: (
-        font-family:             font-prop($font, $overrides, $key, --family),
-        font-size:               font-prop($font, $overrides, $key, --size),
-        font-weight:             font-prop($font, $overrides, $key, --weight),
-        font-style:              font-prop($font, $overrides, $key, --style),
-        line-height:             font-prop($font, $overrides, $key, --line-height),
-        text-transform:          font-prop($font, $overrides, $key, --transform),
-        letter-spacing:          font-prop($font, $overrides, $key, --spacing),
-        font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates),
-        font-feature-settings:   font-prop($font, $overrides, $key, --feature-settings),
-    );
-
-    @return $map;
-}
+@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/easing';
+@use 'apca';
+@use 'themes';
 
 @function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) {
     $base-lch: color.to-space($base-color, oklch);
     $ref-lch: color.to-space($ref-color, oklch);
 
     $ref-l: color.channel($ref-lch, 'lightness');
-    $ref-y: iro-colors.apca_sRGB_to_Y($ref-lch);
+    $ref-y: apca.sRGB_to_Y($ref-lch);
 
     $cmax: math.max(map.values($contrasts)...);
     $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...)));
 
-    $black-y: iro-colors.apca_sRGB_to_Y(#000);
-    $white-y: iro-colors.apca_sRGB_to_Y(#fff);
+    $black-y: apca.sRGB_to_Y(#000);
+    $white-y: apca.sRGB_to_Y(#fff);
 
     $chroma-inv: false;
     @if $chroma-range < 0 {
         $chroma-inv: true;
         $chroma-range: -1 * $chroma-range;
     }
-    $chroma-easing: meta.get-function(palettes.$palette-chroma-easing, $module: easing);
+    $chroma-easing: meta.get-function(themes.$palette-chroma-easing, $module: easing);
 
     $palette: ();
 
     @each $key, $contrast in $contrasts {
-        $y: iro-colors.apcaReverse($contrast, $ref-y);
+        $y: apca.reverse($contrast, $ref-y);
         $l: color.channel($base-lch, 'lightness');
         $c: 1;
 
         @if $y != false {
-            $l: color.channel(iro-colors.apca_Y_to_sRGB($y), 'lightness', oklch);
+            $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
         } @else {
             $y: $ref-y;
         }
@@ -80,8 +53,8 @@
 
         $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue'));
 
-        $contrast-black: iro-colors.apcaContrast($black-y, $y);
-        $contrast-white: iro-colors.apcaContrast($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));
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
new file mode 100644
index 0000000..f0f1e50
--- /dev/null
+++ b/src/_iro-design.scss
@@ -0,0 +1,40 @@
+$breakpoints: (
+    lg: 1340px,
+    md: 900px,
+    sm: 620px,
+    xs: 400px,
+) !default;
+
+@forward 'include-media/dist/include-media' as media--* with (
+    $breakpoints: $breakpoints !default,
+    $unit-intervals: (
+        'px':  1,
+        'em':  .01,
+        'rem': .01,
+        '':    0
+    ) !default,
+);
+
+@forward 'iro-sass/src/responsive' as iro-responsive--* with (
+    $named-viewports: $breakpoints !default
+);
+
+@forward 'vars' as vars--*;
+
+@forward 'layouts/button-group' as l-button-group--*;
+@forward 'layouts/card-list' as l-card-list--*;
+@forward 'layouts/container' as l-container--*;
+@forward 'layouts/flex' as l-flex--*;
+@forward 'layouts/form' as l-form--*;
+@forward 'layouts/media' as l-media--*;
+@forward 'layouts/overflow' as l-overflow--*;
+
+@forward 'scopes/implicit' as s-implicit--*;
+@forward 'scopes/blockquotes' as s-blockquotes--*;
+@forward 'scopes/code' as s-code--*;
+//@use 'scopes/headings' as s-headings--*;
+@forward 'scopes/links' as s-links--*;
+@forward 'scopes/lists' as s-lists--*;
+//@use 'scopes/tables' as s-tables--*;
+
+@forward 'objects/action-button' as o-action-button--*;
diff --git a/src/_mixins.scss b/src/_mixins.scss
new file mode 100644
index 0000000..49d3b6f
--- /dev/null
+++ b/src/_mixins.scss
@@ -0,0 +1,38 @@
+@use 'sass:list';
+@use 'functions' as fn;
+
+@mixin set-font($basis, $values: ()) {
+    $values: fn.set-font($basis, $values);
+
+    @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);
+}
+
+@mixin heading-medium($size) {
+    @include set-font(--standard, (
+        --line-height: null,
+        --size:        fn.global-dim(list.join(--heading, $size)),
+        --weight:      bold
+    ));
+
+    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
+    ));
+
+    color: fn.global-color(--text-mute);
+}
diff --git a/src/_props.scss b/src/_props.scss
index f7f54c5..ac1dfd5 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -1,105 +1,40 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
+@use 'themes';
+@use 'include-media/dist/include-media' as media;
+@use 'iro-sass/src/iro-sass' as iro;
 
-@use 'iro-sass/src/functions' as functions;
+@forward 'iro-sass/src/props';
 
-@function is-prop-ref($value) {
-    @if meta.type-of($value) != 'list' {
-        @return false;
+@mixin materialize($ref) {
+    @if meta.type-of($ref) == 'map' {
+        $ref: map.values($ref);
     }
-    @if list.length($value) != 3 {
-        @return false;
-    }
-    @if list.nth($value, 1) != 'prop-ref' {
-        @return false;
-    }
-    @return true;
-}
-
-@function def($name, $value: ()) {
-    @return ('prop-ref' $name $value);
-}
-
-@function merge($ref, $value) {
-    @if not is-prop-ref($ref) {
-        @return $ref;
-    }
-
-    $v:   list.nth($ref, 3);
-    $ref: list.set-nth($ref, 3, map.deep-merge($v, $value));
-    @return $ref;
-}
-
-@function get-deep($name, $value, $key: (), $keys...) {
-    @if is-prop-ref($value) {
-        // $value: list.nth($value, 3);
-        @return get($value, $key, $keys);
-    }
-    @if meta.type-of($value) == 'map' {
-        @if list.length($keys) == 0 {
-            @return #{$name}#{$key} map.get($value, $key);
-        } @else {
-            @return get-deep(#{$name}#{$key}, map.get($value, $key), $keys...);
-        }
-    }
-    @return $name $value;
-}
 
-@function map-to-vars($name, $map) {
-    @if meta.type-of($map) != 'map' {
-        @return var($name);
-    }
-
-    $out: ();
-
-    @each $key, $value in $map {
-        $out: map.set($out, $key, map-to-vars(#{$name}#{$key}, $value));
-    }
-
-    @return $out;
-}
-
-@function get($ref, $key: (), $keys...) {
-    @if not is-prop-ref($ref) {
-        @return $ref;
-    }
-
-    $name:  list.nth($ref, 2);
-    $value: get(list.nth($ref, 3));
+    :root {
+        @include iro.props-materialize($ref);
 
-    @if meta.type-of($value) == 'map' {
-        $res:   get-deep($name, $value, $key, $keys...);
-        $name:  list.nth($res, 1);
-        $value: list.nth($res, 2);
-    } @else if meta.type-of($value) == 'list' {
-        $i: 1;
-        @each $item in $value {
-            $value: list.set-nth($value, $i, get($item));
-            $i: $i + 1;
+        @each $breakpoint in map.keys(media.$breakpoints) {
+            @include media.media('<=#{$breakpoint}') {
+                @include iro.props-materialize($ref, $breakpoint);
+            }
         }
-    }
 
-    @return map-to-vars($name, $value);
-}
-
-@mixin declare-helper($name, $value) {
-    @if meta.type-of($value) == 'map' {
-        @each $key, $value in $value {
-            @include declare-helper(#{$name}#{$key}, $value);
+        @media (prefers-color-scheme: dark) {
+            @include iro.props-materialize($ref, 'dark');
         }
-    } @else {
-        #{$name}: #{$value};
     }
-}
-
-@mixin materialize($refs) {
-    @each $ref in $refs {
-        @if is-prop-ref($ref) {
-            $name:  list.nth($ref, 2);
-            $value: get(list.nth($ref, 3));
 
-            @include declare-helper($name, $value);
+    @each $theme-name in map.keys(themes.$themes) {
+        @if $theme-name != themes.$theme-default {
+            @include iro.bem-theme($theme-name) {
+                @include iro.props-materialize($ref);
+                
+                @media (prefers-color-scheme: dark) {
+                    @include iro.props-materialize($ref, 'dark');
+                }
+            }
         }
     }
 }
diff --git a/src/_palettes.scss b/src/_themes.scss
index f8c5b23..a90d049 100644
--- a/src/_palettes.scss
+++ b/src/_themes.scss
@@ -1,31 +1,9 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:math';
-@use 'iro-sass/src/index' as iro;
-@use 'iro-sass/src/responsive' as res;
 @use 'iro-sass/src/easing' as easing;
 @use 'include-media/dist/include-media' as media;
 
-iro.$vars-root-size: 16px;
-
-media.$breakpoints: (
-    lg: 1340px,
-    md: 900px,
-    sm: 620px,
-    xs: 400px,
-);
-
-media.$unit-intervals: (
-    'px':  1,
-    'em':  .01,
-    'rem': .01,
-    '':    0
-);
-
-res.$named-viewports: media.$breakpoints;
-
-$palette-precision: .01 !default;
-
 $palette-chroma-easing: 'ease' !default;
 
 $static-colors-override: () !default;
@@ -227,8 +205,10 @@ $theme-dark: map.deep-merge((
 
 $themes-override: () !default;
 $themes: map.deep-merge((
-    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;
diff --git a/src/_vars.scss b/src/_vars.scss
index aaa38a0..78ead7c 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -1,199 +1,33 @@
 @use 'sass:map';
 @use 'sass:meta';
-@use 'sass:list';
-@use 'iro-sass/src/index' as iro;
-@use 'include-media/dist/include-media' as media;
-@use 'functions' as fn;
-@use 'palettes';
-@use 'props';
-
-$size--0:    props.def(--size--0, 0) !default;
-$size--10:   props.def(--size--10, iro.fn-px-to-rem(1px)) !default;
-$size--25:   props.def(--size--25, iro.fn-px-to-rem(2px)) !default;
-$size--40:   props.def(--size--40, iro.fn-px-to-rem(3px)) !default;
-$size--50:   props.def(--size--50, iro.fn-px-to-rem(4px)) !default;
-$size--65:   props.def(--size--65, iro.fn-px-to-rem(5px)) !default;
-$size--75:   props.def(--size--75, iro.fn-px-to-rem(6px)) !default;
-$size--85:   props.def(--size--85, iro.fn-px-to-rem(7px)) !default;
-$size--100:  props.def(--size--100, iro.fn-px-to-rem(8px)) !default;
-$size--115:  props.def(--size--115, iro.fn-px-to-rem(9px)) !default;
-$size--125:  props.def(--size--125, iro.fn-px-to-rem(10px)) !default;
-$size--130:  props.def(--size--130, iro.fn-px-to-rem(11px)) !default;
-$size--150:  props.def(--size--150, iro.fn-px-to-rem(12px)) !default;
-$size--160:  props.def(--size--160, iro.fn-px-to-rem(13px)) !default;
-$size--175:  props.def(--size--175, iro.fn-px-to-rem(14px)) !default;
-$size--200:  props.def(--size--200, iro.fn-px-to-rem(16px)) !default;
-$size--225:  props.def(--size--225, iro.fn-px-to-rem(18px)) !default;
-$size--250:  props.def(--size--250, iro.fn-px-to-rem(20px)) !default;
-$size--275:  props.def(--size--275, iro.fn-px-to-rem(22px)) !default;
-$size--300:  props.def(--size--300, iro.fn-px-to-rem(24px)) !default;
-$size--325:  props.def(--size--325, iro.fn-px-to-rem(26px)) !default;
-$size--350:  props.def(--size--350, iro.fn-px-to-rem(28px)) !default;
-$size--375:  props.def(--size--375, iro.fn-px-to-rem(30px)) !default;
-$size--400:  props.def(--size--400, iro.fn-px-to-rem(32px)) !default;
-$size--450:  props.def(--size--450, iro.fn-px-to-rem(36px)) !default;
-$size--500:  props.def(--size--500, iro.fn-px-to-rem(40px)) !default;
-$size--550:  props.def(--size--550, iro.fn-px-to-rem(44px)) !default;
-$size--600:  props.def(--size--600, iro.fn-px-to-rem(48px)) !default;
-$size--650:  props.def(--size--650, iro.fn-px-to-rem(52px)) !default;
-$size--700:  props.def(--size--700, iro.fn-px-to-rem(56px)) !default;
-$size--800:  props.def(--size--800, iro.fn-px-to-rem(64px)) !default;
-$size--900:  props.def(--size--900, iro.fn-px-to-rem(72px)) !default;
-$size--1000: props.def(--size--1000, iro.fn-px-to-rem(80px)) !default;
-$size--1200: props.def(--size--1200, iro.fn-px-to-rem(96px)) !default;
-$size--1600: props.def(--size--1600, iro.fn-px-to-rem(128px)) !default;
-$size--2000: props.def(--size--2000, iro.fn-px-to-rem(160px)) !default;
-$size--2400: props.def(--size--2400, iro.fn-px-to-rem(192px)) !default;
-$size--2500: props.def(--size--2500, iro.fn-px-to-rem(200px)) !default;
-$size--2600: props.def(--size--2600, iro.fn-px-to-rem(208px)) !default;
-$size--2800: props.def(--size--2800, iro.fn-px-to-rem(224px)) !default;
-$size--3200: props.def(--size--3200, iro.fn-px-to-rem(256px)) !default;
-$size--3400: props.def(--size--3400, iro.fn-px-to-rem(272px)) !default;
-$size--3500: props.def(--size--3500, iro.fn-px-to-rem(280px)) !default;
-$size--3600: props.def(--size--3600, iro.fn-px-to-rem(288px)) !default;
-$size--3800: props.def(--size--3800, iro.fn-px-to-rem(304px)) !default;
-$size--4600: props.def(--size--4600, iro.fn-px-to-rem(368px)) !default;
-$size--5000: props.def(--size--5000, iro.fn-px-to-rem(400px)) !default;
-$size--6000: props.def(--size--6000, iro.fn-px-to-rem(480px)) !default;
-
-$font--standard--family:           props.def(--font--standard--family, ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif)) !default;
-$font--standard--line-height:      props.def(--font--standard--line-height, 1.5) !default;
-$font--standard--feature-settings: props.def(--font--standard--feature-settings, ('\'ss01\'')) !default;
-
-$font--headline--family:           props.def(--font--headline--family, ('Inter', props.get($font--standard--family))) !default;
-$font--headline--line-height:      props.def(--font--headline--line-height, 1.3) !default;
-$font--headline--weight:           props.def(--font--headline--weight, 800) !default;
-$font--headline--feature-settings: props.def(--font--headline--feature-settings, ('\'opsz\'' 32, '\'ss01\'', '\'cv06\'')) !default;
-
-$font--mono--family:               props.def(--font--mono--family, ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace)) !default;
-$font--mono--line-height:          props.def(--font--mono--line-height, 1.4) !default;
-
-$font-size--50:   props.def(--font-size--50, iro.fn-px-to-rem(12px)) !default;
-$font-size--75:   props.def(--font-size--75 , iro.fn-px-to-rem(13px)) !default;
-$font-size--100:  props.def(--font-size--100, iro.fn-px-to-rem(14px)) !default;
-$font-size--150:  props.def(--font-size--150, iro.fn-px-to-rem(16px)) !default;
-$font-size--200:  props.def(--font-size--200, iro.fn-px-to-rem(18px)) !default;
-$font-size--300:  props.def(--font-size--300, iro.fn-px-to-rem(20px)) !default;
-$font-size--400:  props.def(--font-size--400, iro.fn-px-to-rem(24px)) !default;
-$font-size--500:  props.def(--font-size--500, iro.fn-px-to-rem(28px)) !default;
-$font-size--600:  props.def(--font-size--600, iro.fn-px-to-rem(32px)) !default;
-$font-size--700:  props.def(--font-size--700, iro.fn-px-to-rem(36px)) !default;
-$font-size--800:  props.def(--font-size--800, iro.fn-px-to-rem(40px)) !default;
-$font-size--900:  props.def(--font-size--900, iro.fn-px-to-rem(45px)) !default;
-$font-size--1000: props.def(--font-size--1000, iro.fn-px-to-rem(50px)) !default;
-$font-size--1100: props.def(--font-size--1100, iro.fn-px-to-rem(60px)) !default;
-
-$border-width--thick:  props.def(--border-width--thick, 4px) !default;
-$border-width--medium: props.def(--border-width--medium, 2px) !default;
-$border-width--thin:   props.def(--border-width--thin, 1px) !default;
-
-$shadow--x:    props.def(--shadow--x, 0) !default;
-$shadow--y:    props.def(--shadow--y, 1px) !default;
-$shadow--blur: props.def(--shadow--blur, 4px) !default;
-
-$rounding: props.def(--rounding, 4px) !default;
-
-$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default;
-$key-focus--border:        props.def(--key-focus--border, props.get($border-width--medium)) !default;
-$key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default;
-
-$paragraph--margin-bs: props.def(--paragraph--margin-bs, props.get($size--300)) !default;
-
-$heading--margin-bs:         props.def(--heading--margin-bs, props.get($size--700)) !default;
-$heading--margin-bs-sibling: props.def(--heading--margin-bs-sibling, props.get($size--325)) !default;
-$heading--xxl:               props.def(--heading--xxl, props.get($font-size--300)) !default;
-$heading--xl:                props.def(--heading--xl, props.get($font-size--200)) !default;
-$heading--lg:                props.def(--heading--lg, props.get($font-size--150)) !default;
-$heading--md:                props.def(--heading--md, props.get($font-size--100)) !default;
-$heading--sm:                props.def(--heading--sm, props.get($font-size--75)) !default;
-$heading--xs:                props.def(--heading--xs, props.get($font-size--50)) !default;
-$heading--display--xxl:      props.def(--heading--display--xxl, props.get($font-size--1100)) !default;
-$heading--display--xl:       props.def(--heading--display--xl, props.get($font-size--700)) !default;
-$heading--display--lg:       props.def(--heading--display--lg, props.get($font-size--300)) !default;
-$heading--display--md:       props.def(--heading--display--md, props.get($font-size--150)) !default;
-$heading--display--sm:       props.def(--heading--display--sm, props.get($font-size--75)) !default;
-$heading--display--xs:       props.def(--heading--display--xs, props.get($font-size--50)) !default;
-$heading--display-sm--xxl:   props.def(--heading--display-sm--xxl, props.get($font-size--900)) !default;
-$heading--display-sm--xl:    props.def(--heading--display-sm--xl, props.get($font-size--600)) !default;
-$heading--display-sm--lg:    props.def(--heading--display-sm--lg, props.get($font-size--200)) !default;
-$heading--display-sm--md:    props.def(--heading--display-sm--md, props.get($font-size--100)) !default;
-$heading--display-sm--sm:    props.def(--heading--display-sm--sm, props.get($font-size--75)) !default;
-$heading--display-sm--xs:    props.def(--heading--display-sm--xs, props.get($font-size--50)) !default;
-
-$list--indent:         props.def(--list--indent, props.get($size--400)) !default;
-$list--compact-indent: props.def(--list--indent, props.get($size--250)) !default;
-
-//
-
-$static-colors: props.def(--static-colors);
-@each $palette-name, $palette in map.get(palettes.$static-colors, --palettes) {
-    $palette: fn.palette($palette, map.get(palettes.$static-colors, --contrasts), 1, map.get(palettes.$static-colors, --base));
-    $static-colors: props.merge($static-colors, ( $palette-name: $palette ));
-}
-
-//
-
-$transparent-colors: props.def(--transparent-colors);
-@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
-    $color: list.nth($palette, 1);
-    $text:  list.nth($palette, 2);
-
-    $palette: fn.transparent-palette($color, $text, map.get(palettes.$static-colors, --transparents));
-    $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
-}
-
-//
-
-$themes: props.def(--themes);
-@each $theme-name, $theme in palettes.$themes {
-    $themes: props.merge($themes, ( --#{$theme-name}: () ));
-
-    @each $palette-name, $palette in map.get($theme, --palettes) {
-        $base-color: list.nth($palette, 1);
-        $contrasts:  list.nth($palette, 2);
-        $ranges:     list.nth($palette, 3);
-
-        $palette: fn.palette($base-color, map.get($theme, --contrasts, $contrasts), map.get($theme, --ranges, $ranges), list.nth(map.get($theme, --palettes, --base), 1));
-        $themes: props.merge($themes, ( --#{$theme-name}: ( $palette-name: $palette ) ));
-    }
-
-    @each $color, $value in map.get($theme, --constants) {
-        $themes: props.merge($themes, ( --#{$theme-name}: ( $color: $value ) ));
-    }
-
-    @each $color, $ref in map.get($theme, --semantic) {
-        $res: ();
-
-        @if meta.type-of($ref) == 'map' {
-            @each $key, $r in $ref {
-                $repo-name: list.nth($r, 1);
-                $re1:        list.nth($r, 2);
-                $re2:        iro.fn-list-slice($r, 3);
-
-                $res2: null;
-
-                @if $repo-name == --static {
-                    $res2: props.get($static-colors, $re1, $re2...);
-                } @else {
-                    $res2: props.get($themes, --#{$theme-name}, $re1, $re2...);
+@use 'iro-sass/src/props';
+@use 'themes';
+
+@use 'vars.vars' as vars;
+@forward 'vars.vars';
+
+@mixin vars {
+    @each $theme-name, $theme in vars.$themes {
+        @if $theme-name == themes.$theme-default {
+            :root {
+                @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'));
+                    }
                 }
-
-                $res: map.merge($res, ($key: $res2));
             }
         } @else {
-            $repo-name: list.nth($ref, 1);
-            $ref1:      list.nth($ref, 2);
-            $ref2:      iro.fn-list-slice($ref, 3);
-
-            $res: null;
-
-            @if $repo-name == --static {
-                $res: props.get($static-colors, $ref1, $ref2...);
-            } @else {
-                $res: props.get($themes, --#{$theme-name}, $ref1, $ref2...);
+            @include iro.bem-theme($theme-name) {
+                @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'));
+                    }
+                }
             }
         }
-
-        $themes: props.merge($themes, ( --#{$theme-name}: ( $color: $res ) ));
     }
 }
diff --git a/src/_vars.vars.scss b/src/_vars.vars.scss
new file mode 100644
index 0000000..cc11b89
--- /dev/null
+++ b/src/_vars.vars.scss
@@ -0,0 +1,203 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+@use 'iro-sass/src/iro-sass' as iro;
+@use 'functions' as fn;
+@use 'themes';
+@use 'props';
+
+$size--0:    props.def(--size--0, 0) !default;
+$size--10:   props.def(--size--10, iro.fn-px-to-rem(1px)) !default;
+$size--25:   props.def(--size--25, iro.fn-px-to-rem(2px)) !default;
+$size--40:   props.def(--size--40, iro.fn-px-to-rem(3px)) !default;
+$size--50:   props.def(--size--50, iro.fn-px-to-rem(4px)) !default;
+$size--65:   props.def(--size--65, iro.fn-px-to-rem(5px)) !default;
+$size--75:   props.def(--size--75, iro.fn-px-to-rem(6px)) !default;
+$size--85:   props.def(--size--85, iro.fn-px-to-rem(7px)) !default;
+$size--100:  props.def(--size--100, iro.fn-px-to-rem(8px)) !default;
+$size--115:  props.def(--size--115, iro.fn-px-to-rem(9px)) !default;
+$size--125:  props.def(--size--125, iro.fn-px-to-rem(10px)) !default;
+$size--130:  props.def(--size--130, iro.fn-px-to-rem(11px)) !default;
+$size--150:  props.def(--size--150, iro.fn-px-to-rem(12px)) !default;
+$size--160:  props.def(--size--160, iro.fn-px-to-rem(13px)) !default;
+$size--175:  props.def(--size--175, iro.fn-px-to-rem(14px)) !default;
+$size--200:  props.def(--size--200, iro.fn-px-to-rem(16px)) !default;
+$size--225:  props.def(--size--225, iro.fn-px-to-rem(18px)) !default;
+$size--250:  props.def(--size--250, iro.fn-px-to-rem(20px)) !default;
+$size--275:  props.def(--size--275, iro.fn-px-to-rem(22px)) !default;
+$size--300:  props.def(--size--300, iro.fn-px-to-rem(24px)) !default;
+$size--325:  props.def(--size--325, iro.fn-px-to-rem(26px)) !default;
+$size--350:  props.def(--size--350, iro.fn-px-to-rem(28px)) !default;
+$size--375:  props.def(--size--375, iro.fn-px-to-rem(30px)) !default;
+$size--400:  props.def(--size--400, iro.fn-px-to-rem(32px)) !default;
+$size--450:  props.def(--size--450, iro.fn-px-to-rem(36px)) !default;
+$size--500:  props.def(--size--500, iro.fn-px-to-rem(40px)) !default;
+$size--550:  props.def(--size--550, iro.fn-px-to-rem(44px)) !default;
+$size--600:  props.def(--size--600, iro.fn-px-to-rem(48px)) !default;
+$size--650:  props.def(--size--650, iro.fn-px-to-rem(52px)) !default;
+$size--700:  props.def(--size--700, iro.fn-px-to-rem(56px)) !default;
+$size--800:  props.def(--size--800, iro.fn-px-to-rem(64px)) !default;
+$size--900:  props.def(--size--900, iro.fn-px-to-rem(72px)) !default;
+$size--1000: props.def(--size--1000, iro.fn-px-to-rem(80px)) !default;
+$size--1200: props.def(--size--1200, iro.fn-px-to-rem(96px)) !default;
+$size--1600: props.def(--size--1600, iro.fn-px-to-rem(128px)) !default;
+$size--2000: props.def(--size--2000, iro.fn-px-to-rem(160px)) !default;
+$size--2400: props.def(--size--2400, iro.fn-px-to-rem(192px)) !default;
+$size--2500: props.def(--size--2500, iro.fn-px-to-rem(200px)) !default;
+$size--2600: props.def(--size--2600, iro.fn-px-to-rem(208px)) !default;
+$size--2800: props.def(--size--2800, iro.fn-px-to-rem(224px)) !default;
+$size--3200: props.def(--size--3200, iro.fn-px-to-rem(256px)) !default;
+$size--3400: props.def(--size--3400, iro.fn-px-to-rem(272px)) !default;
+$size--3500: props.def(--size--3500, iro.fn-px-to-rem(280px)) !default;
+$size--3600: props.def(--size--3600, iro.fn-px-to-rem(288px)) !default;
+$size--3800: props.def(--size--3800, iro.fn-px-to-rem(304px)) !default;
+$size--4600: props.def(--size--4600, iro.fn-px-to-rem(368px)) !default;
+$size--5000: props.def(--size--5000, iro.fn-px-to-rem(400px)) !default;
+$size--6000: props.def(--size--6000, iro.fn-px-to-rem(480px)) !default;
+
+$font--standard--family:           props.def(--font--standard--family, ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif)) !default;
+$font--standard--line-height:      props.def(--font--standard--line-height, 1.5) !default;
+$font--standard--feature-settings: props.def(--font--standard--feature-settings, ('\'ss01\'')) !default;
+
+$font--headline--family:           props.def(--font--headline--family, ('Inter', props.get($font--standard--family))) !default;
+$font--headline--line-height:      props.def(--font--headline--line-height, 1.3) !default;
+$font--headline--weight:           props.def(--font--headline--weight, 800) !default;
+$font--headline--feature-settings: props.def(--font--headline--feature-settings, ('\'opsz\'' 32, '\'ss01\'', '\'cv06\'')) !default;
+
+$font--mono--family:               props.def(--font--mono--family, ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace)) !default;
+$font--mono--line-height:          props.def(--font--mono--line-height, 1.4) !default;
+
+$font-size--50:   props.def(--font-size--50, iro.fn-px-to-rem(12px)) !default;
+$font-size--75:   props.def(--font-size--75 , iro.fn-px-to-rem(13px)) !default;
+$font-size--100:  props.def(--font-size--100, iro.fn-px-to-rem(14px)) !default;
+$font-size--150:  props.def(--font-size--150, iro.fn-px-to-rem(16px)) !default;
+$font-size--200:  props.def(--font-size--200, iro.fn-px-to-rem(18px)) !default;
+$font-size--300:  props.def(--font-size--300, iro.fn-px-to-rem(20px)) !default;
+$font-size--400:  props.def(--font-size--400, iro.fn-px-to-rem(24px)) !default;
+$font-size--500:  props.def(--font-size--500, iro.fn-px-to-rem(28px)) !default;
+$font-size--600:  props.def(--font-size--600, iro.fn-px-to-rem(32px)) !default;
+$font-size--700:  props.def(--font-size--700, iro.fn-px-to-rem(36px)) !default;
+$font-size--800:  props.def(--font-size--800, iro.fn-px-to-rem(40px)) !default;
+$font-size--900:  props.def(--font-size--900, iro.fn-px-to-rem(45px)) !default;
+$font-size--1000: props.def(--font-size--1000, iro.fn-px-to-rem(50px)) !default;
+$font-size--1100: props.def(--font-size--1100, iro.fn-px-to-rem(60px)) !default;
+
+$border-width--thick:  props.def(--border-width--thick, 4px) !default;
+$border-width--medium: props.def(--border-width--medium, 2px) !default;
+$border-width--thin:   props.def(--border-width--thin, 1px) !default;
+
+$shadow--x:    props.def(--shadow--x, 0) !default;
+$shadow--y:    props.def(--shadow--y, 1px) !default;
+$shadow--blur: props.def(--shadow--blur, 4px) !default;
+
+$rounding: props.def(--rounding, 4px) !default;
+
+$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default;
+$key-focus--border-width:  props.def(--key-focus--border-width, props.get($border-width--medium)) !default;
+$key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default;
+
+$heading--xxl:               props.def(--heading--xxl, props.get($font-size--300)) !default;
+$heading--xl:                props.def(--heading--xl, props.get($font-size--200)) !default;
+$heading--lg:                props.def(--heading--lg, props.get($font-size--150)) !default;
+$heading--md:                props.def(--heading--md, props.get($font-size--100)) !default;
+$heading--sm:                props.def(--heading--sm, props.get($font-size--75)) !default;
+$heading--xs:                props.def(--heading--xs, props.get($font-size--50)) !default;
+$heading--display--xxl:      props.def(--heading--display--xxl, props.get($font-size--1100)) !default;
+$heading--display--xl:       props.def(--heading--display--xl, props.get($font-size--700)) !default;
+$heading--display--lg:       props.def(--heading--display--lg, props.get($font-size--300)) !default;
+$heading--display--md:       props.def(--heading--display--md, props.get($font-size--150)) !default;
+$heading--display--sm:       props.def(--heading--display--sm, props.get($font-size--75)) !default;
+$heading--display--xs:       props.def(--heading--display--xs, props.get($font-size--50)) !default;
+$heading--display-sm--xxl:   props.def(--heading--display-sm--xxl, props.get($font-size--900)) !default;
+$heading--display-sm--xl:    props.def(--heading--display-sm--xl, props.get($font-size--600)) !default;
+$heading--display-sm--lg:    props.def(--heading--display-sm--lg, props.get($font-size--200)) !default;
+$heading--display-sm--md:    props.def(--heading--display-sm--md, props.get($font-size--100)) !default;
+$heading--display-sm--sm:    props.def(--heading--display-sm--sm, props.get($font-size--75)) !default;
+$heading--display-sm--xs:    props.def(--heading--display-sm--xs, props.get($font-size--50)) !default;
+
+$list--indent:         props.def(--list--indent, props.get($size--400)) !default;
+$list--compact-indent: props.def(--list--indent, props.get($size--250)) !default;
+
+//
+
+$static-colors: props.def(--static-colors);
+
+@each $palette-name, $palette in map.get(themes.$static-colors, --palettes) {
+    $palette: fn.palette($palette, map.get(themes.$static-colors, --contrasts), 1, map.get(themes.$static-colors, --base));
+    $static-colors: props.merge($static-colors, ( $palette-name: $palette ));
+}
+
+//
+
+$transparent-colors: props.def(--transparent-colors);
+
+@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
+    $color: list.nth($palette, 1);
+    $text:  list.nth($palette, 2);
+
+    $palette: fn.transparent-palette($color, $text, map.get(themes.$static-colors, --transparents));
+    $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
+}
+
+//
+
+$themes: ();
+
+@each $theme-name, $theme in themes.$themes {
+    @each $variant-name, $variant in $theme {
+        $compiled: props.def(--colors);
+
+        @each $palette-name, $palette in map.get($variant, --palettes) {
+            $base-color: list.nth($palette, 1);
+            $contrasts:  list.nth($palette, 2);
+            $ranges:     list.nth($palette, 3);
+
+            $palette: fn.palette($base-color, map.get($variant, --contrasts, $contrasts), map.get($variant, --ranges, $ranges), 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, $ref in map.get($variant, --semantic) {
+            $res: ();
+
+            @if meta.type-of($ref) == 'map' {
+                @each $key, $r in $ref {
+                    $repo-name: list.nth($r, 1);
+                    $re1:       list.nth($r, 2);
+                    $re2:       iro.fn-list-slice($r, 3);
+
+                    $res2: null;
+
+                    @if $repo-name == --static {
+                        $res2: props.get($static-colors, $re1, $re2...);
+                    } @else {
+                        $res2: props.get($compiled, $re1, $re2...);
+                    }
+
+                    $res: map.merge($res, ($key: $res2));
+                }
+            } @else {
+                $repo-name: list.nth($ref, 1);
+                $ref1:      list.nth($ref, 2);
+                $ref2:      iro.fn-list-slice($ref, 3);
+
+                $res: null;
+
+                @if $repo-name == --static {
+                    $res: props.get($static-colors, $ref1, $ref2...);
+                } @else {
+                    $res: props.get($compiled, $ref1, $ref2...);
+                }
+            }
+
+            $compiled: props.merge($compiled, ( $color: $res ));
+        }
+
+        $themes: map.set($themes, $theme-name, $variant-name, $compiled);
+    }
+}
+
+$theme: map.get($themes, themes.$theme-default, light) !default;
diff --git a/src/functions/colors/_index.scss b/src/functions/colors/_index.scss
deleted file mode 100644
index 9dad0f9..0000000
--- a/src/functions/colors/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@forward 'apca';
diff --git a/src/index.scss b/src/index.scss
deleted file mode 100644
index 5c2a1e8..0000000
--- a/src/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-
-@use 'props';
-@use 'vars';
-
-$vars: map.values(meta.module-variables('vars'));
-
-:root {
-    @include props.materialize($vars);
-}
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
new file mode 100644
index 0000000..95b63c9
--- /dev/null
+++ b/src/layouts/_button-group.scss
@@ -0,0 +1,16 @@
+@use 'sass:meta';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+
+@forward 'button-group.vars';
+@use 'button-group.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-layout('button-group') {
+        display:   flex;
+        flex-wrap: wrap;
+        gap:       props.get(vars.$spacing);
+    }
+}
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
new file mode 100644
index 0000000..ac57b44
--- /dev/null
+++ b/src/layouts/_button-group.vars.scss
@@ -0,0 +1,4 @@
+@use '../props';
+@use '../vars';
+
+$spacing: props.def(--l-button-group--spacing, props.get(vars.$size--150)) !default;
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
new file mode 100644
index 0000000..1aea7bc
--- /dev/null
+++ b/src/layouts/_card-list.scss
@@ -0,0 +1,76 @@
+@use 'sass:meta';
+@use 'include-media/dist/include-media' as media;
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+
+@forward 'card-list.vars';
+@use 'card-list.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-layout('card-list') {
+        display:        flex;
+        flex-direction: column;
+        gap:            props.get(vars.$row-gap) props.get(vars.$col-gap);
+
+        @include iro.bem-modifier('grid') {
+            display:               grid;
+            grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
+            gap:                   props.get(vars.$grid--col-gap);
+
+            @include iro.bem-modifier('quiet') {
+                row-gap: props.get(vars.$grid--row-gap);
+            }
+        }
+
+        @include iro.bem-modifier('masonry') {
+            display:    block;
+            columns:    auto props.get(vars.$masonry--col-width);
+            column-gap: props.get(vars.$masonry--col-gap);
+
+            @include iro.bem-elem('card') {
+                margin-block-end: props.get(vars.$masonry--col-gap);
+                break-inside:     avoid;
+            }
+
+            @include iro.bem-modifier('quiet') {
+                @include iro.bem-elem('card') {
+                    margin-block-end: props.get(vars.$masonry--row-gap);
+                }
+            }
+        }
+
+        @include iro.bem-modifier('masonry-h') {
+            flex-flow: row wrap;
+            gap:       props.get(vars.$masonry-h--col-gap);
+
+            &::after {
+                display:     block;
+                flex:        1 0 auto;
+                inline-size: props.get(vars.$masonry-h--row-height);
+                block-size:  0;
+                content:     '';
+            }
+
+            @include iro.bem-elem('card') {
+                flex:            1 0 auto;
+                max-inline-size: 100%;
+            }
+
+            @include iro.bem-elem('card-image') {
+                block-size: props.get(vars.$masonry-h--row-height);
+            }
+
+            @include iro.bem-modifier('quiet') {
+                row-gap: props.get(vars.$masonry-h--row-gap);
+            }
+        }
+
+        @include iro.bem-modifier('aspect-5\\/4') {
+            @include iro.bem-elem('card-image') {
+                aspect-ratio: 5 / 4;
+            }
+        }
+    }
+}
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
new file mode 100644
index 0000000..b3aaac4
--- /dev/null
+++ b/src/layouts/_card-list.vars.scss
@@ -0,0 +1,19 @@
+@use '../props';
+@use '../vars';
+
+$row-gap: props.def(--l-card-list--row-gap, props.get(vars.$size--800)) !default;
+$col-gap: props.def(--l-card-list--col-gap, props.get(vars.$size--400)) !default;
+
+$grid--row-gap:   props.def(--l-card-list--grid--row-gap, props.get(vars.$size--800)) !default;
+$grid--col-gap:   props.def(--l-card-list--grid--col-gap, props.get(vars.$size--400)) !default;
+$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(vars.$size--3200)) !default;
+
+$masonry--row-gap:   props.def(--l-card-list--masonry--row-gap, props.get(vars.$size--800)) !default;
+$masonry--col-gap:   props.def(--l-card-list--masonry--col-gap, props.get(vars.$size--400)) !default;
+$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(vars.$size--3200)) !default;
+
+$masonry-h--row-gap:    props.def(--l-card-list--masonry-h--row-gap, props.get(vars.$size--800)) !default;
+$masonry-h--col-gap:    props.def(--l-card-list--masonry-h--col-gap, props.get(vars.$size--400)) !default;
+$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(vars.$size--3200)) !default;
+
+$border-color: props.def(--l-card-list--border-color, props.get(vars.$theme, --border)) !default;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
new file mode 100644
index 0000000..34c4bf0
--- /dev/null
+++ b/src/layouts/_container.scss
@@ -0,0 +1,27 @@
+@use 'sass:meta';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+
+@forward 'container.vars';
+@use 'container.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-layout('container') {
+        @each $mod, $size in vars.$fixed-sizes {
+            @include iro.bem-modifier($mod) {
+                max-inline-size: props.get($size);
+                margin-inline:   auto;
+            }
+        }
+
+        @include iro.bem-modifier('pad-i') {
+            padding-inline: props.get(vars.$pad-i);
+        }
+
+        @include iro.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
new file mode 100644
index 0000000..8b2258a
--- /dev/null
+++ b/src/layouts/_container.vars.scss
@@ -0,0 +1,22 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+@use '../vars';
+
+$fixed-125: props.def(--l-container--fixed-125, iro.fn-px-to-rem(720px)) !default;
+$fixed:     props.def(--l-container--fixed, iro.fn-px-to-rem(610px)) !default;
+$fixed-75:  props.def(--l-container--fixed-75, iro.fn-px-to-rem(500px)) !default;
+
+$fixed-sizes: (
+    'fixed-125': $fixed-125,
+    'fixed':     $fixed,
+    'fixed-75':  $fixed-75
+) !default;
+
+$pad-i: props.def(--l-container--pad-i, props.get(vars.$size--400)) !default;
+$pad-b: props.def(--l-container--pad-b, props.get(vars.$size--800)) !default;
+
+$pad-i--sm: props.def(--l-container--pad-i, props.get(vars.$size--200), 'sm') !default;
+$pad-b--sm: props.def(--l-container--pad-b, props.get(vars.$size--600), 'sm') !default;
+
+$pad-i--xs: props.def(--l-container--pad-i, props.get(vars.$size--150), 'xs') !default;
+$pad-b--xs: props.def(--l-container--pad-b, props.get(vars.$size--450), 'xs') !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
new file mode 100644
index 0000000..6cc9dc6
--- /dev/null
+++ b/src/layouts/_flex.scss
@@ -0,0 +1,27 @@
+@use 'iro-sass/src/iro-sass' as iro;
+
+@mixin styles {
+    @include iro.bem-layout('flex') {
+        display: flex;
+
+        @include iro.bem-modifier('align-stretch') {
+            align-items: stretch;
+        }
+
+        @include iro.bem-modifier('align-center') {
+            align-items: center;
+        }
+
+        @include iro.bem-modifier('align-start') {
+            align-items: flex-start;
+        }
+
+        @include iro.bem-modifier('align-end') {
+            align-items: flex-end;
+        }
+
+        @include iro.bem-modifier('column') {
+            flex-direction: column;
+        }
+    }
+}
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
new file mode 100644
index 0000000..824d7ca
--- /dev/null
+++ b/src/layouts/_form.scss
@@ -0,0 +1,58 @@
+@use 'sass:meta';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+
+@forward 'form.vars';
+@use 'form.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-layout('form') {
+        display:        flex;
+        flex-direction: column;
+        gap:            props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
+
+        @include iro.bem-elem('item') {
+            display: block;
+        }
+        
+        @include iro.bem-elem('item-content') {
+            @include iro.bem-modifier('align-start') {
+                align-self: start;
+            }
+        }
+
+        @include iro.bem-modifier('row') {
+            flex-direction: row;
+            align-items:    flex-end;
+        }
+
+        @include iro.bem-modifier('labels-start', 'labels-end') {
+            display:               grid;
+            grid-template-rows:    auto;
+            grid-template-columns: auto 1fr;
+            align-items:           baseline;
+
+            @include iro.bem-elem('item') {
+                display: contents;
+            }
+        
+            @include iro.bem-elem('item-label') {
+                grid-column:        1;
+                padding-inline-end: 0;
+            }
+        
+            @include iro.bem-elem('item-content') {
+                grid-column:        2;
+                margin-block-start: 0;
+            }
+        }
+
+        @include iro.bem-modifier('labels-end') {
+            @include iro.bem-elem('item-label') {
+                text-align: end;
+            }
+        }
+    }
+}
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss
new file mode 100644
index 0000000..45faf29
--- /dev/null
+++ b/src/layouts/_form.vars.scss
@@ -0,0 +1,5 @@
+@use '../props';
+@use '../vars';
+
+$item-spacing-b:  props.def(--l-form--item-spacing-b, props.get(vars.$size--325)) !default;
+$label-spacing-i: props.def(--l-form--label-spacing-i, props.get(vars.$size--325)) !default;
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
new file mode 100644
index 0000000..7483f12
--- /dev/null
+++ b/src/layouts/_media.scss
@@ -0,0 +1,40 @@
+@use 'sass:meta';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+
+@forward 'media.vars';
+@use 'media.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-layout('media') {
+        display:     flex;
+        gap:         props.get(vars.$gap);
+        align-items: center;
+        line-height: 1.4;
+
+        @each $mod, $size in vars.$sizes {
+            @include iro.bem-modifier($mod) {
+                gap: props.get($size);
+            }
+        }
+
+        @include iro.bem-modifier('wrap') {
+            flex-wrap: wrap;
+        }
+
+        @include iro.bem-elem('block') {
+            flex: 0 0 auto;
+
+            @include iro.bem-modifier('shrink', 'main') {
+                flex-shrink:     1;
+                min-inline-size: 0;
+            }
+
+            @include iro.bem-modifier('main') {
+                inline-size: 100%;
+            }
+        }
+    }
+}
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
new file mode 100644
index 0000000..3444611
--- /dev/null
+++ b/src/layouts/_media.vars.scss
@@ -0,0 +1,16 @@
+@use '../props';
+@use '../vars';
+
+$gap:  props.def(--l-media--gap, props.get(vars.$size--150)) !default;
+
+$gapless: props.def(--l-media--gapless, 0) !default;
+$sm:      props.def(--l-media--sm, props.get(vars.$size--100)) !default;
+$lg:      props.def(--l-media--lg, props.get(vars.$size--300)) !default;
+$xl:      props.def(--l-media--xl, props.get(vars.$size--450)) !default;
+
+$sizes: (
+    'gapless': $gapless,
+    'sm':      $sm,
+    'lg':      $lg,
+    'xl':      $xl,
+) !default;
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
new file mode 100644
index 0000000..2589d2c
--- /dev/null
+++ b/src/layouts/_overflow.scss
@@ -0,0 +1,11 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+@use '../vars';
+
+@mixin styles {
+    @include iro.bem-layout('overflow') {
+        overflow:        auto;
+        scrollbar-color: props.get(vars.$theme, --text-disabled) transparent;
+    }
+}
+
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
new file mode 100644
index 0000000..0a65b8d
--- /dev/null
+++ b/src/objects/_action-button.scss
@@ -0,0 +1,179 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+
+@forward 'action-button.vars';
+@use 'action-button.vars' as vars;
+
+@mixin -apply-theme($theme, $key: ()) {
+    color:            props.get($theme, list.join($key, --disabled --label)...);
+    background-color: props.get($theme, list.join($key, --disabled --bg)...);
+    border-color:     props.get($theme, list.join($key, --disabled --border)...);
+
+    &::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-width)...);
+    }
+
+    &:link,
+    &:visited,
+    &:enabled {
+        color:            props.get($theme, list.join($key, --label)...);
+        background-color: props.get($theme, list.join($key, --bg)...);
+        border-color:     props.get($theme, list.join($key, --border)...);
+
+        &:hover,
+        &:focus-visible {
+            color:            props.get($theme, list.join($key, --hover --label)...);
+            background-color: props.get($theme, list.join($key, --hover --bg)...);
+            border-color:     props.get($theme, list.join($key, --hover --border)...);
+        }
+
+        &:active {
+            color:            props.get($theme, list.join($key, --active --label)...);
+            background-color: props.get($theme, list.join($key, --active --bg)...);
+            border-color:     props.get($theme, list.join($key, --active --border)...);
+        }
+    }
+
+    @include iro.bem-modifier('quiet') {
+        color:            props.get($theme, list.join($key, --quiet --disabled --label)...);
+        background-color: transparent;
+        border-color:     transparent;
+
+        &:link,
+        &:visited,
+        &:enabled {
+            color:            props.get($theme, list.join($key, --quiet --label)...);
+            background-color: transparent;
+            border-color:     transparent;
+
+            &:hover,
+            &:focus-visible {
+                color:            props.get($theme, list.join($key, --quiet --hover --label)...);
+                background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
+                border-color:     transparent;
+            }
+
+            &:active {
+                color:            props.get($theme, list.join($key, --quiet --active --label)...);
+                background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
+                border-color:     transparent;
+            }
+        }
+    }
+
+    @include iro.bem-is('selected') {
+        color:            props.get($theme, list.join($key, --selected --disabled --label)...);
+        background-color: props.get($theme, list.join($key, --selected --disabled --bg)...);
+        border-color:     props.get($theme, list.join($key, --selected --disabled --border)...);
+
+        &:link,
+        &:visited,
+        &:enabled {
+            color:            props.get($theme, list.join($key, --selected --label)...);
+            background-color: props.get($theme, list.join($key, --selected --bg)...);
+            border-color:     props.get($theme, list.join($key, --selected --border)...);
+    
+            &:hover,
+            &:focus-visible {
+                color:            props.get($theme, list.join($key, --selected --hover --label)...);
+                background-color: props.get($theme, list.join($key, --selected --hover --bg)...);
+                border-color:     props.get($theme, list.join($key, --selected --hover --border)...);
+            }
+    
+            &:active {
+                color:            props.get($theme, list.join($key, --selected --active --label)...);
+                background-color: props.get($theme, list.join($key, --selected --active --bg)...);
+                border-color:     props.get($theme, list.join($key, --selected --active --border)...);
+            }
+        }
+    }
+}
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.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 -apply-theme(vars.$default-theme);
+
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include iro.bem-modifier($theme) {
+                @include -apply-theme(vars.$static-themes, $theme);
+            }
+        }
+
+        @include iro.bem-modifier('pill') {
+            padding-inline: props.get(vars.$pad-i-pill);
+            border-radius:  100em;
+
+            &::after {
+                border-radius:  100em;
+            }
+        }
+
+        @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
+            @include iro.bem-modifier($mod) {
+                padding-block:  props.get($pad-i);
+                padding-inline: props.get($pad-i);
+                font-size:      props.get($font-size);
+
+                @include iro.bem-modifier('pill') {
+                    padding-inline: props.get($pad-i-pill);
+                }
+            }
+        }
+
+        @include iro.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-pill, $pad-b, $font-size in vars.$fixed-sizes {
+                @include iro.bem-modifier($mod) {
+                    inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
+                    padding-inline: 0;
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
new file mode 100644
index 0000000..16d9e7f
--- /dev/null
+++ b/src/objects/_action-button.vars.scss
@@ -0,0 +1,185 @@
+@use 'sass:map';
+@use '../props';
+@use '../vars';
+
+$line-height:  props.def(--o-action-button--line-height, 1.4) !default;
+$pad-i:        props.def(--o-action-button--pad-i, props.get(vars.$size--150)) !default;
+$pad-i-pill:   props.def(--o-action-button--pad-i-pill, props.get(vars.$size--200)) !default;
+$pad-b:        props.def(--o-action-button--pad-b, props.get(vars.$size--85)) !default;
+$border-width: props.def(--o-action-button--border-width, props.get(vars.$border-width--thin)) !default;
+$rounding:     props.def(--o-action-button--rounding, props.get(vars.$rounding)) !default;
+$font-size:    props.def(--o-action-button--font-size, props.get(vars.$font-size--100)) !default;
+
+$pad-i--sm:      props.def(--o-action-button--pad-i, props.get(vars.$size--100), 'sm') !default;
+$pad-i-pill--sm: props.def(--o-action-button--pad-i-pill, props.get(vars.$size--150), 'sm') !default;
+$pad-b--sm:      props.def(--o-action-button--pad-b, props.get(vars.$size--40), 'sm') !default;
+$font-size--sm:  props.def(--o-action-button--font-size, props.get(vars.$font-size--75), 'sm') !default;
+
+$pad-i--lg:      props.def(--o-action-button--pad-i, props.get(vars.$size--175), 'lg') !default;
+$pad-i-pill--lg: props.def(--o-action-button--pad-i-pill, props.get(vars.$size--225), 'lg') !default;
+$pad-b--lg:      props.def(--o-action-button--pad-b, props.get(vars.$size--115), 'lg') !default;
+$font-size--lg:  props.def(--o-action-button--font-size, props.get(vars.$font-size--150), 'lg') !default;
+
+$pad-i--xl:      props.def(--o-action-button--pad-i, props.get(vars.$size--225), 'xl') !default;
+$pad-i-pill--xl: props.def(--o-action-button--pad-i-pill, props.get(vars.$size--300), 'xl') !default;
+$pad-b--xl:      props.def(--o-action-button--pad-b, props.get(vars.$size--150), 'xl') !default;
+$font-size--xl:  props.def(--o-action-button--font-size, props.get(vars.$font-size--200), 'xl') !default;
+
+$key-focus--border-width:  props.def(--o-action-button--key-focus--border-width, props.get(vars.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(vars.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(vars.$key-focus--outline-width)) !default;
+
+$fixed-sizes: (
+    'sm' $pad-i--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
+    'lg' $pad-i--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
+    'xl' $pad-i--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
+) !default;
+
+$default-theme: props.def(--o-action-button, (
+    --bg-color:     props.get(vars.$theme, --base, --75),
+    --label-color:  props.get(vars.$theme, --text),
+    --border-color: props.get(vars.$theme, --border-strong),
+
+    --hover: (
+        --bg-color:     props.get(vars.$theme, --border-mute),
+        --label-color:  props.get(vars.$theme, --heading),
+        --border-color: props.get(vars.$theme, --text-mute-more),
+    ),
+
+    --active: (
+        --bg-color:     props.get(vars.$theme, --border),
+        --label-color:  props.get(vars.$theme, --heading),
+        --border-color: props.get(vars.$theme, --text-mute),
+    ),
+
+    --disabled: (
+        --bg-color:     props.get(vars.$theme, --bg-l1),
+        --label-color:  props.get(vars.$theme, --border-strong),
+        --border-color: props.get(vars.$theme, --border),
+    ),
+
+    --key-focus: (
+        --border-color:  props.get(vars.$theme, --focus, --border),
+        --outline-color: props.get(vars.$theme, --focus, --outline),
+    ),
+
+    --selected: (
+        --bg-color:     props.get(vars.$theme, --text-mute),
+        --label-color:  props.get(vars.$theme, --base, --50),
+        --border-color: props.get(vars.$theme, --text-mute),
+
+        --hover: (
+            --bg-color:     props.get(vars.$theme, --text),
+            --label-color:  props.get(vars.$theme, --base, --50),
+            --border-color: props.get(vars.$theme, --text),
+        ),
+
+        --active: (
+            --bg-color:     props.get(vars.$theme, --heading),
+            --label-color:  props.get(vars.$theme, --base, --50),
+            --border-color: props.get(vars.$theme, --heading),
+        ),
+
+        --disabled: (
+            --bg-color:     props.get(vars.$theme, --border-mute),
+            --label-color:  props.get(vars.$theme, --border-strong),
+            --border-color: props.get(vars.$theme, --border-mute),
+        ),
+    ),
+
+    --quiet: (
+        --label-color:  props.get(vars.$theme, --text),
+
+        --hover: (
+            --bg-color:    props.get(vars.$theme, --border-mute),
+            --label-color: props.get(vars.$theme, --heading),
+        ),
+
+        --active: (
+            --bg-color:    props.get(vars.$theme, --border),
+            --label-color: props.get(vars.$theme, --heading),
+        ),
+
+        --disabled: (
+            --label-color: props.get(vars.$theme, --border-strong),
+        ),
+    ),
+)) !default;
+
+$static-themes: props.def(--o-action-button);
+@each $theme in map.keys(props.get(vars.$transparent-colors)) {
+    $button-theme: #{$theme}-static;
+
+    $static-themes: props.merge($static-themes, (
+        $button-theme: (
+            --bg-color:     props.get(vars.$transparent-colors, $theme, --100),
+            --label-color:  props.get(vars.$transparent-colors, $theme, --900),
+            --border-color: props.get(vars.$transparent-colors, $theme, --400),
+
+            --hover: (
+                --bg-color:     props.get(vars.$transparent-colors, $theme, --300),
+                --label-color:  props.get(vars.$transparent-colors, $theme, --900),
+                --border-color: props.get(vars.$transparent-colors, $theme, --500),
+            ),
+
+            --active: (
+                --bg-color:     props.get(vars.$transparent-colors, $theme, --400),
+                --label-color:  props.get(vars.$transparent-colors, $theme, --900),
+                --border-color: props.get(vars.$transparent-colors, $theme, --600),
+            ),
+
+            --disabled: (
+                --bg-color:     props.get(vars.$transparent-colors, $theme, --100),
+                --label-color:  props.get(vars.$transparent-colors, $theme, --500),
+                --border-color: props.get(vars.$transparent-colors, $theme, --300),
+            ),
+
+            --key-focus: (
+                --border-color:  props.get(vars.$transparent-colors, $theme, --900),
+                --outline-color: props.get(vars.$transparent-colors, $theme, --300),
+            ),
+
+            --selected: (
+                --bg-color:     props.get(vars.$transparent-colors, $theme, --800),
+                --label-color:  props.get(vars.$transparent-colors, $theme, --text),
+                --border-color: props.get(vars.$transparent-colors, $theme, --100),
+
+                --hover: (
+                    --bg-color:     props.get(vars.$transparent-colors, $theme, --900),
+                    --label-color:  props.get(vars.$transparent-colors, $theme, --text),
+                    --border-color: props.get(vars.$transparent-colors, $theme, --100),
+                ),
+
+                --active: (
+                    --bg-color:     props.get(vars.$transparent-colors, $theme, --900),
+                    --label-color:  props.get(vars.$transparent-colors, $theme, --text),
+                    --border-color: props.get(vars.$transparent-colors, $theme, --100),
+                ),
+
+                --disabled: (
+                    --bg-color:     props.get(vars.$transparent-colors, $theme, --200),
+                    --label-color:  props.get(vars.$transparent-colors, $theme, --500),
+                    --border-color: props.get(vars.$transparent-colors, $theme, --100),
+                ),
+            ),
+
+            --quiet: (
+                --label-color:  props.get(vars.$transparent-colors, $theme, --900),
+        
+                --hover: (
+                    --bg-color:    props.get(vars.$transparent-colors, $theme, --300),
+                    --label-color: props.get(vars.$transparent-colors, $theme, --900),
+                ),
+        
+                --active: (
+                    --bg-color:    props.get(vars.$transparent-colors, $theme, --400),
+                    --label-color: props.get(vars.$transparent-colors, $theme, --900),
+                ),
+        
+                --disabled: (
+                    --label-color: props.get(vars.$transparent-colors, $theme, --500),
+                ),
+            ),
+        )
+    ));
+}
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
new file mode 100644
index 0000000..774b443
--- /dev/null
+++ b/src/objects/_alert.scss
@@ -0,0 +1,43 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+$themes: 'accent' 'positive' 'negative' 'warning' !default;
+
+@include iro.props-namespace('alert') {
+    @include iro.props-store((
+        --dims: (
+            --border:   fn.global-dim(--border --medium),
+            --pad-i:    fn.global-dim(--size --250),
+            --pad-b:    fn.global-dim(--size --200),
+            --rounding: fn.global-dim(--rounding),
+        ),
+        --colors: (
+            --bg:     fn.global-color(--bg-l2),
+            --border: fn.global-color(--text-mute-more),
+        ),
+    ));
+
+    @each $theme in $themes {
+        @include iro.props-store((
+            --colors: (
+                --#{$theme}: (
+                    --border: fn.global-color(--#{$theme} --700),
+                ),
+            ),
+        ));
+    }
+
+    @include iro.bem-object(iro.props-namespace()) {
+        padding-block:    fn.dim(--pad-b);
+        padding-inline:   fn.dim(--pad-i);
+        background-color: fn.color(--bg);
+        border:           fn.dim(--border) solid fn.color(--border);
+        border-radius:    fn.dim(--rounding);
+
+        @each $theme in $themes {
+            @include iro.bem-modifier($theme) {
+                border-color: fn.color(--#{$theme} --border);
+            }
+        }
+    }
+}
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/objects/_alert.vars.scss
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
new file mode 100644
index 0000000..d9c1105
--- /dev/null
+++ b/src/objects/_avatar.scss
@@ -0,0 +1,165 @@
+@use 'sass:list';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+$sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
+
+@mixin status($size: ()) {
+    @include iro.bem-elem('status') {
+        inline-size: fn.dim(list.join($size, --indicator-size));
+        block-size:  fn.dim(list.join($size, --indicator-size));
+
+        @include iro.bem-next-elem('content') {
+            mask-image: radial-gradient(circle calc(.5 * fn.dim(list.join($size, --indicator-size)) + fn.dim(--indicator-spacing)) at
+                calc(100% - .5 * fn.dim(list.join($size, --indicator-size)))
+                calc(100% - .5 * fn.dim(list.join($size, --indicator-size))),
+                transparent 95%,
+                #fff);
+        }
+    }
+}
+
+@include iro.props-namespace('avatar') {
+    @include iro.props-store((
+        --dims: (
+            --size:              fn.global-dim(--size --500),
+            --font-size:         fn.global-dim(--font-size --100),
+            --indicator-size:    fn.global-dim(--size --150),
+            --indicator-spacing: fn.global-dim(--size --40),
+            --rounding:          25%,
+
+            --xxxl: (
+                --size:           fn.global-dim(--size --1600),
+                --font-size:      fn.global-dim(--font-size --800),
+                --indicator-size: fn.global-dim(--size --400),
+            ),
+            --xxl: (
+                --size:           fn.global-dim(--size --1200),
+                --font-size:      fn.global-dim(--font-size --600),
+                --indicator-size: fn.global-dim(--size --300),
+            ),
+            --xl: (
+                --size:           fn.global-dim(--size --800),
+                --font-size:      fn.global-dim(--font-size --300),
+                --indicator-size: fn.global-dim(--size --225),
+            ),
+            --lg: (
+                --size:           fn.global-dim(--size --650),
+                --font-size:      fn.global-dim(--font-size --200),
+                --indicator-size: fn.global-dim(--size --175),
+            ),
+            --sm: (
+                --size:           fn.global-dim(--size --375),
+                --font-size:      fn.global-dim(--font-size --75),
+                --indicator-size: fn.global-dim(--size --125),
+            ),
+            --xs: (
+                --size:           fn.global-dim(--size --250),
+                --font-size:      fn.global-dim(--font-size --50),
+                --indicator-size: fn.global-dim(--size --100),
+            ),
+            
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
+            ),
+        ),
+        --colors: (
+            --h: 354,
+            --s: 44%,
+            --l: 45%,
+
+            --key-focus: (
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        position:       relative;
+        display:        inline-block;
+        font-size:      fn.dim(--font-size);
+        font-style:     normal;
+        vertical-align: .05em;
+        border-radius:  fn.dim(--rounding);
+
+        &::after {
+            position:       absolute;
+            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
+            z-index:        1;
+            display:        none;
+            pointer-events: none;
+            content:        '';
+            border:         fn.dim(--key-focus --border-offset) solid transparent;
+            border-radius:  fn.dim(--rounding);
+            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+        }
+
+        @include iro.bem-elem('status') {
+            position:         absolute;
+            inset-block-end:  0;
+            inset-inline-end: 0;
+        }
+
+        @include status;
+
+        @include iro.bem-elem('content') {
+            display:          block;
+            inline-size:      fn.dim(--size);
+            block-size:       fn.dim(--size);
+            line-height:      fn.dim(--size);
+            text-align:       center;
+            object-fit:       cover;
+            object-position:  center center;
+            border-radius:    fn.dim(--rounding);
+        }
+
+        @include iro.bem-modifier('circle') {
+            border-radius: 100%;
+
+            &::after {
+                border-radius: 100%;
+            }
+
+            @include iro.bem-elem('content') {
+                border-radius: 100%;
+            }
+        }
+
+        @include iro.bem-modifier('placeholder') {
+            @include iro.bem-elem('content') {
+                background-color: hsl(0, 0%, fn.color(--l));
+            }
+        }
+
+        @include iro.bem-modifier('colored') {
+            @include iro.bem-elem('content') {
+                color:            #fff;
+                background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
+            }
+        }
+
+        @each $size in $sizes {
+            @include iro.bem-modifier($size) {
+                font-size: fn.dim(--#{$size} --font-size);
+    
+                @include status(--#{$size});
+    
+                @include iro.bem-elem('content') {
+                    inline-size: fn.dim(--#{$size} --size);
+                    block-size:  fn.dim(--#{$size} --size);
+                    line-height: fn.dim(--#{$size} --size);
+                }
+            }
+        }
+    
+        &:focus-visible {
+            &::after {
+                display: block;
+            }
+        }
+    }
+}
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
new file mode 100644
index 0000000..9e0cc1e
--- /dev/null
+++ b/src/objects/_backdrop.scss
@@ -0,0 +1,26 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('backdrop') {
+    @include iro.props-store((
+        --dims: (
+            --z-index: 10000,
+            --blur:    2em,
+        ),
+        --colors: (
+            --bg: rgba(#000, .75),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        position:         fixed;
+        inset:            0;
+        z-index:          fn.dim(--z-index);
+        box-sizing:       border-box;
+        display:          flex;
+        flex-direction:   column;
+        overflow:         auto;
+        background-color: fn.color(--bg);
+        backdrop-filter:  blur(fn.dim(--blur));
+    }
+}
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
new file mode 100644
index 0000000..72d85ff
--- /dev/null
+++ b/src/objects/_badge.scss
@@ -0,0 +1,300 @@
+@use 'sass:string';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+$sizes:         'sm' 'lg' 'xl' !default;
+$themes:        'accent' 'positive' 'negative' 'warning' !default;
+$static-themes: 'black' 'white' !default;
+
+@mixin theme($theme) {
+    color:            fn.color(--#{$theme} --label);
+    background-color: fn.color(--#{$theme} --bg);
+
+    &:link,
+    &:visited,
+    &:enabled {
+        &:hover,
+        &:focus-visible {
+            color:            fn.color(--#{$theme} --hover --label);
+            background-color: fn.color(--#{$theme} --hover --bg);
+        }
+
+        &:active {
+            color:            fn.color(--#{$theme} --active --label);
+            background-color: fn.color(--#{$theme} --active --bg);
+        }
+    }
+
+    @include iro.bem-modifier('quiet') {
+        color:            fn.color(--#{$theme}-quiet --label);
+        background-color: fn.color(--#{$theme}-quiet --bg);
+
+        &:link,
+        &:visited,
+        &:enabled {
+            &:hover,
+            &:focus-visible {
+                color:            fn.color(--#{$theme}-quiet --hover --label);
+                background-color: fn.color(--#{$theme}-quiet --hover --bg);
+            }
+
+            &:active {
+                color:            fn.color(--#{$theme}-quiet --active --label);
+                background-color: fn.color(--#{$theme}-quiet --active --bg);
+            }
+        }
+    }
+
+    @if string.slice($theme, 1, 7) == 'static-' {
+        &::after {
+            outline:    fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
+        }
+    }
+}
+
+@include iro.props-namespace('badge') {
+    @include iro.props-store((
+        --dims: (
+            --pad-b:       fn.global-dim(--size --50),
+            --pad-i:       fn.global-dim(--size --100),
+            --pad-i-pill:  fn.global-dim(--size --150),
+            --pad-i-label: fn.global-dim(--size --50),
+            --rounding:    fn.global-dim(--rounding),
+            --font-size:   fn.global-dim(--font-size --75),
+
+            --sm: (
+                --pad-b:       fn.global-dim(--size --25),
+                --pad-i:       fn.global-dim(--size --75),
+                --pad-i-pill:  fn.global-dim(--size --125),
+                --pad-i-label: fn.global-dim(--size --25),
+                --font-size:   fn.global-dim(--font-size --50),
+            ),
+            --lg: (
+                --pad-b:       fn.global-dim(--size --75),
+                --pad-i:       fn.global-dim(--size --125),
+                --pad-i-pill:  fn.global-dim(--size --175),
+                --pad-i-label: fn.global-dim(--size --50),
+                --font-size:   fn.global-dim(--font-size --100),
+            ), 
+            --xl: ( 
+                --pad-b:       fn.global-dim(--size --100),
+                --pad-i:       fn.global-dim(--size --150),
+                --pad-i-pill:  fn.global-dim(--size --225),
+                --pad-i-label: fn.global-dim(--size --75),
+                --font-size:   fn.global-dim(--font-size --150),
+            ),
+            
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
+            ),
+        ),
+        --colors: (
+            --bg:    fn.global-color(--text-mute),
+            --label: fn.global-color(--bg-l2),
+            --hover: (
+                --bg: fn.global-color(--text),
+            ),
+            --active: (
+                --bg: fn.global-color(--heading),
+            ),
+            --key-focus: (
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
+
+            --quiet: (
+                --bg:    fn.global-color(--border-mute),
+                --label: fn.global-color(--heading),
+                --hover: (
+                    --bg: fn.global-color(--border),
+                ),
+                --active: (
+                    --bg: fn.global-color(--border-strong),
+                ),
+            ),
+        ),
+    ));
+
+    @each $theme in $themes {
+        @include iro.props-store((
+            --colors: (
+                --#{$theme}: (
+                    --bg:    fn.global-color(--#{$theme}-static --900),
+                    --label: fn.global-color(--#{$theme}-static --900-text),
+                    --hover: (
+                        --bg:    fn.global-color(--#{$theme}-static --1000),
+                        --label: fn.global-color(--#{$theme}-static --1000-text),
+                    ),
+                    --active: (
+                        --bg:    fn.global-color(--#{$theme}-static --1100),
+                        --label: fn.global-color(--#{$theme}-static --1000-text),
+                    ),
+                ),
+
+                --#{$theme}-quiet: (
+                    --bg:    fn.global-color(--#{$theme} --200),
+                    --label: fn.global-color(--#{$theme} --1100),
+                    --hover: (
+                        --bg:    fn.global-color(--#{$theme} --300),
+                        --label: fn.global-color(--#{$theme} --1200),
+                    ),
+                    --active: (
+                        --bg:    fn.global-color(--#{$theme} --400),
+                        --label: fn.global-color(--#{$theme} --1300),
+                    ),
+                )
+            ),
+        ));
+    }
+
+    @each $theme in $static-themes {
+        @include iro.props-store((
+            --colors: (
+                --static-#{$theme}: (
+                    --bg:    fn.global-color(--#{$theme}-transparent --800),
+                    --label: fn.global-color(--#{$theme}-transparent --text),
+                    --hover: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --900),
+                        --label: fn.global-color(--#{$theme}-transparent --text),
+                    ),
+                    --active: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --900),
+                        --label: fn.global-color(--#{$theme}-transparent --text),
+                    ),
+                    --key-focus: (
+                        --bg:      fn.global-color(--#{$theme}-transparent --100),
+                        --label:   fn.global-color(--#{$theme}-transparent --900),
+                        --border:  fn.global-color(--#{$theme}-transparent --900),
+                        --outline: fn.global-color(--#{$theme}-transparent --300),
+                    ),
+                ),
+
+                --static-#{$theme}-quiet: (
+                    --bg:    fn.global-color(--#{$theme}-transparent --200),
+                    --label: fn.global-color(--#{$theme}-transparent --900),
+                    --hover: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --300),
+                        --label: fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                    --active: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --400),
+                        --label: fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                )
+            )
+        ));
+    }
+
+    @include iro.bem-object(iro.props-namespace()) {
+        position:         relative;
+        display:          inline-block;
+        padding-block:    fn.dim(--pad-b);
+        padding-inline:   fn.dim(--pad-i);
+        font-size:        fn.dim(--font-size);
+        line-height:      fn.global-dim(--font --standard --line-height);
+        color:            fn.color(--label);
+        text-align:       center;
+        text-decoration:  none;
+        background-color: fn.color(--bg);
+        background-clip:  padding-box;
+        border-radius:    fn.dim(--rounding);
+
+        &::after {
+            position:       absolute;
+            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
+            z-index:        1;
+            display:        none;
+            pointer-events: none;
+            content:        '';
+            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
+            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+        }
+
+        &:link,
+        &:visited,
+        &:enabled {
+            &:hover,
+            &:focus-visible {
+                background-color: fn.color(--hover --bg);
+            }
+
+            &:active {
+                background-color: fn.color(--active --bg);
+            }
+        }
+
+        @include iro.bem-elem('label') {
+            margin-inline: fn.dim(--pad-i-label);
+        }
+
+        @include iro.bem-modifier('quiet') {
+            color:            fn.color(--quiet --label);
+            background-color: fn.color(--quiet --bg);
+
+            &:link,
+            &:visited,
+            &:enabled {
+                &:hover,
+                &:focus-visible {
+                    background-color: fn.color(--quiet --hover --bg);
+                }
+
+                &:active {
+                    background-color: fn.color(--quiet --active --bg);
+                }
+            }
+        }
+    
+        @each $theme in $themes {
+            @include iro.bem-modifier($theme) {
+                @include theme($theme);
+            }
+        }
+
+        &:link,
+        &:visited,
+        &:enabled {
+            &:focus-visible {
+                &::after {
+                    display: block;
+                }
+            }
+        }
+    
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                @include theme(static-#{$theme});
+            }
+        }
+    
+        @include iro.bem-modifier('pill') {
+            padding-inline: fn.dim(--pad-i-pill);
+            border-radius:  10em;
+
+            &::after {
+                border-radius: 10em;
+            }
+        }
+    
+        @each $size in $sizes {
+            @include iro.bem-modifier($size) {
+                padding-block:  fn.dim(--#{$size} --pad-b);
+                padding-inline: fn.dim(--#{$size} --pad-i);
+                font-size:      fn.dim(--#{$size} --font-size);
+
+                @include iro.bem-elem('label') {
+                    margin-inline: fn.dim(--#{$size} --pad-i-label);
+                }
+        
+                @include iro.bem-modifier('pill') {
+                    padding-inline: fn.dim(--#{$size} --pad-i-pill);
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
new file mode 100644
index 0000000..097bc21
--- /dev/null
+++ b/src/objects/_button.scss
@@ -0,0 +1,301 @@
+@use 'sass:list';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+$sizes:         'sm' 'lg' 'xl' !default;
+$themes:        'accent' 'negative' !default;
+$static-themes: 'black' 'white' !default;
+
+@mixin theme($theme: ()) {
+    &:link,
+    &:visited,
+    &:enabled {
+        color:            fn.color(list.join($theme, --label));
+        background-color: fn.color(list.join($theme, --bg));
+        border-color:     transparent;
+    }
+    
+    @include iro.bem-modifier('outline') {
+        &:link,
+        &:visited,
+        &:enabled {
+            color:            fn.color(list.join($theme, --outline-label));
+            background-color: transparent;
+            border-color:     fn.color(list.join($theme, --outline-border));
+        }
+    }
+
+    &:link,
+    &:visited,
+    &:enabled {
+        &:hover,
+        &:focus-visible {
+            color:            fn.color(list.join($theme, --hover --label));
+            background-color: fn.color(list.join($theme, --hover --bg));
+            border-color:     transparent;
+        }
+
+        &:active {
+            color:            fn.color(list.join($theme, --active --label));
+            background-color: fn.color(list.join($theme, --active --bg));
+            border-color:     transparent;
+        }
+    }
+}
+
+@mixin static-theme($theme: ()) {
+    color:            fn.color(list.join($theme, --disabled --label));
+    background-color: fn.color(list.join($theme, --disabled --bg));
+    border-color:     transparent;
+
+    &::after {
+        outline:    fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border);
+        box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
+    }
+    
+    @include iro.bem-modifier('outline') {
+        background-color: transparent;
+        border-color:     fn.color(list.join($theme, --disabled --outline-border));
+    }
+
+    @include theme($theme);
+
+    @include iro.bem-modifier('primary') {
+        @include theme(list.join($theme, --primary));
+    }
+}
+
+@include iro.props-namespace('button') {
+    @include iro.props-store((
+        --dims: (
+            --line-height: 1.4,
+            --pad-i:       fn.global-dim(--size --200),
+            --pad-i-label: fn.global-dim(--size --75),
+            --pad-b:       fn.global-dim(--size --65),
+            --border:      fn.global-dim(--border --medium),
+            --rounding:    10em,
+            --font-size:   fn.global-dim(--font-size --100),
+
+            --sm: (
+                --pad-i:       fn.global-dim(--size --150),
+                --pad-i-label: fn.global-dim(--size --50),
+                --pad-b:       fn.global-dim(--size --25),
+                --font-size:   fn.global-dim(--font-size --75),
+            ),
+            --lg: (
+                --pad-i:       fn.global-dim(--size --250),
+                --pad-i-label: fn.global-dim(--size --100),
+                --pad-b:       fn.global-dim(--size --100),
+                --font-size:   fn.global-dim(--font-size --150),
+            ),
+            --xl: (
+                --pad-i:       fn.global-dim(--size --300),
+                --pad-i-label: fn.global-dim(--size --150),
+                --pad-b:       fn.global-dim(--size --150),
+                --font-size:   fn.global-dim(--font-size --200),
+            ),
+            
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
+            ),
+        ),
+        --colors: (
+            --bg:             fn.global-color(--border-mute),
+            --label:          fn.global-color(--text),
+            --outline-border: fn.global-color(--border),
+            --outline-label:  fn.global-color(--text),
+
+            --hover: (
+                --bg:     fn.global-color(--border),
+                --label:  fn.global-color(--heading),
+            ),
+            --active: (
+                --bg:     fn.global-color(--border-strong),
+                --label:  fn.global-color(--heading),
+            ),
+            --disabled: (
+                --bg:             fn.global-color(--border-mute),
+                --outline-border: fn.global-color(--border),
+                --label:          fn.global-color(--text-disabled),
+            ),
+            --key-focus: (
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
+            
+            --primary: (
+                --bg:             fn.global-color(--base --800),
+                --label:          fn.global-color(--base --800-text),
+                --outline-border: fn.global-color(--base --800),
+                --outline-label:  fn.global-color(--text),
+
+                --hover: (
+                    --bg:     fn.global-color(--base --900),
+                    --label:  fn.global-color(--base --900-text),
+                ),
+                --active: (
+                    --bg:     fn.global-color(--base --900),
+                    --label:  fn.global-color(--base --900-text),
+                ),
+            ),
+        ),
+    ));
+
+    @each $theme in $themes {
+        @include iro.props-store((
+            --colors: (
+                --#{$theme}: (
+                    --bg:             fn.global-color(--#{$theme}-static --900),
+                    --label:          fn.global-color(--#{$theme}-static --900-text),
+                    --outline-border: fn.global-color(--#{$theme} --900),
+                    --outline-label:  fn.global-color(--#{$theme} --1000),
+
+                    --hover: (
+                        --bg:     fn.global-color(--#{$theme}-static --1000),
+                        --label:  fn.global-color(--#{$theme}-static --1000-text),
+                    ),
+                    --active: (
+                        --bg:     fn.global-color(--#{$theme}-static --1100),
+                        --label:  fn.global-color(--#{$theme}-static --1100-text),
+                    ),
+                ),
+            ),
+        ));
+    }
+
+    @each $theme in $static-themes {
+        @include iro.props-store((
+            --colors: (
+                --static-#{$theme}: (
+                    --bg:             fn.global-color(--#{$theme}-transparent --200),
+                    --label:          fn.global-color(--#{$theme}-transparent --900),
+                    --outline-border: fn.global-color(--#{$theme}-transparent --300),
+                    --outline-label:  fn.global-color(--#{$theme}-transparent --900),
+
+                    --hover: (
+                        --bg:     fn.global-color(--#{$theme}-transparent --300),
+                        --label:  fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                    --active: (
+                        --bg:     fn.global-color(--#{$theme}-transparent --400),
+                        --label:  fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                    --disabled: (
+                        --bg:             fn.global-color(--#{$theme}-transparent --200),
+                        --outline-border: fn.global-color(--#{$theme}-transparent --300),
+                        --label:          fn.global-color(--#{$theme}-transparent --500),
+                    ),
+                    --key-focus: (
+                        --bg:      fn.global-color(--#{$theme}-transparent --100),
+                        --label:   fn.global-color(--#{$theme}-transparent --900),
+                        --border:  fn.global-color(--#{$theme}-transparent --900),
+                        --outline: fn.global-color(--#{$theme}-transparent --300),
+                    ),
+
+                    --primary: (
+                        --bg:             fn.global-color(--#{$theme}-transparent --800),
+                        --label:          fn.global-color(--#{$theme}-transparent --text),
+                        --outline-border: fn.global-color(--#{$theme}-transparent --800),
+                        --outline-label:  fn.global-color(--#{$theme}-transparent --900),
+    
+                        --hover: (
+                            --bg:     fn.global-color(--#{$theme}-transparent --900),
+                            --label:  fn.global-color(--#{$theme}-transparent --text),
+                        ),
+                        --active: (
+                            --bg:     fn.global-color(--#{$theme}-transparent --900),
+                            --label:  fn.global-color(--#{$theme}-transparent --text),
+                        ),
+                    ),
+                ),
+            ),
+        ));
+    }
+
+    @include iro.bem-object(iro.props-namespace()) {
+        position:         relative;
+        display:          inline-block;
+        padding-block:    fn.dim(--pad-b);
+        padding-inline:   fn.dim(--pad-i);
+        font-size:        fn.dim(--font-size);
+        font-weight:      500;
+        line-height:      fn.dim(--line-height);
+        color:            fn.color(--disabled --label);
+        text-align:       center;
+        text-decoration:  none;
+        background-color: fn.color(--disabled --bg);
+        border:           fn.dim(--border) solid transparent;
+        border-color:     fn.color(--disabled --bg);
+        border-radius:    fn.dim(--rounding);
+
+        &::after {
+            position:       absolute;
+            inset:          calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
+            z-index:        1;
+            display:        none;
+            pointer-events: none;
+            content:        '';
+            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
+            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+        }
+
+        &:link,
+        &:visited,
+        &:enabled {
+            &:focus-visible {
+                &::after {
+                    display: block;
+                }
+            }
+        }
+
+        @include iro.bem-elem('label') {
+            margin-inline: fn.dim(--pad-i-label);
+        }
+    
+        @include iro.bem-modifier('block') {
+            display: block;
+        }
+    
+        @include iro.bem-modifier('outline') {
+            background-color: transparent;
+            border-color:     fn.color(--disabled --outline-border);
+        }
+
+        @each $size in $sizes {
+            @include iro.bem-modifier($size) {
+                padding-block:  fn.dim(--#{$size} --pad-b);
+                padding-inline: fn.dim(--#{$size} --pad-i);
+                font-size:      fn.dim(--#{$size} --font-size);
+
+                @include iro.bem-elem('label') {
+                    margin-inline: fn.dim(--#{$size} --pad-i-label);
+                }
+            }
+        }
+
+        @include static-theme;
+    
+        @each $theme in $themes {
+            @include iro.bem-modifier($theme) {
+                @include theme(--#{$theme});
+            }
+        }
+    
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                @include static-theme(--static-#{$theme});
+            }
+        }
+    
+        @include iro.bem-modifier('round') {
+            inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
+            padding-inline: 0;
+            border-radius:  100em;
+        }
+    }
+}
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
new file mode 100644
index 0000000..cc9afc9
--- /dev/null
+++ b/src/objects/_card.scss
@@ -0,0 +1,170 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('card') {
+    @include iro.props-store((
+        --dims: (
+            --divider:  fn.global-dim(--border --thin),
+            --pad-i:    fn.global-dim(--size --300),
+            --pad-b:    fn.global-dim(--size --250),
+            --spacing:  fn.global-dim(--size --200),
+            --rounding: fn.global-dim(--rounding),
+
+            --hover: (
+                --offset-b: calc(-1 * fn.global-dim(--size --65)),
+            ),
+
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
+            ),
+        ),
+        --colors: (
+            --bg:       fn.global-color(--bg-l2),
+            --divider:  fn.global-color(--border-mute),
+
+            --key-focus: (
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
+
+            --quiet: (
+                --image: fn.global-color(--bg-base),
+
+                --hover: (
+                    --image: fn.global-color(--border),
+                ),
+            )
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:          block;
+        margin:           calc(-1 * fn.dim(--key-focus --border));
+        background-color: fn.color(--bg);
+        background-clip:  content-box;
+        border:           fn.dim(--key-focus --border-offset) solid transparent;
+        border-radius:    calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
+        transition:       transform .2s;
+
+        @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+            &:hover,
+            &:active,
+            &:focus-visible {
+                transform: translateY(fn.dim(--hover --offset-b));
+            }
+
+            &:focus-visible {
+                outline:      fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                box-shadow:   0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            }
+        }
+
+        @include iro.bem-elem('avatar') {
+            margin-block-start:  fn.dim(--pad-b);
+            margin-inline-start: fn.dim(--pad-i);
+        }
+
+        @include iro.bem-elem('image') {
+            display:          block;
+            inline-size:      100%;
+            object-fit:       cover;
+            transition:       transform .2s, opacity .2s;
+
+            &:first-child {
+                border-start-start-radius: fn.dim(--rounding);
+                border-start-end-radius:   fn.dim(--rounding);
+            }
+
+            &:last-child {
+                border-end-start-radius: fn.dim(--rounding);
+                border-end-end-radius:   fn.dim(--rounding);
+            }
+
+            @include iro.bem-next-elem('avatar') {
+                margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
+            }
+        }
+
+        @include iro.bem-elem('body') {
+            padding-block:  fn.dim(--pad-b);
+            padding-inline: fn.dim(--pad-i);
+
+            &::before {
+                display:       block;
+                margin-block:  -100em 100em;
+                content:       '';
+            }
+        }
+
+        @include iro.bem-elem('content') {
+            margin-block-start: fn.dim(--spacing);
+        }
+
+        @include iro.bem-elem('footer') {
+            padding-block:      0 fn.dim(--pad-b);
+            padding-inline:     fn.dim(--pad-i);
+            margin-block-start: calc(-1 * fn.dim(--pad-b));
+
+            &::before {
+                display:          block;
+                block-size:       fn.dim(--divider);
+                margin-block:     fn.dim(--spacing);
+                content:          '';
+                background-color: fn.color(--divider);
+            }
+        }
+
+        @include iro.bem-modifier('quiet') {
+            position:         relative;
+            background-color: transparent;
+            border:           0;
+
+            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                &:hover,
+                &:active,
+                &:focus-visible {
+                    transform: none;
+
+                    @include iro.bem-elem('image') {
+                        background-color: fn.color(--quiet --hover --image);
+                        opacity:          .75;
+                        transform:        translateY(fn.dim(--hover --offset-b));
+                    }
+                }
+
+                &:focus-visible {
+                    outline:    none;
+                    box-shadow: none;
+
+                    @include iro.bem-elem('image') {
+                        background-color: fn.color(--quiet --hover --image);
+                        outline:          fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                        box-shadow:       0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+                        opacity:          1;
+                    }
+                }
+            }
+
+            @include iro.bem-elem('image') {
+                position:         relative;
+                margin:           calc(-1 * fn.dim(--key-focus --border));
+                background-color: fn.color(--quiet --image);
+                background-clip:  padding-box;
+                border:           fn.dim(--key-focus --border-offset) solid transparent;
+                border-radius:    calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
+            }
+
+            @include iro.bem-elem('body') {
+                padding:             0;
+                padding-block-start: fn.dim(--spacing);
+            }
+
+            @include iro.bem-elem('footer') {
+                padding-inline: 0;
+            }
+        }
+    }
+}
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
new file mode 100644
index 0000000..8d82cd5
--- /dev/null
+++ b/src/objects/_checkbox.scss
@@ -0,0 +1,261 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('checkbox') {
+    @include iro.props-store((
+        --dims: (
+            --size:            fn.global-dim(--size --175),
+            --label-gap:       fn.global-dim(--size --125),
+            --border:          fn.global-dim(--border --medium),
+            --pad-i:           fn.global-dim(--size --65),
+            --pad-b:           fn.global-dim(--size --65),
+            --rounding:        fn.global-dim(--rounding),
+            --spacing-sibling: fn.global-dim(--size --300),
+
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
+            ),
+        ),
+        --colors: (
+            --box-border: fn.global-color(--text-mute-more),
+            --box-bg:     fn.global-color(--base --75),
+    
+            --hover: (
+                --label:      fn.global-color(--heading),
+                --box-border: fn.global-color(--text-mute),
+            ),
+            --accent: (
+                --box-border: fn.global-color(--accent --900),
+    
+                --hover: (
+                    --box-border: fn.global-color(--accent --1000),
+                ),
+            ),
+            --disabled: (
+                --label:      fn.global-color(--text-disabled),
+                --box-border: fn.global-color(--border-strong),
+                --box-bg:     fn.global-color(--base --75),
+            ),
+            --key-focus: (
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        position:       relative;
+        display:        inline-block;
+        padding-block:  fn.dim(--pad-b);
+        padding-inline: fn.dim(--pad-i);
+        margin-inline:
+            calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
+            calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset));
+
+        @include iro.bem-elem('box') {
+            position:           relative;
+            display:            inline-block;
+            flex:               0 0 auto;
+            inline-size:        fn.dim(--size);
+            block-size:         fn.dim(--size);
+            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset));
+            vertical-align:     top;
+            background-color:   fn.color(--box-border);
+            background-clip:    padding-box;
+            border:             fn.dim(--key-focus --border-offset) solid transparent;
+            border-radius:      calc(fn.dim(--border) + fn.dim(--key-focus --border-offset));
+    
+            &::before,
+            &::after {
+                position: absolute;
+                display:  block;
+                content:  '';
+            }
+    
+            &::before {
+                inset-block-start:  fn.dim(--border);
+                inset-inline-start: fn.dim(--border);
+                z-index:            2;
+                inline-size:        calc(fn.dim(--size) - 2 * fn.dim(--border));
+                block-size:         calc(fn.dim(--size) - 2 * fn.dim(--border));
+                background-color:   fn.color(--box-bg);
+                transition:         transform .2s ease;
+            }
+    
+            &::after {
+                inset-block-start:   calc(.5 * fn.dim(--size) - 1px);
+                inset-inline-start:  calc(1.5 * fn.dim(--border));
+                z-index:             3;
+                box-sizing:          border-box;
+                inline-size:         calc(fn.dim(--size) - 3 * fn.dim(--border));
+                block-size:          0;
+                border-color:        fn.color(--box-bg);
+                border-style:        solid;
+                border-radius:       2px;
+                transition:          transform .2s ease;
+                transform:           scale(0);
+                border-block-width:  0 2px;
+                border-inline-width: 0 2px;
+            }
+        }
+    
+        @include iro.bem-elem('check-icon') {
+            position:           absolute;
+            inset-block-start:  calc(1 * fn.dim(--border));
+            inset-inline-start: calc(1 * fn.dim(--border));
+            z-index:            2;
+            display:            block;
+            inline-size:        calc(100% - 2 * fn.dim(--border));
+            block-size:         calc(100% - 2 * fn.dim(--border));
+            margin:             0;
+            color:              fn.color(--box-bg);
+            stroke-width:       iro.fn-px-to-rem(3px);
+            transition:         transform .2s ease;
+            transform:          scale(0);
+            transform-origin:   40% 90%;
+        }
+    
+        @include iro.bem-elem('label') {
+            margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
+        }
+    
+        @include iro.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:      fn.dim(--rounding);
+    
+            &:hover,
+            &:focus-visible {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--hover --label);
+                }
+    
+                @include iro.bem-sibling-elem('box') {
+                    background-color: fn.color(--hover --box-border);
+                }
+            }
+    
+            &:checked {
+                @include iro.bem-sibling-elem('box') {
+                    &::before {
+                        transform: scale(0);
+                    }
+    
+                    @include iro.bem-elem('check-icon') {
+                        transform: scale(1);
+                    }
+                }
+            }
+    
+            &:indeterminate {
+                @include iro.bem-sibling-elem('box') {
+                    &::before {
+                        transform: scale(0);
+                    }
+    
+                    &::after {
+                        transform: scale(1);
+                    }
+    
+                    @include iro.bem-elem('check-icon') {
+                        transform: scale(0);
+                    }
+                }
+            }
+    
+            &:disabled {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--disabled --label);
+                }
+    
+                @include iro.bem-sibling-elem('box') {
+                    background-color: fn.color(--disabled --box-border);
+    
+                    &::before {
+                        background-color: fn.color(--disabled --box-bg);
+                    }
+                }
+            }
+    
+            &:focus-visible {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--key-focus --label);
+                }
+
+                @include iro.bem-sibling-elem('box') {
+                    outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                    box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+                }
+            }
+        }
+    
+        @include iro.bem-modifier('standalone') {
+            @include iro.bem-elem('box') {
+                margin-block-start: 0;
+            }
+        }
+    
+        @include iro.bem-modifier('accent') {
+            @include iro.bem-elem('native') {
+                &:checked {
+                    @include iro.bem-sibling-elem('box') {
+                        background-color: fn.color(--accent --box-border);
+                    }
+        
+                    &:hover,
+                    &:focus-visible {
+                        @include iro.bem-sibling-elem('box') {
+                            background-color: fn.color(--accent --hover --box-border);
+                        }
+                    }
+                }
+    
+                &:indeterminate {
+                    @include iro.bem-sibling-elem('box') {
+                        background-color: fn.color(--accent --box-border);
+                    }
+        
+                    &:hover,
+                    &:focus-visible {
+                        @include iro.bem-sibling-elem('box') {
+                            background-color: fn.color(--accent --hover --box-border);
+                        }
+                    }
+                }
+    
+                &:disabled {
+                    @include iro.bem-sibling-elem('box') {
+                        background-color: fn.color(--disabled --box-border);
+        
+                        &::before {
+                            background-color: fn.color(--disabled --box-bg);
+                        }
+                    }
+
+                    &:checked {
+                        @include iro.bem-sibling-elem('box') {
+                            background-color: fn.color(--disabled --box-border);
+                        }
+                    }
+        
+                    &:indeterminate {
+                        @include iro.bem-sibling-elem('box') {
+                            background-color: fn.color(--disabled --box-border);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
new file mode 100644
index 0000000..7d96206
--- /dev/null
+++ b/src/objects/_divider.scss
@@ -0,0 +1,203 @@
+@use 'sass:map';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+@use '../config';
+
+$static-themes: 'black' 'white' !default;
+
+@include iro.props-namespace('divider') {
+    @include iro.props-store((
+        --dims: (
+            --margin-b: fn.global-dim(--size --85),
+    
+            --strong: (
+                --border:          fn.global-dim(--border --thick),
+                --label-font-size: fn.global-dim(--font-size --100),
+            ),
+            --medium: (
+                --border:          fn.global-dim(--border --medium),
+                --label-font-size: fn.global-dim(--font-size --75),
+            ),
+            --faint: (
+                --border:          fn.global-dim(--border --thin),
+                --label-font-size: fn.global-dim(--font-size --50),
+            ),
+        ),
+        --colors: (
+            --strong: (
+                --bg:    fn.global-color(--text),
+                --label: fn.global-color(--text),
+            ),
+            --medium: (
+                --bg:    fn.global-color(--border),
+                --label: fn.global-color(--text-mute),
+            ),
+            --faint: (
+                --bg:    fn.global-color(--border),
+                --label: fn.global-color(--text-mute-more),
+            ),
+        ),
+    ));
+
+    @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) {
+        @if $color != '--base' {
+            @include iro.props-store((
+                --colors: (
+                    $color: (
+                        --bg:    fn.global-color($color --800),
+                        --label: fn.global-color($color --1000),
+                    )
+                ),
+            ));
+        }
+    }
+
+    @each $theme in $static-themes {
+        @include iro.props-store((
+            --colors: (
+                --static-#{$theme}: (
+                    --strong: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --800),
+                        --label: fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                    --medium: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --300),
+                        --label: fn.global-color(--#{$theme}-transparent --500),
+                    ),
+                    --faint: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --300),
+                        --label: fn.global-color(--#{$theme}-transparent --500),
+                    ),
+                )
+            ),
+        ));
+    }
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:        flex;
+        flex:           0 0 auto;
+        flex-direction: row;
+        align-items:    center;
+        block-size:     1em;
+        margin-block:   fn.dim(--margin-b);
+        font-size:      fn.dim(--strong --label-font-size);
+        font-weight:    700;
+        line-height:    1;
+        color:          fn.color(--strong --label);
+        text-transform: uppercase;
+        letter-spacing: .5px;
+
+        &::before,
+        &::after {
+            flex:             1 1 auto;
+            inline-size:      100%;
+            block-size:       fn.dim(--strong --border);
+            content:          '';
+            background-color: fn.color(--strong --bg);
+        }
+
+        &::before {
+            display: block;
+        }
+
+        @include iro.bem-elem('label') {
+            flex: 0 0 auto;
+        }
+
+        @include iro.bem-modifier('vertical') {
+            align-self:       stretch;
+            inline-size:      1px;
+            block-size:       auto;
+            margin-block:     0;
+            background-color: fn.color(--faint --bg);
+
+            &::before,
+            &::after {
+                display: none;
+            }
+        }
+
+        @include iro.bem-modifier('medium') {
+            font-size:   fn.dim(--medium --label-font-size);
+            font-weight: 500;
+            color:       fn.color(--medium --label);
+
+            &::before,
+            &::after {
+                block-size:       fn.dim(--medium --border);
+                background-color: fn.color(--medium --bg);
+            }
+        }
+
+        @include iro.bem-modifier('faint') {
+            font-size:   fn.dim(--faint --label-font-size);
+            font-weight: 500;
+            color:       fn.color(--faint --label);
+
+            &::before,
+            &::after {
+                block-size:       fn.dim(--faint --border);
+                background-color: fn.color(--faint --bg);
+            }
+        }
+
+        @include iro.bem-modifier('labelled') {
+            &::before {
+                margin-inline-end: 1em;
+            }
+
+            &::after {
+                display:             block;
+                margin-inline-start: 1em;
+            }
+        }
+
+        @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
+            @include iro.bem-modifier($color) {
+                &::before,
+                &::after {
+                    background-color: fn.color(--#{$color} --bg);
+                }
+
+                @include iro.bem-elem('label') {
+                    color: fn.color(--#{$color} --label);
+                }
+            }
+        }
+
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                &::before,
+                &::after {
+                    background-color: fn.color(--static-#{$theme} --strong --bg);
+                }
+
+                @include iro.bem-elem('label') {
+                    color: fn.color(--static-#{$theme} --strong --label);
+                }
+
+                @include iro.bem-modifier('medium') {
+                    &::before,
+                    &::after {
+                        background-color: fn.color(--static-#{$theme} --medium --bg);
+                    }
+    
+                    @include iro.bem-elem('label') {
+                        color: fn.color(--static-#{$theme} --medium --label);
+                    }
+                }
+    
+                @include iro.bem-modifier('faint') {
+                    &::before,
+                    &::after {
+                        background-color: fn.color(--static-#{$theme} --faint --bg);
+                    }
+    
+                    @include iro.bem-elem('label') {
+                        color: fn.color(--static-#{$theme} --faint --label);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
new file mode 100644
index 0000000..41c614c
--- /dev/null
+++ b/src/objects/_emoji.scss
@@ -0,0 +1,73 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+@use 'sass:math';
+
+@use 'icon';
+
+@include iro.props-namespace('emoji') {
+    @include iro.props-store((
+        --dims: (
+            --size:     calc(1 / 14 * 18em),
+            --pad:      .3em,
+            --rounding: fn.global-dim(--rounding),
+            --zoom:     3,
+            --valign:   -.25em,
+
+            --125: (
+                --size:   calc(1 / 14 * 23em),
+                --valign: -.45em,
+            ),
+
+            --150: (
+                --size:   calc(1 / 14 * 28em),
+                --valign: -.65em,
+            ),
+
+            --200: (
+                --size:   calc(1 / 14 * 38em),
+                --valign: -1em,
+            )
+        ),
+        --colors: (
+            --bg: fn.global-color(--border-mute),
+        )
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        position:       relative;
+        display:        inline-block;
+        inline-size:    calc(fn.dim(--size));
+        block-size:     calc(fn.dim(--size));
+        padding:        calc(fn.dim(--pad));
+        margin:         calc(-1 * fn.dim(--pad));
+        vertical-align: fn.dim(--valign);
+        object-fit:     contain;
+
+        @include iro.bem-modifier('icon') {
+            margin:         calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
+            vertical-align: fn.foreign-dim(--icon, --valign);
+        }
+
+        @each $size in '125' '150' '200' {
+            @include iro.bem-modifier($size) {
+                inline-size:    fn.dim(--#{$size} --size);
+                block-size:     fn.dim(--#{$size} --size);
+                vertical-align: fn.dim(--#{$size} --valign);
+
+                @include iro.bem-modifier('icon') {
+                    margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
+                }
+            }
+        }
+
+        @include iro.bem-modifier('zoomable') {
+            border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
+            transition:    transform .2s ease, background-color .2s ease;
+
+            &:hover {
+                background-color: fn.color(--bg);
+                transform:        scale(fn.dim(--zoom));
+            }
+        }
+    }
+}
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
new file mode 100644
index 0000000..ba3841a
--- /dev/null
+++ b/src/objects/_field-label.scss
@@ -0,0 +1,86 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('field-label') {
+    @include iro.props-store((
+        --dims: (
+            --spacing-i:       fn.global-dim(--size --150),
+            --spacing-b:       fn.global-dim(--size --85),
+            --label-font-size: fn.global-dim(--font-size --75),
+            --hint-font-size:  fn.global-dim(--font-size --75),
+        ),
+        --colors: (
+            --label:      fn.global-color(--text-mute),
+            --hint:       fn.global-color(--text-mute),
+            --error-hint: fn.global-color(--negative --900),
+            --disabled:   fn.global-color(--text-disabled),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display: block;
+
+        @include iro.bem-elem('label') {
+            display:            block;
+            flex:               0 0 auto;
+            padding-inline-end: fn.dim(--spacing-i);
+            font-size:          fn.dim(--label-font-size);
+            font-weight:        400;
+            line-height:        1.3;
+            color:              fn.color(--label);
+    
+            @include iro.bem-next-elem('content') {
+                margin-block-start: fn.dim(--spacing-b);
+            }
+        }
+    
+        @include iro.bem-elem('content') {
+            display: block;
+            flex:    1 1 auto;
+        }
+    
+        @include iro.bem-elem('hint') {
+            display:            block;
+            margin-block-start: fn.dim(--spacing-b);
+            font-size:          fn.dim(--hint-font-size);
+            color:              fn.color(--hint);
+        }
+    
+        @include iro.bem-is('invalid') {
+            @include iro.bem-elem('hint') {
+                color: fn.color(--error-hint);
+            }
+        }
+    
+        @include iro.bem-is('disabled') {
+            @include iro.bem-elem('label', 'hint') {
+                color: fn.color(--disabled);
+            }
+        }
+    
+        @include iro.bem-modifier('align-start', 'align-end') {
+            display:     flex;
+            align-items: baseline;
+    
+            @include iro.bem-elem('label') {
+                display: inline-block;
+    
+                @include iro.bem-next-elem('content') {
+                    margin-block-start: 0;
+                }
+            }
+        }
+    
+        @include iro.bem-modifier('align-start') {
+            @include iro.bem-elem('label') {
+                text-align: start;
+            }
+        }
+    
+        @include iro.bem-modifier('align-end') {
+            @include iro.bem-elem('label') {
+                text-align: end;
+            }
+        }
+    }
+}
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
new file mode 100644
index 0000000..7fbafea
--- /dev/null
+++ b/src/objects/_heading.scss
@@ -0,0 +1,116 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+@use '../mixins' as mx;
+@use '../config';
+@use 'include-media/dist/include-media' as media;
+
+$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs';
+
+@include iro.props-namespace('heading') {
+    @include iro.props-store((
+        --dims: (
+            --offset: -.02em,
+        ),
+        --colors: (
+            --bg: fn.global-color(--base --50),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        @include mx.set-font(--headline);
+
+        display:            block;
+        margin-block-start: fn.global-dim(--heading --margin-bs);
+        text-transform:     none;
+        letter-spacing:     normal;
+        transform:          translateX(fn.dim(--offset));
+
+        & + & {
+            margin-block-start: fn.global-dim(--heading --margin-bs-sibling);
+        }
+
+        @include iro.bem-elem('highlight') {
+            background-image: linear-gradient(to top,
+                transparent    .05em,
+                fn.color(--bg) .05em,
+                fn.color(--bg) .5em,
+                transparent    .5em);
+        }
+
+        @include iro.bem-modifier('xxl') {
+            @include mx.heading-strong(--xxl);
+        }
+
+        @include iro.bem-modifier('xl') {
+            @include mx.heading-strong(--xl);
+        }
+
+        @include iro.bem-modifier('lg') {
+            @include mx.heading-medium(--lg);
+        }
+
+        @include iro.bem-modifier('md') {
+            @include mx.heading-medium(--md);
+        }
+
+        @include iro.bem-modifier('sm') {
+            @include mx.heading-faint(--sm);
+        }
+
+        @include iro.bem-modifier('xs') {
+            @include mx.heading-faint(--xs);
+        }
+
+        @include iro.bem-modifier('display') {
+            @include mx.set-font(--headline);
+
+            @include iro.bem-modifier('xxl') {
+                @include mx.heading-strong(--display --xxl);
+
+                @include media.media('<=md') {
+                    @include mx.heading-strong(--display-sm --xxl);
+                }
+            }
+    
+            @include iro.bem-modifier('xl') {
+                @include mx.heading-strong(--display --xl);
+
+                @include media.media('<=md') {
+                    @include mx.heading-strong(--display-sm --xl);
+                }
+            }
+    
+            @include iro.bem-modifier('lg') {
+                @include mx.heading-strong(--display --lg);
+
+                @include media.media('<=md') {
+                    @include mx.heading-strong(--display-sm --lg);
+                }
+            }
+    
+            @include iro.bem-modifier('md') {
+                @include mx.heading-strong(--display --md);
+
+                @include media.media('<=md') {
+                    @include mx.heading-strong(--display-sm --md);
+                }
+            }
+    
+            @include iro.bem-modifier('sm') {
+                @include mx.heading-medium(--display --sm);
+
+                @include media.media('<=md') {
+                    @include mx.heading-medium(--display-sm --sm);
+                }
+            }
+    
+            @include iro.bem-modifier('xs') {
+                @include mx.heading-faint(--display --xs);
+
+                @include media.media('<=md') {
+                    @include mx.heading-faint(--display-sm --xs);
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
new file mode 100644
index 0000000..7cbb7db
--- /dev/null
+++ b/src/objects/_icon.scss
@@ -0,0 +1,26 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('icon') {
+    @include iro.props-store((
+        --dims: (
+            --stroke:  1.5px,
+            --size:    calc(1 / 14 * 16em),
+            --valign:  -.2em,
+        )
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:         inline;
+        inline-size:     fn.dim(--size);
+        block-size:      fn.dim(--size);
+        vertical-align:  fn.dim(--valign);
+        stroke-linecap:  round;
+        stroke-linejoin: round;
+        stroke-width:    fn.dim(--stroke);
+
+        @include iro.bem-modifier('block') {
+            display: block;
+        }
+    }
+}
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
new file mode 100644
index 0000000..edbc62a
--- /dev/null
+++ b/src/objects/_lightbox.scss
@@ -0,0 +1,313 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@use 'action-button';
+
+$static-themes: 'black' 'white' !default;
+
+@include iro.props-namespace('lightbox') {
+    @include iro.props-store((
+        --dims: (
+            --pad: fn.global-dim(--size --150),
+
+            --thumbnail: (
+                --size:      fn.global-dim(--size --700),
+                --rounding:  fn.global-dim(--rounding),
+                --spacing:   fn.global-dim(--size --100),
+                --border:    fn.global-dim(--border --thin),
+                
+                --selected: (
+                    --border: fn.global-dim(--border --medium),
+                ),
+
+                --key-focus: (
+                    --border:        fn.global-dim(--key-focus --border),
+                    --border-offset: fn.global-dim(--key-focus --border-offset),
+                    --outline:       fn.global-dim(--key-focus --outline),
+                ),
+            ),
+
+            --close-button: (
+                --font-size: fn.global-dim(--font-size --200),
+            ),
+
+            --nav-button: (
+                --width:     fn.global-dim(--size --2000),
+                --height:    fn.global-dim(--size --3800),
+                --font-size: fn.global-dim(--font-size --200),
+            ),
+        ),
+        --colors: (
+            --thumbnail: (
+                --border: fn.global-color(--border-strong),
+                
+                --hover: (
+                    --border: fn.global-color(--text-mute-more),
+                ),
+                
+                --selected: (
+                    --border: fn.global-color(--heading),
+                ),
+
+                --key-focus: (
+                    --border:  fn.global-color(--focus --border),
+                    --outline: fn.global-color(--focus --outline),
+                ),
+            ),
+        ),
+    ));
+
+    @each $theme in $static-themes {
+        @include iro.props-store((
+            --colors: (
+                --static-#{$theme}: (
+                    --text: fn.global-color(--white-transparent --800),
+                    --thumbnail: (
+                        --border: fn.global-color(--white-transparent --400),
+                
+                        --hover: (
+                            --border: fn.global-color(--white-transparent --500),
+                        ),
+                        
+                        --selected: (
+                            --border: fn.global-color(--white-transparent --900),
+                        ),
+
+                        --key-focus: (
+                            --border:  fn.global-color(--#{$theme}-transparent --900),
+                            --outline: fn.global-color(--#{$theme}-transparent --300),
+                        ),
+                    ),
+                )
+            )
+        ));
+    }
+
+    @include iro.props-store((
+        --dims: (
+            --thumbnail: (
+                --size: fn.global-dim(--size --600),
+            ),
+            --nav-button: (
+                --width:  fn.global-dim(--size --2500),
+                --height: fn.global-dim(--size --2500),
+            ),
+        ),
+    ), 'md');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        box-sizing:            border-box;
+        display:               grid;
+        flex:                  1 1 auto;
+        grid-template-areas:
+            'header     header     header'
+            'prev       content    next'
+            'thumbnails thumbnails thumbnails'
+            'footer     footer     footer';
+        grid-template-rows:    auto minmax(0, 1fr) auto auto;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        min-block-size:        0;
+
+        @include iro.bem-elem('header') {
+            display:             flex;
+            grid-area:           header;
+            align-items:         flex-start;
+            padding-block-start: fn.dim(--pad);
+            padding-inline:      fn.dim(--pad);
+        }
+
+        @include iro.bem-elem('img') {
+            box-sizing:      border-box;
+            display:         none;
+            grid-area:       content;
+            place-self:      center;
+            max-inline-size: 100%;
+            max-block-size:  100%;
+            padding:         fn.dim(--pad);
+
+            @include iro.bem-sibling-elem('img') {
+                @include iro.bem-modifier('default') {
+                    display: block;
+
+                    @include iro.bem-next-elem('nav-btn') {
+                        display: block;
+    
+                        @include iro.bem-next-elem('nav-btn') {
+                            display: block;
+                        }
+                    }
+                }
+            }
+
+            @include iro.bem-multi('&:target', 'is' 'visible') {
+                display: block;
+
+                @include iro.bem-next-elem('nav-btn') {
+                    display: block;
+
+                    @include iro.bem-next-elem('nav-btn') {
+                        display: block;
+                    }
+                }
+
+                @include iro.bem-sibling-elem('img') {
+                    @include iro.bem-modifier('default') {
+                        display: none;
+
+                        @include iro.bem-next-elem('nav-btn') {
+                            display: none;
+        
+                            @include iro.bem-next-elem('nav-btn') {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-elem('thumbnails') {
+            display:            flex;
+            grid-area:          thumbnails;
+            gap:                fn.dim(--thumbnail --spacing);
+            padding:            fn.dim(--pad);
+            margin-block-start: calc(-1 * fn.dim(--pad));
+            overflow:           auto;
+        }
+
+        @include iro.bem-elem('footer') {
+            display:        flex;
+            grid-area:      footer;
+            align-items:    flex-start;
+            padding-block:  0 fn.dim(--pad);
+            padding-inline: fn.dim(--pad);
+        }
+
+        @include iro.bem-elem('thumbnail') {
+            position:       relative;
+            flex:           0 0 auto;
+            inline-size:    fn.dim(--thumbnail --size);
+            block-size:     fn.dim(--thumbnail --size);
+            overflow:       hidden;
+            border-radius:  fn.dim(--thumbnail --rounding);
+            outline:        fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border);
+            outline-offset: calc(-1 * fn.dim(--thumbnail --border));
+            opacity:       .75;
+
+            &:hover,
+            &:active,
+            &:focus-visible {
+                outline-color: fn.color(--thumbnail --hover --border);
+                opacity:       1;
+            }
+
+            @include iro.bem-is('selected') {
+                $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border));
+
+                margin:        $focus-border-offset;
+                border:        fn.dim(--thumbnail --selected --border) solid fn.color(--thumbnail --selected --border);
+                border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
+                outline:       none;
+                opacity:       1;
+            }
+
+            &:focus-visible {
+                $focus-border-offset: calc(-1 * fn.dim(--thumbnail --key-focus --border-offset));
+
+                margin:         $focus-border-offset;
+                border:         fn.dim(--thumbnail --key-focus --border-offset) solid transparent;
+                border-radius:  calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
+                outline:        fn.dim(--thumbnail --key-focus --border) solid fn.color(--thumbnail --key-focus --border);
+                outline-offset: 0;
+                box-shadow:     0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--thumbnail --key-focus --outline);
+            }
+        }
+
+        @include iro.bem-elem('thumbnail-img') {
+            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 iro.bem-elem('thumbnail-icon') {
+            position:           absolute;
+            inset-block-start:  50%;
+            inset-inline-start: 50%;
+            transform:          translate(-50%, -50%);
+        }
+
+        @include iro.bem-elem('close-btn') {
+            flex:               0 0 auto;
+            margin-block-start: calc(-.5 * fn.dim(--pad));
+            margin-inline:      auto calc(-.5 * fn.dim(--pad));
+            font-size:          fn.dim(--close-button --font-size);
+        }
+
+        @include iro.bem-elem('nav-btn') {
+            position:   relative;
+            display:    none;
+            align-self: center;
+            overflow:   visible;
+            font-size:  fn.dim(--nav-button --font-size);
+
+            &::before {
+                position:           absolute;
+                inset-block-start:  50%;
+                display:            block;
+                inline-size:        fn.dim(--nav-button --width);
+                block-size:         fn.dim(--nav-button --height);
+                content:            '';
+                transform:          translateY(-50%);
+            }
+
+            @include iro.bem-modifier('prev') {
+                grid-area:     prev;
+                margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad));
+
+                &::before {
+                    inset-inline-start: 0;
+                }
+            }
+    
+            @include iro.bem-modifier('next') {
+                grid-area:     next;
+                margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad));
+
+                &::before {
+                    inset-inline-end: 0;
+                }
+            }
+        }
+    
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                color: fn.color(--static-#{$theme} --text);
+
+                @include iro.bem-elem('thumbnail') {
+                    outline-color: fn.color(--static-#{$theme} --thumbnail --border);
+
+                    &:hover,
+                    &:active,
+                    &:focus-visible {
+                        outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border);
+                    }
+        
+                    @include iro.bem-is('selected') {
+                        border-color: fn.color(--static-#{$theme} --thumbnail --selected --border);
+                    }
+
+                    &:focus-visible {
+                        border-color:  transparent;
+                        outline-color: fn.color(--static-#{$theme} --thumbnail --key-focus --border);
+                        box-shadow:    0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--static-#{$theme} --thumbnail --key-focus --outline);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
new file mode 100644
index 0000000..12e9755
--- /dev/null
+++ b/src/objects/_menu.scss
@@ -0,0 +1,137 @@
+/* stylelint-disable length-zero-no-unit */
+
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@use './icon';
+
+@include iro.props-namespace('menu') {
+    @include iro.props-store((
+        --dims: (
+            --spacing: 0em,
+            --header: (
+                --font-size: fn.global-dim(--font-size --50),
+            ),
+            --separator: fn.global-dim(--size --100),
+            --item: (
+                --pad-i:    fn.global-dim(--size --150),
+                --pad-b:    fn.global-dim(--size --100),
+                --rounding: 0em,
+            
+                --key-focus: (
+                    --border:        fn.global-dim(--key-focus --border),
+                    --border-offset: fn.global-dim(--key-focus --border-offset),
+                    --outline:       fn.global-dim(--key-focus --outline),
+                ),
+            ),
+        ),
+        --colors: (
+            --separator: fn.global-color(--border),
+            --header: (
+                --label:  fn.global-color(--heading),
+            ),
+            --item: (
+                --hover: (
+                    --bg:    fn.global-color(--border-mute),
+                    --label: fn.global-color(--heading),
+                ),
+                --active: (
+                    --bg:    fn.global-color(--border),
+                    --label: fn.global-color(--heading),
+                ),
+                --disabled: (
+                    --label: fn.global-color(--text-disabled),
+                ),
+                --key-focus: (
+                    --border:  fn.global-color(--focus --border),
+                    --outline: fn.global-color(--focus --outline),
+                ),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:        flex;
+        flex-direction: column;
+        gap:            fn.dim(--spacing);
+
+        @include iro.bem-elem('header') {
+            padding-block:  fn.dim(--item --pad-b);
+            padding-inline: fn.dim(--item --pad-i);
+            font-size:      fn.dim(--header --font-size);
+            font-weight:    500;
+            color:          fn.color(--header --label);
+            text-transform: uppercase;
+            letter-spacing: .5px;
+
+            @include iro.bem-next-twin-elem {
+                margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
+            }
+        }
+
+        @include iro.bem-elem('item') {
+            padding-block:   fn.dim(--item --pad-b);
+            padding-inline:  fn.dim(--item --pad-i);
+            margin:          calc(-1 * fn.dim(--item --key-focus --outline));
+            color:           fn.color(--item --disabled --label);
+            background-clip: padding-box;
+            border:          fn.dim(--item --key-focus --outline) solid transparent;
+            border-radius:   calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline));
+
+            &:link,
+            &:visited,
+            &:enabled {
+                color: currentColor;
+
+                @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
+                    color:            fn.color(--item --hover --label);
+                    background-color: fn.color(--item --hover --bg);
+                }
+
+                &:active {
+                    color:            fn.color(--item --active --label);
+                    background-color: fn.color(--item --active --bg);
+                }
+
+                &:focus-visible {
+                    outline:    fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border);
+                    box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline);
+                }
+            }
+
+            @include iro.bem-next-elem('header') {
+                margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
+            }
+        }
+
+        @include iro.bem-elem('header') {
+            &:link,
+            &:visited,
+            &:enabled {
+                color: fn.color(--header --label);
+            }
+        }
+
+        @include iro.bem-elem('separator') {
+            block-size:       1px;
+            margin-block:     fn.dim(--separator);
+            margin-inline:    fn.dim(--item --pad-i);
+            background-color: fn.color(--separator);
+        }
+
+        @include iro.bem-elem('slot') {
+            padding-block:  fn.dim(--item --pad-b);
+            padding-inline: fn.dim(--item --pad-i);
+        }
+
+        @include iro.bem-elem('icon-slot') {
+            display:         flex;
+            justify-content: center;
+            inline-size:     fn.foreign-dim(--icon, --size);
+        }
+
+        @include iro.bem-modifier('pull') {
+            margin: calc(-1 * fn.dim(--item --pad-i));
+        }
+    }
+}
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
new file mode 100644
index 0000000..8291750
--- /dev/null
+++ b/src/objects/_palette.scss
@@ -0,0 +1,62 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:string';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+@use '../config';
+
+@include iro.props-namespace('palette') {
+    @include iro.bem-object(iro.props-namespace()) {
+        display:    flex;
+        block-size: 3em;
+
+        @include iro.bem-elem('item') {
+            flex: 1 1 auto;
+
+            $palette:   map.get(config.$themes, config.$theme-default, --palettes, --base);
+            $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
+
+            @for $i from 1 through list.length($contrasts) {
+                $key: list.nth(map.keys($contrasts), $i);
+
+                &:nth-child(#{$i}) {
+                    background-color: fn.global-color(--base $key);
+                }
+            }
+        }
+
+        @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) {
+            $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
+
+            @include iro.bem-modifier(string.slice($palette-name, 3)) {
+                @include iro.bem-elem('item') {
+                    @for $i from 1 through list.length($contrasts) {
+                        $key: list.nth(map.keys($contrasts), $i);
+        
+                        &:nth-child(#{$i}) {
+                            background-color: fn.global-color($palette-name $key);
+                        }
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-modifier('static') {
+            @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
+                $contrasts: map.get(config.$static-colors, --contrasts);
+
+                @include iro.bem-modifier(string.slice($palette-name, 3)) {
+                    @include iro.bem-elem('item') {
+                        @for $i from 1 through list.length($contrasts) {
+                            $key: list.nth(map.keys($contrasts), $i);
+            
+                            &:nth-child(#{$i}) {
+                                background-color: fn.global-color(#{$palette-name}-static $key);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
new file mode 100644
index 0000000..13550eb
--- /dev/null
+++ b/src/objects/_popover.scss
@@ -0,0 +1,51 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('popover') {
+    @include iro.props-store((
+        --dims: (
+            --z-index:   10000,
+            --pad-i:     0,
+            --pad-b:     fn.global-dim(--size --85),
+            --separator: fn.global-dim(--size --85),
+            --rounding:  fn.global-dim(--rounding),
+            --border:    fn.global-dim(--border --thin),
+        ),
+        --colors: (
+            --bg:        fn.global-color(--bg-l2),
+            --border:    fn.global-color(--border),
+            --filter:    drop-shadow(
+                fn.global-dim(--shadow --x)
+                fn.global-dim(--shadow --y)
+                fn.global-dim(--shadow --blur)
+                fn.global-color(--shadow)
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        position:           absolute;
+        inset-block-start:  0;
+        inset-inline-start: 0;
+        z-index:            fn.dim(--z-index);
+        padding-block:      fn.dim(--pad-b);
+        padding-inline:     fn.dim(--pad-i);
+        background-color:   fn.color(--bg);
+        filter:             fn.color(--filter);
+        border:             fn.dim(--border) solid fn.color(--border);
+        border-radius:      fn.dim(--rounding);
+        transform:          translate(var(--x), var(--y));
+
+        @include iro.bem-modifier('up-left') {
+            transform: translate(var(--x), calc(var(--y) - 100%));
+        }
+
+        @include iro.bem-modifier('up-right') {
+            transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
+        }
+
+        @include iro.bem-modifier('down-right') {
+            transform: translate(calc(var(--x) - 100%), var(--y));
+        }
+    }
+}
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
new file mode 100644
index 0000000..ad3e8d4
--- /dev/null
+++ b/src/objects/_radio.scss
@@ -0,0 +1,185 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('radio') {
+    @include iro.props-store((
+        --dims: (
+            --diameter:        fn.global-dim(--size --200),
+            --label-gap:       fn.global-dim(--size --125),
+            --border:          fn.global-dim(--border --medium),
+            --pad-i:           fn.global-dim(--size --65),
+            --pad-b:           fn.global-dim(--size --65),
+            --rounding:        fn.global-dim(--rounding),
+            --spacing-sibling: fn.global-dim(--size --300),
+
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
+            ),
+        ),
+        --colors: (
+            --circle-border: fn.global-color(--text-mute-more),
+            --circle-bg:     fn.global-color(--base --75),
+    
+            --hover: (
+                --label:         fn.global-color(--heading),
+                --circle-border: fn.global-color(--text-mute),
+            ),
+            --accent: (
+                --circle-border: fn.global-color(--accent --900),
+    
+                --hover: (
+                    --circle-border: fn.global-color(--accent --1000),
+                ),
+            ),
+            --disabled: (
+                --label:         fn.global-color(--text-disabled),
+                --circle-border: fn.global-color(--border-strong),
+                --circle-bg:     fn.global-color(--base --75),
+            ),
+            --key-focus: (
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        position:       relative;
+        display:        inline-block;
+        padding-block:  fn.dim(--pad-b);
+        padding-inline: fn.dim(--pad-i);
+        margin-inline:
+            calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
+            calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
+    
+        @include iro.bem-elem('circle') {
+            display:            inline-block;
+            flex:               0 0 auto;
+            inline-size:        fn.dim(--diameter);
+            block-size:         fn.dim(--diameter);
+            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset));
+            vertical-align:     top;
+            background-color:   fn.color(--circle-border);
+            background-clip:    padding-box;
+            border:             fn.dim(--key-focus --border-offset) solid transparent;
+            border-radius:      2em;
+    
+            &::after {
+                position:           relative;
+                inset-block-start:  fn.dim(--border);
+                inset-inline-start: fn.dim(--border);
+                display:            block;
+                inline-size:        calc(fn.dim(--diameter) - 2 * fn.dim(--border));
+                block-size:         calc(fn.dim(--diameter) - 2 * fn.dim(--border));
+                content:            '';
+                background-color:   fn.color(--circle-bg);
+                border-radius:      fn.dim(--diameter);
+                transition:         transform .2s ease;
+            }
+        }
+    
+        @include iro.bem-elem('label') {
+            margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
+        }
+    
+        @include iro.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:      fn.dim(--rounding);
+    
+            &:hover,
+            &:focus-visible {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--hover --label);
+                }
+    
+                @include iro.bem-sibling-elem('circle') {
+                    background-color: fn.color(--hover --circle-border);
+                }
+            }
+    
+            &:checked {
+                @include iro.bem-sibling-elem('circle') {
+                    &::after {
+                        transform: scale(.44);
+                    }
+                }
+            }
+    
+            &:disabled {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--disabled --label);
+                }
+    
+                @include iro.bem-sibling-elem('circle') {
+                    background-color: fn.color(--disabled --circle-border);
+    
+                    &::after {
+                        background-color: fn.color(--disabled --circle-bg);
+                    }
+                }
+            }
+
+            &:focus-visible {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--key-focus --label);
+                }
+
+                @include iro.bem-sibling-elem('circle') {
+                    outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                    box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+                }
+            }
+        }
+    
+        @include iro.bem-modifier('standalone') {
+            @include iro.bem-elem('circle') {
+                margin-block-start: 0;
+            }
+        }
+    
+        @include iro.bem-modifier('accent') {
+            @include iro.bem-elem('native') {
+                &:checked {
+                    @include iro.bem-sibling-elem('circle') {
+                        background-color: fn.color(--accent --circle-border);
+                    }
+        
+                    &:hover,
+                    &:focus-visible {
+                        @include iro.bem-sibling-elem('circle') {
+                            background-color: fn.color(--accent --hover --circle-border);
+                        }
+                    }
+                }
+    
+                &:disabled {
+                    @include iro.bem-sibling-elem('circle') {
+                        background-color: fn.color(--disabled --circle-border);
+        
+                        &::after {
+                            background-color: fn.color(--disabled --circle-bg);
+                        }
+                    }
+        
+                    &:checked {
+                        @include iro.bem-sibling-elem('circle') {
+                            background-color: fn.color(--disabled --circle-border);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
new file mode 100644
index 0000000..237b5aa
--- /dev/null
+++ b/src/objects/_side-nav.scss
@@ -0,0 +1,122 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@use './icon';
+
+@include iro.props-namespace('side-nav') {
+    @include iro.props-store((
+        --dims: (
+            --spacing: fn.global-dim(--size --50),
+            --header: (
+                --font-size: fn.global-dim(--font-size --50),
+            ),
+            --separator: fn.global-dim(--size --200),
+            --item: (
+                --pad-i:    fn.global-dim(--size --150),
+                --pad-b:    fn.global-dim(--size --100),
+                --rounding: fn.global-dim(--rounding),
+            
+                --key-focus: (
+                    --border:        fn.global-dim(--key-focus --border),
+                    --border-offset: fn.global-dim(--key-focus --border-offset),
+                    --outline:       fn.global-dim(--key-focus --outline),
+                ),
+            ),
+        ),
+        --colors: (
+            --header: (
+                --label:  fn.global-color(--text-mute-more),
+            ),
+            --item: (
+                --hover: (
+                    --bg:    fn.global-color(--border-mute),
+                    --label: fn.global-color(--heading),
+                ),
+                --active: (
+                    --bg:    fn.global-color(--border),
+                    --label: fn.global-color(--heading),
+                ),
+                --disabled: (
+                    --label: fn.global-color(--text-disabled),
+                ),
+                --key-focus: (
+                    --border:  fn.global-color(--focus --border),
+                    --outline: fn.global-color(--focus --outline),
+                ),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:        flex;
+        flex-direction: column;
+        gap:            fn.dim(--spacing);
+
+        @include iro.bem-elem('header') {
+            padding-block:  fn.dim(--item --pad-b);
+            padding-inline: fn.dim(--item --pad-i);
+            font-size:      fn.dim(--header --font-size);
+            font-weight:    500;
+            color:          fn.color(--header --label);
+            text-transform: uppercase;
+            letter-spacing: .5px;
+
+            @include iro.bem-next-twin-elem {
+                margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
+            }
+        }
+
+        @include iro.bem-elem('item') {
+            padding-block:   fn.dim(--item --pad-b);
+            padding-inline:  fn.dim(--item --pad-i);
+            margin:          calc(-1 * fn.dim(--item --key-focus --border-offset));
+            color:           fn.color(--item --disabled --label);
+            background-clip: padding-box;
+            border:          fn.dim(--item --key-focus --border-offset) solid transparent;
+            border-radius:   calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --border-offset));
+
+            &:link,
+            &:visited,
+            &:enabled {
+                color: currentColor;
+
+                @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
+                    color:            fn.color(--item --hover --label);
+                    background-color: fn.color(--item --hover --bg);
+                }
+
+                &:active {
+                    color:            fn.color(--item --active --label);
+                    background-color: fn.color(--item --active --bg);
+                }
+
+                &:focus-visible {
+                    outline:    fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border);
+                    box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline);
+                }
+            }
+
+            @include iro.bem-next-elem('header') {
+                margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
+            }
+        }
+
+        @include iro.bem-elem('header') {
+            &:link,
+            &:visited,
+            &:enabled {
+                color: fn.color(--header --label);
+            }
+        }
+
+        @include iro.bem-elem('separator') {
+            block-size: fn.dim(--separator);
+        }
+
+        @include iro.bem-elem('icon-slot') {
+            display:         flex;
+            justify-content: center;
+            inline-size:     fn.foreign-dim(--icon, --size);
+        }
+    }
+}
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
new file mode 100644
index 0000000..ce1794a
--- /dev/null
+++ b/src/objects/_status-indicator.scss
@@ -0,0 +1,39 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+$themes: 'accent' 'positive' 'negative' 'warning' !default;
+
+@include iro.props-namespace('status-indicator') {
+    @include iro.props-store((
+        --dims: (
+            --size: fn.global-dim(--size --125),
+        ),
+        --colors: (
+            --default: fn.global-color(--border-strong),
+            --primary: fn.global-color(--text),
+        ),
+    ));
+
+    @each $theme in $themes {
+        @include iro.props-store((
+            --colors: (
+                --#{$theme}: fn.global-color(--#{$theme} --700),
+            ),
+        ));
+    }
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:          inline-block;
+        inline-size:      fn.dim(--size);
+        block-size:       fn.dim(--size);
+        vertical-align:   middle;
+        background-color: fn.color(--default);
+        border-radius:    10em;
+
+        @each $theme in $themes {
+            @include iro.bem-is($theme) {
+                background-color: fn.color(--#{$theme});
+            }
+        }
+    }
+}
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
new file mode 100644
index 0000000..fa903b1
--- /dev/null
+++ b/src/objects/_switch.scss
@@ -0,0 +1,222 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('switch') {
+    @include iro.props-store((
+        --dims: (
+            --width:           fn.global-dim(--size --350),
+            --height:          fn.global-dim(--size --200),
+            --label-gap:       fn.global-dim(--size --125),
+            --border:          fn.global-dim(--border --medium),
+            --pad-i:           fn.global-dim(--size --65),
+            --pad-b:           fn.global-dim(--size --65),
+            --rounding:        fn.global-dim(--rounding),
+            --spacing-sibling: fn.global-dim(--size --300),
+
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
+            ),
+        ),
+        --colors: (
+            --track-bg:      fn.global-color(--border),
+            --handle-border: fn.global-color(--text-mute-more),
+            --handle-bg:     fn.global-color(--base --50),
+    
+            --hover: (
+                --label:         fn.global-color(--heading),
+                --handle-border: fn.global-color(--text-mute),
+            ),
+            --accent: (
+                --handle-border: fn.global-color(--accent --900),
+    
+                --hover: (
+                    --handle-border: fn.global-color(--accent --1000),
+                ),
+            ),
+            --disabled: (
+                --label:         fn.global-color(--text-disabled),
+                --track-bg:      fn.global-color(--border),
+                --handle-border: fn.global-color(--border-strong),
+                --handle-bg:     fn.global-color(--base --50),
+            ),
+            --key-focus: (
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        position:       relative;
+        display:        inline-block;
+        padding-block:  fn.dim(--pad-b);
+        padding-inline: fn.dim(--pad-i);
+        margin-inline:
+            calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
+            calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
+    
+        @include iro.bem-elem('indicator') {
+            display:            inline-block;
+            flex:               0 0 auto;
+            inline-size:        fn.dim(--width);
+            block-size:         fn.dim(--height);
+            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset));
+            vertical-align:     top;
+            background-color:   fn.color(--track-bg);
+            background-clip:    padding-box;
+            border:             fn.dim(--key-focus --border-offset) solid transparent;
+            border-radius:      2em;
+            transition:         background-color .2s ease;
+    
+            &::after {
+                display:          block;
+                inline-size:      calc(fn.dim(--height) - 2 * fn.dim(--border));
+                block-size:       calc(fn.dim(--height) - 2 * fn.dim(--border));
+                content:          '';
+                background-color: fn.color(--handle-bg);
+                border:           fn.dim(--border) solid fn.color(--handle-border);
+                border-radius:    fn.dim(--width);
+                transition:       transform .2s ease;
+            }
+        }
+    
+        @include iro.bem-elem('label') {
+            margin-inline-start: fn.dim(--label-gap);
+        }
+    
+        @include iro.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:      fn.dim(--rounding);
+    
+            &:hover,
+            &:focus-visible {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--hover --label);
+                }
+    
+                @include iro.bem-sibling-elem('indicator') {
+                    &::after {
+                        border-color: fn.color(--hover --handle-border);
+                    }
+                }
+            }
+    
+            &:checked {
+                @include iro.bem-sibling-elem('indicator') {
+                    background-color: fn.color(--handle-border);
+    
+                    &::after {
+                        border-color: fn.color(--handle-border);
+                        transform:    translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
+                    }
+                }
+    
+                &:hover,
+                &:focus-visible {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--hover --handle-border);
+
+                        &::after {
+                            border-color: fn.color(--hover --handle-border);
+                        }
+                    }
+                }
+            }
+    
+            &:disabled {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--disabled --label);
+                }
+    
+                @include iro.bem-sibling-elem('indicator') {
+                    background-color: fn.color(--disabled --track-bg);
+    
+                    &::after {
+                        background-color: fn.color(--disabled --handle-bg);
+                        border-color:     fn.color(--disabled --handle-border);
+                    }
+                }
+    
+                &:checked {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--disabled --handle-border);
+    
+                        &::after {
+                            border-color: fn.color(--disabled --handle-border);
+                        }
+                    }
+                }
+            }
+    
+            &:focus-visible {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--key-focus --label);
+                }
+
+                @include iro.bem-sibling-elem('indicator') {
+                    outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                    box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+                }
+            }
+        }
+    
+        @include iro.bem-modifier('standalone') {
+            @include iro.bem-elem('indicator') {
+                margin-block-start: 0;
+            }
+        }
+    
+        @include iro.bem-modifier('accent') {
+            @include iro.bem-elem('native') {
+                &:checked {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--accent --handle-border);
+        
+                        &::after {
+                            border-color: fn.color(--accent --handle-border);
+                        }
+                    }
+        
+                    &:hover,
+                    &:focus-visible {
+                        @include iro.bem-sibling-elem('indicator') {
+                            background-color: fn.color(--accent --hover --handle-border);
+    
+                            &::after {
+                                border-color: fn.color(--accent --hover --handle-border);
+                            }
+                        }
+                    }
+                }
+        
+                &:disabled {
+                    @include iro.bem-sibling-elem('label') {
+                        color: fn.color(--disabled --label);
+                    }
+
+                    &:checked {
+                        @include iro.bem-sibling-elem('indicator') {
+                            background-color: fn.color(--disabled --handle-border);
+
+                            &::after {
+                                border-color: fn.color(--disabled --handle-border);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
new file mode 100644
index 0000000..5b16d66
--- /dev/null
+++ b/src/objects/_table.scss
@@ -0,0 +1,168 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+@use '../mixins' as mx;
+
+@include iro.props-namespace('table') {
+    @include iro.props-store((
+        --dims: (
+            --pad-i:    fn.global-dim(--size --175),
+            --pad-b:    fn.global-dim(--size --125),
+            --rounding: fn.global-dim(--rounding),
+            --border:   fn.global-dim(--border --thin),
+
+            --sm: (
+                --pad-b: fn.global-dim(--size --75),
+            )
+        ),
+        --colors: (
+            --border:   fn.global-color(--border),
+            --heading:  fn.global-color(--heading),
+            --hover:    fn.global-color(--border-mute),
+            --active:   fn.global-color(--border),
+            --box: (
+                --bg:     fn.global-color(--base --50),
+                --hover:  fn.global-color(--bg-base),
+                --active: fn.global-color(--border-mute),
+            )
+        )
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        border-spacing:  0;
+        border-collapse: separate;
+
+        @include iro.bem-modifier('fixed') {
+            table-layout: fixed;
+        }
+
+        @include iro.bem-elem('head-cell') {
+            @include mx.set-font(--standard, (
+                --line-height: null,
+                --size:        fn.global-dim(--font-size --50),
+                --weight:      bold,
+                --transform:   uppercase,
+                --spacing:     .5px
+            ));
+            padding-block:  fn.dim(--pad-b);
+
+            padding-inline: fn.dim(--pad-i);
+            color:          fn.color(--heading);
+            text-align:     start;
+        }
+
+        @include iro.bem-elem('cell') {
+            padding-block:            fn.dim(--pad-b);
+            padding-inline:           fn.dim(--pad-i);
+            border-color:             fn.color(--border);
+            border-style:             solid;
+            border-width:             0;
+            border-block-start-width: fn.dim(--border);
+
+            @include iro.bem-modifier('divider') {
+                border-inline-end-width: fn.dim(--border);
+            }
+        }
+
+        @include iro.bem-elem('row') {
+            &:last-child {
+                @include iro.bem-elem('cell') {
+                    border-block-end-width: fn.dim(--border);
+                }
+            }
+        }
+
+        @include iro.bem-modifier('flush') {
+            @include iro.bem-elem('head-cell', 'cell') {
+                &:first-child {
+                    padding-inline-start: 0;
+                }
+
+                &:last-child {
+                    padding-inline-end: 0;
+                }
+            }
+        }
+
+        @include iro.bem-modifier('box') {
+            @include iro.bem-elem('cell') {
+                background-color: fn.color(--box --bg);
+            
+                &:first-child {
+                    border-inline-start-width: fn.dim(--border);
+                }
+            
+                &:last-child {
+                    border-inline-end-width: fn.dim(--border);
+                }
+            }
+    
+            @include iro.bem-elem('row') {
+                &:first-child {
+                    @include iro.bem-elem('cell') {
+                        &:first-child {
+                            border-start-start-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-start-end-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+    
+                &:last-child {
+                    @include iro.bem-elem('cell') {
+                        &:first-child {
+                            border-end-start-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-end-end-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-modifier('interactive') {
+            @include iro.bem-elem('row') {
+                @include iro.bem-elem('cell') {
+                    cursor: pointer;
+                }
+
+                &:hover {
+                    @include iro.bem-elem('cell') {
+                        background-color: fn.color(--hover);
+                    }
+                }
+    
+                &:active {
+                    @include iro.bem-elem('cell') {
+                        background-color: fn.color(--active);
+                    }
+                }
+            }
+
+            @include iro.bem-modifier('box') {
+                @include iro.bem-elem('row') {
+                    &:hover {
+                        @include iro.bem-elem('cell') {
+                            background-color: fn.color(--box --hover);
+                        }
+                    }
+        
+                    &:active {
+                        @include iro.bem-elem('cell') {
+                            background-color: fn.color(--box --active);
+                        }
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-modifier('sm') {
+            @include iro.bem-elem('head-cell', 'cell') {
+                padding-block: fn.dim(--sm --pad-b);
+            }
+        }
+    }
+}
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
new file mode 100644
index 0000000..cfb5a6d
--- /dev/null
+++ b/src/objects/_text-field.scss
@@ -0,0 +1,213 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@mixin invalid {
+    $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
+    
+    @include iro.bem-sibling-elem('bg') {
+        inset-block:   $focus-border-offset;
+        inset-inline:  $focus-border-offset;
+        border:        fn.dim(--focus --border) solid fn.color(--error --border);
+        border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
+    }
+
+    &:hover {
+        @include iro.bem-sibling-elem('bg') {
+            border-color: fn.color(--error --hover --border);
+        }
+    }
+
+    &:focus {
+        @include iro.bem-sibling-elem('bg') {
+            border-color: fn.color(--error --focus --border);
+        }
+    }
+}
+
+@mixin keyboard-focus {
+    @include iro.bem-sibling-elem('bg') {
+        border-color:   fn.color(--key-focus --border);
+        outline:        fn.color(--key-focus --outline) solid fn.dim(--key-focus --border);
+        //outline-offset: fn.dim(--focus --border);
+    }
+}
+
+@include iro.props-namespace('text-field') {
+    @include iro.props-store((
+        --dims: (
+            --line-height: 1.4,
+            --pad-i:       fn.global-dim(--size --125),
+            --pad-b:       fn.global-dim(--size --125),
+            --border:      fn.global-dim(--border --thin),
+            --rounding:    fn.global-dim(--rounding),
+
+            --extended: (
+                --pad:     fn.global-dim(--size --50),
+            ),
+
+            --focus: (
+                --border:  fn.global-dim(--border --medium),
+            ),
+            
+            --key-focus: (
+                --border: fn.global-dim(--key-focus --outline),
+            ),
+        ),
+        --colors: (
+            --bg:          fn.global-color(--base --50),
+            --placeholder: fn.global-color(--text-mute-more),
+            --text:        fn.global-color(--text),
+            --border:      fn.global-color(--border-strong),
+    
+            --hover: (
+                --border: fn.global-color(--text-mute-more),
+            ),
+            --focus: (
+                --border: fn.global-color(--focus --border),
+            ),
+            --key-focus: (
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
+            --error: (
+                --border: fn.global-color(--negative --700),
+    
+                --hover: (
+                    --border: fn.global-color(--negative --900),
+                ),
+                --focus: (
+                    --border: fn.global-color(--negative --900),
+                ),
+            ),
+            --disabled: (
+                --bg:          fn.global-color(--border-mute),
+                --placeholder: fn.global-color(--text-disabled),
+                --text:        fn.global-color(--text-disabled),
+                --border:      fn.global-color(--border-mute),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
+        
+        position:         relative;
+        min-inline-size:  0;
+        background-color: fn.color(--bg);
+        border-radius:    fn.dim(--rounding);
+
+        @include iro.bem-elem('bg') {
+            position:       absolute;
+            inset-block:    0;
+            inset-inline:   0;
+            display:        block;
+            pointer-events: none;
+            border:         fn.dim(--border) solid fn.color(--border);
+            border-radius:  fn.dim(--rounding);
+        }
+
+        @include iro.bem-elem('native') {
+            box-sizing:       border-box;
+            inline-size:      100%;
+            padding-block:    calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1));
+            padding-inline:   fn.dim(--pad-i);
+            font:             inherit;
+            line-height:      fn.dim(--line-height);
+            color:            fn.color(--text);
+            appearance:       none;
+            resize:           none;
+            background-color: transparent;
+            border:           1px solid transparent;
+
+            &::placeholder {
+                font-style: italic;
+                color:      fn.color(--placeholder);
+                opacity:    1;
+            }
+
+            &:hover {
+                @include iro.bem-sibling-elem('bg') {
+                    border-color: fn.color(--hover --border);
+                }
+            }
+
+            &:focus {
+                outline: 0;
+
+                @include iro.bem-sibling-elem('bg') {
+                    inset-block:   $focus-border-offset;
+                    inset-inline:  $focus-border-offset;
+                    border:        fn.dim(--focus --border) solid fn.color(--focus --border);
+                    border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
+                }
+            }
+
+            &:invalid {
+                @include invalid;
+            }
+
+            &:focus-visible,
+            &:invalid:focus-visible {
+                @include keyboard-focus;
+            }
+        }
+
+        @include iro.bem-modifier('extended') {
+            padding: fn.dim(--extended --pad);
+
+            @include iro.bem-multi('&', 'elem' 'bg') {
+                border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad));
+            }
+
+            @include iro.bem-elem('native') {
+                &:focus {
+                    @include iro.bem-sibling-elem('bg') {
+                        border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset);
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-is('invalid') {
+            @include iro.bem-elem('native') {
+                @include invalid;
+
+                &:focus-visible {
+                    @include keyboard-focus;
+                }
+            }
+        }
+
+        @include iro.bem-is('disabled') {
+            background-color: fn.color(--disabled --bg);
+
+            @include iro.bem-elem('native') {
+                color: fn.color(--disabled --text);
+
+                &::placeholder {
+                    color: fn.color(--disabled --placeholder);
+                }
+            }
+
+            @include iro.bem-elem('bg') {
+                border-color: fn.color(--disabled --border);
+            }
+
+            @include iro.bem-is('invalid') {
+                @include iro.bem-elem('native') {
+                    @include iro.bem-sibling-elem('bg') {
+                        border-color: fn.color(--disabled --border);
+                    }
+                }
+            }
+
+            @include iro.bem-elem('native') {
+                &:invalid {
+                    @include iro.bem-sibling-elem('bg') {
+                        border-color: fn.color(--disabled --border);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
new file mode 100644
index 0000000..7f93e42
--- /dev/null
+++ b/src/scopes/_blockquotes.scss
@@ -0,0 +1,25 @@
+@use 'sass:meta';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+
+@forward 'blockquotes.vars';
+@use 'blockquotes.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-scope('blockquotes') {
+        blockquote {
+            padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
+            margin-block:         props.get(vars.$margin-bs);
+            margin-inline:        1px 0;
+            border-inline-start:  props.get(vars.$border-width) solid props.get(vars.$border-color);
+        }
+
+        @include iro.bem-modifier('compact') {
+            blockquote {
+                padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width));
+            }
+        }
+    }
+}
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
new file mode 100644
index 0000000..a3f8d85
--- /dev/null
+++ b/src/scopes/_blockquotes.vars.scss
@@ -0,0 +1,11 @@
+@use '../props';
+@use '../vars';
+@use './implicit.vars' as implicit-vars;
+
+$indent:       props.def(--s-blockquotes--indent, props.get(vars.$list--indent)) !default;
+$margin-bs:    props.def(--s-blockquotes--margin-bs, props.get(implicit-vars.$paragraph--margin-bs)) !default;
+$border-width: props.def(--s-blockquotes--border-width, props.get(vars.$border-width--thick)) !default;
+
+$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(vars.$list--compact-indent)) !default;
+
+$border-color: props.def(--s-blockquotes--border-width, props.get(vars.$theme, --border)) !default;
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
new file mode 100644
index 0000000..0d8cdd0
--- /dev/null
+++ b/src/scopes/_code.scss
@@ -0,0 +1,39 @@
+@use 'sass:meta';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+
+@forward 'code.vars';
+@use 'code.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.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);
+
+            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
new file mode 100644
index 0000000..27d75f7
--- /dev/null
+++ b/src/scopes/_code.vars.scss
@@ -0,0 +1,18 @@
+@use '../props';
+@use '../vars';
+@use './implicit.vars' as implicit-vars;
+
+$inline--pad-i:    props.def(--s-code--inline--pad-i, props.get(vars.$size--50)) !default;
+$inline--pad-b:    props.def(--s-code--inline--pad-b, props.get(vars.$size--10)) !default;
+$inline--rounding: props.def(--s-code--inline--rounding, props.get(vars.$rounding)) !default;
+
+$block--pad-i:     props.def(--s-code--block--pad-i, props.get(vars.$size--150)) !default;
+$block--pad-b:     props.def(--s-code--block--pad-b, props.get(vars.$size--85)) !default;
+$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit-vars.$paragraph--margin-bs)) !default;
+$block--rounding:  props.def(--s-code--block--rounding, props.get(vars.$rounding)) !default;
+
+$inline--fg: props.def(--s-code--inline--fg, props.get(vars.$theme, --red, --1200)) !default;
+$inline--bg: props.def(--s-code--inline--bg, props.get(vars.$theme, --red, --200)) !default;
+
+$block--fg: props.def(--s-code--block--fg, props.get(vars.$theme, --text)) !default;
+$block--bg: props.def(--s-code--block--bg, props.get(vars.$theme, --base, --50)) !default;
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
new file mode 100644
index 0000000..e97e9f2
--- /dev/null
+++ b/src/scopes/_headings.scss
@@ -0,0 +1,115 @@
+@use 'include-media/dist/include-media' as media;
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../mixins' as mx;
+@use '../props';
+@use '../vars';
+
+@mixin styles {
+    @include iro.bem-scope('headings') {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            @include mx.set-font(--headline);
+
+            display:        block;
+            text-transform: none;
+            letter-spacing: normal;
+            transform:      translateX(-.06em);
+        }
+
+
+        h1 {
+            @include mx.heading-strong(--xxl);
+        }
+
+        h2 {
+            @include mx.heading-strong(--xl);
+        }
+
+        h3 {
+            @include mx.heading-medium(--lg);
+        }
+
+        h4 {
+            @include mx.heading-medium(--md);
+        }
+
+        h5 {
+            @include mx.heading-faint(--sm);
+        }
+
+        h6 {
+            @include mx.heading-faint(--xs);
+        }
+
+        @include iro.bem-elem('highlight') {
+            background-image: linear-gradient(to top,
+            transparent .15em,
+            fn.foreign-color(--heading, --bg) .15em,
+            fn.foreign-color(--heading, --bg) .6em,
+            transparent .6em);
+        }
+
+        @include iro.bem-modifier('display') {
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
+                @include mx.set-font(--headline);
+            }
+
+            h1 {
+                @include mx.heading-strong(--display --xxl);
+
+                @include media.media('<=md') {
+                    @include mx.heading-strong(--display-sm --xxl);
+                }
+            }
+
+            h2 {
+                @include mx.heading-strong(--display --xl);
+
+                @include media.media('<=md') {
+                    @include mx.heading-strong(--display-sm --xl);
+                }
+            }
+
+            h3 {
+                @include mx.heading-strong(--display --lg);
+
+                @include media.media('<=md') {
+                    @include mx.heading-strong(--display-sm --lg);
+                }
+            }
+
+            h4 {
+                @include mx.heading-strong(--display --md);
+
+                @include media.media('<=md') {
+                    @include mx.heading-strong(--display-sm --md);
+                }
+            }
+
+            h5 {
+                @include mx.heading-medium(--display --sm);
+
+                @include media.media('<=md') {
+                    @include mx.heading-medium(--display-sm --sm);
+                }
+            }
+
+            h6 {
+                @include mx.heading-faint(--display --xs);
+
+                @include media.media('<=md') {
+                    @include mx.heading-faint(--display-sm --xs);
+                }
+            }
+        }
+    }
+}
diff --git a/src/scopes/_headings.vars.scss b/src/scopes/_headings.vars.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/scopes/_headings.vars.scss
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
new file mode 100644
index 0000000..9c17868
--- /dev/null
+++ b/src/scopes/_implicit.scss
@@ -0,0 +1,152 @@
+@use 'sass:math';
+@use 'sass:meta';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+@use '../vars' as global-vars;
+
+@forward 'implicit.vars';
+@use 'implicit.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    html {
+        accent-color:    props.get(global-vars.$theme, --accent, --600);
+        scrollbar-color: props.get(global-vars.$theme, --text-disabled) transparent;
+    }
+
+    html,
+    body {
+        block-size: 100%;
+    }
+
+    body {
+        //@include mx.set-font(--standard, (--size: fn.dim(--font-size --100)));
+
+        padding:          0;
+        margin:           0;
+        color:            props.get(global-vars.$theme, --text);
+        background-color: props.get(global-vars.$theme, --bg-base);
+    }
+
+    pre,
+    code {
+        font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
+    }
+
+    pre,
+    code {
+        //@include mx.set-font(--mono, (--size: .93em));
+    }
+
+    pre {
+        margin:     0;
+        overflow-x: auto;
+
+        code {
+            font-size: 1em;
+            color:     currentColor;
+        }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        //@include mx.heading-medium(--md);
+
+        margin-block: props.get(vars.$heading--margin-bs) 0;
+
+        & + & {
+            margin-block-start: props.get(vars.$heading--margin-bs-sibling);
+        }
+    }
+
+    p {
+        margin-block: props.get(vars.$paragraph--margin-bs) 0;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    strong {
+        font-weight: bold;
+    }
+
+    small {
+        font-size: props.get(global-vars.$font-size--75);
+    }
+
+    ul,
+    ol {
+        padding:    0;
+        margin:     0;
+        list-style: none;
+    }
+
+    li {
+        padding: 0;
+        margin:  0;
+    }
+
+    :focus,
+    :focus-visible {
+        outline: 0;
+    }
+
+    :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;
+
+        &::-moz-focus-inner {
+            border: 0;
+        }
+    }
+
+    input,
+    textarea {
+        &::placeholder {
+            color:   props.get(global-vars.$theme, --text-mute);
+            opacity: 1;
+        }
+
+        &:disabled {
+            color: props.get(global-vars.$theme, --text-disabled);
+        }
+    }
+
+    textarea {
+        block-size: calc(1em * props.get(global-vars.$font--standard--line-height));
+    }
+
+    hr {
+        block-size:       props.get(global-vars.$border-width--thin);
+        margin:           0;
+        background-color: props.get(global-vars.$theme, --border-color);
+        border:           0;
+    }
+}
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
new file mode 100644
index 0000000..c18ca78
--- /dev/null
+++ b/src/scopes/_implicit.vars.scss
@@ -0,0 +1,7 @@
+@use '../props';
+@use '../vars';
+
+$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(vars.$size--300)) !default;
+
+$heading--margin-bs:         props.def(--s-implicit--heading--margin-bs, props.get(vars.$size--700)) !default;
+$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(vars.$size--325)) !default;
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
new file mode 100644
index 0000000..69793b2
--- /dev/null
+++ b/src/scopes/_links.scss
@@ -0,0 +1,93 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+
+@forward 'links.vars';
+@use 'links.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.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;
+
+            &:hover {
+                text-decoration:           underline;
+                text-decoration-skip-ink:  none;
+                text-decoration-thickness: props.get(vars.$hover--underline-width);
+            }
+
+            &: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 iro.bem-modifier('invisible') {
+            :link,
+            :visited {
+                text-decoration: none;
+            }
+        }
+
+        @include iro.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);
+                }
+            }
+
+            :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);
+                }
+            }
+        }
+
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include iro.bem-modifier($theme) {
+                :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);
+                    }
+
+                    &: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);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
new file mode 100644
index 0000000..7880204
--- /dev/null
+++ b/src/scopes/_links.vars.scss
@@ -0,0 +1,47 @@
+@use 'sass:map';
+@use '../props';
+@use '../vars';
+
+$rounding:               props.def(--s-links--rounding, props.get(vars.$rounding)) !default;
+$underline-width:        props.def(--s-links--underline-width, props.get(vars.$border-width--thin)) !default;
+$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(vars.$border-width--medium)) !default;
+
+$key-focus--border-width:  props.def(--s-links--key-focus--border-width, props.get(vars.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(vars.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(vars.$key-focus--outline-width)) !default;
+
+$underline-color: props.def(--s-links--underline-color, props.get(vars.$theme, --text-mute-more)) !default;
+
+$colored--text-color:        props.def(--s-links--colored--text-color, props.get(vars.$theme, --accent, --1100)) !default;
+$colored--underline-color:   props.def(--s-links--colored--underline-color, props.get(vars.$theme, --accent, --600)) !default;
+$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(vars.$theme, --accent, --1300)) !default;
+
+$colored--visited--text-color:        props.def(--s-links--colored--visited--text-color, props.get(vars.$theme, --purple, --1100)) !default;
+$colored--visited--underline-color:   props.def(--s-links--colored--visited--underline-color, props.get(vars.$theme, --purple, --600)) !default;
+$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(vars.$theme, --purple, --1300)) !default;
+
+$key-focus--text-color:    props.def(--s-links--key-focus--text-color, props.get(vars.$theme, --focus, --text)) !default;
+$key-focus--border-color:  props.def(--s-links--key-focus--border-color, props.get(vars.$theme, --focus, --border)) !default;
+$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(vars.$theme, --focus, --outline)) !default;
+
+$static-themes: props.def(--s-links);
+@each $theme in map.keys(props.get(vars.$transparent-colors)) {
+    $link-theme: #{$theme}-static;
+
+    $static-themes: props.merge($static-themes, (
+        $link-theme: (
+            --text-color:        props.get(vars.$transparent-colors, $theme, --800),
+            --underline-color:   props.get(vars.$transparent-colors, $theme, --500),
+
+            --hover: (
+                --text-color:    props.get(vars.$transparent-colors, $theme, --900),
+            ),
+
+            --key-focus: (
+                --text-color:    props.get(vars.$transparent-colors, $theme, --900),
+                --border-color:  props.get(vars.$transparent-colors, $theme, --900),
+                --outline-color: props.get(vars.$transparent-colors, $theme, --300),
+            ),
+        )
+    ));
+}
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
new file mode 100644
index 0000000..db555a9
--- /dev/null
+++ b/src/scopes/_lists.scss
@@ -0,0 +1,59 @@
+@use 'sass:meta';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../props';
+@use '../vars' as global-vars;
+
+@forward 'lists.vars';
+@use 'lists.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.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 {
+            list-style: disc;
+        }
+
+        ol {
+            list-style: decimal;
+        }
+
+        dl {
+            padding:       0;
+            margin-block:  props.get(vars.$margin-bs) 0;
+            margin-inline: 0;
+        }
+
+        dt {
+            font-weight: bold;
+            color:       props.get(global-vars.$theme, --heading);
+        }
+
+        dd {
+            margin-block:  0;
+            margin-inline: props.get(vars.$indent) 0;
+        }
+
+        @include iro.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);
+            }
+        }
+    }
+}
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
new file mode 100644
index 0000000..609cfb5
--- /dev/null
+++ b/src/scopes/_lists.vars.scss
@@ -0,0 +1,8 @@
+@use '../props';
+@use '../vars';
+@use './implicit.vars' as implicit-vars;
+
+$indent:    props.def(--s-lists--indent, calc(props.get(vars.$list--indent) + 1em)) !default;
+$margin-bs: props.def(--s-lists--margin-bs, props.get(implicit-vars.$paragraph--margin-bs)) !default;
+
+$compact--indent: props.def(--s-lists--compact--indent, props.get(vars.$list--compact-indent)) !default;
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
new file mode 100644
index 0000000..f722864
--- /dev/null
+++ b/src/scopes/_tables.scss
@@ -0,0 +1,104 @@
+@use 'sass:meta';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+@use '../mixins' as mx;
+
+@forward 'lists.vars';
+@use 'lists.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-scope('tables') {
+        table {
+            margin-block-start: fn.dim(--margin-bs);
+            border-spacing:     0;
+            border-collapse:    separate;
+        }
+
+        th {
+            @include mx.set-font(--standard, (
+                --line-height: null,
+                --size:        fn.global-dim(--font-size --50),
+                --weight:      bold,
+                --transform:   uppercase,
+                --spacing:     .5px
+            ));
+
+            padding-block:  fn.dim(--pad-b);
+            padding-inline: fn.dim(--pad-i);
+            color:          fn.color(--heading);
+            text-align:     start;
+        }
+
+        td {
+            padding-block:            fn.dim(--pad-b);
+            padding-inline:           fn.dim(--pad-i);
+            border-color:             fn.color(--border);
+            border-style:             solid;
+            border-width:             0;
+            border-block-start-width: fn.dim(--border);
+        }
+
+        tr {
+            &:last-child {
+                td {
+                    border-block-end-width: fn.dim(--border);
+                }
+            }
+        }
+
+        @include iro.bem-modifier('flush') {
+            th,
+            td {
+                &:first-child {
+                    padding-inline-start: 0;
+                }
+
+                &:last-child {
+                    padding-inline-end: 0;
+                }
+            }
+        }
+
+        @include iro.bem-modifier('box') {
+            td {
+                background-color: fn.color(--box --bg);
+            
+                &:first-child {
+                    border-inline-start-width: fn.dim(--border);
+                }
+            
+                &:last-child {
+                    border-inline-end-width: fn.dim(--border);
+                }
+            }
+    
+            tr {
+                &:first-child {
+                    td {
+                        &:first-child {
+                            border-start-start-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-start-end-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+    
+                &:last-child {
+                    td {
+                        &:first-child {
+                            border-end-start-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-end-end-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
new file mode 100644
index 0000000..2c3f255
--- /dev/null
+++ b/src/scopes/_tables.vars.scss
@@ -0,0 +1,24 @@
+@use '../props';
+@use '../vars';
+
+$indent:    props.def(--s-lists--indent, calc(props.get(vars.$list--indent) + 1em)) !default;
+$margin-bs: props.def(--s-lists--margin-bs, props.get(vars.$paragraph--margin-bs)) !default;
+
+$compact--indent: props.def(--s-lists--compact--indent, props.get(vars.$list--compact-indent)) !default;
+
+@include iro.props-store((
+    --dims: (
+        --pad-i:     fn.foreign-dim(--table, --pad-i),
+        --pad-b:     fn.foreign-dim(--table, --pad-b),
+        --rounding:  fn.foreign-dim(--table, --rounding),
+        --border:    fn.foreign-dim(--table, --border),
+        --margin-bs: fn.global-dim(--paragraph --margin-bs),
+    ),
+    --colors: (
+        --border:  fn.foreign-color(--table, --border),
+        --heading: fn.foreign-color(--table, --heading),
+        --box: (
+            --bg: fn.foreign-color(--table, --box --bg),
+        )
+    )
+));