12 files changed, 180 insertions, 37 deletions

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);
                 }
             }
         }