55 files changed, 1130 insertions, 151 deletions

diff --git a/package.json b/package.json
index ff42d59..cc74db1 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
         "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
         "build:assets": "cp -r static/* public/",
         "build:app": "pug tpl/index.pug -p tpl --out public/",
-        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg",
+        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right arrow-left check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg",
         "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css",
         "lint:style": "stylelint \"src/**/*.scss\"",
         "fix:style": "stylelint \"src/**/*.scss\" --fix",
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index f2dd420..cf23f29 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -95,19 +95,19 @@ $theme-light: (
         ),
 
         --colors: (
-            --100:  (math.div(0, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(0, 12))),
-            --200:  (math.div(1, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(1, 12))),
-            --300:  (math.div(2, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(2, 12))),
-            --400:  (math.div(3, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(3, 12))),
-            --500:  (math.div(4, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(4, 12))),
-            --600:  (math.div(5, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(5, 12))),
-            --700:  (math.div(6, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(6, 12))),
-            --800:  (math.div(7, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(7, 12))),
-            --900:  (math.div(8, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(8, 12))),
-            --1000: (math.div(9, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(9, 12))),
-            --1100: (math.div(10, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(10, 12))),
-            --1200: (math.div(11, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(11, 12))),
-            --1300: (math.div(12, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(12, 12))),
+            --100:  (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
+            --200:  (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
+            --300:  (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
+            --400:  (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
+            --500:  (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
+            --600:  (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
+            --700:  (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
+            --800:  (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
+            --900:  (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
+            --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
+            --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
+            --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
+            --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
         ),
     ),
     
@@ -135,7 +135,7 @@ $theme-dark: (
     --levels: (
         --grays: (
             --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
-            --75:  (2.2) (.3 + .7 * easing.ease(math.div(9, 12))),
+            --75:  (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
             --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
         
             --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
@@ -150,24 +150,24 @@ $theme-dark: (
         ),
 
         --colors: (
-            --100:  (math.div(0, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(0, 12))),
-            --200:  (math.div(1, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(1, 12))),
-            --300:  (math.div(2, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(2, 12))),
-            --400:  (math.div(3, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(3, 12))),
-            --500:  (math.div(4, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(4, 12))),
-            --600:  (math.div(5, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(5, 12))),
-            --700:  (math.div(6, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(6, 12))),
-            --800:  (math.div(7, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(7, 12))),
-            --900:  (math.div(8, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(8, 12))),
-            --1000: (math.div(9, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(9, 12))),
-            --1100: (math.div(10, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(10, 12))),
-            --1200: (math.div(11, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(11, 12))),
-            --1300: (math.div(12, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(12, 12))),
+            --100:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
+            --200:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
+            --300:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),
+            --400:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),
+            --500:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
+            --600:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),
+            --700:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),
+            --800:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
+            --900:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),
+            --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),
+            --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
+            --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),
+            --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
         ),
     ),
     
     --palettes: (
-        --base:   hsl(257, 7%, 19%)     --grays,
+        --base:   hsl(257, 7%, 20%)     --grays,
         --blue:   oklch(56% .16 275.25) --colors,
         --purple: oklch(56% .16 305.58) --colors,
         --red:    oklch(56% .16 14.69)  --colors,
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 53c7067..0a94534 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -102,6 +102,8 @@ $key-focus--border-offset: props.def(--key-focus--border-offset, props.get($bord
 $list--indent:         props.def(--list--indent, props.get($size--400)) !default;
 $list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default;
 
+$sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default;
+
 //
 
 $-static-colors: ();
diff --git a/src/_functions.scss b/src/_functions.scss
index 62caf8c..b41609e 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -23,10 +23,14 @@
         $color: list.nth($level, 1);
         $y: 0;
         $c: 1;
+        $h: 0deg;
 
         @if list.length($level) > 1 {
             $c: list.nth($level, 2);
         }
+        @if list.length($level) > 2 {
+            $h: list.nth($level, 3);
+        }
 
         @if meta.type-of($color) != 'color' {
             $y: apca.reverse($color, $ref-y);
@@ -38,7 +42,7 @@
                 $y: $ref-y;
             }
 
-            $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue'));
+            $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue')));
         } @else {
             $y: apca.sRGB_to_Y($color);
         }
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 3132199..bad29c5 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -23,6 +23,7 @@ $breakpoints: (
 @forward 'config' as config--*;
 @forward 'props' as props--*;
 @forward 'core' as core--*;
+@forward 'layers' as layers--*;
 
 @forward 'layouts/button-group' as l-button-group--*;
 @forward 'layouts/card-list' as l-card-list--*;
@@ -34,8 +35,10 @@ $breakpoints: (
 @forward 'layouts/split-view' as l-split-view--*;
 
 @forward 'scopes/implicit' as s-implicit--*;
+@forward 'scopes/body' as s-body--*;
 @forward 'scopes/blockquotes' as s-blockquotes--*;
 @forward 'scopes/code' as s-code--*;
+@forward 'scopes/figures' as s-figures--*;
 @forward 'scopes/headings' as s-headings--*;
 @forward 'scopes/links' as s-links--*;
 @forward 'scopes/lists' as s-lists--*;
@@ -51,18 +54,22 @@ $breakpoints: (
 @forward 'objects/checkbox' as o-checkbox--*;
 @forward 'objects/divider' as o-divider--*;
 @forward 'objects/emoji' as o-emoji--*;
+@forward 'objects/figure' as o-figure--*;
 @forward 'objects/field-label' as o-field-label--*;
 @forward 'objects/heading' as o-heading--*;
 @forward 'objects/icon' as o-icon--*;
 @forward 'objects/lightbox' as o-lightbox--*;
 @forward 'objects/menu' as o-menu--*;
+@forward 'objects/navbar' as o-navbar--*;
 @forward 'objects/palette' as o-palette--*;
+@forward 'objects/placeholders' as o-placeholders--*;
 @forward 'objects/popover' as o-popover--*;
 @forward 'objects/radio' as o-radio--*;
 @forward 'objects/side-nav' as o-side-nav--*;
 @forward 'objects/status-indicator' as o-status-indicator--*;
 @forward 'objects/switch' as o-switch--*;
 @forward 'objects/table' as o-table--*;
+@forward 'objects/tabbar' as o-tabbar--*;
 @forward 'objects/text-field' as o-text-field--*;
 @forward 'objects/thumbnail' as o-thumbnail--*;
 
diff --git a/src/_layers.scss b/src/_layers.scss
new file mode 100644
index 0000000..cc3bb50
--- /dev/null
+++ b/src/_layers.scss
@@ -0,0 +1,3 @@
+@mixin styles {
+    @layer scope, theme, object, layout, component, utility;
+}
diff --git a/src/_themes.scss b/src/_themes.scss
index 32b617b..caf1e80 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use 'include-media/dist/include-media' as media;
diff --git a/src/_utils.scss b/src/_utils.scss
index 598eae4..445e5c6 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use 'include-media/dist/include-media' as media;
@@ -9,12 +10,12 @@
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
 $-dirs: (
     '': '',
+    'b':  '-block',
     'bs': '-block-start',
     'be': '-block-end',
-    'b':  '-block',
+    'i':  '-inline',
     'is': '-inline-start',
     'ie': '-inline-end',
-    'i':  '-inline',
 ) !default;
 
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
@@ -96,8 +97,8 @@ $-sizes: (
         vertical-align: baseline;
     }
 
-    @include bem.utility('va-center') {
-        vertical-align: center;
+    @include bem.utility('va-middle') {
+        vertical-align: middle;
     }
 
     @include bem.utility('va-bottom') {
@@ -132,6 +133,10 @@ $-sizes: (
         align-items: flex-end;
     }
 
+    @include bem.utility('ac-center') {
+        align-content: center;
+    }
+
     @include bem.utility('jc-center') {
         justify-content: center;
     }
@@ -154,18 +159,50 @@ $-sizes: (
 
     @include bem.utility('c-heading') {
         color: props.get(vars.$theme, --heading);
+
+        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+            $theme-name: static-#{string.slice($theme, 3)};
+    
+            @include bem.at-theme($theme-name) {
+                color: props.get(vars.$transparent-colors, $theme, --900);
+            }
+        }
     }
 
     @include bem.utility('c-text') {
         color: props.get(vars.$theme, --text);
+
+        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+            $theme-name: static-#{string.slice($theme, 3)};
+    
+            @include bem.at-theme($theme-name) {
+                color: props.get(vars.$transparent-colors, $theme, --800);
+            }
+        }
     }
 
     @include bem.utility('c-mute') {
         color: props.get(vars.$theme, --text-mute);
+
+        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+            $theme-name: static-#{string.slice($theme, 3)};
+    
+            @include bem.at-theme($theme-name) {
+                color: props.get(vars.$transparent-colors, $theme, --700);
+            }
+        }
     }
 
     @include bem.utility('c-mute-more') {
         color: props.get(vars.$theme, --text-mute-more);
+
+        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+            $theme-name: static-#{string.slice($theme, 3)};
+    
+            @include bem.at-theme($theme-name) {
+                color: props.get(vars.$transparent-colors, $theme, --600);
+            }
+        }
     }
 
     @each $dir, $prop in (is: inline-size, bs: block-size) {
@@ -200,6 +237,14 @@ $-sizes: (
         white-space:   nowrap;
     }
 
+    @include bem.utility('o-auto') {
+        overflow: auto;
+    }
+
+    @include bem.utility('o-hidden') {
+        overflow: hidden;
+    }
+
     @include bem.utility('p-static') {
         position: static;
     }
@@ -214,7 +259,7 @@ $-sizes: (
 
     @include bem.utility('p-sticky-bs') {
         position:          sticky;
-        inset-block-start: 0;
+        inset-block-start: props.get(vars.$sticky-top-offset);
     }
 
     @include bem.utility('p-sticky-be') {
@@ -301,4 +346,16 @@ $-sizes: (
             content:       '';
         }
     }
+    
+    @include bem.utility('sr-only') {
+        position:    absolute;
+        width:       1px;
+        height:      1px;
+        padding:     0;
+        margin:      -1px;
+        overflow:    hidden;
+        clip-path:   inset(50%);
+        white-space: nowrap;
+        border:      0;
+    }
 }
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index c51ae7e..b0a3c8e 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -5,13 +5,46 @@
 
 @forward 'button-group.vars';
 @use 'button-group.vars' as vars;
+@use '../objects/action-button.vars' as action-button;
 
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
     @include bem.layout('button-group') {
-        display:   flex;
+        display:   inline-flex;
         flex-wrap: wrap;
-        gap:       props.get(vars.$spacing);
+        gap:       props.get(vars.$gap);
+
+        @each $mod, $size in vars.$sizes {
+            @include bem.modifier($mod) {
+                gap: props.get($size);
+            }
+        }
+
+        @include bem.modifier('align-block') {
+            margin-inline: calc(-1 * props.get(action-button.$pad-i) - props.get(action-button.$border-width));
+
+            @include bem.modifier('pill') {
+                margin-inline: calc(-1 * props.get(action-button.$pad-i-pill) - props.get(action-button.$border-width));
+            }
+
+            @include bem.modifier('icon') {
+                margin-inline: calc(-1 * props.get(action-button.$pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1));
+            }
+
+            @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in action-button.$fixed-sizes {
+                @include bem.modifier('action-#{$mod}') {
+                    margin-inline: calc(-1 * props.get($pad-i) - props.get(action-button.$border-width));
+    
+                    @include bem.modifier('pill') {
+                        margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(action-button.$border-width));
+                    }
+
+                    @include bem.modifier('icon') {
+                        margin-inline: calc(-1 * props.get($pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1));
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
index 95ac8f8..50c1b53 100644
--- a/src/layouts/_button-group.vars.scss
+++ b/src/layouts/_button-group.vars.scss
@@ -1,4 +1,16 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$spacing: props.def(--l-button-group--spacing, props.get(core.$size--150)) !default;
+$gap: props.def(--l-button-group--gap, props.get(core.$size--150)) !default;
+
+$gapless: props.def(--l-button-group--gapless, 0) !default;
+$sm:      props.def(--l-button-group--sm, props.get(core.$size--100)) !default;
+$lg:      props.def(--l-button-group--lg, props.get(core.$size--300)) !default;
+$xl:      props.def(--l-button-group--xl, props.get(core.$size--450)) !default;
+
+$sizes: (
+    'gapless': $gapless,
+    'sm':      $sm,
+    'lg':      $lg,
+    'xl':      $xl,
+) !default;
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index cba7574..56b6c89 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -2,14 +2,14 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$fixed-125: props.def(--l-container--fixed-125, fn.px-to-rem(720px)) !default;
-$fixed:     props.def(--l-container--fixed, fn.px-to-rem(610px)) !default;
-$fixed-75:  props.def(--l-container--fixed-75, fn.px-to-rem(500px)) !default;
+$fixed-200: props.def(--l-container--fixed-200, fn.px-to-rem(1300px)) !default;
+$fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default;
+$fixed:     props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
 
 $fixed-sizes: (
-    'fixed-125': $fixed-125,
-    'fixed':     $fixed,
-    'fixed-75':  $fixed-75
+    'fixed-200': $fixed-200,
+    'fixed-150': $fixed-150,
+    'fixed':     $fixed
 ) !default;
 
 $pad-i: props.def(--l-container--pad-i, props.get(core.$size--400)) !default;
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index a76f6e8..f522254 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -15,10 +15,6 @@
         gap:         props.get(vars.$col-gap);
         align-items: start;
 
-        @include bem.modifier('gapless') {
-            gap: props.get(vars.$gapless);
-        }
-
         @include bem.elem('panel') {
             flex:            1 1 auto;
             inline-size:     100%;
@@ -30,14 +26,34 @@
                 min-inline-size: props.get(vars.$panel--side-25--min);
             }
 
-            @include bem.modifier('sticky') {
+            @include bem.modifier('sticky-0') {
                 position:          sticky;
                 inset-block-start: 0;
             }
 
+            @include bem.modifier('sticky') {
+                position:          sticky;
+                inset-block-start: props.get(vars.$panel--sticky-offset);
+            }
+
             @include bem.modifier('sticky-400') {
                 position:          sticky;
-                inset-block-start: props.get(vars.$panel--sticky-400--inset);
+                inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
+            }
+
+            @include bem.modifier('sticky-1200') {
+                position:          sticky;
+                inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset));
+            }
+        }
+
+        @include bem.modifier('gapless') {
+            gap: props.get(vars.$gapless);
+
+            @include bem.elem('panel') {
+                @include bem.modifier('side-25') {
+                    min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+                }
             }
         }
 
@@ -50,19 +66,23 @@
             gap:            props.get(vars.$row-gap);
             align-items:    stretch;
 
+            @include bem.modifier('gapless') {
+                gap: props.get(vars.$gapless);
+            }
+
             @include bem.modifier('wrap-reverse') {
                 flex-direction: column-reverse;
             }
 
             @include bem.elem('panel') {
-                flex: 1 1 auto;
-
+                inline-size: auto;
+                
                 @include bem.modifier('side-25') {
                     inline-size:     auto;
                     min-inline-size: 0;
                 }
 
-                @include bem.modifier('sticky', 'sticky-400') {
+                @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') {
                     position: static;
                 }
             }
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index 8f6bf93..d519939 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -4,7 +4,10 @@
 $col-gap:  props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
 $row-gap:  props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
 
-$gapless: props.def(--l-split-view--gapless, 0) !default;
+$gapless: props.def(--l-split-view--gapless, 0rem) !default;
 
 $panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default;
 $panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default;
+$panel--sticky-1200--inset: props.def(--l-split-view--panel--sticky-1200--inset, props.get(core.$size--1200)) !default;
+
+$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index ca047bc..1dd4b84 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -137,6 +137,10 @@
             }
         }
 
+        @include bem.elem('label') {
+            margin-inline: props.get(vars.$pad-i-label);
+        }
+
         @include -apply-theme(vars.$default-theme);
 
         @each $theme in map.keys(props.get(vars.$themes)) {
@@ -154,26 +158,54 @@
             }
         }
 
-        @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
+        @include bem.modifier('icon') {
+            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
+            padding-inline: 0;
+        }
+
+        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
             @include bem.modifier($mod) {
                 padding-block:  props.get($pad-b);
                 padding-inline: props.get($pad-i);
                 font-size:      props.get($font-size);
 
+                @include bem.elem('label') {
+                    margin-inline: props.get($pad-i-label);
+                }
+
                 @include bem.modifier('pill') {
                     padding-inline: props.get($pad-i-pill);
                 }
+
+                @include bem.modifier('icon') {
+                    inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
+                    padding-inline: 0;
+                }
             }
         }
 
-        @include bem.modifier('icon') {
-            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
-            padding-inline: 0;
+        @include bem.modifier('align-block') {
+            margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
+
+            @include bem.modifier('pill') {
+                margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
+            }
 
-            @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
+            @include bem.modifier('icon') {
+                margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
+            }
+
+            @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
                 @include bem.modifier($mod) {
-                    inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
-                    padding-inline: 0;
+                    margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
+    
+                    @include bem.modifier('pill') {
+                        margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
+                    }
+
+                    @include bem.modifier('icon') {
+                        margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
+                    }
                 }
             }
         }
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 9afd5d7..8c3d510 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -5,35 +5,39 @@
 
 $line-height:  props.def(--o-action-button--line-height, 1.4) !default;
 $pad-i:        props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default;
+$pad-i-label:  props.def(--o-action-button--pad-i-label, props.get(core.$size--50)) !default;
 $pad-i-pill:   props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default;
 $pad-b:        props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
 $border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
 $rounding:     props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
 $font-size:    props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
 
-$pad-i--sm:      props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default;
-$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default;
-$pad-b--sm:      props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
-$font-size--sm:  props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
+$pad-i--sm:       props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default;
+$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default;
+$pad-i-pill--sm:  props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default;
+$pad-b--sm:       props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
+$font-size--sm:   props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
 
-$pad-i--lg:      props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default;
-$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--225)) !default;
-$pad-b--lg:      props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
-$font-size--lg:  props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
+$pad-i--lg:       props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default;
+$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--100)) !default;
+$pad-i-pill--lg:  props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--250)) !default;
+$pad-b--lg:       props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
+$font-size--lg:   props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
 
-$pad-i--xl:      props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default;
-$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default;
-$pad-b--xl:      props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
-$font-size--xl:  props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
+$pad-i--xl:       props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default;
+$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--150)) !default;
+$pad-i-pill--xl:  props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default;
+$pad-b--xl:       props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
+$font-size--xl:   props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
 
 $key-focus--border-width:  props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
 $key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
 $key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
 
 $fixed-sizes: (
-    'sm' $pad-i--sm $pad-i-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,
+    'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
+    'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
+    'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
 ) !default;
 
 $themes: props.def(--o-action-button, (), 'color');
@@ -68,9 +72,9 @@ $default-theme: map.deep-merge((
     ),
 
     --selected: (
-        --bg-color:     props.get(core.$theme, --text-mute),
+        --bg-color:     props.get(core.$theme, --heading),
         --label-color:  props.get(core.$theme, --base, --50),
-        --border-color: props.get(core.$theme, --text-mute),
+        --border-color: props.get(core.$theme, --heading),
 
         --hover: (
             --bg-color:     props.get(core.$theme, --text),
@@ -79,9 +83,9 @@ $default-theme: map.deep-merge((
         ),
 
         --active: (
-            --bg-color:     props.get(core.$theme, --heading),
+            --bg-color:     props.get(core.$theme, --text-mute),
             --label-color:  props.get(core.$theme, --base, --50),
-            --border-color: props.get(core.$theme, --heading),
+            --border-color: props.get(core.$theme, --text-mute),
         ),
 
         --disabled: (
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index fc4ffcd..81396e3 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -11,7 +11,7 @@
         inline-size: props.get($indicator-size);
         block-size:  props.get($indicator-size);
 
-        @include bem.next-elem('content') {
+        @include bem.sibling-elem('content') {
             mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
             calc(100% - .5 * props.get($indicator-size))
             calc(100% - .5 * props.get($indicator-size)),
@@ -94,6 +94,15 @@
             }
         }
 
+        @include bem.modifier('colored-gradient') {
+            @include bem.elem('content') {
+                color:      #fff;
+                background: linear-gradient(props.get(vars.$bg-angle),
+                hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),
+                hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
+            }
+        }
+
         @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
             @include bem.modifier($mod) {
                 font-size: props.get($font-size);
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index 72fb397..9986de5 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -39,6 +39,12 @@ $bg-color--h: props.def(--o-avatar--bg-color--h, 354, 'color') !default;
 $bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default;
 $bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default;
 
+$bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, 'color') !default;
+$bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, 'color') !default;
+$bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, 'color') !default;
+
+$bg-angle: props.def(--o-avatar--bg-angle, 180deg) !default;
+
 $key-focus--border-color:  props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
 $key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
 
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index d96d6c4..ff07148 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -40,7 +40,7 @@ $sizes: (
 
 $default-theme-override: () !default;
 $default-theme: props.def(--o-badge, (
-    --bg:    props.get(core.$theme, --text-mute),
+    --bg:    props.get(core.$theme, --heading),
     --label: props.get(core.$theme, --bg-l2),
     
     --hover: (
@@ -49,7 +49,7 @@ $default-theme: props.def(--o-badge, (
     ),
 
     --active: (
-        --bg:    props.get(core.$theme, --heading),
+        --bg:    props.get(core.$theme, --text-mute),
         --label: props.get(core.$theme, --bg-l2),
     ),
 
@@ -73,7 +73,7 @@ $default-theme: props.def(--o-badge, (
             --label: props.get(core.$theme, --heading),
         ),
     )
-), 'color');
+), 'color') !default;
 $default-theme: props.merge($default-theme, $default-theme-override);
 
 $static-themes: props.def(--o-badge, (), 'color');
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index bd3de91..4f7b552 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -5,14 +5,14 @@
 
 $line-height:  props.def(--o-button--line-height, 1.4) !default;
 $pad-i:        props.def(--o-button--pad-i, props.get(core.$size--200)) !default;
-$pad-i-label:  props.def(--o-button--pad-i-label, props.get(core.$size--75)) !default;
+$pad-i-label:  props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
 $pad-b:        props.def(--o-button--pad-b, props.get(core.$size--65)) !default;
 $border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default;
 $rounding:     props.def(--o-button--rounding, 10em) !default;
 $font-size:    props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
 
 $pad-i--sm:       props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default;
-$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--50)) !default;
+$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
 $pad-b--sm:       props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default;
 $font-size--sm:   props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
 
@@ -66,22 +66,22 @@ $default-theme: props.def(--o-button, (
     ),
 
     --primary: (
-        --bg:             props.get(core.$theme, --base, --800),
-        --label:          props.get(core.$theme, --base, --800-text),
-        --outline-border: props.get(core.$theme, --base, --800),
+        --bg:             props.get(core.$theme, --base, --900),
+        --label:          props.get(core.$theme, --base, --900-text),
+        --outline-border: props.get(core.$theme, --base, --900),
         --outline-label:  props.get(core.$theme, --text),
 
         --hover: (
-            --bg:     props.get(core.$theme, --base, --900),
-            --label:  props.get(core.$theme, --base, --900-text),
+            --bg:     props.get(core.$theme, --base, --800),
+            --label:  props.get(core.$theme, --base, --800-text),
         ),
 
         --active: (
-            --bg:     props.get(core.$theme, --base, --900),
-            --label:  props.get(core.$theme, --base, --900-text),
+            --bg:     props.get(core.$theme, --base, --700),
+            --label:  props.get(core.$theme, --base, --700-text),
         ),
     ),
-), 'color');
+), 'color') !default;
 $default-theme: props.merge($default-theme, $default-theme-override);
 
 $static-themes: props.def(--o-button, (), 'color');
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 99eb6f4..c87e676 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -55,11 +55,13 @@
         }
 
         @include bem.elem('image') {
+            position:    relative;
             display:     block;
             flex:        0 0 auto;
             inline-size: 100%;
+            overflow:    hidden;
             object-fit:  cover;
-            transition:  transform .2s, opacity .2s;
+            transition:  background-color .2s, transform .2s, opacity .2s;
 
             &:first-child {
                 border-start-start-radius: props.get(vars.$rounding);
@@ -76,6 +78,21 @@
             }
         }
 
+        @include bem.elem('image-img') {
+            display:     block;
+            inline-size: 100%;
+            object-fit:  cover;
+        }
+
+        @include bem.elem('image-overlay') {
+            position:        absolute;
+            inset-block-end: 0;
+            inset-inline:    0;
+            z-index:         5;
+            padding-block:   props.get(vars.$image-overlay--pad-b);
+            padding-inline:  props.get(vars.$image-overlay--pad-i);
+        }
+
         @include bem.elem('body') {
             flex:            1 0 auto;
             padding-block:   props.get(vars.$pad-b);
@@ -128,7 +145,7 @@
         }
 
         @include bem.modifier('quiet') {
-            position:         relative;
+            margin-inline:    0;
             background-color: transparent;
             border:           0;
 
@@ -143,6 +160,12 @@
                         opacity:          .75;
                         transform:        translateY(props.get(vars.$hover--offset-b));
                     }
+
+                    @include bem.elem('body') {
+                        @include bem.modifier('hidden') {
+                            transform: translateY(props.get(vars.$hover--offset-b));
+                        }
+                    }
                 }
 
                 &:focus-visible {
@@ -175,6 +198,11 @@
             @include bem.elem('body') {
                 padding:             0;
                 padding-block-start: props.get(vars.$spacing);
+
+                @include bem.modifier('hidden') {
+                    padding-block:  props.get(vars.$pad-b);
+                    padding-inline: props.get(vars.$pad-i);
+                }
             }
 
             @include bem.elem('footer') {
@@ -186,6 +214,21 @@
             flex-direction: row;
             align-items:    center;
 
+            @include bem.elem('image') {
+                align-self:  stretch;
+                inline-size: auto;
+
+                &:first-child {
+                    border-start-end-radius:   0;
+                    border-end-start-radius:   props.get(vars.$rounding);
+                }
+    
+                &:last-child {
+                    border-start-end-radius: props.get(vars.$rounding);
+                    border-end-start-radius: 0;
+                }
+            }
+
             @include bem.elem('body') {
                 flex: 0 0 auto;
 
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 8ee7158..8adbcde 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -2,11 +2,13 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
-$pad-i:         props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
-$pad-b:         props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
-$spacing:       props.def(--o-card--spacing, props.get(core.$size--200)) !default;
-$rounding:      props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+$divider-width:        props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
+$pad-i:                props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
+$pad-b:                props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
+$spacing:              props.def(--o-card--spacing, props.get(core.$size--200)) !default;
+$rounding:             props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default;
+$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default;
 
 $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;
 
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index b746551..4ed8092 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -13,18 +13,19 @@
     @include materialize-at-root(meta.module-variables('vars'));
 
     @include bem.object('divider') {
-        display:        flex;
-        flex:           0 0 auto;
-        flex-direction: row;
-        align-items:    center;
-        block-size:     1em;
-        margin-block:   props.get(vars.$margin-b);
-        font-size:      props.get(vars.$strong--label-font-size);
-        font-weight:    700;
-        line-height:    1;
-        color:          props.get(vars.$strong--label-color);
-        text-transform: uppercase;
-        letter-spacing: .5px;
+        display:          flex;
+        flex:             0 0 auto;
+        flex-direction:   row;
+        align-items:      center;
+        block-size:       1em;
+        margin-block:     props.get(vars.$margin-b);
+        font-size:        props.get(vars.$strong--label-font-size);
+        font-weight:      700;
+        line-height:      1;
+        color:            props.get(vars.$strong--label-color);
+        text-transform:   uppercase;
+        letter-spacing:   .5px;
+        background-color: transparent;
 
         &::before,
         &::after {
@@ -45,10 +46,24 @@
 
         @include bem.modifier('vertical') {
             align-self:       stretch;
-            inline-size:      1px;
+            inline-size:      props.get(vars.$vertical--border-width);
             block-size:       auto;
             margin-block:     0;
-            background-color: props.get(vars.$faint--bg-color);
+            background-color: props.get(vars.$strong--bg-color);
+
+            &::before,
+            &::after {
+                display: none;
+            }
+        }
+
+        @include bem.modifier('dot') {
+            align-self:       center;
+            inline-size:      props.get(vars.$dot--size);
+            block-size:       props.get(vars.$dot--size);
+            margin-block:     0;
+            background-color: props.get(vars.$strong--bg-color);
+            border-radius:    props.get(vars.$dot--size);
 
             &::before,
             &::after {
@@ -66,6 +81,14 @@
                 block-size:       props.get(vars.$medium--border-width);
                 background-color: props.get(vars.$medium--bg-color);
             }
+
+            @include bem.modifier('vertical') {
+                background-color: props.get(vars.$medium--bg-color);
+            }
+
+            @include bem.modifier('dot') {
+                background-color: props.get(vars.$medium--bg-color);
+            }
         }
 
         @include bem.modifier('faint') {
@@ -82,6 +105,10 @@
             @include bem.modifier('vertical') {
                 background-color: props.get(vars.$vertical--faint--bg-color);
             }
+
+            @include bem.modifier('dot') {
+                background-color: props.get(vars.$dot--faint--bg-color);
+            }
         }
 
         @include bem.modifier('labelled') {
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 1117fd5..5cd68c1 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -3,7 +3,9 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
+$margin-b:               props.def(--o-divider--size, props.get(core.$size--85)) !default;
+$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default;
+$dot--size:              props.def(--o-divider--dot--size, props.get(core.$size--50)) !default;
 
 $strong--border-width:    props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default;
 $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default;
@@ -23,7 +25,9 @@ $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core
 $faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default;
 $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
 
-$vertical--faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$vertical--faint--bg-color:    props.def(--o-divider--vertical--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+
+$dot--faint--bg-color:    props.def(--o-divider--dot--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
 
 $static-themes: props.def(--o-divider, (), 'color');
 
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss
new file mode 100644
index 0000000..38837be
--- /dev/null
+++ b/src/objects/_figure.scss
@@ -0,0 +1,26 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'figure.vars';
+@use 'figure.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('figure') {
+        @include bem.elem('caption') {
+            padding-block:    props.get(vars.$pad-b);
+            font-size:        props.get(vars.$font-size);
+            color:            props.get(vars.$text-color);
+            border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color);
+
+            &::before {
+                display:       block;
+                margin-block:  -100em 100em;
+                content:       '';
+            }
+        }
+    }
+}
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss
new file mode 100644
index 0000000..78f5d15
--- /dev/null
+++ b/src/objects/_figure.vars.scss
@@ -0,0 +1,9 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$pad-b:        props.def(--o-figure--pad-b, props.get(core.$size--100)) !default;
+$border-width: props.def(--o-figure--border-width, props.get(core.$border-width--thin)) !default;
+$font-size:    props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default;
+
+$text-color:   props.def(--o-figure--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$border-color: props.def(--o-figure--border-color, props.get(core.$theme, --border), 'color') !default;
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 89fe568..bdc7027 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -16,9 +16,9 @@
         font-weight:           props.get(vars.$font-weight);
         font-feature-settings: props.get(vars.$feature-settings);
         line-height:           props.get(vars.$line-height);
+        color:                 props.get(vars.$text-color);
         text-transform:        none;
         letter-spacing:        normal;
-        transform:             translateX(props.get(vars.$offset));
 
         & + & {
             margin-block-start: props.get(vars.$margin-bs-sibling);
@@ -52,6 +52,7 @@
                     font-feature-settings: props.get($feature-settings);
                     line-height:           props.get($line-height);
                     letter-spacing:        props.get($letter-spacing);
+                    transform:             translateX(props.get(vars.$offset));
                 }
             }
         }
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index d15e0b8..90278c8 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -5,12 +5,13 @@ $offset:            props.def(--o-heading--offset, -.02em) !default;
 $margin-bs:         props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default;
 $margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default;
 
-$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50)) !default;
+$text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default;
+$bg-color:   props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
 
-$font-family:      props.def(--o-heading--font-family, props.get(core.$font--headline--family)) !default;
-$line-height:      props.def(--o-heading--line-height, props.get(core.$font--headline--line-height)) !default;
-$font-weight:      props.def(--o-heading--font-weight, props.get(core.$font--headline--weight)) !default;
-$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$font-family:      props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default;
+$line-height:      props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default;
+$font-weight:      props.def(--o-heading--font-weight, bold) !default;
+$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
 
 $font-family--xxl:      props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default;
 $line-height--xxl:      props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -27,28 +28,28 @@ $letter-spacing--xl:   props.def(--o-heading--xl--letter-spacing, 0) !default;
 $feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
 
 $font-family--lg:      props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--lg:      props.def(--o-heading--lg--line-height, props.get(core.$font--headline--line-height)) !default;
+$line-height--lg:      props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default;
 $font-size--lg:        props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default;
 $font-weight--lg:      props.def(--o-heading--lg--font-weight, bold) !default;
 $letter-spacing--lg:   props.def(--o-heading--lg--letter-spacing, 0) !default;
 $feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
 
 $font-family--md:      props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--md:      props.def(--o-heading--md--line-height, props.get(core.$font--headline--line-height)) !default;
+$line-height--md:      props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default;
 $font-size--md:        props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default;
 $font-weight--md:      props.def(--o-heading--md--font-weight, bold) !default;
 $letter-spacing--md:   props.def(--o-heading--md--letter-spacing, 0) !default;
 $feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
 
 $font-family--sm:      props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--sm:      props.def(--o-heading--sm--line-height, props.get(core.$font--headline--line-height)) !default;
+$line-height--sm:      props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default;
 $font-size--sm:        props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default;
 $font-weight--sm:      props.def(--o-heading--sm--font-weight, 500) !default;
 $letter-spacing--sm:   props.def(--o-heading--sm--letter-spacing, 1px) !default;
 $feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
 
 $font-family--xs:      props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
-$line-height--xs:      props.def(--o-heading--xs--line-height, props.get(core.$font--headline--line-height)) !default;
+$line-height--xs:      props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default;
 $font-size--xs:        props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
 $font-weight--xs:      props.def(--o-heading--xs--font-weight, 500) !default;
 $letter-spacing--xs:   props.def(--o-heading--xs--letter-spacing, 1px) !default;
@@ -92,14 +93,14 @@ $display--letter-spacing--md:   props.def(--o-heading--display--md--letter-spaci
 $display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
 
 $display--font-family--sm:      props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
-$display--line-height--sm:      props.def(--o-heading--display--sm--line-height, props.get(core.$font--headline--line-height)) !default;
+$display--line-height--sm:      props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default;
 $display--font-size--sm:        props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default;
 $display--font-weight--sm:      props.def(--o-heading--display--sm--font-weight, bold) !default;
 $display--letter-spacing--sm:   props.def(--o-heading--display--sm--letter-spacing, 0) !default;
 $display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
 
 $display--font-family--xs:      props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
-$display--line-height--xs:      props.def(--o-heading--display--xs--line-height, props.get(core.$font--headline--line-height)) !default;
+$display--line-height--xs:      props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default;
 $display--font-size--xs:        props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default;
 $display--font-weight--xs:      props.def(--o-heading--display--xs--font-weight, 500) !default;
 $display--letter-spacing--xs:   props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss
index 218f311..ff1541d 100644
--- a/src/objects/_icon.vars.scss
+++ b/src/objects/_icon.vars.scss
@@ -2,4 +2,4 @@
 
 $stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default;
 $size:         props.def(--o-icon--size, calc(1 / 14 * 16em)) !default;
-$valign:       props.def(--o-icon--valign, -.2em) !default;
+$valign:       props.def(--o-icon--valign, -.18em) !default;
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
new file mode 100644
index 0000000..59d4c51
--- /dev/null
+++ b/src/objects/_navbar.scss
@@ -0,0 +1,191 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'navbar.vars';
+@use 'navbar.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('navbar') {
+        display:    flex;
+        block-size: props.get(vars.$block-size);
+
+        @include bem.elem('item-content-text') {
+            margin-inline: props.get(vars.$item--pad-i-label);
+        }
+
+        @include bem.elem('item-content') {
+            position:        relative;
+            padding-block:   props.get(vars.$item--pad-b);
+            padding-inline:  props.get(vars.$item--pad-i);
+            font-size:       props.get(vars.$item--font-size);
+            color:           currentColor;
+            white-space:     nowrap;
+            border-radius:   100em;
+
+            &::after {
+                position:       absolute;
+                inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
+                z-index:        -10;
+                display:        block;
+                pointer-events: none;
+                visibility:     hidden;
+                content:        '';
+                border-radius:  100em;
+                outline:        props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width);
+                box-shadow:
+                    0
+                    0
+                    0
+                    calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                    props.get(vars.$default-theme, --key-focus, --outline);
+            }
+        }
+
+        @include bem.elem('item') {
+            display:         flex;
+            flex-direction:  column;
+            align-items:     center;
+            justify-content: center;
+            inline-size:     100%;
+            padding-inline:  calc(.5 * props.get(vars.$spacing));
+            font-weight:     500;
+            color:           props.get(vars.$default-theme, --disabled, --label-color);
+
+            &:link,
+            &:visited,
+            &:enabled {
+                color: props.get(vars.$default-theme, --label-color);
+
+                &:hover,
+                &:focus-visible {
+                    color: props.get(vars.$default-theme, --hover, --label-color);
+
+                    @include bem.elem('item-content') {
+                        background-color: props.get(vars.$default-theme, --hover, --bg-color);
+                    }
+                }
+
+                &:focus-visible {
+                    @include bem.elem('item-content') {
+                        &::after {
+                            visibility: visible;
+                        }
+                    }
+                }
+
+                &:active {
+                    color: props.get(vars.$default-theme, --active, --label-color);
+
+                    @include bem.elem('item-content') {
+                        background-color: props.get(vars.$default-theme, --active, --bg-color);
+                    }
+                }
+            }
+
+            @include bem.is('selected') {
+                font-weight: bold;
+                color:       props.get(vars.$default-theme, --selected, --disabled, --label-color);
+
+                @include bem.elem('item-content') {
+                    background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
+                }
+
+                &:link,
+                &:visited,
+                &:enabled {
+                    color: props.get(vars.$default-theme, --selected, --label-color);
+
+                    @include bem.elem('item-content') {
+                        background-color: props.get(vars.$default-theme, --selected, --bg-color);
+                    }
+
+                    &:hover,
+                    &:focus-visible {
+                        color: props.get(vars.$default-theme, --selected, --hover, --label-color);
+
+                        @include bem.elem('item-content') {
+                            background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
+                        }
+                    }
+
+                    &:active {
+                        color: props.get(vars.$default-theme, --selected, --active, --label-color);
+
+                        @include bem.elem('item-content') {
+                            background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
+                        }
+                    }
+                }
+            }
+        }
+
+        @include bem.modifier('hide-unselected') {
+            @include bem.elem('item') {
+                display: none;
+
+                @include bem.is('selected') {
+                    display: flex;
+                }
+            }
+        }
+
+        @include bem.modifier('adapt') {
+            gap:        props.get(vars.$spacing);
+            block-size: 100%;
+
+            @include bem.elem('item') {
+                padding-inline: 0;
+            }
+        }
+
+
+        @include bem.modifier('align-block') {
+            margin-inline: calc(-1 * props.get(vars.$item--pad-i));
+        }
+
+        @include bem.modifier('quiet') {
+            @include bem.elem('item') {
+                @include bem.is('selected') {
+                    color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
+
+                    @include bem.elem('item-content') {
+                        background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
+                    }
+
+                    &:link,
+                    &:visited,
+                    &:enabled {
+                        color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
+
+                        @include bem.elem('item-content') {
+                            background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
+                        }
+
+                        &:hover,
+                        &:focus-visible {
+                            color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
+
+                            @include bem.elem('item-content') {
+                                background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
+                            }
+                        }
+
+                        &:active {
+                            color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
+
+                            @include bem.elem('item-content') {
+                                background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
new file mode 100644
index 0000000..fcdac80
--- /dev/null
+++ b/src/objects/_navbar.vars.scss
@@ -0,0 +1,84 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default;
+$spacing:    props.def(--o-navbar--spacing, props.get(core.$size--200)) !default;
+
+$item--pad-i:       props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
+$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--25)) !default;
+$item--pad-b:       props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default;
+$item--font-size:   props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
+
+$key-focus--border-width:  props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$default-theme-override: () !default;
+$default-theme: map.deep-merge((
+    --label-color:  props.get(core.$theme, --text),
+
+    --hover: (
+        --bg-color:    props.get(core.$theme, --border-mute),
+        --label-color: props.get(core.$theme, --heading),
+    ),
+
+    --active: (
+        --bg-color:    props.get(core.$theme, --border),
+        --label-color: props.get(core.$theme, --heading),
+    ),
+
+    --disabled: (
+        --label-color: props.get(core.$theme, --border-strong),
+    ),
+
+    --key-focus: (
+        --label:   props.get(core.$theme, --focus, --text),
+        --border:  props.get(core.$theme, --focus, --border),
+        --outline: props.get(core.$theme, --focus, --outline),
+    ),
+
+    --selected: (
+        --bg-color:     props.get(core.$theme, --heading),
+        --label-color:  props.get(core.$theme, --base, --50),
+
+        --hover: (
+            --bg-color:     props.get(core.$theme, --text),
+            --label-color:  props.get(core.$theme, --base, --50),
+        ),
+
+        --active: (
+            --bg-color:     props.get(core.$theme, --text-mute),
+            --label-color:  props.get(core.$theme, --base, --50),
+        ),
+
+        --disabled: (
+            --bg-color:     props.get(core.$theme, --border-mute),
+            --label-color:  props.get(core.$theme, --border-strong),
+        ),
+    ),
+
+    --quiet: (
+        --selected: (
+            --bg-color:     props.get(core.$theme, --accent, --200),
+            --label-color:  props.get(core.$theme, --accent, --1100),
+
+            --hover: (
+                --bg-color:     props.get(core.$theme, --accent, --300),
+                --label-color:  props.get(core.$theme, --accent, --1200),
+            ),
+    
+            --active: (
+                --bg-color:     props.get(core.$theme, --accent, --400),
+                --label-color:  props.get(core.$theme, --accent, --1300),
+            ),
+
+            --disabled: (
+                --bg-color:     props.get(core.$theme, --accent, --200),
+                --label-color:  props.get(core.$theme, --accent, --800),
+            ),
+        )
+    )
+), $default-theme-override) !default;
+$default-theme: props.def(--o-navbar, $default-theme, 'color');
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss
new file mode 100644
index 0000000..e148f21
--- /dev/null
+++ b/src/objects/_placeholders.scss
@@ -0,0 +1,22 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'placeholders.vars';
+@use 'placeholders.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('placeholders') {
+        @include bem.elem('placeholder') {
+            display:          inline-block;
+            min-block-size:   props.get(vars.$min-block-size);
+            vertical-align:   middle;
+            background-color: currentColor;
+            border-radius:    props.get(vars.$rounding);
+            opacity:          props.get(vars.$opacity);
+        }
+    }
+}
diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss
new file mode 100644
index 0000000..a2e41e2
--- /dev/null
+++ b/src/objects/_placeholders.vars.scss
@@ -0,0 +1,6 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default;
+$rounding:       props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default;
+$opacity:        props.def(--o-placeholder--opacity, .5) !default;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index fa65ddb..3fe6310 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -10,12 +10,14 @@
     @include materialize-at-root(meta.module-variables('vars'));
 
     @include bem.object('popover') {
-        position:           absolute;
+        position:           fixed;
         inset-block-start:  0;
         inset-inline-start: 0;
         z-index:            props.get(vars.$z-index);
         padding-block:      props.get(vars.$pad-b);
         padding-inline:     props.get(vars.$pad-i);
+        margin:             0;
+        color:              currentColor;
         background-color:   props.get(vars.$bg-color);
         filter:             props.get(vars.$filter);
         border:             props.get(vars.$border-width) solid props.get(vars.$border-color);
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
new file mode 100644
index 0000000..131c832
--- /dev/null
+++ b/src/objects/_tabbar.scss
@@ -0,0 +1,113 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'tabbar.vars';
+@use 'tabbar.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('tabbar') {
+        min-inline-size: 0;
+        block-size:      props.get(vars.$block-size);
+        overflow:        hidden;
+
+        &::after {
+            display:            block;
+            block-size:         props.get(vars.$indicator--width);
+            margin-block-start: calc(-1 * props.get(vars.$indicator--width));
+            content:            '';
+            background-color:   props.get(vars.$railing--bg-color);
+        }
+
+        @include bem.elem('tabs') {
+            display:         flex;
+            block-size:      100%;
+            margin-inline:   calc(-.5 * props.get(vars.$spacing));
+            overflow-inline: auto;
+        }
+
+        @include bem.modifier('quiet') {
+            box-shadow: none;
+        }
+
+        @include bem.modifier('adapt') {
+            block-size: 100%;
+        }
+
+        @include bem.elem('tab') {
+            position:       relative;
+            display:        flex;
+            align-items:    center;
+            padding-inline: calc(.5 * props.get(vars.$spacing));
+            color:          props.get(vars.$tab--text-color);
+            white-space:    nowrap;
+
+            &::before {
+                position:          absolute;
+                inset-block-start: 50%;
+                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
+                z-index:           -10;
+                block-size:        1.5em;
+                content:           '';
+                border-radius:     props.get(vars.$rounding);
+                transform:         translateY(-50%);
+            }
+
+            &::after {
+                position:         absolute;
+                inset-block-end:  0;
+                inset-inline:     calc(.5 * props.get(vars.$spacing));
+                z-index:          10;
+                display:          none;
+                block-size:       props.get(vars.$indicator--width);
+                content:          '';
+                background-color: props.get(vars.$tab--selected--text-color);
+            }
+
+            &:link,
+            &:visited {
+                &:hover,
+                &:active,
+                &:focus-visible {
+                    color: props.get(vars.$tab--selected--text-color);
+                }
+
+                &:focus-visible {
+                    &::before {
+                        color:           props.get(vars.$key-focus--text-color);
+                        text-decoration: none;
+                        outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                        box-shadow: 0 0 0
+                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                            props.get(vars.$key-focus--outline-color);
+                    }
+                }
+            }
+
+            @include bem.is('selected') {
+                color: props.get(vars.$tab--selected--text-color);
+                
+                &::after {
+                    display: block;
+                }
+            }
+        }
+
+        @include bem.modifier('accent') {
+            @include bem.elem('tab') {
+                &::after {
+                    background-color: props.get(vars.$tab--accent--text-color);
+                }
+
+                @include bem.is('selected') {
+                    color: props.get(vars.$tab--accent--text-color);
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss
new file mode 100644
index 0000000..f4486d6
--- /dev/null
+++ b/src/objects/_tabbar.vars.scss
@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default;
+$rounding:   props.def(--o-tabbar--rounding, props.get(core.$rounding)) !default;
+$spacing:    props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default;
+$tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default;
+
+$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; 
+
+$key-focus--border-width:  props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-tabbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$tab--text-color:           props.def(--o-tabbar--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default;
+$tab--selected--text-color: props.def(--o-tabbar--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
+$tab--accent--text-color:   props.def(--o-tabbar--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
+
+$railing--bg-color: props.def(--o-tabbar--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+
+$key-focus--text-color:    props.def(--o-tabbar--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
+$key-focus--border-color:  props.def(--o-tabbar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--outline-color: props.def(--o-tabbar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index d488860..91a7785 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -12,7 +12,7 @@
     @include bem.scope('blockquotes') {
         blockquote {
             padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
-            margin-block:         props.get(vars.$margin-bs);
+            margin-block:         props.get(vars.$margin-bs) 0;
             margin-inline:        1px 0;
             border-inline-start:  props.get(vars.$border-width) solid props.get(vars.$border-color);
         }
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 9db1271..6aae242 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -1,6 +1,6 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-@use './implicit' as implicit;
+@use './implicit.vars' as implicit;
 
 $indent:       props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default;
 $margin-bs:    props.def(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
new file mode 100644
index 0000000..6d32212
--- /dev/null
+++ b/src/scopes/_body.scss
@@ -0,0 +1,59 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'body.vars';
+@use 'body.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.scope('body') {
+        font-size: props.get(vars.$font-size);
+        line-height: props.get(vars.$line-height);
+
+        strong {
+            color: props.get(vars.$strong--text-color);
+        }
+
+        p,
+        ul,
+        ol {
+            max-inline-size: props.get(vars.$paragraph--max-inline-size);
+            margin-block-start: props.get(vars.$paragraph--margin-bs);
+        }
+
+        ul,
+        ol {
+            box-sizing: border-box;
+        }
+
+        img {
+            display:            block;
+            inline-size:        auto;
+            max-inline-size:    100%;
+            block-size:         auto;
+            max-block-size:     props.get(vars.$img--max-block-size);
+            margin-block-start: props.get(vars.$paragraph--margin-bs);
+        }
+
+        figure {
+            margin-block-start: props.get(vars.$paragraph--margin-bs);
+
+            img {
+                margin-block: 0;
+            }
+        }
+
+        hr {
+            margin-block: calc(2 * props.get(vars.$paragraph--margin-bs));
+        }
+
+        table,
+        pre,
+        blockquote {
+            margin-block-start: props.get(vars.$paragraph--margin-bs);
+        }
+    } 
+}
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
new file mode 100644
index 0000000..1de2cfd
--- /dev/null
+++ b/src/scopes/_body.vars.scss
@@ -0,0 +1,12 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+@use '../layouts/container.vars' as container;
+
+$font-size:                  props.def(--s-body--font-size, props.get(core.$font-size--150)) !default;
+$line-height:                props.def(--s-body--line-height, calc(props.get(core.$font--standard--line-height) + .1)) !default;
+$paragraph--margin-bs:       props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default;
+$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default;
+$img--max-block-size:        props.def(--s-body--img--max-block-size, none) !default;
+
+$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default;
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
index c1bf27c..8a040c2 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -1,6 +1,6 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-@use './implicit' as implicit;
+@use './implicit.vars' as implicit;
 
 $inline--pad-i:    props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default;
 $inline--pad-b:    props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default;
@@ -11,8 +11,8 @@ $block--pad-b:     props.def(--s-code--block--pad-b, props.get(core.$size--85))
 $block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
 $block--rounding:  props.def(--s-code--block--rounding, props.get(core.$rounding)) !default;
 
-$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --red, --1200), 'color') !default;
-$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --red, --200), 'color') !default;
+$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default;
+$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default;
 
 $block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), 'color') !default;
 $block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), 'color') !default;
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss
new file mode 100644
index 0000000..981a8b6
--- /dev/null
+++ b/src/scopes/_figures.scss
@@ -0,0 +1,21 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../objects/figure.vars' as figure;
+
+@mixin styles {
+    @include bem.scope('figures') {
+        figcaption {
+            padding-block:    props.get(figure.$pad-b);
+            font-size:        props.get(figure.$font-size);
+            color:            props.get(figure.$text-color);
+            border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color);
+
+            &::before {
+                display:       block;
+                margin-block:  -100em 100em;
+                content:       '';
+            }
+        }
+    }
+}
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 18791a8..78f06be 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -1,5 +1,7 @@
+@use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use '../props' as *;
@@ -17,11 +19,6 @@
             scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
         }
 
-        html,
-        body {
-            block-size: 100%;
-        }
-
         body {
             padding:               0;
             margin:                0;
@@ -155,5 +152,29 @@
             background-color: props.get(core.$theme, --border);
             border:           0;
         }
+
+        figure {
+            padding: 0;
+            margin:  0;
+        }
+
+        @each $theme in map.keys(props.get(core.$transparent-colors)) {
+            .t-static-#{string.slice($theme, 3)} {
+                color: props.get(core.$transparent-colors, $theme, --800);
+
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                    color: props.get(core.$transparent-colors, $theme, --900);
+                }
+
+                hr {
+                    color: props.get(core.$transparent-colors, $theme, --400);
+                }
+            }
+        }
     }
 }
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 0002591..388f0af 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -1,7 +1,7 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default;
+$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default;
 
 $small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default;
 
@@ -17,10 +17,10 @@ $code--feature-settings: props.def(--s-implicit--code--feature-settings, props.g
 
 $heading--margin-bs:         props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default;
 $heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default;
-$heading--font-family:       props.def(--s-implicit--heading--font-family, props.get(core.$font--headline--family)) !default;
+$heading--font-family:       props.def(--s-implicit--heading--font-family, props.get(core.$font--standard--family)) !default;
 $heading--line-height:       props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default;
-$heading--font-weight:       props.def(--s-implicit--heading--font-weight, props.get(core.$font--headline--weight)) !default;
+$heading--font-weight:       props.def(--s-implicit--heading--font-weight, bold) !default;
 $heading--font-size:         props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100));
-$heading--feature-settings:  props.def(--s-implicit--heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+$heading--feature-settings:  props.def(--s-implicit--heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
 
-$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color');
+$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color') !default;
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index cff4cc9..4092633 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -91,5 +91,29 @@
                 }
             }
         }
+
+        @include bem.elem('image') {
+            img {
+                margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
+                border:        props.get(vars.$key-focus--border-offset) solid transparent;
+                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+            }
+    
+            &:link,
+            &:visited {
+                &:focus-visible {
+                    outline:    none;
+                    box-shadow: none;
+    
+                    img {
+                        outline: props.get(vars.$key-focus--border-color) solid
+                            props.get(vars.$key-focus--border-width);
+                        box-shadow: 0 0 0
+                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                            props.get(vars.$key-focus--outline-color);
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index 91a73ab..b9bf4d1 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -31,7 +31,7 @@ $static-themes: props.def(--s-links, (), 'color');
 
     $static-themes: props.merge($static-themes, (
         $link-theme: (
-            --text-color:        props.get(core.$transparent-colors, $theme, --800),
+            --text-color:        currentColor,
             --underline-color:   props.get(core.$transparent-colors, $theme, --500),
 
             --hover: (
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
index c4a0f22..8c46bc3 100644
--- a/src/scopes/_lists.vars.scss
+++ b/src/scopes/_lists.vars.scss
@@ -1,6 +1,6 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
-@use './implicit' as implicit;
+@use './implicit.vars' as implicit;
 
 $indent:    props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default;
 $margin-bs: props.def(--s-lists--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 1fdf290..5251a05 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -1,10 +1,13 @@
 @use '../src/iro-design' as iro;
 
+@include iro.layers--styles;
 @include iro.core--styles;
 
 @include iro.s-implicit--styles;
+@include iro.s-body--styles;
 @include iro.s-blockquotes--styles;
 @include iro.s-code--styles;
+@include iro.s-figures--styles;
 @include iro.s-headings--styles;
 @include iro.s-links--styles;
 @include iro.s-lists--styles;
@@ -30,17 +33,21 @@
 @include iro.o-checkbox--styles;
 @include iro.o-divider--styles;
 @include iro.o-emoji--styles;
+@include iro.o-figure--styles;
 @include iro.o-field-label--styles;
 @include iro.o-heading--styles;
 @include iro.o-lightbox--styles;
 @include iro.o-menu--styles;
+@include iro.o-navbar--styles;
 @include iro.o-palette--styles;
+@include iro.o-placeholders--styles;
 @include iro.o-popover--styles;
 @include iro.o-radio--styles;
 @include iro.o-side-nav--styles;
 @include iro.o-status-indicator--styles;
 @include iro.o-switch--styles;
 @include iro.o-table--styles;
+@include iro.o-tabbar--styles;
 @include iro.o-text-field--styles;
 @include iro.o-thumbnail--styles;
 
diff --git a/tpl/index.pug b/tpl/index.pug
index cccfb2a..7d73c75 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -24,6 +24,7 @@ include objects/avatar.pug
 include objects/card.pug
 include objects/popover.pug
 include objects/menu.pug
+include objects/navbar.pug
 include objects/side-nav.pug
 include objects/icon-nav.pug
 include objects/emoji.pug
@@ -76,6 +77,7 @@ include views/avatar.pug
 include views/card.pug
 include views/popover.pug
 include views/menu.pug
+include views/navbar.pug
 include views/side-nav.pug
 include views/icon-nav.pug
 include views/backdrop.pug
@@ -124,6 +126,7 @@ html
             +view-side-nav
             +view-popover
             +view-menu
+            +view-navbar
             //+view-icon-nav
             +view-backdrop
             //+view-dialog
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index c3a9b53..e9b6fe3 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -26,4 +26,9 @@ mixin action-button
         if attributes.icon
             +icon(attributes.icon)
             = ' '
-        block
+        if block
+            span.o-action-button__label
+                block
+        if attributes.postIcon
+            = ' '
+            +icon(attributes.postIcon)
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index 2ab9bef..e0f6a15 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -26,7 +26,16 @@ mixin card-image
             classes[attributes.class] = true;
         }
 
-    img(class=classes src=attributes.src style=attributes.style)
+        let imgClasses = {
+            'o-card__image-img': true,
+            'l-card-list__card-image': attributes.list
+        }
+
+    div(class=classes)
+        img(class=imgClasses src=attributes.src style=attributes.style)
+        if block
+            .o-card__image-overlay 
+                block
 
 mixin card-body
     .o-card__body(style=attributes.style)
diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug
index 46425cd..ed4d27a 100644
--- a/tpl/objects/divider.pug
+++ b/tpl/objects/divider.pug
@@ -3,6 +3,8 @@ mixin divider(level)
         let classes = {
             'o-divider':                        true,
             'o-divider--labelled':              !!block,
+            'o-divider--vertical':              !!attributes.vertical,
+            'o-divider--dot':                   !!attributes.dot,
             ['o-divider--' + level]:            true,
             ['o-divider--' + attributes.color]: !!attributes.color
         }
diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug
new file mode 100644
index 0000000..5c7642c
--- /dev/null
+++ b/tpl/objects/navbar.pug
@@ -0,0 +1,37 @@
+include icon.pug
+include status-indicator.pug
+include action-button.pug
+
+mixin navbar
+    -
+        let classes = {
+            'o-navbar': true,
+            'o-navbar--quiet': attributes.quiet,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    div(class=classes)&attributes(attributes)
+        block
+
+mixin navbar-item
+    -
+        let classes = {
+            'o-navbar__item': true,
+            'is-selected':    attributes.selected,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
+        .o-navbar__item-content
+            if attributes.icon
+                +icon(attributes.icon)
+                = ' '
+            span.o-navbar__item-content-text
+                block
+            if attributes.postIcon
+                = ' '
+                +icon(attributes.postIcon)
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 633cf01..61081a9 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -36,6 +36,7 @@ mixin view-card
 
             +card(quiet=true href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
+                    +badge= 'Drawings'
                 +card-body
                     +card-title= 'XS Heading'
                     +card-content
@@ -59,7 +60,7 @@ mixin view-card
             div(class=classes)
                 each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
                     +card(quiet=quiet href='#' class='l-card-list__card')
-                        +card-image(src=img class='l-card-list__card-image')
+                        +card-image(src=img list=true)
                         +card-body
                             .l-media
                                 .l-media__block.l-media__block--main
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index e2f2e01..ea08984 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -23,6 +23,16 @@ mixin view-divider
             +divider('medium')
             +divider('faint')
 
+        .c-box
+            .l-media(style="height: 1em")
+                +divider('strong')(vertical=true class="l-media__block")
+                +divider('medium')(vertical=true class="l-media__block")
+                +divider('faint')(vertical=true class="l-media__block")
+            .l-media(style="height: 1em")
+                +divider('strong')(dot=true class="l-media__block")
+                +divider('medium')(dot=true class="l-media__block")
+                +divider('faint')(dot=true class="l-media__block")
+
         each theme in ['accent', 'negative']
             .c-box
                 +divider('strong')(color=theme)= 'Strong'
diff --git a/tpl/views/navbar.pug b/tpl/views/navbar.pug
new file mode 100644
index 0000000..345a22b
--- /dev/null
+++ b/tpl/views/navbar.pug
@@ -0,0 +1,19 @@
+mixin view-navbar 
+    +view('navbar', 'Navbar')
+        .c-box
+            +navbar
+                +navbar-item= 'Home'
+                +navbar-item(selected=true)= 'Art'
+                +navbar-item= 'Emojis'
+
+        .c-box
+            +navbar(quiet=true)
+                +navbar-item= 'Home'
+                +navbar-item(selected=true)= 'Art'
+                +navbar-item= 'Emojis'
+
+        .c-box
+            +navbar(quiet=true)
+                +navbar-item(selected=true icon="arrow-left")= 'Home'
+                +navbar-item= 'Art'
+                +navbar-item= 'Emojis'