36 files changed, 532 insertions, 193 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 5ed32e9..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--*;
@@ -37,6 +38,7 @@ $breakpoints: (
 @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--*;
@@ -52,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--*;
@@ -59,13 +62,14 @@ $breakpoints: (
 @forward 'objects/menu' as o-menu--*;
 @forward 'objects/navbar' as o-navbar--*;
 @forward 'objects/palette' as o-palette--*;
+@forward 'objects/placeholders' as o-placeholders--*;
 @forward 'objects/popover' as o-popover--*;
 @forward 'objects/radio' as o-radio--*;
 @forward 'objects/side-nav' as o-side-nav--*;
 @forward 'objects/status-indicator' as o-status-indicator--*;
 @forward 'objects/switch' as o-switch--*;
 @forward 'objects/table' as o-table--*;
-@forward 'objects/tabs' as o-tabs--*;
+@forward 'objects/tabbar' as o-tabbar--*;
 @forward 'objects/text-field' as o-text-field--*;
 @forward 'objects/thumbnail' as o-thumbnail--*;
 
diff --git a/src/_layers.scss b/src/_layers.scss
new file mode 100644
index 0000000..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 4fb122a..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) {
@@ -200,6 +237,10 @@ $-sizes: (
         white-space:   nowrap;
     }
 
+    @include bem.utility('o-auto') {
+        overflow: auto;
+    }
+
     @include bem.utility('o-hidden') {
         overflow: hidden;
     }
@@ -305,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 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 e6f266d..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,8 +145,7 @@
         }
 
         @include bem.modifier('quiet') {
-            position:         relative;
-            margin:           0;
+            margin-inline:    0;
             background-color: transparent;
             border:           0;
 
@@ -144,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 {
@@ -176,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') {
@@ -187,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 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
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/objects/_tabs.scss b/src/objects/_tabs.scss
deleted file mode 100644
index 61085c2..0000000
--- a/src/objects/_tabs.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
-@use '../props' as *;
-
-@forward 'tabs.vars';
-@use 'tabs.vars' as vars;
-
-@mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
-
-    @include bem.object('tabs') {
-        position:        relative;
-        display:         flex;
-        gap:             props.get(vars.$spacing);
-        min-inline-size: 0;
-        block-size:      props.get(vars.$block-size);
-        padding-inline:  calc(.5 * props.get(vars.$spacing));
-        margin-inline:   calc(-.5 * props.get(vars.$spacing));
-        overflow-inline: auto;
-
-        &::after {
-            position:         absolute;
-            inset-block-end:  0;
-            inset-inline:     calc(.5 * props.get(vars.$spacing));
-            z-index:          -10;
-            block-size:       props.get(vars.$indicator--width);
-            content:          '';
-            background-color: props.get(vars.$railing--bg-color);
-        }
-
-        @include bem.modifier('quiet') {
-            &::after {
-                display: none;
-            }
-        }
-
-        @include bem.modifier('adapt') {
-            block-size:      100%;
-        }
-
-        @include bem.elem('tab') {
-            position:               relative;
-            display:                flex;
-            align-items:            center;
-            color:                  props.get(vars.$tab--text-color);
-            white-space:            nowrap;
-            border-block:           props.get(vars.$indicator--width) solid transparent;
-
-            &::before {
-                position:          absolute;
-                inset-block-start: 50%;
-                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i));
-                z-index:           -10;
-                block-size:        1.5em;
-                content:           '';
-                border-radius:     props.get(vars.$rounding);
-                transform:         translateY(-50%);
-            }
-
-            &:link,
-            &:visited {
-                &:hover,
-                &:active,
-                &:focus-visible {
-                    color: props.get(vars.$tab--selected--text-color);
-                }
-
-                &:focus-visible {
-                    &::before {
-                        color:           props.get(vars.$key-focus--text-color);
-                        text-decoration: none;
-                        outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                        box-shadow: 0 0 0
-                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                            props.get(vars.$key-focus--outline-color);
-                    }
-                }
-            }
-
-            @include bem.is('selected') {
-                color:                  props.get(vars.$tab--selected--text-color);
-                border-block-end-color: props.get(vars.$tab--selected--text-color);
-            }
-        }
-
-        @include bem.elem('caret') {
-            display: none;
-        }
-
-        @include bem.modifier('accent') {
-            @include bem.elem('tab') {
-                @include bem.is('selected') {
-                    color:                  props.get(vars.$tab--accent--text-color);
-                    border-block-end-color: props.get(vars.$tab--accent--text-color);
-                }
-            }
-        }
-
-        @include bem.is('collapsed') {
-            @include bem.elem('tab') {
-                display: none;
-
-                @include bem.is('selected') {
-                    display:                flex;
-                    color:                  props.get(vars.$tab--text-color);
-                    border-block-end-color: transparent;
-
-                    &:link,
-                    &:visited {
-                        &:hover,
-                        &:active,
-                        &:focus-visible {
-                            color: props.get(vars.$tab--selected--text-color);
-                        }
-                    }
-                }
-            }
-
-            @include bem.elem('caret') {
-                display: block;
-            }
-        }
-    }
-}
diff --git a/src/objects/_tabs.vars.scss b/src/objects/_tabs.vars.scss
deleted file mode 100644
index 08b24cb..0000000
--- a/src/objects/_tabs.vars.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'iro-sass/src/props';
-@use '../core.vars' as core;
-
-$block-size: props.def(--o-tabs--block-size, props.get(core.$size--700)) !default;
-$rounding:   props.def(--o-tabs--rounding, props.get(core.$rounding)) !default;
-$spacing:    props.def(--o-tabs--spacing, props.get(core.$size--400)) !default;
-$tab--pad-i: props.def(--o-tabs--tab--pad-i, props.get(core.$size--50)) !default;
-
-$indicator--width: props.def(--o-tabs--indicator--width, props.get(core.$border-width--medium)) !default; 
-
-$key-focus--border-width:  props.def(--o-tabs--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-tabs--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-tabs--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
-
-$tab--text-color:           props.def(--o-tabs--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default;
-$tab--selected--text-color: props.def(--o-tabs--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
-$tab--accent--text-color:   props.def(--o-tabs--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
-
-$railing--bg-color: props.def(--o-tabs--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
-
-$key-focus--text-color:    props.def(--o-tabs--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
-$key-focus--border-color:  props.def(--o-tabs--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--o-tabs--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
index c5f7128..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);
@@ -23,6 +24,11 @@
             margin-block-start: props.get(vars.$paragraph--margin-bs);
         }
 
+        ul,
+        ol {
+            box-sizing: border-box;
+        }
+
         img {
             display:            block;
             inline-size:        auto;
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
index 6c38c3f..1de2cfd 100644
--- a/src/scopes/_body.vars.scss
+++ b/src/scopes/_body.vars.scss
@@ -4,8 +4,9 @@
 @use '../layouts/container.vars' as container;
 
 $font-size:                  props.def(--s-body--font-size, props.get(core.$font-size--150)) !default;
+$line-height:                props.def(--s-body--line-height, calc(props.get(core.$font--standard--line-height) + .1)) !default;
 $paragraph--margin-bs:       props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default;
 $paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default;
-$img--max-block-size:        props.def(--s-body--img--max-block-size, calc(100vh - props.get(core.$size--2400))) !default;
+$img--max-block-size:        props.def(--s-body--img--max-block-size, none) !default;
 
 $strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default;
diff --git a/src/scopes/_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 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: (
diff --git a/src_demo/index.scss b/src_demo/index.scss
index a04624a..5251a05 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -1,11 +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;
@@ -31,19 +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-tabs--styles;
+@include iro.o-tabbar--styles;
 @include iro.o-text-field--styles;
 @include iro.o-thumbnail--styles;
 
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/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'