4 files changed, 21 insertions, 21 deletions

diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 22e50c0..83d5a9d 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -25,11 +25,11 @@ $breakpoints: (
 @forward 'core' as core--*;
 @forward 'layers' as layers--*;
 
-@forward 'layouts/button-group' as l-button-group--*;
 @forward 'layouts/card-list' as l-card-list--*;
 @forward 'layouts/container' as l-container--*;
 @forward 'layouts/flex' as l-flex--*;
 @forward 'layouts/form' as l-form--*;
+@forward 'layouts/hlist' as l-hlist--*;
 @forward 'layouts/media' as l-media--*;
 @forward 'layouts/overflow' as l-overflow--*;
 @forward 'layouts/split-view' as l-split-view--*;
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
deleted file mode 100644
index b56eec7..0000000
--- a/src/layouts/_button-group.vars.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@use 'iro-sass/src/props';
-@use '../core.vars' as core;
-
-$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/_button-group.scss b/src/layouts/_hlist.scss
index 44719be..5075541 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_hlist.scss
@@ -3,14 +3,14 @@
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
-@forward 'button-group.vars';
-@use 'button-group.vars' as vars;
+@forward 'hlist.vars';
+@use 'hlist.vars' as vars;
 @use '../objects/button.vars' as button;
 
 @mixin styles {
         @include materialize-at-root(meta.module-variables('vars'));
 
-        @include bem.layout('button-group') {
+        @include bem.layout('hlist') {
                 display:   inline-flex;
                 flex-wrap: wrap;
                 gap:       props.get(vars.$gap);
@@ -21,7 +21,7 @@
                         }
                 }
 
-                @include bem.modifier('align-block') {
+                @include bem.modifier('buttons') {
                         margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
 
                         @include bem.modifier('pill') {
diff --git a/src/layouts/_hlist.vars.scss b/src/layouts/_hlist.vars.scss
new file mode 100644
index 0000000..fecded5
--- /dev/null
+++ b/src/layouts/_hlist.vars.scss
@@ -0,0 +1,16 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$gap: props.def(--l-hlist--gap, props.get(core.$size--150)) !default;
+
+$gapless: props.def(--l-hlist--gapless, 0) !default;
+$sm:      props.def(--l-hlist--sm, props.get(core.$size--100)) !default;
+$lg:      props.def(--l-hlist--lg, props.get(core.$size--300)) !default;
+$xl:      props.def(--l-hlist--xl, props.get(core.$size--450)) !default;
+
+$sizes: (
+        'gapless': $gapless,
+        'sm':      $sm,
+        'lg':      $lg,
+        'xl':      $xl,
+) !default;