13 files changed, 138 insertions, 29 deletions

diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 2bf1a6c..bad29c5 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -54,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--*;
diff --git a/src/_utils.scss b/src/_utils.scss
index 9e27498..445e5c6 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -10,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 */
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/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/scopes/_figures.scss b/src/scopes/_figures.scss
index 08a3035..981a8b6 100644
--- a/src/scopes/_figures.scss
+++ b/src/scopes/_figures.scss
@@ -1,20 +1,15 @@
 @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;
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_demo/index.scss b/src_demo/index.scss
index ba85ec4..5251a05 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -33,6 +33,7 @@
 @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;
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/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'