Less broad imports

46 files changed, 460 insertions, 459 deletions

diff --git a/src/_core.scss b/src/_core.scss
index ea84f6c..3dccd54 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -19,7 +19,7 @@
                 }
             }
         } @else {
-            @include iro.bem-theme($theme-name) {
+            @include bem.theme($theme-name) {
                 @include props.materialize(map.get($theme, 'light'));
                 
                 @if map.has-key($theme, 'dark') {
diff --git a/src/_props.scss b/src/_props.scss
index 9a1ecec..748d785 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -26,7 +26,7 @@
 
     @each $theme-name in map.keys(config.$themes) {
         @if $theme-name != config.$theme-default {
-            @include iro.bem-theme($theme-name) {
+            @include bem.theme($theme-name) {
                 @include props.materialize($ref, null);
 
                 @each $breakpoint in map.keys(media.$breakpoints) {
diff --git a/src/_themes.scss b/src/_themes.scss
index f246465..ec54af4 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use 'include-media/dist/include-media' as media;
 
@@ -7,64 +7,64 @@
 @forward 'core.vars';
 
 @mixin styles {
-    @include iro.bem-theme('base') {
+    @include bem.theme('base') {
         background-color: props.get(vars.$theme, --bg-base);
 
-        @include iro.bem-suffix('light') {
+        @include bem.suffix('light') {
             @media (prefers-color-scheme: light) {
                 background-color: props.get(vars.$theme, --bg-base);
             }
         }
 
-        @include iro.bem-suffix('dark') {
+        @include bem.suffix('dark') {
             @media (prefers-color-scheme: dark) {
                 background-color: props.get(vars.$theme, --bg-base);
             }
         }
     }
 
-    @include iro.bem-theme('l1') {
+    @include bem.theme('l1') {
         background-color: props.get(vars.$theme, --bg-l1);
 
-        @include iro.bem-suffix('light') {
+        @include bem.suffix('light') {
             @media (prefers-color-scheme: light) {
                 background-color: props.get(vars.$theme, --bg-l1);
             }
         }
 
-        @include iro.bem-suffix('dark') {
+        @include bem.suffix('dark') {
             @media (prefers-color-scheme: dark) {
                 background-color: props.get(vars.$theme, --bg-l1);
             }
         }
     }
 
-    @include iro.bem-theme('l2') {
+    @include bem.theme('l2') {
         background-color: props.get(vars.$theme, --bg-l2);
 
-        @include iro.bem-suffix('light') {
+        @include bem.suffix('light') {
             @media (prefers-color-scheme: light) {
                 background-color: props.get(vars.$theme, --bg-l2);
             }
         }
 
-        @include iro.bem-suffix('dark') {
+        @include bem.suffix('dark') {
             @media (prefers-color-scheme: dark) {
                 background-color: props.get(vars.$theme, --bg-l2);
             }
         }
     }
 
-    @include iro.bem-theme('50') {
+    @include bem.theme('50') {
         background-color: props.get(vars.$theme, --base, --50);
 
-        @include iro.bem-suffix('light') {
+        @include bem.suffix('light') {
             @media (prefers-color-scheme: light) {
                 background-color: props.get(vars.$theme, --base, --50);
             }
         }
 
-        @include iro.bem-suffix('dark') {
+        @include bem.suffix('dark') {
             @media (prefers-color-scheme: dark) {
                 background-color: props.get(vars.$theme, --base, --50);
             }
diff --git a/src/_utils.scss b/src/_utils.scss
index a96666d..132e8bf 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use 'include-media/dist/include-media' as media;
 
@@ -32,216 +32,216 @@ $-sizes: (
 ) !default;
 
 @mixin styles {
-    @include iro.bem-utility('d-block') {
+    @include bem.utility('d-block') {
         display: block;
     }
 
-    @include iro.bem-utility('d-inline-block') {
+    @include bem.utility('d-inline-block') {
         display: inline-block;
     }
 
-    @include iro.bem-utility('d-contents') {
+    @include bem.utility('d-contents') {
         display: contents;
     }
 
-    @include iro.bem-utility('td-none') {
+    @include bem.utility('td-none') {
         text-decoration: none;
     }
 
-    @include iro.bem-utility('d-none') {
+    @include bem.utility('d-none') {
         display: none;
 
         @each $breakpoint in map.keys(media.$breakpoints) {
             @include media.media('<=#{$breakpoint}') {
-                @include iro.bem-suffix('#{$breakpoint}-lo') {
+                @include bem.suffix('#{$breakpoint}-lo') {
                     display: none;
                 }
             }
 
             @include media.media('>#{$breakpoint}') {
-                @include iro.bem-suffix('#{$breakpoint}-hi') {
+                @include bem.suffix('#{$breakpoint}-hi') {
                     display: none;
                 }
             }
         }
 
-        @include iro.bem-at-theme('js') {
-            @include iro.bem-suffix('js') {
+        @include bem.at-theme('js') {
+            @include bem.suffix('js') {
                 display: none;
             }
         }
 
-        @include iro.bem-at-theme('no-js') {
-            @include iro.bem-suffix('no-js') {
+        @include bem.at-theme('no-js') {
+            @include bem.suffix('no-js') {
                 display: none;
             }
         }
 
-        @include iro.bem-suffix('empty') {
+        @include bem.suffix('empty') {
             &:empty {
                 display: none;
             }
         }
     }
 
-    @include iro.bem-utility('ta-start') {
+    @include bem.utility('ta-start') {
         text-align: start;
     }
 
-    @include iro.bem-utility('ta-end') {
+    @include bem.utility('ta-end') {
         text-align: end;
     }
 
-    @include iro.bem-utility('ta-center') {
+    @include bem.utility('ta-center') {
         text-align: center;
     }
 
-    @include iro.bem-utility('fw-normal') {
+    @include bem.utility('fw-normal') {
         font-weight: normal;
     }
 
-    @include iro.bem-utility('ai-center') {
+    @include bem.utility('ai-center') {
         align-items: center;
     }
 
-    @include iro.bem-utility('ai-start') {
+    @include bem.utility('ai-start') {
         align-items: flex-start;
     }
 
-    @include iro.bem-utility('ai-end') {
+    @include bem.utility('ai-end') {
         align-items: flex-end;
     }
 
-    @include iro.bem-utility('jc-center') {
+    @include bem.utility('jc-center') {
         justify-content: center;
     }
 
-    @include iro.bem-utility('jc-start') {
+    @include bem.utility('jc-start') {
         justify-content: flex-start;
     }
 
-    @include iro.bem-utility('jc-end') {
+    @include bem.utility('jc-end') {
         justify-content: flex-end;
     }
 
-    @include iro.bem-utility('tt-upper') {
+    @include bem.utility('tt-upper') {
         text-transform: uppercase;
     }
 
-    @include iro.bem-utility('tt-lower') {
+    @include bem.utility('tt-lower') {
         text-transform: lowercase;
     }
 
-    @include iro.bem-utility('c-heading') {
+    @include bem.utility('c-heading') {
         color: props.get(vars.$theme, --heading);
     }
 
-    @include iro.bem-utility('c-text') {
+    @include bem.utility('c-text') {
         color: props.get(vars.$theme, --text);
     }
 
-    @include iro.bem-utility('c-mute') {
+    @include bem.utility('c-mute') {
         color: props.get(vars.$theme, --text-mute);
     }
 
-    @include iro.bem-utility('c-mute-more') {
+    @include bem.utility('c-mute-more') {
         color: props.get(vars.$theme, --text-mute-more);
     }
 
     @each $dir, $prop in (is: inline-size, bs: block-size) {
-        @include iro.bem-utility('#{$dir}-100') {
+        @include bem.utility('#{$dir}-100') {
             #{$prop}: 100%;
         }
         
-        @include iro.bem-utility('#{$dir}-75') {
+        @include bem.utility('#{$dir}-75') {
             #{$prop}: 75%;
         }
         
-        @include iro.bem-utility('#{$dir}-50') {
+        @include bem.utility('#{$dir}-50') {
             #{$prop}: 50%;
         }
         
-        @include iro.bem-utility('#{$dir}-25') {
+        @include bem.utility('#{$dir}-25') {
             #{$prop}: 25%;
         }
         
-        @include iro.bem-utility('#{$dir}-1px') {
+        @include bem.utility('#{$dir}-1px') {
             #{$prop}: 1px;
         }
         
-        @include iro.bem-utility('#{$dir}-0') {
+        @include bem.utility('#{$dir}-0') {
             #{$prop}: 0;
         }
     }
 
-    @include iro.bem-utility('elp') {
+    @include bem.utility('elp') {
         overflow:      hidden;
         text-overflow: ellipsis;
         white-space:   nowrap;
     }
 
-    @include iro.bem-utility('p-static') {
+    @include bem.utility('p-static') {
         position: static;
     }
 
-    @include iro.bem-utility('p-relative') {
+    @include bem.utility('p-relative') {
         position: relative;
     }
 
-    @include iro.bem-utility('p-fixed') {
+    @include bem.utility('p-fixed') {
         position: fixed;
     }
 
-    @include iro.bem-utility('p-sticky-bs') {
+    @include bem.utility('p-sticky-bs') {
         position:          sticky;
         inset-block-start: 0;
     }
 
     @each $dir, $suffix in $-dirs {
-        @include iro.bem-utility('m#{$dir}-auto') {
+        @include bem.utility('m#{$dir}-auto') {
             margin#{$suffix}: auto;
         }
         
-        @include iro.bem-utility('p#{$dir}-auto') {
+        @include bem.utility('p#{$dir}-auto') {
             padding#{$suffix}: auto;
         }
 
         @each $mod, $size in $-sizes {
-            @include iro.bem-utility('m#{$dir}-#{$mod}') {
+            @include bem.utility('m#{$dir}-#{$mod}') {
                 margin#{$suffix}: props.get($size);
             }
             
-            @include iro.bem-utility('p#{$dir}-#{$mod}') {
+            @include bem.utility('p#{$dir}-#{$mod}') {
                 padding#{$suffix}: props.get($size);
             }
         }
         
-        @include iro.bem-utility('b#{$dir}-0') {
+        @include bem.utility('b#{$dir}-0') {
             border#{$suffix}: 0;
 
-            @include iro.bem-suffix('light') {
+            @include bem.suffix('light') {
                 @media (prefers-color-scheme: light) {
                     border#{$suffix}: 0;
                 }
             }
         
-            @include iro.bem-suffix('dark') {
+            @include bem.suffix('dark') {
                 @media (prefers-color-scheme: dark) {
                     border#{$suffix}: 0;
                 }
             }
         }
         
-        @include iro.bem-utility('b#{$dir}-1') {
+        @include bem.utility('b#{$dir}-1') {
             border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
 
-            @include iro.bem-suffix('light') {
+            @include bem.suffix('light') {
                 @media (prefers-color-scheme: light) {
                     border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
                 }
             }
         
-            @include iro.bem-suffix('dark') {
+            @include bem.suffix('dark') {
                 @media (prefers-color-scheme: dark) {
                     border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
                 }
@@ -249,7 +249,7 @@ $-sizes: (
         }
     }
 
-    @include iro.bem-utility('mbs-neutralize') {
+    @include bem.utility('mbs-neutralize') {
         &::before {
             display:       block;
             margin-block:  -100em 100em;
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index 58d0986..4895647 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,7 +9,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-layout('button-group') {
+    @include bem.layout('button-group') {
         display:   flex;
         flex-wrap: wrap;
         gap:       props.get(vars.$spacing);
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 0722a88..49f4b74 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
 @use 'include-media/dist/include-media' as media;
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -10,47 +10,47 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-layout('card-list') {
+    @include bem.layout('card-list') {
         display:        flex;
         flex-direction: column;
         gap:            props.get(vars.$row-gap);
 
-        @include iro.bem-modifier('quiet') {
+        @include bem.modifier('quiet') {
             row-gap: props.get(vars.$quiet--row-gap);
         }
 
-        @include iro.bem-modifier('grid') {
+        @include bem.modifier('grid') {
             display:               grid;
             grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
             gap:                   props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
 
-            @include iro.bem-modifier('quiet') {
+            @include bem.modifier('quiet') {
                 row-gap: props.get(vars.$grid--quiet--row-gap);
             }
         }
 
-        @include iro.bem-modifier('masonry') {
+        @include bem.modifier('masonry') {
             display:    block;
             columns:    auto props.get(vars.$masonry--col-width);
             column-gap: props.get(vars.$masonry--col-gap);
 
-            @include iro.bem-elem('card') {
+            @include bem.elem('card') {
                 margin-block-end: props.get(vars.$masonry--row-gap);
                 break-inside:     avoid;
             }
 
-            @include iro.bem-modifier('quiet') {
-                @include iro.bem-elem('card') {
+            @include bem.modifier('quiet') {
+                @include bem.elem('card') {
                     margin-block-end: props.get(vars.$masonry--quiet--row-gap);
                 }
             }
         }
 
-        @include iro.bem-modifier('masonry-h') {
+        @include bem.modifier('masonry-h') {
             flex-flow: row wrap;
             gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
 
-            @include iro.bem-modifier('no-flush') {
+            @include bem.modifier('no-flush') {
                 &::after {
                     display:     block;
                     flex:        1 0 auto;
@@ -59,22 +59,22 @@
                 }
             }
 
-            @include iro.bem-elem('card') {
+            @include bem.elem('card') {
                 flex:            1 0 auto;
                 max-inline-size: 100%;
             }
 
-            @include iro.bem-elem('card-image') {
+            @include bem.elem('card-image') {
                 block-size: props.get(vars.$masonry-h--row-height);
             }
 
-            @include iro.bem-modifier('quiet') {
+            @include bem.modifier('quiet') {
                 row-gap: props.get(vars.$masonry-h--quiet--row-gap);
             }
         }
 
-        @include iro.bem-modifier('aspect-5\\/4') {
-            @include iro.bem-elem('card-image') {
+        @include bem.modifier('aspect-5\\/4') {
+            @include bem.elem('card-image') {
                 aspect-ratio: 5 / 4;
             }
         }
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 8b2ed20..3336140 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,19 +9,19 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-layout('container') {
+    @include bem.layout('container') {
         @each $mod, $size in vars.$fixed-sizes {
-            @include iro.bem-modifier($mod) {
+            @include bem.modifier($mod) {
                 max-inline-size: props.get($size);
                 margin-inline:   auto;
             }
         }
 
-        @include iro.bem-modifier('pad-i') {
+        @include bem.modifier('pad-i') {
             padding-inline: props.get(vars.$pad-i);
         }
 
-        @include iro.bem-modifier('pad-b') {
+        @include bem.modifier('pad-b') {
             padding-block: props.get(vars.$pad-b);
         }
     }
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index f5343a6..cba7574 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -1,10 +1,10 @@
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/functions' as fn;
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$fixed-125: props.def(--l-container--fixed-125, iro.fn-px-to-rem(720px)) !default;
-$fixed:     props.def(--l-container--fixed, iro.fn-px-to-rem(610px)) !default;
-$fixed-75:  props.def(--l-container--fixed-75, iro.fn-px-to-rem(500px)) !default;
+$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-sizes: (
     'fixed-125': $fixed-125,
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index 6cc9dc6..d7cae95 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,26 +1,26 @@
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 
 @mixin styles {
-    @include iro.bem-layout('flex') {
+    @include bem.layout('flex') {
         display: flex;
 
-        @include iro.bem-modifier('align-stretch') {
+        @include bem.modifier('align-stretch') {
             align-items: stretch;
         }
 
-        @include iro.bem-modifier('align-center') {
+        @include bem.modifier('align-center') {
             align-items: center;
         }
 
-        @include iro.bem-modifier('align-start') {
+        @include bem.modifier('align-start') {
             align-items: flex-start;
         }
 
-        @include iro.bem-modifier('align-end') {
+        @include bem.modifier('align-end') {
             align-items: flex-end;
         }
 
-        @include iro.bem-modifier('column') {
+        @include bem.modifier('column') {
             flex-direction: column;
         }
     }
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 0bb9d4a..4ccf334 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,49 +9,49 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-layout('form') {
+    @include bem.layout('form') {
         display:        flex;
         flex-direction: column;
         gap:            props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
 
-        @include iro.bem-elem('item') {
+        @include bem.elem('item') {
             display: block;
         }
         
-        @include iro.bem-elem('item-content') {
-            @include iro.bem-modifier('align-start') {
+        @include bem.elem('item-content') {
+            @include bem.modifier('align-start') {
                 align-self: start;
             }
         }
 
-        @include iro.bem-modifier('row') {
+        @include bem.modifier('row') {
             flex-direction: row;
             align-items:    flex-end;
         }
 
-        @include iro.bem-modifier('labels-start', 'labels-end') {
+        @include bem.modifier('labels-start', 'labels-end') {
             display:               grid;
             grid-template-rows:    auto;
             grid-template-columns: auto 1fr;
             align-items:           baseline;
 
-            @include iro.bem-elem('item') {
+            @include bem.elem('item') {
                 display: contents;
             }
         
-            @include iro.bem-elem('item-label') {
+            @include bem.elem('item-label') {
                 grid-column:        1;
                 padding-inline-end: 0;
             }
         
-            @include iro.bem-elem('item-content') {
+            @include bem.elem('item-content') {
                 grid-column:        2;
                 margin-block-start: 0;
             }
         }
 
-        @include iro.bem-modifier('labels-end') {
-            @include iro.bem-elem('item-label') {
+        @include bem.modifier('labels-end') {
+            @include bem.elem('item-label') {
                 text-align: end;
             }
         }
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 5658222..63daaf8 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,31 +9,31 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-layout('media') {
+    @include bem.layout('media') {
         display:     flex;
         gap:         props.get(vars.$gap);
         align-items: center;
         line-height: 1.4;
 
         @each $mod, $size in vars.$sizes {
-            @include iro.bem-modifier($mod) {
+            @include bem.modifier($mod) {
                 gap: props.get($size);
             }
         }
 
-        @include iro.bem-modifier('wrap') {
+        @include bem.modifier('wrap') {
             flex-wrap: wrap;
         }
 
-        @include iro.bem-elem('block') {
+        @include bem.elem('block') {
             flex: 0 0 auto;
 
-            @include iro.bem-modifier('shrink', 'main') {
+            @include bem.modifier('shrink', 'main') {
                 flex-shrink:     1;
                 min-inline-size: 0;
             }
 
-            @include iro.bem-modifier('main') {
+            @include bem.modifier('main') {
                 inline-size: 100%;
             }
         }
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index 3489ed7..195132a 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -1,9 +1,9 @@
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
 @mixin styles {
-    @include iro.bem-layout('overflow') {
+    @include bem.layout('overflow') {
         overflow:        auto;
         scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
     }
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 046cd16..caba917 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -2,7 +2,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -45,7 +45,7 @@
         }
     }
 
-    @include iro.bem-modifier('quiet') {
+    @include bem.modifier('quiet') {
         color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
         background-color: transparent;
         border-color:     transparent;
@@ -72,7 +72,7 @@
         }
     }
 
-    @include iro.bem-is('selected') {
+    @include bem.is('selected') {
         color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
         background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
         border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
@@ -103,7 +103,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('action-button') {
+    @include bem.object('action-button') {
         position:         relative;
         display:          inline-block;
         padding-block:    props.get(vars.$pad-b);
@@ -140,12 +140,12 @@
         @include -apply-theme(vars.$default-theme);
 
         @each $theme in map.keys(props.get(vars.$themes)) {
-            @include iro.bem-modifier(string.slice($theme, 3)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 @include -apply-theme(vars.$themes, $theme);
             }
         }
 
-        @include iro.bem-modifier('pill') {
+        @include bem.modifier('pill') {
             padding-inline: props.get(vars.$pad-i-pill);
             border-radius:  100em;
 
@@ -155,23 +155,23 @@
         }
 
         @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
-            @include iro.bem-modifier($mod) {
+            @include bem.modifier($mod) {
                 padding-block:  props.get($pad-b);
                 padding-inline: props.get($pad-i);
                 font-size:      props.get($font-size);
 
-                @include iro.bem-modifier('pill') {
+                @include bem.modifier('pill') {
                     padding-inline: props.get($pad-i-pill);
                 }
             }
         }
 
-        @include iro.bem-modifier('icon') {
+        @include bem.modifier('icon') {
             inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
             padding-inline: 0;
 
             @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
-                @include iro.bem-modifier($mod) {
+                @include bem.modifier($mod) {
                     inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
                     padding-inline: 0;
                 }
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index e4c2038..3c9209a 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -10,7 +10,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('alert') {
+    @include bem.object('alert') {
         padding-block:    props.get(vars.$pad-b);
         padding-inline:   props.get(vars.$pad-i);
         background-color: props.get(vars.$bg-color);
@@ -18,7 +18,7 @@
         border-radius:    props.get(vars.$rounding);
 
         @each $mod, $theme in vars.$themes-config {
-            @include iro.bem-modifier($mod) {
+            @include bem.modifier($mod) {
                 border-color: props.get(vars.$themes, $theme, --border-color);
             }
         }
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 0f8e70f..535537f 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -7,11 +7,11 @@
 @use 'avatar.vars' as vars;
 
 @mixin status($indicator-size) {
-    @include iro.bem-elem('status') {
+    @include bem.elem('status') {
         inline-size: props.get($indicator-size);
         block-size:  props.get($indicator-size);
 
-        @include iro.bem-next-elem('content') {
+        @include bem.next-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)),
@@ -24,7 +24,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('avatar') {
+    @include bem.object('avatar') {
         position:       relative;
         display:        inline-block;
         font-size:      props.get(vars.$font-size);
@@ -50,7 +50,7 @@
                 props.get(vars.$key-focus--outline-color);
         }
 
-        @include iro.bem-elem('status') {
+        @include bem.elem('status') {
             position:         absolute;
             inset-block-end:  0;
             inset-inline-end: 0;
@@ -58,7 +58,7 @@
 
         @include status(vars.$indicator-size);
 
-        @include iro.bem-elem('content') {
+        @include bem.elem('content') {
             display:          block;
             inline-size:      props.get(vars.$size);
             block-size:       props.get(vars.$size);
@@ -69,38 +69,38 @@
             border-radius:    props.get(vars.$rounding);
         }
 
-        @include iro.bem-modifier('circle') {
+        @include bem.modifier('circle') {
             border-radius: 100%;
 
             &::after {
                 border-radius: 100%;
             }
 
-            @include iro.bem-elem('content') {
+            @include bem.elem('content') {
                 border-radius: 100%;
             }
         }
 
-        @include iro.bem-modifier('placeholder') {
-            @include iro.bem-elem('content') {
+        @include bem.modifier('placeholder') {
+            @include bem.elem('content') {
                 background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
             }
         }
 
-        @include iro.bem-modifier('colored') {
-            @include iro.bem-elem('content') {
+        @include bem.modifier('colored') {
+            @include bem.elem('content') {
                 color:            #fff;
                 background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
             }
         }
 
         @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
-            @include iro.bem-modifier($mod) {
+            @include bem.modifier($mod) {
                 font-size: props.get($font-size);
     
                 @include status($indicator-size);
     
-                @include iro.bem-elem('content') {
+                @include bem.elem('content') {
                     inline-size: props.get($size);
                     block-size:  props.get($size);
                     line-height: props.get($size);
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index bf38079..0e8a7f0 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,7 +9,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('backdrop') {
+    @include bem.object('backdrop') {
         position:         fixed;
         inset:            0;
         z-index:          props.get(vars.$z-index);
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 1c28095..d50752a 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -2,7 +2,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use '../core.vars' as core;
@@ -29,7 +29,7 @@
         }
     }
 
-    @include iro.bem-modifier('quiet') {
+    @include bem.modifier('quiet') {
         color:            props.get($theme, list.join($key, --quiet --label)...);
         background-color: props.get($theme, list.join($key, --quiet --bg)...);
 
@@ -65,7 +65,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('badge') {
+    @include bem.object('badge') {
         position:         relative;
         display:          inline-block;
         padding-block:    props.get(vars.$pad-b);
@@ -98,25 +98,25 @@
             }
         }
 
-        @include iro.bem-elem('label') {
+        @include bem.elem('label') {
             margin-inline: props.get(vars.$pad-i-label);
         }
 
         @include -apply-theme(vars.$default-theme, $static: true);
 
         @each $theme in map.keys(props.get(vars.$themes)) {
-            @include iro.bem-modifier(string.slice($theme, 3)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 @include -apply-theme(vars.$themes, $theme);
             }
         }
 
         @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include iro.bem-modifier(string.slice($theme, 3)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 @include -apply-theme(vars.$static-themes, $theme, true);
             }
         }
     
-        @include iro.bem-modifier('pill') {
+        @include bem.modifier('pill') {
             padding-inline: props.get(vars.$pad-i-pill);
             border-radius:  10em;
 
@@ -126,16 +126,16 @@
         }
 
         @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
-            @include iro.bem-modifier($mod) {
+            @include bem.modifier($mod) {
                 padding-block:  props.get($pad-b);
                 padding-inline: props.get($pad-i);
                 font-size:      props.get($font-size);
 
-                @include iro.bem-elem('label') {
+                @include bem.elem('label') {
                     margin-inline: props.get($pad-i-label);
                 }
         
-                @include iro.bem-modifier('pill') {
+                @include bem.modifier('pill') {
                     padding-inline: props.get($pad-i-pill);
                 }
             }
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 9d5a8a1..1809ba6 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,7 +2,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use '../core.vars' as core;
@@ -19,7 +19,7 @@
         border-color:     transparent;
     }
     
-    @include iro.bem-modifier('outline') {
+    @include bem.modifier('outline') {
         &:link,
         &:visited,
         &:enabled {
@@ -62,14 +62,14 @@
             props.get($theme, list.join($key, --key-focus --outline)...);
     }
     
-    @include iro.bem-modifier('outline') {
+    @include bem.modifier('outline') {
         background-color: transparent;
         border-color:     props.get($theme, list.join($key, --disabled --outline-border)...);
     }
 
     @include -apply-theme($theme, $key);
 
-    @include iro.bem-modifier('primary') {
+    @include bem.modifier('primary') {
         @include -apply-theme($theme, list.join($key, --primary));
     }
 }
@@ -77,7 +77,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('button') {
+    @include bem.object('button') {
         position:         relative;
         display:          inline-block;
         padding-block:    props.get(vars.$pad-b);
@@ -111,25 +111,25 @@
             }
         }
 
-        @include iro.bem-elem('label') {
+        @include bem.elem('label') {
             margin-inline: props.get(vars.$pad-i-label);
         }
     
-        @include iro.bem-modifier('block') {
+        @include bem.modifier('block') {
             display: block;
         }
     
-        @include iro.bem-modifier('outline') {
+        @include bem.modifier('outline') {
             background-color: transparent;
         }
 
         @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes {
-            @include iro.bem-modifier($mod) {
+            @include bem.modifier($mod) {
                 padding-block:  props.get($pad-b);
                 padding-inline: props.get($pad-i);
                 font-size:      props.get($font-size);
 
-                @include iro.bem-elem('label') {
+                @include bem.elem('label') {
                     margin-inline: props.get($pad-i-label);
                 }
             }
@@ -138,18 +138,18 @@
         @include -apply-static-theme(vars.$default-theme);
 
         @each $theme in map.keys(props.get(vars.$themes)) {
-            @include iro.bem-modifier(string.slice($theme, 3)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 @include -apply-theme(vars.$themes, $theme);
             }
         }
 
         @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include iro.bem-modifier(string.slice($theme, 3)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 @include -apply-static-theme(vars.$static-themes, $theme);
             }
         }
     
-        @include iro.bem-modifier('round') {
+        @include bem.modifier('round') {
             inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
             padding-inline: 0;
             border-radius:  100em;
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index d92237b..a085491 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use 'avatar.vars' as avatar;
@@ -10,7 +10,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('card') {
+    @include bem.object('card') {
         position:         relative;
         display:          flex;
         flex-direction:   column;
@@ -21,14 +21,14 @@
         border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
         transition:       transform .2s;
 
-        @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
             &:active,
             &:focus-visible {
                 transform: translateY(props.get(vars.$hover--offset-b));
 
-                @include iro.bem-elem('body') {
-                    @include iro.bem-modifier('hidden') {
+                @include bem.elem('body') {
+                    @include bem.modifier('hidden') {
                         visibility: visible;
                         opacity:    1;
                         transition:
@@ -49,12 +49,12 @@
             }
         }
 
-        @include iro.bem-elem('avatar') {
+        @include bem.elem('avatar') {
             margin-block-start:  props.get(vars.$pad-b);
             margin-inline-start: props.get(vars.$pad-i);
         }
 
-        @include iro.bem-elem('image') {
+        @include bem.elem('image') {
             display:     block;
             flex:        0 0 auto;
             inline-size: 100%;
@@ -71,12 +71,12 @@
                 border-end-end-radius:   props.get(vars.$rounding);
             }
 
-            @include iro.bem-next-elem('avatar') {
+            @include bem.next-elem('avatar') {
                 margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
             }
         }
 
-        @include iro.bem-elem('body') {
+        @include bem.elem('body') {
             flex:            1 0 auto;
             padding-block:   props.get(vars.$pad-b);
             padding-inline:  props.get(vars.$pad-i);
@@ -87,7 +87,7 @@
                 content:       '';
             }
 
-            @include iro.bem-modifier('hidden') {
+            @include bem.modifier('hidden') {
                 position:                absolute;
                 inset-block-end:         0;
                 inset-inline:            0;
@@ -101,18 +101,18 @@
                     opacity .2s ease,
                     visibility 0s .2s linear;
 
-                @include iro.bem-next-elem('image') {
+                @include bem.next-elem('image') {
                     border-start-start-radius: props.get(vars.$rounding);
                     border-start-end-radius:   props.get(vars.$rounding);
                 }
             }
         }
 
-        @include iro.bem-elem('content') {
+        @include bem.elem('content') {
             margin-block-start: props.get(vars.$spacing);
         }
 
-        @include iro.bem-elem('footer') {
+        @include bem.elem('footer') {
             flex:               0 0 auto;
             padding-block:      0 props.get(vars.$pad-b);
             padding-inline:     props.get(vars.$pad-i);
@@ -127,18 +127,18 @@
             }
         }
 
-        @include iro.bem-modifier('quiet') {
+        @include bem.modifier('quiet') {
             position:         relative;
             background-color: transparent;
             border:           0;
 
-            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
                 &:hover,
                 &:active,
                 &:focus-visible {
                     transform: none;
 
-                    @include iro.bem-elem('image') {
+                    @include bem.elem('image') {
                         background-color: props.get(vars.$quiet--hover--image-color);
                         opacity:          .75;
                         transform:        translateY(props.get(vars.$hover--offset-b));
@@ -149,7 +149,7 @@
                     outline:    none;
                     box-shadow: none;
 
-                    @include iro.bem-elem('image') {
+                    @include bem.elem('image') {
                         background-color: props.get(vars.$quiet--hover--image-color);
                         outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                         box-shadow:
@@ -163,7 +163,7 @@
                 }
             }
 
-            @include iro.bem-elem('image') {
+            @include bem.elem('image') {
                 position:         relative;
                 margin:           calc(-1 * props.get(vars.$key-focus--border-width));
                 background-color: props.get(vars.$quiet--image-color);
@@ -172,24 +172,24 @@
                 border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
             }
 
-            @include iro.bem-elem('body') {
+            @include bem.elem('body') {
                 padding:             0;
                 padding-block-start: props.get(vars.$spacing);
             }
 
-            @include iro.bem-elem('footer') {
+            @include bem.elem('footer') {
                 padding-inline: 0;
             }
         }
 
-        @include iro.bem-modifier('horizontal') {
+        @include bem.modifier('horizontal') {
             flex-direction: row;
             align-items:    center;
 
-            @include iro.bem-elem('body') {
+            @include bem.elem('body') {
                 flex: 0 0 auto;
 
-                @include iro.bem-modifier('main') {
+                @include bem.modifier('main') {
                     flex-shrink:     1;
                     inline-size:     100%;
                     min-inline-size: 0;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index f0c6b85..f902da7 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,5 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
+@use 'iro-sass/src/functions' as fn;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use '../core.vars' as core;
@@ -10,7 +11,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('checkbox') {
+    @include bem.object('checkbox') {
         position:       relative;
         display:        inline-block;
         padding-block:  props.get(vars.$pad-b);
@@ -19,7 +20,7 @@
             calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
             calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
 
-        @include iro.bem-elem('box') {
+        @include bem.elem('box') {
             position:           relative;
             display:            inline-block;
             flex:               0 0 auto;
@@ -66,7 +67,7 @@
             }
         }
     
-        @include iro.bem-elem('check-icon') {
+        @include bem.elem('check-icon') {
             position:           absolute;
             inset-block-start:  calc(1 * props.get(vars.$border-width));
             inset-inline-start: calc(1 * props.get(vars.$border-width));
@@ -76,17 +77,17 @@
             block-size:         calc(100% - 2 * props.get(vars.$border-width));
             margin:             0;
             color:              props.get(vars.$box-bg-color);
-            stroke-width:       iro.fn-px-to-rem(3px);
+            stroke-width:       fn.px-to-rem(3px);
             transition:         transform .2s ease;
             transform:          scale(0);
             transform-origin:   40% 90%;
         }
     
-        @include iro.bem-elem('label') {
+        @include bem.elem('label') {
             margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
         }
     
-        @include iro.bem-elem('native') {
+        @include bem.elem('native') {
             position:           absolute;
             inset-block-start:  0;
             inset-inline-start: 0;
@@ -101,29 +102,29 @@
     
             &:hover,
             &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
+                @include bem.sibling-elem('label') {
                     color: props.get(vars.$hover--label-color);
                 }
     
-                @include iro.bem-sibling-elem('box') {
+                @include bem.sibling-elem('box') {
                     background-color: props.get(vars.$hover--box-border-color);
                 }
             }
     
             &:checked {
-                @include iro.bem-sibling-elem('box') {
+                @include bem.sibling-elem('box') {
                     &::before {
                         transform: scale(0);
                     }
     
-                    @include iro.bem-elem('check-icon') {
+                    @include bem.elem('check-icon') {
                         transform: scale(1);
                     }
                 }
             }
     
             &:indeterminate {
-                @include iro.bem-sibling-elem('box') {
+                @include bem.sibling-elem('box') {
                     &::before {
                         transform: scale(0);
                     }
@@ -132,18 +133,18 @@
                         transform: scale(1);
                     }
     
-                    @include iro.bem-elem('check-icon') {
+                    @include bem.elem('check-icon') {
                         transform: scale(0);
                     }
                 }
             }
     
             &:disabled {
-                @include iro.bem-sibling-elem('label') {
+                @include bem.sibling-elem('label') {
                     color: props.get(vars.$disabled--label-color);
                 }
     
-                @include iro.bem-sibling-elem('box') {
+                @include bem.sibling-elem('box') {
                     background-color: props.get(vars.$disabled--box-border-color);
     
                     &::before {
@@ -153,11 +154,11 @@
             }
     
             &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
+                @include bem.sibling-elem('label') {
                     color: props.get(vars.$key-focus--label-color);
                 }
 
-                @include iro.bem-sibling-elem('box') {
+                @include bem.sibling-elem('box') {
                     outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                     box-shadow:
                         0
@@ -169,42 +170,42 @@
             }
         }
     
-        @include iro.bem-modifier('standalone') {
-            @include iro.bem-elem('box') {
+        @include bem.modifier('standalone') {
+            @include bem.elem('box') {
                 margin-block-start: 0;
             }
         }
     
-        @include iro.bem-modifier('accent') {
-            @include iro.bem-elem('native') {
+        @include bem.modifier('accent') {
+            @include bem.elem('native') {
                 &:checked {
-                    @include iro.bem-sibling-elem('box') {
+                    @include bem.sibling-elem('box') {
                         background-color: props.get(vars.$accent--box-border-color);
                     }
         
                     &:hover,
                     &:focus-visible {
-                        @include iro.bem-sibling-elem('box') {
+                        @include bem.sibling-elem('box') {
                             background-color: props.get(vars.$accent--hover--box-border-color);
                         }
                     }
                 }
     
                 &:indeterminate {
-                    @include iro.bem-sibling-elem('box') {
+                    @include bem.sibling-elem('box') {
                         background-color: props.get(vars.$accent--box-border-color);
                     }
         
                     &:hover,
                     &:focus-visible {
-                        @include iro.bem-sibling-elem('box') {
+                        @include bem.sibling-elem('box') {
                             background-color: props.get(vars.$accent--hover--box-border-color);
                         }
                     }
                 }
     
                 &:disabled {
-                    @include iro.bem-sibling-elem('box') {
+                    @include bem.sibling-elem('box') {
                         background-color: props.get(vars.$disabled--box-border-color);
         
                         &::before {
@@ -213,13 +214,13 @@
                     }
 
                     &:checked {
-                        @include iro.bem-sibling-elem('box') {
+                        @include bem.sibling-elem('box') {
                             background-color: props.get(vars.$disabled--box-border-color);
                         }
                     }
         
                     &:indeterminate {
-                        @include iro.bem-sibling-elem('box') {
+                        @include bem.sibling-elem('box') {
                             background-color: props.get(vars.$disabled--box-border-color);
                         }
                     }
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 49bc028..6932c7e 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use '../core.vars' as core;
@@ -12,7 +12,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('divider') {
+    @include bem.object('divider') {
         display:        flex;
         flex:           0 0 auto;
         flex-direction: row;
@@ -39,11 +39,11 @@
             display: block;
         }
 
-        @include iro.bem-elem('label') {
+        @include bem.elem('label') {
             flex: 0 0 auto;
         }
 
-        @include iro.bem-modifier('vertical') {
+        @include bem.modifier('vertical') {
             align-self:       stretch;
             inline-size:      1px;
             block-size:       auto;
@@ -56,7 +56,7 @@
             }
         }
 
-        @include iro.bem-modifier('medium') {
+        @include bem.modifier('medium') {
             font-size:   props.get(vars.$medium--label-font-size);
             font-weight: 500;
             color:       props.get(vars.$medium--label-color);
@@ -68,7 +68,7 @@
             }
         }
 
-        @include iro.bem-modifier('faint') {
+        @include bem.modifier('faint') {
             font-size:   props.get(vars.$faint--label-font-size);
             font-weight: 500;
             color:       props.get(vars.$faint--label-color);
@@ -80,7 +80,7 @@
             }
         }
 
-        @include iro.bem-modifier('labelled') {
+        @include bem.modifier('labelled') {
             &::before {
                 margin-inline-end: 1em;
             }
@@ -92,47 +92,47 @@
         }
 
         @each $theme in map.keys(props.get(vars.$themes)) {
-            @include iro.bem-modifier(string.slice($theme, 3)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 &::before,
                 &::after {
                     background-color: props.get(vars.$themes, $theme, --bg);
                 }
 
-                @include iro.bem-elem('label') {
+                @include bem.elem('label') {
                     color: props.get(vars.$themes, $theme, --label);
                 }
             }
         }
 
         @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include iro.bem-modifier(string.slice($theme, 3)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 &::before,
                 &::after {
                     background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
                 }
 
-                @include iro.bem-elem('label') {
+                @include bem.elem('label') {
                     color: props.get(vars.$static-themes, $theme, --strong, --label);
                 }
 
-                @include iro.bem-modifier('medium') {
+                @include bem.modifier('medium') {
                     &::before,
                     &::after {
                         background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
                     }
     
-                    @include iro.bem-elem('label') {
+                    @include bem.elem('label') {
                         color: props.get(vars.$static-themes, $theme, --medium, --label);
                     }
                 }
     
-                @include iro.bem-modifier('faint') {
+                @include bem.modifier('faint') {
                     &::before,
                     &::after {
                         background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
                     }
     
-                    @include iro.bem-elem('label') {
+                    @include bem.elem('label') {
                         color: props.get(vars.$static-themes, $theme, --faint, --label);
                     }
                 }
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 114c867..56d4e66 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use 'icon.vars' as icon;
@@ -10,7 +10,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('emoji') {
+    @include bem.object('emoji') {
         position:       relative;
         display:        inline-block;
         inline-size:    calc(props.get(vars.$size));
@@ -20,24 +20,24 @@
         vertical-align: props.get(vars.$valign);
         object-fit:     contain;
 
-        @include iro.bem-modifier('icon') {
+        @include bem.modifier('icon') {
             margin:         calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size)));
             vertical-align: props.get(icon.$valign);
         }
 
         @each $mod, $size, $valign in vars.$sizes {
-            @include iro.bem-modifier($mod) {
+            @include bem.modifier($mod) {
                 inline-size:    props.get($size);
                 block-size:     props.get($size);
                 vertical-align: props.get($valign);
 
-                @include iro.bem-modifier('icon') {
+                @include bem.modifier('icon') {
                     margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
                 }
             }
         }
 
-        @include iro.bem-modifier('zoomable') {
+        @include bem.modifier('zoomable') {
             border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
             transition:    transform .2s ease, background-color .2s ease;
 
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 8c275ee..9f87a20 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,10 +9,10 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('field-label') {
+    @include bem.object('field-label') {
         display: block;
 
-        @include iro.bem-elem('label') {
+        @include bem.elem('label') {
             display:            block;
             flex:               0 0 auto;
             padding-inline-end: props.get(vars.$spacing-i);
@@ -21,56 +21,56 @@
             line-height:        1.3;
             color:              props.get(vars.$label-color);
     
-            @include iro.bem-next-elem('content') {
+            @include bem.next-elem('content') {
                 margin-block-start: props.get(vars.$spacing-b);
             }
         }
     
-        @include iro.bem-elem('content') {
+        @include bem.elem('content') {
             display: block;
             flex:    1 1 auto;
         }
     
-        @include iro.bem-elem('hint') {
+        @include bem.elem('hint') {
             display:            block;
             margin-block-start: props.get(vars.$spacing-b);
             font-size:          props.get(vars.$hint-font-size);
             color:              props.get(vars.$hint-color);
         }
     
-        @include iro.bem-is('invalid') {
-            @include iro.bem-elem('hint') {
+        @include bem.is('invalid') {
+            @include bem.elem('hint') {
                 color: props.get(vars.$error-hint-color);
             }
         }
     
-        @include iro.bem-is('disabled') {
-            @include iro.bem-elem('label', 'hint') {
+        @include bem.is('disabled') {
+            @include bem.elem('label', 'hint') {
                 color: props.get(vars.$disabled-color);
             }
         }
     
-        @include iro.bem-modifier('align-start', 'align-end') {
+        @include bem.modifier('align-start', 'align-end') {
             display:     flex;
             align-items: baseline;
     
-            @include iro.bem-elem('label') {
+            @include bem.elem('label') {
                 display: inline-block;
     
-                @include iro.bem-next-elem('content') {
+                @include bem.next-elem('content') {
                     margin-block-start: 0;
                 }
             }
         }
     
-        @include iro.bem-modifier('align-start') {
-            @include iro.bem-elem('label') {
+        @include bem.modifier('align-start') {
+            @include bem.elem('label') {
                 text-align: start;
             }
         }
     
-        @include iro.bem-modifier('align-end') {
-            @include iro.bem-elem('label') {
+        @include bem.modifier('align-end') {
+            @include bem.elem('label') {
                 text-align: end;
             }
         }
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 7efb23b..f3ee5b5 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,7 +9,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('heading') {
+    @include bem.object('heading') {
         display:               block;
         margin-block-start:    props.get(vars.$margin-bs);
         font-family:           props.get(vars.$font-family);
@@ -24,7 +24,7 @@
             margin-block-start: props.get(vars.$margin-bs-sibling);
         }
 
-        @include iro.bem-elem('highlight') {
+        @include bem.elem('highlight') {
             background-image: linear-gradient(to top,
             transparent               .05em,
             props.get(vars.$bg-color) .05em,
@@ -33,7 +33,7 @@
         }
 
         @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes {
-            @include iro.bem-modifier($mod) {
+            @include bem.modifier($mod) {
                 font-family:           props.get($font-family);
                 font-size:             props.get($font-size);
                 font-weight:           props.get($font-weight);
@@ -43,9 +43,9 @@
             }
         }
 
-        @include iro.bem-modifier('display') {
+        @include bem.modifier('display') {
             @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes {
-                @include iro.bem-modifier($mod) {
+                @include bem.modifier($mod) {
                     font-family:           props.get($font-family);
                     font-size:             props.get($font-size);
                     font-weight:           props.get($font-weight);
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index f80915e..1e35830 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,7 +9,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('icon') {
+    @include bem.object('icon') {
         display:         inline;
         inline-size:     props.get(vars.$size);
         block-size:      props.get(vars.$size);
@@ -18,7 +18,7 @@
         stroke-linejoin: round;
         stroke-width:    props.get(vars.$stroke-width);
 
-        @include iro.bem-modifier('block') {
+        @include bem.modifier('block') {
             display: block;
         }
     }
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 0ced4c6..341ed3d 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -11,7 +11,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('lightbox') {
+    @include bem.object('lightbox') {
         box-sizing:            border-box;
         display:               grid;
         flex:                  1 1 auto;
@@ -24,7 +24,7 @@
         grid-template-columns: auto minmax(0, 1fr) auto;
         min-block-size:        0;
 
-        @include iro.bem-elem('header') {
+        @include bem.elem('header') {
             display:             flex;
             grid-area:           header;
             align-items:         flex-start;
@@ -32,7 +32,7 @@
             padding-inline:      props.get(vars.$pad);
         }
 
-        @include iro.bem-elem('img') {
+        @include bem.elem('img') {
             box-sizing:      border-box;
             display:         none;
             grid-area:       content;
@@ -41,39 +41,39 @@
             max-block-size:  100%;
             padding:         props.get(vars.$pad);
 
-            @include iro.bem-sibling-elem('img') {
-                @include iro.bem-modifier('default') {
+            @include bem.sibling-elem('img') {
+                @include bem.modifier('default') {
                     display: block;
 
-                    @include iro.bem-next-elem('nav-btn') {
+                    @include bem.next-elem('nav-btn') {
                         display: block;
     
-                        @include iro.bem-next-elem('nav-btn') {
+                        @include bem.next-elem('nav-btn') {
                             display: block;
                         }
                     }
                 }
             }
 
-            @include iro.bem-multi('&:target', 'is' 'visible') {
+            @include bem.multi('&:target', 'is' 'visible') {
                 display: block;
 
-                @include iro.bem-next-elem('nav-btn') {
+                @include bem.next-elem('nav-btn') {
                     display: block;
 
-                    @include iro.bem-next-elem('nav-btn') {
+                    @include bem.next-elem('nav-btn') {
                         display: block;
                     }
                 }
 
-                @include iro.bem-sibling-elem('img') {
-                    @include iro.bem-modifier('default') {
+                @include bem.sibling-elem('img') {
+                    @include bem.modifier('default') {
                         display: none;
 
-                        @include iro.bem-next-elem('nav-btn') {
+                        @include bem.next-elem('nav-btn') {
                             display: none;
         
-                            @include iro.bem-next-elem('nav-btn') {
+                            @include bem.next-elem('nav-btn') {
                                 display: none;
                             }
                         }
@@ -82,7 +82,7 @@
             }
         }
 
-        @include iro.bem-elem('thumbnails') {
+        @include bem.elem('thumbnails') {
             display:            flex;
             grid-area:          thumbnails;
             gap:                props.get(vars.$thumbnail--spacing);
@@ -91,7 +91,7 @@
             overflow:           auto;
         }
 
-        @include iro.bem-elem('footer') {
+        @include bem.elem('footer') {
             display:        flex;
             grid-area:      footer;
             align-items:    flex-start;
@@ -99,7 +99,7 @@
             padding-inline: props.get(vars.$pad);
         }
 
-        @include iro.bem-elem('thumbnail') {
+        @include bem.elem('thumbnail') {
             position:       relative;
             flex:           0 0 auto;
             inline-size:    props.get(vars.$thumbnail--size);
@@ -117,7 +117,7 @@
                 opacity:       1;
             }
 
-            @include iro.bem-is('selected') {
+            @include bem.is('selected') {
                 $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width));
 
                 margin:        $focus-border-offset;
@@ -144,7 +144,7 @@
             }
         }
 
-        @include iro.bem-elem('thumbnail-img') {
+        @include bem.elem('thumbnail-img') {
             position:           absolute;
             inset-block-start:  0;
             inset-inline-start: 0;
@@ -155,21 +155,21 @@
             object-position:    center center;
         }
 
-        @include iro.bem-elem('thumbnail-icon') {
+        @include bem.elem('thumbnail-icon') {
             position:           absolute;
             inset-block-start:  50%;
             inset-inline-start: 50%;
             transform:          translate(-50%, -50%);
         }
 
-        @include iro.bem-elem('close-btn') {
+        @include bem.elem('close-btn') {
             flex:               0 0 auto;
             margin-block-start: calc(-.5 * props.get(vars.$pad));
             margin-inline:      auto calc(-.5 * props.get(vars.$pad));
             font-size:          props.get(vars.$close-button--font-size);
         }
 
-        @include iro.bem-elem('nav-btn') {
+        @include bem.elem('nav-btn') {
             position:   relative;
             display:    none;
             align-self: center;
@@ -186,7 +186,7 @@
                 transform:          translateY(-50%);
             }
 
-            @include iro.bem-modifier('prev') {
+            @include bem.modifier('prev') {
                 grid-area:     prev;
                 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
 
@@ -195,7 +195,7 @@
                 }
             }
     
-            @include iro.bem-modifier('next') {
+            @include bem.modifier('next') {
                 grid-area:     next;
                 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
 
@@ -206,10 +206,10 @@
         }
 
         @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include iro.bem-modifier(string.slice($theme, 3)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 color: props.get(vars.$static-themes, $theme, --text);
 
-                @include iro.bem-elem('thumbnail') {
+                @include bem.elem('thumbnail') {
                     outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border);
 
                     &:hover,
@@ -218,7 +218,7 @@
                         outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border);
                     }
         
-                    @include iro.bem-is('selected') {
+                    @include bem.is('selected') {
                         border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border);
                     }
 
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 0741929..46ca109 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use 'icon.vars' as icon;
@@ -10,12 +10,12 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('menu') {
+    @include bem.object('menu') {
         display:        flex;
         flex-direction: column;
         gap:            props.get(vars.$spacing);
 
-        @include iro.bem-elem('header') {
+        @include bem.elem('header') {
             padding-block:  props.get(vars.$item--pad-b);
             padding-inline: props.get(vars.$item--pad-i);
             font-size:      props.get(vars.$header--font-size);
@@ -24,12 +24,12 @@
             text-transform: uppercase;
             letter-spacing: .5px;
 
-            @include iro.bem-next-twin-elem {
+            @include bem.next-twin-elem {
                 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
             }
         }
 
-        @include iro.bem-elem('item') {
+        @include bem.elem('item') {
             padding-block:   props.get(vars.$item--pad-b);
             padding-inline:  props.get(vars.$item--pad-i);
             margin:          calc(-1 * props.get(vars.$item--key-focus--outline-width));
@@ -43,7 +43,7 @@
             &:enabled {
                 color: currentColor;
 
-                @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
+                @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
                     color:            props.get(vars.$item--hover--label-color);
                     background-color: props.get(vars.$item--hover--bg-color);
                 }
@@ -64,12 +64,12 @@
                 }
             }
 
-            @include iro.bem-next-elem('header') {
+            @include bem.next-elem('header') {
                 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
             }
         }
 
-        @include iro.bem-elem('header') {
+        @include bem.elem('header') {
             &:link,
             &:visited,
             &:enabled {
@@ -77,25 +77,25 @@
             }
         }
 
-        @include iro.bem-elem('separator') {
+        @include bem.elem('separator') {
             block-size:       1px;
             margin-block:     props.get(vars.$separator-width);
             margin-inline:    props.get(vars.$item--pad-i);
             background-color: props.get(vars.$separator-color);
         }
 
-        @include iro.bem-elem('slot') {
+        @include bem.elem('slot') {
             padding-block:  props.get(vars.$item--pad-b);
             padding-inline: props.get(vars.$item--pad-i);
         }
 
-        @include iro.bem-elem('icon-slot') {
+        @include bem.elem('icon-slot') {
             display:         flex;
             justify-content: center;
             inline-size:     props.get(icon.$size);
         }
 
-        @include iro.bem-modifier('pull') {
+        @include bem.modifier('pull') {
             margin: calc(-1 * props.get(vars.$item--pad-i));
         }
     }
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 88ce9b5..243810f 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,17 +1,17 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use '../config';
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
 @mixin styles {
-    @include iro.bem-object('palette') {
+    @include bem.object('palette') {
         display:    flex;
         block-size: 3em;
 
-        @include iro.bem-elem('item') {
+        @include bem.elem('item') {
             flex: 1 1 auto;
 
             $palette:   map.get(config.$themes, config.$theme-default, light, --palettes, --base);
@@ -29,8 +29,8 @@
         @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) {
             $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2));
 
-            @include iro.bem-modifier(string.slice($palette-name, 3)) {
-                @include iro.bem-elem('item') {
+            @include bem.modifier(string.slice($palette-name, 3)) {
+                @include bem.elem('item') {
                     @for $i from 1 through list.length($contrasts) {
                         $key: list.nth(map.keys($contrasts), $i);
         
@@ -42,12 +42,12 @@
             }
         }
 
-        @include iro.bem-modifier('static') {
+        @include bem.modifier('static') {
             @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
                 $contrasts: map.get(config.$static-colors, --contrasts);
 
-                @include iro.bem-modifier(string.slice($palette-name, 3)) {
-                    @include iro.bem-elem('item') {
+                @include bem.modifier(string.slice($palette-name, 3)) {
+                    @include bem.elem('item') {
                         @for $i from 1 through list.length($contrasts) {
                             $key: list.nth(map.keys($contrasts), $i);
             
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 406c143..ae874ba 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,7 +9,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('popover') {
+    @include bem.object('popover') {
         position:           absolute;
         inset-block-start:  0;
         inset-inline-start: 0;
@@ -22,15 +22,15 @@
         border-radius:      props.get(vars.$rounding);
         transform:          translate(var(--x), var(--y));
 
-        @include iro.bem-modifier('up-left') {
+        @include bem.modifier('up-left') {
             transform: translate(var(--x), calc(var(--y) - 100%));
         }
 
-        @include iro.bem-modifier('up-right') {
+        @include bem.modifier('up-right') {
             transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
         }
 
-        @include iro.bem-modifier('down-right') {
+        @include bem.modifier('down-right') {
             transform: translate(calc(var(--x) - 100%), var(--y));
         }
     }
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index c6e5a60..b603a0d 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use '../core.vars' as core;
@@ -10,7 +10,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('radio') {
+    @include bem.object('radio') {
         position:       relative;
         display:        inline-block;
         padding-block:  props.get(vars.$pad-b);
@@ -19,7 +19,7 @@
             calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
             calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
     
-        @include iro.bem-elem('circle') {
+        @include bem.elem('circle') {
             display:            inline-block;
             flex:               0 0 auto;
             inline-size:        props.get(vars.$diameter);
@@ -45,11 +45,11 @@
             }
         }
     
-        @include iro.bem-elem('label') {
+        @include bem.elem('label') {
             margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
         }
     
-        @include iro.bem-elem('native') {
+        @include bem.elem('native') {
             position:           absolute;
             inset-block-start:  0;
             inset-inline-start: 0;
@@ -64,17 +64,17 @@
     
             &:hover,
             &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
+                @include bem.sibling-elem('label') {
                     color: props.get(vars.$hover--label-color);
                 }
     
-                @include iro.bem-sibling-elem('circle') {
+                @include bem.sibling-elem('circle') {
                     background-color: props.get(vars.$hover--circle-border-color);
                 }
             }
     
             &:checked {
-                @include iro.bem-sibling-elem('circle') {
+                @include bem.sibling-elem('circle') {
                     &::after {
                         transform: scale(.44);
                     }
@@ -82,11 +82,11 @@
             }
     
             &:disabled {
-                @include iro.bem-sibling-elem('label') {
+                @include bem.sibling-elem('label') {
                     color: props.get(vars.$disabled--label-color);
                 }
     
-                @include iro.bem-sibling-elem('circle') {
+                @include bem.sibling-elem('circle') {
                     background-color: props.get(vars.$disabled--circle-border-color);
     
                     &::after {
@@ -96,11 +96,11 @@
             }
 
             &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
+                @include bem.sibling-elem('label') {
                     color: props.get(vars.$key-focus--label-color);
                 }
 
-                @include iro.bem-sibling-elem('circle') {
+                @include bem.sibling-elem('circle') {
                     outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                     box-shadow:
                         0
@@ -112,29 +112,29 @@
             }
         }
     
-        @include iro.bem-modifier('standalone') {
-            @include iro.bem-elem('circle') {
+        @include bem.modifier('standalone') {
+            @include bem.elem('circle') {
                 margin-block-start: 0;
             }
         }
     
-        @include iro.bem-modifier('accent') {
-            @include iro.bem-elem('native') {
+        @include bem.modifier('accent') {
+            @include bem.elem('native') {
                 &:checked {
-                    @include iro.bem-sibling-elem('circle') {
+                    @include bem.sibling-elem('circle') {
                         background-color: props.get(vars.$accent--circle-border-color);
                     }
         
                     &:hover,
                     &:focus-visible {
-                        @include iro.bem-sibling-elem('circle') {
+                        @include bem.sibling-elem('circle') {
                             background-color: props.get(vars.$accent--hover--circle-border-color);
                         }
                     }
                 }
     
                 &:disabled {
-                    @include iro.bem-sibling-elem('circle') {
+                    @include bem.sibling-elem('circle') {
                         background-color: props.get(vars.$disabled--circle-border-color);
         
                         &::after {
@@ -143,7 +143,7 @@
                     }
         
                     &:checked {
-                        @include iro.bem-sibling-elem('circle') {
+                        @include bem.sibling-elem('circle') {
                             background-color: props.get(vars.$disabled--circle-border-color);
                         }
                     }
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index c1e984f..9488bec 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use 'icon.vars' as icon;
@@ -10,12 +10,12 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('side-nav') {
+    @include bem.object('side-nav') {
         display:        flex;
         flex-direction: column;
         gap:            props.get(vars.$spacing);
 
-        @include iro.bem-elem('header') {
+        @include bem.elem('header') {
             padding-block:  props.get(vars.$item--pad-b);
             padding-inline: props.get(vars.$item--pad-i);
             font-size:      props.get(vars.$header--font-size);
@@ -24,12 +24,12 @@
             text-transform: uppercase;
             letter-spacing: .5px;
 
-            @include iro.bem-next-twin-elem {
+            @include bem.next-twin-elem {
                 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
             }
         }
 
-        @include iro.bem-elem('item') {
+        @include bem.elem('item') {
             padding-block:   props.get(vars.$item--pad-b);
             padding-inline:  props.get(vars.$item--pad-i);
             margin:          calc(-1 * props.get(vars.$item--key-focus--border-offset));
@@ -43,7 +43,7 @@
             &:enabled {
                 color: currentColor;
 
-                @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
+                @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
                     color:            props.get(vars.$item--hover--label-color);
                     background-color: props.get(vars.$item--hover--bg-color);
                 }
@@ -64,12 +64,12 @@
                 }
             }
 
-            @include iro.bem-next-elem('header') {
+            @include bem.next-elem('header') {
                 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
             }
         }
 
-        @include iro.bem-elem('header') {
+        @include bem.elem('header') {
             &:link,
             &:visited,
             &:enabled {
@@ -77,11 +77,11 @@
             }
         }
 
-        @include iro.bem-elem('separator') {
+        @include bem.elem('separator') {
             block-size: props.get(vars.$separator);
         }
 
-        @include iro.bem-elem('icon-slot') {
+        @include bem.elem('icon-slot') {
             display:         flex;
             justify-content: center;
             inline-size:     props.get(icon.$size);
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index bf113a4..126f724 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -11,7 +11,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('status-indicator') {
+    @include bem.object('status-indicator') {
         display:          inline-block;
         inline-size:      props.get(vars.$size);
         block-size:       props.get(vars.$size);
@@ -20,7 +20,7 @@
         border-radius:    10em;
 
         @each $theme in map.keys(props.get(vars.$themes)) {
-            @include iro.bem-is(string.slice($theme, 3)) {
+            @include bem.is(string.slice($theme, 3)) {
                 background-color: props.get(vars.$themes, $theme);
             }
         }
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index f368229..15d75b9 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use '../core.vars' as core;
@@ -10,7 +10,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('switch') {
+    @include bem.object('switch') {
         position:       relative;
         display:        inline-block;
         padding-block:  props.get(vars.$pad-b);
@@ -19,7 +19,7 @@
             calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
             calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
     
-        @include iro.bem-elem('indicator') {
+        @include bem.elem('indicator') {
             display:            inline-block;
             flex:               0 0 auto;
             inline-size:        props.get(vars.$inline-size);
@@ -44,11 +44,11 @@
             }
         }
     
-        @include iro.bem-elem('label') {
+        @include bem.elem('label') {
             margin-inline-start: props.get(vars.$label-gap);
         }
     
-        @include iro.bem-elem('native') {
+        @include bem.elem('native') {
             position:           absolute;
             inset-block-start:  0;
             inset-inline-start: 0;
@@ -63,11 +63,11 @@
     
             &:hover,
             &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
+                @include bem.sibling-elem('label') {
                     color: props.get(vars.$hover--label-color);
                 }
     
-                @include iro.bem-sibling-elem('indicator') {
+                @include bem.sibling-elem('indicator') {
                     &::after {
                         border-color: props.get(vars.$hover--handle-border-color);
                     }
@@ -75,7 +75,7 @@
             }
     
             &:checked {
-                @include iro.bem-sibling-elem('indicator') {
+                @include bem.sibling-elem('indicator') {
                     background-color: props.get(vars.$handle-border-color);
     
                     &::after {
@@ -86,7 +86,7 @@
     
                 &:hover,
                 &:focus-visible {
-                    @include iro.bem-sibling-elem('indicator') {
+                    @include bem.sibling-elem('indicator') {
                         background-color: props.get(vars.$hover--handle-border-color);
 
                         &::after {
@@ -97,11 +97,11 @@
             }
     
             &:disabled {
-                @include iro.bem-sibling-elem('label') {
+                @include bem.sibling-elem('label') {
                     color: props.get(vars.$disabled--label-color);
                 }
     
-                @include iro.bem-sibling-elem('indicator') {
+                @include bem.sibling-elem('indicator') {
                     background-color: props.get(vars.$disabled--track-bg-color);
     
                     &::after {
@@ -111,7 +111,7 @@
                 }
     
                 &:checked {
-                    @include iro.bem-sibling-elem('indicator') {
+                    @include bem.sibling-elem('indicator') {
                         background-color: props.get(vars.$disabled--handle-border-color);
     
                         &::after {
@@ -122,11 +122,11 @@
             }
     
             &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
+                @include bem.sibling-elem('label') {
                     color: props.get(vars.$key-focus--label-color);
                 }
 
-                @include iro.bem-sibling-elem('indicator') {
+                @include bem.sibling-elem('indicator') {
                     outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                     box-shadow:
                         0 
@@ -138,16 +138,16 @@
             }
         }
     
-        @include iro.bem-modifier('standalone') {
-            @include iro.bem-elem('indicator') {
+        @include bem.modifier('standalone') {
+            @include bem.elem('indicator') {
                 margin-block-start: 0;
             }
         }
     
-        @include iro.bem-modifier('accent') {
-            @include iro.bem-elem('native') {
+        @include bem.modifier('accent') {
+            @include bem.elem('native') {
                 &:checked {
-                    @include iro.bem-sibling-elem('indicator') {
+                    @include bem.sibling-elem('indicator') {
                         background-color: props.get(vars.$accent--handle-border-color);
         
                         &::after {
@@ -157,7 +157,7 @@
         
                     &:hover,
                     &:focus-visible {
-                        @include iro.bem-sibling-elem('indicator') {
+                        @include bem.sibling-elem('indicator') {
                             background-color: props.get(vars.$accent--hover--handle-border-color);
     
                             &::after {
@@ -168,12 +168,12 @@
                 }
         
                 &:disabled {
-                    @include iro.bem-sibling-elem('label') {
+                    @include bem.sibling-elem('label') {
                         color: props.get(vars.$disabled--label-color);
                     }
 
                     &:checked {
-                        @include iro.bem-sibling-elem('indicator') {
+                        @include bem.sibling-elem('indicator') {
                             background-color: props.get(vars.$disabled--handle-border-color);
 
                             &::after {
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 491db20..c0a7360 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,15 +9,15 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('table') {
+    @include bem.object('table') {
         border-spacing:  0;
         border-collapse: separate;
 
-        @include iro.bem-modifier('fixed') {
+        @include bem.modifier('fixed') {
             table-layout: fixed;
         }
 
-        @include iro.bem-elem('head-cell') {
+        @include bem.elem('head-cell') {
             padding-block:  props.get(vars.$pad-b);
             padding-inline: props.get(vars.$pad-i);
             font-family:    props.get(vars.$heading--font-family);
@@ -29,7 +29,7 @@
             letter-spacing: props.get(vars.$heading--letter-spacing);
         }
 
-        @include iro.bem-elem('cell') {
+        @include bem.elem('cell') {
             padding-block:            props.get(vars.$pad-b);
             padding-inline:           props.get(vars.$pad-i);
             border-color:             props.get(vars.$border-color);
@@ -37,21 +37,21 @@
             border-width:             0;
             border-block-start-width: props.get(vars.$border-width);
 
-            @include iro.bem-modifier('divider') {
+            @include bem.modifier('divider') {
                 border-inline-end-width: props.get(vars.$border-width);
             }
         }
 
-        @include iro.bem-elem('row') {
+        @include bem.elem('row') {
             &:last-child {
-                @include iro.bem-elem('cell') {
+                @include bem.elem('cell') {
                     border-block-end-width: props.get(vars.$border-width);
                 }
             }
         }
 
-        @include iro.bem-modifier('flush') {
-            @include iro.bem-elem('head-cell', 'cell') {
+        @include bem.modifier('flush') {
+            @include bem.elem('head-cell', 'cell') {
                 &:first-child {
                     padding-inline-start: 0;
                 }
@@ -62,8 +62,8 @@
             }
         }
 
-        @include iro.bem-modifier('box') {
-            @include iro.bem-elem('cell') {
+        @include bem.modifier('box') {
+            @include bem.elem('cell') {
                 background-color: props.get(vars.$box--bg-color);
             
                 &:first-child {
@@ -75,9 +75,9 @@
                 }
             }
     
-            @include iro.bem-elem('row') {
+            @include bem.elem('row') {
                 &:first-child {
-                    @include iro.bem-elem('cell') {
+                    @include bem.elem('cell') {
                         &:first-child {
                             border-start-start-radius: props.get(vars.$rounding);
                         }
@@ -89,7 +89,7 @@
                 }
     
                 &:last-child {
-                    @include iro.bem-elem('cell') {
+                    @include bem.elem('cell') {
                         &:first-child {
                             border-end-start-radius: props.get(vars.$rounding);
                         }
@@ -102,35 +102,35 @@
             }
         }
 
-        @include iro.bem-modifier('interactive') {
-            @include iro.bem-elem('row') {
-                @include iro.bem-elem('cell') {
+        @include bem.modifier('interactive') {
+            @include bem.elem('row') {
+                @include bem.elem('cell') {
                     cursor: pointer;
                 }
 
                 &:hover {
-                    @include iro.bem-elem('cell') {
+                    @include bem.elem('cell') {
                         background-color: props.get(vars.$hover--bg-color);
                     }
                 }
     
                 &:active {
-                    @include iro.bem-elem('cell') {
+                    @include bem.elem('cell') {
                         background-color: props.get(vars.$active--bg-color);
                     }
                 }
             }
 
-            @include iro.bem-modifier('box') {
-                @include iro.bem-elem('row') {
+            @include bem.modifier('box') {
+                @include bem.elem('row') {
                     &:hover {
-                        @include iro.bem-elem('cell') {
+                        @include bem.elem('cell') {
                             background-color: props.get(vars.$box--hover--bg-color);
                         }
                     }
         
                     &:active {
-                        @include iro.bem-elem('cell') {
+                        @include bem.elem('cell') {
                             background-color: props.get(vars.$box--active--bg-color);
                         }
                     }
@@ -138,8 +138,8 @@
             }
         }
 
-        @include iro.bem-modifier('sm') {
-            @include iro.bem-elem('head-cell', 'cell') {
+        @include bem.modifier('sm') {
+            @include bem.elem('head-cell', 'cell') {
                 padding-block: props.get(vars.$pad-b--sm);
             }
         }
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index b945866..0f96634 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,7 +9,7 @@
 @mixin -invalid {
     $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
     
-    @include iro.bem-sibling-elem('bg') {
+    @include bem.sibling-elem('bg') {
         inset-block:   $focus-border-offset;
         inset-inline:  $focus-border-offset;
         border:        props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
@@ -17,20 +17,20 @@
     }
 
     &:hover {
-        @include iro.bem-sibling-elem('bg') {
+        @include bem.sibling-elem('bg') {
             border-color: props.get(vars.$error--hover--border-color);
         }
     }
 
     &:focus {
-        @include iro.bem-sibling-elem('bg') {
+        @include bem.sibling-elem('bg') {
             border-color: props.get(vars.$error--focus--border-color);
         }
     }
 }
 
 @mixin -keyboard-focus {
-    @include iro.bem-sibling-elem('bg') {
+    @include bem.sibling-elem('bg') {
         border-color:   props.get(vars.$key-focus--border-color);
         outline:        props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
         //outline-offset: props.get(vars.$focus --border);
@@ -40,7 +40,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object('text-field') {
+    @include bem.object('text-field') {
         $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
         
         position:         relative;
@@ -48,7 +48,7 @@
         background-color: props.get(vars.$bg-color);
         border-radius:    props.get(vars.$rounding);
 
-        @include iro.bem-elem('bg') {
+        @include bem.elem('bg') {
             position:       absolute;
             inset-block:    0;
             inset-inline:   0;
@@ -58,7 +58,7 @@
             border-radius:  props.get(vars.$rounding);
         }
 
-        @include iro.bem-elem('native') {
+        @include bem.elem('native') {
             box-sizing:       border-box;
             inline-size:      100%;
             padding-block:    calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
@@ -78,7 +78,7 @@
             }
 
             &:hover {
-                @include iro.bem-sibling-elem('bg') {
+                @include bem.sibling-elem('bg') {
                     border-color: props.get(vars.$hover--border-color);
                 }
             }
@@ -86,7 +86,7 @@
             &:focus {
                 outline: 0;
 
-                @include iro.bem-sibling-elem('bg') {
+                @include bem.sibling-elem('bg') {
                     inset-block:   $focus-border-offset;
                     inset-inline:  $focus-border-offset;
                     border:        props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
@@ -104,24 +104,24 @@
             }
         }
 
-        @include iro.bem-modifier('extended') {
+        @include bem.modifier('extended') {
             padding: props.get(vars.$extended--pad);
 
-            @include iro.bem-multi('&', 'elem' 'bg') {
+            @include bem.multi('&', 'elem' 'bg') {
                 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
             }
 
-            @include iro.bem-elem('native') {
+            @include bem.elem('native') {
                 &:focus {
-                    @include iro.bem-sibling-elem('bg') {
+                    @include bem.sibling-elem('bg') {
                         border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
                     }
                 }
             }
         }
 
-        @include iro.bem-is('invalid') {
-            @include iro.bem-elem('native') {
+        @include bem.is('invalid') {
+            @include bem.elem('native') {
                 @include -invalid;
 
                 &:focus-visible {
@@ -130,10 +130,10 @@
             }
         }
 
-        @include iro.bem-is('disabled') {
+        @include bem.is('disabled') {
             background-color: props.get(vars.$disabled--bg-color);
 
-            @include iro.bem-elem('native') {
+            @include bem.elem('native') {
                 color: props.get(vars.$disabled--text-color);
 
                 &::placeholder {
@@ -141,21 +141,21 @@
                 }
             }
 
-            @include iro.bem-elem('bg') {
+            @include bem.elem('bg') {
                 border-color: props.get(vars.$disabled--border-color);
             }
 
-            @include iro.bem-is('invalid') {
-                @include iro.bem-elem('native') {
-                    @include iro.bem-sibling-elem('bg') {
+            @include bem.is('invalid') {
+                @include bem.elem('native') {
+                    @include bem.sibling-elem('bg') {
                         border-color: props.get(vars.$disabled--border-color);
                     }
                 }
             }
 
-            @include iro.bem-elem('native') {
+            @include bem.elem('native') {
                 &:invalid {
-                    @include iro.bem-sibling-elem('bg') {
+                    @include bem.sibling-elem('bg') {
                         border-color: props.get(vars.$disabled--border-color);
                     }
                 }
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index 7406c89..7989cb7 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,7 +9,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-scope('blockquotes') {
+    @include bem.scope('blockquotes') {
         blockquote {
             padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
             margin-block:         props.get(vars.$margin-bs);
@@ -17,7 +17,7 @@
             border-inline-start:  props.get(vars.$border-width) solid props.get(vars.$border-color);
         }
 
-        @include iro.bem-modifier('compact') {
+        @include bem.modifier('compact') {
             blockquote {
                 padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width));
             }
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index 5035879..367a110 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -9,7 +9,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-scope('code') {
+    @include bem.scope('code') {
         code {
             padding-block:    props.get(vars.$inline--pad-b);
             padding-inline:   props.get(vars.$inline--pad-i);
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index c786a75..415fb15 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../objects/heading.vars' as heading;
 
@@ -14,7 +14,7 @@
         xxl: h1,
     );
 
-    @include iro.bem-scope('headings') {
+    @include bem.scope('headings') {
         h1,
         h2,
         h3,
@@ -32,7 +32,7 @@
             transform:             translateX(props.get(heading.$offset));
         }
 
-        @include iro.bem-elem('highlight') {
+        @include bem.elem('highlight') {
             background-image: linear-gradient(to top,
             transparent .15em,
             props.get(heading.$bg-color) .15em,
@@ -51,7 +51,7 @@
             }
         }
 
-        @include iro.bem-modifier('display') {
+        @include bem.modifier('display') {
             @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes {
                 #{map.get($-size-map, $mod)} {
                     font-family:           props.get($font-family);
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 7b1f43b..707339e 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -1,6 +1,6 @@
 @use 'sass:math';
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use '../core.vars' as core;
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 41472c7..8ecf0ae 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
@@ -11,7 +11,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-scope('links') {
+    @include bem.scope('links') {
         :link,
         :visited {
             color:                     currentColor;
@@ -40,14 +40,14 @@
             }
         }
 
-        @include iro.bem-modifier('invisible') {
+        @include bem.modifier('invisible') {
             :link,
             :visited {
                 text-decoration: none;
             }
         }
 
-        @include iro.bem-modifier('colored') {
+        @include bem.modifier('colored') {
             :link {
                 color:                 props.get(vars.$colored--text-color);
                 text-decoration-color: props.get(vars.$colored--underline-color);
@@ -68,7 +68,7 @@
         }
 
         @each $theme in map.keys(props.get(vars.$static-themes)) {
-            @include iro.bem-modifier(string.slice($theme, 3)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 :link,
                 :visited {
                     color:                 props.get(vars.$static-themes, $theme, --text-color);
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index 7f18df0..0cf8c54 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use '../core.vars' as core;
@@ -10,7 +10,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-scope('lists') {
+    @include bem.scope('lists') {
         ul,
         ol {
             padding-inline-start: props.get(vars.$indent);
@@ -46,7 +46,7 @@
             margin-inline: props.get(vars.$indent) 0;
         }
 
-        @include iro.bem-modifier('compact') {
+        @include bem.modifier('compact') {
             ul,
             ol {
                 padding-inline-start: calc(props.get(vars.$compact--indent) - 3px);
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index 08df871..e50f134 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -1,5 +1,5 @@
 @use 'sass:meta';
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../props' as *;
 @use '../objects/table.vars' as table;
@@ -10,7 +10,7 @@
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-scope('tables') {
+    @include bem.scope('tables') {
         table {
             margin-block-start: props.get(vars.$margin-bs);
             border-spacing:     0;
@@ -46,7 +46,7 @@
             }
         }
 
-        @include iro.bem-modifier('flush') {
+        @include bem.modifier('flush') {
             th,
             td {
                 &:first-child {
@@ -59,7 +59,7 @@
             }
         }
 
-        @include iro.bem-modifier('box') {
+        @include bem.modifier('box') {
             td {
                 background-color: props.get(table.$box--bg-color);
             
diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss
index 8edcb0e..22b3de0 100644
--- a/src_demo/components/_box.scss
+++ b/src_demo/components/_box.scss
@@ -1,8 +1,8 @@
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 @use 'iro-sass/src/props';
 @use '../../src/core.vars';
 
-@include iro.bem-component('box') {
+@include bem.component('box') {
     padding:      2em;
     margin-block: 2em;
     border:       1px solid props.get(core.$theme, --border);
diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss
index cd38954..81b4598 100644
--- a/src_demo/components/_content.scss
+++ b/src_demo/components/_content.scss
@@ -1,6 +1,6 @@
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 
-@include iro.bem-component('content') {
+@include bem.component('content') {
     grid-area: content;
     overflow:  auto;
 }
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss
index 4cce9b8..3d4ad89 100644
--- a/src_demo/components/_sidebar.scss
+++ b/src_demo/components/_sidebar.scss
@@ -1,6 +1,6 @@
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 
-@include iro.bem-component('sidebar') {
+@include bem.component('sidebar') {
     grid-area:        sidebar;
     min-inline-size:  15em;
     min-block-size:   0;
diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss
index 9516b12..446de7e 100644
--- a/src_demo/components/_view.scss
+++ b/src_demo/components/_view.scss
@@ -1,6 +1,6 @@
-@use 'iro-sass/src/iro-sass' as iro;
+@use 'iro-sass/src/bem' as bem;
 
-@include iro.bem-component('view') {
+@include bem.component('view') {
     display: none;
 
     &:target {