28 files changed, 344 insertions, 78 deletions

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 2010a2d..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--*;
@@ -53,6 +54,7 @@ $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--*;
@@ -60,6 +62,7 @@ $breakpoints: (
 @forward 'objects/menu' as o-menu--*;
 @forward 'objects/navbar' as o-navbar--*;
 @forward 'objects/palette' as o-palette--*;
+@forward 'objects/placeholders' as o-placeholders--*;
 @forward 'objects/popover' as o-popover--*;
 @forward 'objects/radio' as o-radio--*;
 @forward 'objects/side-nav' as o-side-nav--*;
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 e90aa57..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 */
@@ -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) {
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 2744510..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%;
@@ -44,6 +40,21 @@
                 position:          sticky;
                 inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
             }
+
+            @include bem.modifier('sticky-1200') {
+                position:          sticky;
+                inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset));
+            }
+        }
+
+        @include bem.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));
+                }
+            }
         }
 
         @include bem.elem('content') {
@@ -55,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 01562e1..d519939 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -4,9 +4,10 @@
 $col-gap:  props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
 $row-gap:  props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
 
-$gapless: props.def(--l-split-view--gapless, 0) !default;
+$gapless: props.def(--l-split-view--gapless, 0rem) !default;
 
 $panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default;
 $panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default;
+$panel--sticky-1200--inset: props.def(--l-split-view--panel--sticky-1200--inset, props.get(core.$size--1200)) !default;
 
 $panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;
diff --git a/src/objects/_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/_card.scss b/src/objects/_card.scss
index 6628eab..c87e676 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,7 +14,7 @@
         position:         relative;
         display:          flex;
         flex-direction:   column;
-        margin-inline:    calc(-1 * props.get(vars.$key-focus--border-width));
+        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
         background-color: props.get(vars.$bg-color);
         background-clip:  content-box;
         border:           props.get(vars.$key-focus--border-offset) solid transparent;
@@ -61,7 +61,7 @@
             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);
@@ -145,7 +145,6 @@
         }
 
         @include bem.modifier('quiet') {
-            position:         relative;
             margin-inline:    0;
             background-color: transparent;
             border:           0;
@@ -161,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 {
@@ -193,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') {
@@ -204,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/_divider.scss b/src/objects/_divider.scss
index 65f1718..4ed8092 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -46,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 {
@@ -67,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') {
@@ -83,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 f5932f5..bdc7027 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -19,7 +19,6 @@
         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);
@@ -53,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/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index da280fd..fcdac80 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -7,7 +7,7 @@ $block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !defa
 $spacing:    props.def(--o-navbar--spacing, props.get(core.$size--200)) !default;
 
 $item--pad-i:       props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
-$item--pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--25)) !default;
+$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--25)) !default;
 $item--pad-b:       props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default;
 $item--font-size:   props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
 
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/_tabbar.scss b/src/objects/_tabbar.scss
index 8518525..131c832 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -12,28 +12,27 @@
     @include materialize-at-root(meta.module-variables('vars'));
 
     @include bem.object('tabbar') {
-        position:        relative;
-        display:         flex;
-        gap:             props.get(vars.$spacing);
         min-inline-size: 0;
         block-size:      props.get(vars.$block-size);
-        margin-inline:   calc(-.5 * props.get(vars.$spacing));
-        overflow-inline: auto;
+        overflow:        hidden;
 
         &::after {
             display:            block;
-            flex:               1 1 auto;
             block-size:         props.get(vars.$indicator--width);
-            margin-block-start: auto;
-            margin-inline-end:  calc(.5 * props.get(vars.$spacing));
+            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') {
-            &::after {
-                display: none;
-            }
+            box-shadow: none;
         }
 
         @include bem.modifier('adapt') {
@@ -41,14 +40,12 @@
         }
 
         @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;
-            border-block:           props.get(vars.$indicator--width) solid transparent;
-            border-block-end-color: props.get(vars.$railing--bg-color);
+            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;
@@ -61,6 +58,17 @@
                 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,
@@ -82,20 +90,22 @@
             }
 
             @include bem.is('selected') {
-                color:                  props.get(vars.$tab--selected--text-color);
-                border-block-end-color: props.get(vars.$tab--selected--text-color);
+                color: props.get(vars.$tab--selected--text-color);
+                
+                &::after {
+                    display: block;
+                }
             }
         }
 
-        @include bem.elem('caret') {
-            display: none;
-        }
-
         @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);
-                    border-block-end-color: props.get(vars.$tab--accent--text-color);
+                    color: props.get(vars.$tab--accent--text-color);
                 }
             }
         }
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
index 65c6d2f..6d32212 100644
--- a/src/scopes/_body.scss
+++ b/src/scopes/_body.scss
@@ -11,6 +11,7 @@
 
     @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);
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
index 8e77a17..1de2cfd 100644
--- a/src/scopes/_body.vars.scss
+++ b/src/scopes/_body.vars.scss
@@ -4,6 +4,7 @@
 @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;
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss
index f619506..981a8b6 100644
--- a/src/scopes/_figures.scss
+++ b/src/scopes/_figures.scss
@@ -1,20 +1,21 @@
 @use 'sass:meta';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
-@use '../props' as *;
-
-@forward 'figures.vars';
-@use 'figures.vars' as vars;
+@use '../objects/figure.vars' as figure;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
-
     @include bem.scope('figures') {
         figcaption {
-            padding-block:    props.get(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);
+            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/_figures.vars.scss b/src/scopes/_figures.vars.scss
deleted file mode 100644
index 1737078..0000000
--- a/src/scopes/_figures.vars.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@use 'iro-sass/src/props';
-@use '../core.vars' as core;
-@use './implicit.vars' as implicit;
-
-$pad-b:        props.def(--s-figures--pad-b, props.get(core.$size--100)) !default;
-$border-width: props.def(--s-figures--border-width, props.get(core.$border-width--thin)) !default;
-$font-size:    props.def(--s-figures--font-size, props.get(core.$font-size--100)) !default;
-
-$text-color:   props.def(--s-figures--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
-$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border-mute), 'color') !default;
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 020e311..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 *;
@@ -155,5 +157,24 @@
             padding: 0;
             margin:  0;
         }
+
+        @each $theme in map.keys(props.get(core.$transparent-colors)) {
+            .t-static-#{string.slice($theme, 3)} {
+                color: props.get(core.$transparent-colors, $theme, --800);
+
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                    color: props.get(core.$transparent-colors, $theme, --900);
+                }
+
+                hr {
+                    color: props.get(core.$transparent-colors, $theme, --400);
+                }
+            }
+        }
     }
 }
diff --git a/src/scopes/_links.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: (