97 files changed, 326 insertions, 299 deletions

diff --git a/.zed/settings.json b/.zed/settings.json
new file mode 100644
index 0000000..9f46a10
--- /dev/null
+++ b/.zed/settings.json
@@ -0,0 +1,28 @@
+{
+        "languages": {
+                "SCSS": {
+                        "prettier": {
+                                "allowed": false,
+                        },
+                        "formatter": [
+                                {
+                                        "language_server": {
+                                                "name": "stylelint-fsp",
+                                        },
+                                },
+                        ],
+                },
+                "SASS": {
+                        "prettier": {
+                                "allowed": false,
+                        },
+                        "formatter": [
+                                {
+                                        "language_server": {
+                                                "name": "stylelint-fsp",
+                                        },
+                                },
+                        ],
+                },
+        },
+}
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index 861b600..d335b48 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -1,7 +1,7 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:math';
-@use 'iro-sass/src/easing' as easing;
+@use 'pkg:iro-sass/easing' as easing;
 
 $static-colors: (
         --base: hsl(0, 0%, 98%),
@@ -82,11 +82,11 @@ $theme-light: (
                         --50:  (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
                         --75:  (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
                         --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
-        
+
                         --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
                         --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
                         --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
-        
+
                         --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
                         --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
                         --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
@@ -110,7 +110,7 @@ $theme-light: (
                         --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
                 ),
         ),
-    
+
         --palettes: (
                 --base:   hsl(260, 70%, 98%)    --grays,
                 --blue:   oklch(56% .16 275.25) --colors,
@@ -142,11 +142,11 @@ $theme-dark: (
                         --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
                         --75:  (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
                         --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
-        
+
                         --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
                         --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
                         --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
-        
+
                         --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
                         --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
                         --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
@@ -170,7 +170,7 @@ $theme-dark: (
                         --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
                 ),
         ),
-    
+
         --palettes: (
                 --base:   hsl(257, 7%, 20%)     --grays,
                 --blue:   oklch(56% .16 275.25) --colors,
diff --git a/src/_config.scss b/src/_config.scss
index 764d953..d2587f4 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -1,7 +1,7 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:math';
-@use 'iro-sass/src/easing' as easing;
+@use 'pkg:iro-sass/easing' as easing;
 @use 'config.defaults' as def;
 
 $static-colors-override: () !default;
diff --git a/src/_core.scss b/src/_core.scss
index 7be4b0d..4744f9e 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use 'config';
 
 @use 'core.vars' as vars;
@@ -13,7 +13,7 @@
                 @if $theme-name == config.$theme-default {
                         :root {
                                 @include props.materialize(map.values(meta.module-variables('vars')));
-                
+
                                 @if map.has-key($theme, 'dark') {
                                         @media (prefers-color-scheme: dark) {
                                                 @include props.materialize(map.get($theme, 'dark'));
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index cc913d9..337adc9 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -5,8 +5,8 @@
 @use 'sass:list';
 @use 'functions' as fn;
 @use 'config';
-@use 'iro-sass/src/functions';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/functions';
+@use 'pkg:iro-sass/props';
 
 $size--0:    props.def(--size--0, 0) !default;
 $size--10:   props.def(--size--10, functions.px-to-rem(1px)) !default;
diff --git a/src/_functions.scss b/src/_functions.scss
index 71dae99..3b7e270 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -4,7 +4,7 @@
 @use 'sass:list';
 @use 'sass:meta';
 
-@use 'iro-sass/src/easing';
+@use 'pkg:iro-sass/easing';
 @use 'apca';
 
 @function palette($base-color, $levels, $ref-color: $base-color) {
diff --git a/src/_iro-design.scss b/src/_index.scss
index c809f91..0e3943e 100644
--- a/src/_iro-design.scss
+++ b/src/_index.scss
@@ -5,18 +5,19 @@ $breakpoints: (
         xs: 400px,
 ) !default;
 
-@use 'iro-sass/src/responsive' with (
+@use 'pkg:iro-sass/responsive' with (
         $named-viewports: $breakpoints
 );
 
 @forward 'pkg:include-media/dist/include-media' as media--* with (
         $breakpoints: $breakpoints,
         $unit-intervals: (
-                'px':  1,
-                'em':  .01,
+                'px': 1,
+                'em': .01,
                 'rem': .01,
-                '':    0
-        ) !default,
+                '': 0,
+        )
+        !default
 );
 
 @forward 'config.defaults' as config-defaults--*;
diff --git a/src/_props.scss b/src/_props.scss
index 8873e34..78891ee 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -4,8 +4,8 @@
 @use 'sass:string';
 @use 'config';
 @use 'pkg:include-media/dist/include-media' as media;
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 
 @mixin materialize-at-root($ref) {
         @if meta.type-of($ref) == 'map' {
diff --git a/src/_themes.scss b/src/_themes.scss
index d3affca..72c485e 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use 'pkg:include-media/dist/include-media' as media;
 
 @use 'core.vars' as vars;
diff --git a/src/_utils.scss b/src/_utils.scss
index 0fe95f0..19a5229 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use 'pkg:include-media/dist/include-media' as media;
 
 @use 'core.vars' as vars;
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index f01af77..826943f 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,7 +1,7 @@
 @use 'sass:meta';
 @use 'pkg:include-media/dist/include-media' as media;
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @use '../objects/card.vars' as card;
@@ -23,8 +23,8 @@
                         border-radius: props.get(card.$rounding);
 
                         @include bem.elem('card') {
-                                border-color:    props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color);
                                 background-clip: content-box;
+                                border-color:    props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color);
                                 box-shadow:      none;
 
                                 &:not(:last-child) {
@@ -160,7 +160,7 @@
                                 }
 
                                 @include bem.elem('card') {
-                                        flex:        0.1 0 auto;
+                                        flex:        .1 0 auto;
                                         inline-size: props.get($col-width);
                                 }
 
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index 6035956..47a2bc4 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 @use '../objects/card' as card;
 
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 05d99a8..e120157 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'container.vars';
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index 285b784..cc2fd61 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -1,5 +1,5 @@
-@use 'iro-sass/src/functions' as fn;
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/functions' as fn;
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $fixed-200: props.def(--l-container--fixed-200, fn.px-to-rem(1300px)) !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index c99b253..2f01987 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/bem';
+@use 'pkg:iro-sass/bem';
 
 @mixin styles {
         @include bem.layout('flex') {
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index c804262..1caef57 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'form.vars';
@@ -17,7 +17,7 @@
                 @include bem.elem('item') {
                         display: block;
                 }
-        
+
                 @include bem.elem('item-content') {
                         @include bem.modifier('align-start') {
                                 align-self: start;
@@ -38,12 +38,12 @@
                         @include bem.elem('item') {
                                 display: contents;
                         }
-        
+
                         @include bem.elem('item-label') {
                                 grid-column:        1;
                                 padding-inline-end: 0;
                         }
-        
+
                         @include bem.elem('item-content') {
                                 grid-column:        2;
                                 margin-block-start: 0;
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss
index c533e6b..4b2af1d 100644
--- a/src/layouts/_form.vars.scss
+++ b/src/layouts/_form.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $item-spacing-b:  props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default;
diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss
index 06eb8dd..8e4f25d 100644
--- a/src/layouts/_hlist.scss
+++ b/src/layouts/_hlist.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'hlist.vars';
@@ -23,8 +23,8 @@
                                         @include bem.elem('item') {
                                                 @include bem.next-twin-elem {
                                                         &::before {
-                                                                content: '·';
                                                                 margin-inline: calc(.65 * props.get($size));
+                                                                content: '·';
                                                         }
                                                 }
                                         }
@@ -38,8 +38,8 @@
                         @include bem.elem('item') {
                                 @include bem.next-twin-elem {
                                         &::before {
-                                                content: '·';
                                                 margin-inline: calc(.65 * props.get(vars.$gap));
+                                                content: '·';
                                         }
                                 }
                         }
diff --git a/src/layouts/_hlist.vars.scss b/src/layouts/_hlist.vars.scss
index fecded5..89e29f3 100644
--- a/src/layouts/_hlist.vars.scss
+++ b/src/layouts/_hlist.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $gap: props.def(--l-hlist--gap, props.get(core.$size--150)) !default;
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 929e60f..287738a 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'media.vars';
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index dcb10de..0f13855 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $gap:  props.def(--l-media--gap, props.get(core.$size--150)) !default;
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index 6d31d37..ef96037 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -1,5 +1,5 @@
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 @mixin styles {
@@ -8,4 +8,3 @@
                 scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
         }
 }
-
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index c2c8d1e..00c91e6 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -1,7 +1,7 @@
 @use 'sass:meta';
 @use 'pkg:include-media/dist/include-media' as media;
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'split-view.vars';
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index 1011948..c293ea7 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $col-gap:  props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
@@ -6,7 +6,7 @@ $row-gap:  props.def(--l-split-view--row-gap, props.get(core.$size--600)) !defau
 
 $gapless: props.def(--l-split-view--gapless, 0rem) !default;
 
-$panel--min-50:  props.def(--l-split-view--panel--min-50,  props.get(core.$size--2400)) !default;
+$panel--min-50:  props.def(--l-split-view--panel--min-50, props.get(core.$size--2400)) !default;
 $panel--min-100: props.def(--l-split-view--panel--min-100, props.get(core.$size--3200)) !default;
 $panel--min-200: props.def(--l-split-view--panel--min-200, props.get(core.$size--4200)) !default;
 
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index e6abc62..46369f8 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'alert.vars';
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
index 62d3414..987d09b 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default;
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 764c039..4225917 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'avatar.vars';
@@ -130,7 +130,7 @@
                                                 clip-path:   props.get($icon-mask);
                                         }
                                 }
-    
+
                                 @include bem.elem('content') {
                                         inline-size: props.get($size);
                                         block-size:  props.get($size);
@@ -139,7 +139,7 @@
                                 }
                         }
                 }
-    
+
                 &:focus-visible {
                         &::after {
                                 display: block;
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index d6e0497..e188572 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -1,10 +1,10 @@
 @use 'sass:math';
 
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 @function icon-mask($p) {
-        $offset: 0.15 * math.div(0.5, $p);
+        $offset: .15 * math.div(.5, $p);
         @return 'data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="avatar_mask" clipPathUnits="objectBoundingBox"><path d="M 0,0 H 1 V #{$p} H #{$p + $offset} C #{$p + 0.055},#{$p} #{$p},#{$p + 0.055} #{$p},#{$p + $offset} V 1 H 0 Z" /></clipPath></defs></svg>#avatar_mask';
 }
 
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 346cf5f..4576dea 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'backdrop.vars';
diff --git a/src/objects/_backdrop.vars.scss b/src/objects/_backdrop.vars.scss
index 8bae733..9398eb0 100644
--- a/src/objects/_backdrop.vars.scss
+++ b/src/objects/_backdrop.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $z-index:  props.def(--o-backdrop--z-index, 10000) !default;
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 6cd3cc0..b717aab 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,8 +2,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'button.vars';
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index d385cbb..d0599f1 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $line-height:  props.def(--o-button--line-height, 1.4) !default;
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 46cc401..d91bdbe 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 @use 'avatar.vars' as avatar;
 
@@ -297,10 +297,10 @@
 
                         @include bem.elem('body') {
                                 @include bem.modifier('main') {
-                                        block-size:      auto;
-                                        min-block-size:  none;
                                         inline-size:     100%;
                                         min-inline-size: 0;
+                                        block-size:      auto;
+                                        min-block-size:  none;
                                 }
                         }
                 }
@@ -309,17 +309,17 @@
                         display: block;
                         interpolate-size: allow-keywords;
 
-                        @include bem.elem("header") {
+                        @include bem.elem('header') {
                                 display:     flex;
-                                align-items: center;
                                 gap:         1em;
+                                align-items: center;
                                 cursor:      pointer;
 
                                 &::before {
-                                        margin:      0;
                                         inline-size: 1em;
-                                        font-size:   0.8em;
-                                        content:     "▶";
+                                        margin:      0;
+                                        font-size:   .8em;
+                                        content:     '▶';
                                 }
 
                                 &:focus-visible {
@@ -328,31 +328,31 @@
                                         border-radius:  calc(props.get(vars.$rounding) - props.get(vars.$border-width));
                                 }
 
-                                @include bem.next-elem("body") {
+                                @include bem.next-elem('body') {
                                         padding-block-start: 0;
                                 }
                         }
 
                         &::details-content {
-                                opacity:    0;
                                 block-size: 0;
                                 overflow-y: clip;
+                                opacity:    0;
                                 transition:
-                                        content-visibility 0.2s allow-discrete,
-                                        opacity 0.2s ease,
-                                        block-size 0.2s ease;
+                                        content-visibility .2s allow-discrete,
+                                        opacity .2s ease,
+                                        block-size .2s ease;
                         }
 
                         &[open] {
-                                @include bem.elem("header") {
+                                @include bem.elem('header') {
                                         &::before {
-                                                content: "▼";
+                                                content: '▼';
                                         }
                                 }
 
                                 &::details-content {
-                                        opacity:    1;
                                         block-size: auto;
+                                        opacity:    1;
                                 }
                         }
 
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index e84b8c3..0d804c6 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $divider-width:        props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 5faafb9..f179f94 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,7 +1,7 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/functions' as fn;
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/functions' as fn;
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 @use '../core.vars' as core;
 
@@ -32,14 +32,14 @@
                         background-clip:    padding-box;
                         border:             props.get(vars.$key-focus--border-offset) solid transparent;
                         border-radius:      calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
-    
+
                         &::before,
                         &::after {
                                 position: absolute;
                                 display:  block;
                                 content:  '';
                         }
-    
+
                         &::before {
                                 inset-block-start:  props.get(vars.$border-width);
                                 inset-inline-start: props.get(vars.$border-width);
@@ -49,7 +49,7 @@
                                 background-color:   props.get(vars.$box-bg-color);
                                 transition:         transform .2s ease;
                         }
-    
+
                         &::after {
                                 inset-block-start:   calc(.5 * props.get(vars.$size) - 1px);
                                 inset-inline-start:  calc(1.5 * props.get(vars.$border-width));
@@ -66,7 +66,7 @@
                                 border-inline-width: 0 2px;
                         }
                 }
-    
+
                 @include bem.elem('check-icon') {
                         position:           absolute;
                         inset-block-start:  calc(1 * props.get(vars.$border-width));
@@ -82,11 +82,11 @@
                         transform-origin:   40% 90%;
                         transition:         transform .2s ease;
                 }
-    
+
                 @include bem.elem('label') {
                         margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
                 }
-    
+
                 @include bem.elem('native') {
                         position:           absolute;
                         inset-block-start:  0;
@@ -99,60 +99,60 @@
                         overflow:           hidden;
                         appearance:         none;
                         border-radius:      props.get(vars.$rounding);
-    
+
                         &:hover,
                         &:focus-visible {
                                 @include bem.sibling-elem('label') {
                                         color: props.get(vars.$hover--label-color);
                                 }
-    
+
                                 @include bem.sibling-elem('box') {
                                         background-color: props.get(vars.$hover--box-border-color);
                                 }
                         }
-    
+
                         &:checked {
                                 @include bem.sibling-elem('box') {
                                         &::before {
                                                 transform: scale(0);
                                         }
-    
+
                                         @include bem.elem('check-icon') {
                                                 transform: scale(1);
                                         }
                                 }
                         }
-    
+
                         &:indeterminate {
                                 @include bem.sibling-elem('box') {
                                         &::before {
                                                 transform: scale(0);
                                         }
-    
+
                                         &::after {
                                                 transform: scale(1);
                                         }
-    
+
                                         @include bem.elem('check-icon') {
                                                 transform: scale(0);
                                         }
                                 }
                         }
-    
+
                         &:disabled {
                                 @include bem.sibling-elem('label') {
                                         color: props.get(vars.$disabled--label-color);
                                 }
-    
+
                                 @include bem.sibling-elem('box') {
                                         background-color: props.get(vars.$disabled--box-border-color);
-    
+
                                         &::before {
                                                 background-color: props.get(vars.$disabled--box-bg-color);
                                         }
                                 }
                         }
-    
+
                         &:focus-visible {
                                 @include bem.sibling-elem('label') {
                                         color: props.get(vars.$key-focus--label-color);
@@ -169,20 +169,20 @@
                                 }
                         }
                 }
-    
+
                 @include bem.modifier('standalone') {
                         @include bem.elem('box') {
                                 margin-block-start: 0;
                         }
                 }
-    
+
                 @include bem.modifier('accent') {
                         @include bem.elem('native') {
                                 &:checked {
                                         @include bem.sibling-elem('box') {
                                                 background-color: props.get(vars.$accent--box-border-color);
                                         }
-        
+
                                         &:hover,
                                         &:focus-visible {
                                                 @include bem.sibling-elem('box') {
@@ -190,12 +190,12 @@
                                                 }
                                         }
                                 }
-    
+
                                 &:indeterminate {
                                         @include bem.sibling-elem('box') {
                                                 background-color: props.get(vars.$accent--box-border-color);
                                         }
-        
+
                                         &:hover,
                                         &:focus-visible {
                                                 @include bem.sibling-elem('box') {
@@ -203,11 +203,11 @@
                                                 }
                                         }
                                 }
-    
+
                                 &:disabled {
                                         @include bem.sibling-elem('box') {
                                                 background-color: props.get(vars.$disabled--box-border-color);
-        
+
                                                 &::before {
                                                         background-color: props.get(vars.$disabled--box-bg-color);
                                                 }
@@ -218,7 +218,7 @@
                                                         background-color: props.get(vars.$disabled--box-border-color);
                                                 }
                                         }
-        
+
                                         &:indeterminate {
                                                 @include bem.sibling-elem('box') {
                                                         background-color: props.get(vars.$disabled--box-border-color);
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss
index 25a0d3d..21cfae2 100644
--- a/src/objects/_checkbox.vars.scss
+++ b/src/objects/_checkbox.vars.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $size:            props.def(--o-checkbox--size, props.get(core.$size--175)) !default;
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index e3c786d..50cc129 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'dialog.vars';
@@ -13,8 +13,8 @@
         @include materialize-at-root(meta.module-variables('vars'));
 
         @include bem.object('dialog') {
-                display:          none;
                 box-sizing:       border-box;
+                display:          none;
                 inline-size:      100%;
                 max-inline-size:  none;
                 block-size:       100%;
@@ -31,15 +31,15 @@
                 }
 
                 &[open],
-                &:popover-open {
+                &:popover-open {
                         display:        flex;
                         flex-direction: column;
                 }
 
                 @include bem.elem('content') {
                         pointer-events:   auto;
-                        border-radius:    props.get(vars.$rounding);
                         background-color: props.get(vars.$bg-color);
+                        border-radius:    props.get(vars.$rounding);
                 }
 
                 @include bem.elem('header') {
diff --git a/src/objects/_dialog.vars.scss b/src/objects/_dialog.vars.scss
index 490dc40..8b189c6 100644
--- a/src/objects/_dialog.vars.scss
+++ b/src/objects/_dialog.vars.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 @use '../layouts/container.vars' as container;
 
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 51175a7..e3ae1cb 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 @use '../core.vars' as core;
 
@@ -171,29 +171,29 @@
                                         &::after {
                                                 background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
                                         }
-    
+
                                         @include bem.elem('label') {
                                                 color: props.get(vars.$static-themes, $theme, --medium, --label);
                                         }
                                 }
-    
+
                                 @include bem.modifier('quiet') {
                                         &::before,
                                         &::after {
                                                 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
                                         }
-    
+
                                         @include bem.elem('label') {
                                                 color: props.get(vars.$static-themes, $theme, --quiet, --label);
                                         }
                                 }
-    
+
                                 @include bem.modifier('faint') {
                                         &::before,
                                         &::after {
                                                 background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
                                         }
-    
+
                                         @include bem.elem('label') {
                                                 color: props.get(vars.$static-themes, $theme, --faint, --label);
                                         }
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 7081f47..b4f01de 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $margin-b:               props.def(--o-divider--size, props.get(core.$size--85)) !default;
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index fd36535..1525ce7 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 @use 'icon.vars' as icon;
 
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss
index b7a8a43..1c0b197 100644
--- a/src/objects/_emoji.vars.scss
+++ b/src/objects/_emoji.vars.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $size:     props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index aa12eb5..9e2d077 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'field-label.vars';
@@ -18,55 +18,55 @@
                         font-weight:        400;
                         line-height:        1.3;
                         color:              props.get(vars.$label-color);
-    
+
                         @include bem.next-elem('content') {
                                 margin-block-start: props.get(vars.$spacing-b);
                         }
                 }
-    
+
                 @include bem.elem('content') {
                         display: block;
                         flex:    1 1 auto;
                 }
-    
+
                 @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 bem.is('invalid') {
                         @include bem.elem('hint') {
                                 color: props.get(vars.$error-hint-color);
                         }
                 }
-    
+
                 @include bem.is('disabled') {
                         @include bem.elem('label', 'hint') {
                                 color: props.get(vars.$disabled-color);
                         }
                 }
-    
+
                 @include bem.modifier('align-start', 'align-end') {
                         display:     flex;
                         align-items: baseline;
-    
+
                         @include bem.elem('label') {
                                 display: inline-block;
-    
+
                                 @include bem.next-elem('content') {
                                         margin-block-start: 0;
                                 }
                         }
                 }
-    
+
                 @include bem.modifier('align-start') {
                         @include bem.elem('label') {
                                 text-align: start;
                         }
                 }
-    
+
                 @include bem.modifier('align-end') {
                         @include bem.elem('label') {
                                 text-align: end;
diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss
index 844a10b..b1e3038 100644
--- a/src/objects/_field-label.vars.scss
+++ b/src/objects/_field-label.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $spacing-i:       props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default;
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss
index 27e0f6a..529dd56 100644
--- a/src/objects/_figure.scss
+++ b/src/objects/_figure.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'figure.vars';
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss
index 78f5d15..bd5f429 100644
--- a/src/objects/_figure.vars.scss
+++ b/src/objects/_figure.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $pad-b:        props.def(--o-figure--pad-b, props.get(core.$size--100)) !default;
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index eed30e8..d3b9e92 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'heading.vars';
@@ -66,7 +66,7 @@
                 @each $theme in map.keys(props.get(vars.$static-themes)) {
                         @include bem.modifier(string.slice($theme, 3)) {
                                 color: props.get(vars.$static-themes, $theme, --text-color);
-                                                
+
                                 @each $mod, $value in vars.$sizes {
                                         @include bem.modifier($mod) {
                                                 color: props.get(vars.$static-themes, $theme, --#{$mod}, --text-color);
@@ -81,7 +81,7 @@
                                         transparent                                        props.get(vars.$bg-end));
                                 }
 
-                                @include bem.modifier('display') {      
+                                @include bem.modifier('display') {
                                         @each $mod, $value in vars.$sizes {
                                                 @include bem.modifier($mod) {
                                                         color: props.get(vars.$static-themes, $theme, --display, --#{$mod}, --text-color);
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index 03ed7dd..ba6b577 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $offset:            props.def(--o-heading--offset, -.02em) !default;
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 1941960..0eec890 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'icon.vars';
diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss
index ff1541d..c50bcc1 100644
--- a/src/objects/_icon.vars.scss
+++ b/src/objects/_icon.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 
 $stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default;
 $size:         props.def(--o-icon--size, calc(1 / 14 * 16em)) !default;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 32fe6b4..05a522d 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'lightbox.vars';
@@ -32,9 +32,9 @@
                 padding:               0;
                 margin:                0;
                 overflow:              hidden;
+                pointer-events:        none;
                 background-color:      transparent;
                 border:                0;
-                pointer-events:        none;
 
                 &::backdrop {
                         background-color: props.get(backdrop.$bg-color);
@@ -42,7 +42,7 @@
                 }
 
                 &[open],
-                &:popover-open {
+                &:popover-open {
                         display: grid;
                 }
 
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index a74f514..b817851 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index f370067..4d0faac 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 @use 'icon.vars' as icon;
 
diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss
index d242a1f..0af3ce7 100644
--- a/src/objects/_menu.vars.scss
+++ b/src/objects/_menu.vars.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $spacing:           props.def(--o-menu--spacing, 0em) !default;
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index ae18614..1b53081 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -2,8 +2,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'navbar.vars';
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index 934e9b9..d664a60 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $block-size: props.def(--o-navbar--block-size, props.get(core.$size--1000)) !default;
@@ -82,7 +82,7 @@ $default-theme: map.deep-merge((
                                 --bg-color:     props.get(core.$theme, --border),
                                 --text-color:  props.get(core.$theme, --heading),
                         ),
-    
+
                         --active: (
                                 --bg-color:     props.get(core.$theme, --border-strong),
                                 --text-color:  props.get(core.$theme, --heading),
@@ -161,7 +161,7 @@ $default-theme: props.def(--o-navbar, $default-theme, 'color');
                                                 --bg-color:    props.get(core.$transparent-colors, $theme, --400),
                                                 --text-color:  props.get(core.$transparent-colors, $theme, --900),
                                         ),
-                        
+
                                         --active: (
                                                 --bg-color:    props.get(core.$transparent-colors, $theme, --500),
                                                 --text-color:  props.get(core.$transparent-colors, $theme, --900),
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 79c0f6c..1203dcd 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,9 +1,9 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
+@use 'pkg:iro-sass/bem';
 @use '../config';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 @mixin styles {
@@ -33,7 +33,7 @@
                                 @include bem.elem('item') {
                                         @for $i from 1 through list.length($levels) {
                                                 $key: list.nth(map.keys($levels), $i);
-        
+
                                                 &:nth-child(#{$i}) {
                                                         background-color: props.get(core.$theme, $palette-name, $key);
                                                 }
@@ -50,7 +50,7 @@
                                         @include bem.elem('item') {
                                                 @for $i from 1 through list.length($levels) {
                                                         $key: list.nth(map.keys($levels), $i);
-            
+
                                                         &:nth-child(#{$i}) {
                                                                 background-color: props.get(core.$theme, #{$palette-name}-static, $key);
                                                         }
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss
index 80fc913..7f25914 100644
--- a/src/objects/_placeholders.scss
+++ b/src/objects/_placeholders.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'placeholders.vars';
diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss
index a2e41e2..c816a93 100644
--- a/src/objects/_placeholders.vars.scss
+++ b/src/objects/_placeholders.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 2746477..827b511 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'popover.vars';
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss
index e560d1b..aeba58b 100644
--- a/src/objects/_popover.vars.scss
+++ b/src/objects/_popover.vars.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $z-index:         props.def(--o-popover--z-index, 11000) !default;
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 8327a15..a2152dc 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 @use '../core.vars' as core;
 
@@ -18,7 +18,7 @@
                 margin-inline:
                         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 bem.elem('circle') {
                         display:            inline-block;
                         flex:               0 0 auto;
@@ -30,7 +30,7 @@
                         background-clip:    padding-box;
                         border:             props.get(vars.$key-focus--border-offset) solid transparent;
                         border-radius:      2em;
-    
+
                         &::after {
                                 position:           relative;
                                 inset-block-start:  props.get(vars.$border-width);
@@ -44,11 +44,11 @@
                                 transition:         transform .2s ease;
                         }
                 }
-    
+
                 @include bem.elem('label') {
                         margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
                 }
-    
+
                 @include bem.elem('native') {
                         position:           absolute;
                         inset-block-start:  0;
@@ -61,18 +61,18 @@
                         overflow:           hidden;
                         appearance:         none;
                         border-radius:      props.get(vars.$rounding);
-    
+
                         &:hover,
                         &:focus-visible {
                                 @include bem.sibling-elem('label') {
                                         color: props.get(vars.$hover--label-color);
                                 }
-    
+
                                 @include bem.sibling-elem('circle') {
                                         background-color: props.get(vars.$hover--circle-border-color);
                                 }
                         }
-    
+
                         &:checked {
                                 @include bem.sibling-elem('circle') {
                                         &::after {
@@ -80,15 +80,15 @@
                                         }
                                 }
                         }
-    
+
                         &:disabled {
                                 @include bem.sibling-elem('label') {
                                         color: props.get(vars.$disabled--label-color);
                                 }
-    
+
                                 @include bem.sibling-elem('circle') {
                                         background-color: props.get(vars.$disabled--circle-border-color);
-    
+
                                         &::after {
                                                 background-color: props.get(vars.$disabled--circle-bg-color);
                                         }
@@ -111,20 +111,20 @@
                                 }
                         }
                 }
-    
+
                 @include bem.modifier('standalone') {
                         @include bem.elem('circle') {
                                 margin-block-start: 0;
                         }
                 }
-    
+
                 @include bem.modifier('accent') {
                         @include bem.elem('native') {
                                 &:checked {
                                         @include bem.sibling-elem('circle') {
                                                 background-color: props.get(vars.$accent--circle-border-color);
                                         }
-        
+
                                         &:hover,
                                         &:focus-visible {
                                                 @include bem.sibling-elem('circle') {
@@ -132,16 +132,16 @@
                                                 }
                                         }
                                 }
-    
+
                                 &:disabled {
                                         @include bem.sibling-elem('circle') {
                                                 background-color: props.get(vars.$disabled--circle-border-color);
-        
+
                                                 &::after {
                                                         background-color: props.get(vars.$disabled--circle-bg-color);
                                                 }
                                         }
-        
+
                                         &:checked {
                                                 @include bem.sibling-elem('circle') {
                                                         background-color: props.get(vars.$disabled--circle-border-color);
diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss
index b18ae2b..070aeef 100644
--- a/src/objects/_radio.vars.scss
+++ b/src/objects/_radio.vars.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $diameter:         props.def(--o-radio--diameter, props.get(core.$size--200)) !default;
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index 75d2a16..1f4efcc 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 @use 'icon.vars' as icon;
 
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss
index 7a2cfae..b1911a5 100644
--- a/src/objects/_side-nav.vars.scss
+++ b/src/objects/_side-nav.vars.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $spacing:           props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default;
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 4e4aa42..3c0da6f 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'status-indicator.vars';
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss
index 55b446a..33299ea 100644
--- a/src/objects/_status-indicator.vars.scss
+++ b/src/objects/_status-indicator.vars.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../config';
 @use '../core.vars' as core;
 
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 48cec24..ea33ef6 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 @use '../core.vars' as core;
 
@@ -18,7 +18,7 @@
                 margin-inline:
                         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 bem.elem('indicator') {
                         display:            inline-block;
                         flex:               0 0 auto;
@@ -31,7 +31,7 @@
                         border:             props.get(vars.$key-focus--border-offset) solid transparent;
                         border-radius:      2em;
                         transition:         background-color .2s ease;
-    
+
                         &::after {
                                 display:          block;
                                 inline-size:      calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
@@ -43,11 +43,11 @@
                                 transition:       transform .2s ease;
                         }
                 }
-    
+
                 @include bem.elem('label') {
                         margin-inline-start: props.get(vars.$label-gap);
                 }
-    
+
                 @include bem.elem('native') {
                         position:           absolute;
                         inset-block-start:  0;
@@ -60,30 +60,30 @@
                         overflow:           hidden;
                         appearance:         none;
                         border-radius:      props.get(vars.$rounding);
-    
+
                         &:hover,
                         &:focus-visible {
                                 @include bem.sibling-elem('label') {
                                         color: props.get(vars.$hover--label-color);
                                 }
-    
+
                                 @include bem.sibling-elem('indicator') {
                                         &::after {
                                                 border-color: props.get(vars.$hover--handle-border-color);
                                         }
                                 }
                         }
-    
+
                         &:checked {
                                 @include bem.sibling-elem('indicator') {
                                         background-color: props.get(vars.$handle-border-color);
-    
+
                                         &::after {
                                                 border-color: props.get(vars.$handle-border-color);
                                                 transform:    translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
                                         }
                                 }
-    
+
                                 &:hover,
                                 &:focus-visible {
                                         @include bem.sibling-elem('indicator') {
@@ -95,32 +95,32 @@
                                         }
                                 }
                         }
-    
+
                         &:disabled {
                                 @include bem.sibling-elem('label') {
                                         color: props.get(vars.$disabled--label-color);
                                 }
-    
+
                                 @include bem.sibling-elem('indicator') {
                                         background-color: props.get(vars.$disabled--track-bg-color);
-    
+
                                         &::after {
                                                 background-color: props.get(vars.$disabled--handle-bg-color);
                                                 border-color:     props.get(vars.$disabled--handle-border-color);
                                         }
                                 }
-    
+
                                 &:checked {
                                         @include bem.sibling-elem('indicator') {
                                                 background-color: props.get(vars.$disabled--handle-border-color);
-    
+
                                                 &::after {
                                                         border-color: props.get(vars.$disabled--handle-border-color);
                                                 }
                                         }
                                 }
                         }
-    
+
                         &:focus-visible {
                                 @include bem.sibling-elem('label') {
                                         color: props.get(vars.$key-focus--label-color);
@@ -129,7 +129,7 @@
                                 @include bem.sibling-elem('indicator') {
                                         outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                                         box-shadow:
-                                                0 
+                                                0
                                                 0
                                                 0
                                                 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
@@ -137,36 +137,36 @@
                                 }
                         }
                 }
-    
+
                 @include bem.modifier('standalone') {
                         @include bem.elem('indicator') {
                                 margin-block-start: 0;
                         }
                 }
-    
+
                 @include bem.modifier('accent') {
                         @include bem.elem('native') {
                                 &:checked {
                                         @include bem.sibling-elem('indicator') {
                                                 background-color: props.get(vars.$accent--handle-border-color);
-        
+
                                                 &::after {
                                                         border-color: props.get(vars.$accent--handle-border-color);
                                                 }
                                         }
-        
+
                                         &:hover,
                                         &:focus-visible {
                                                 @include bem.sibling-elem('indicator') {
                                                         background-color: props.get(vars.$accent--hover--handle-border-color);
-    
+
                                                         &::after {
                                                                 border-color: props.get(vars.$accent--hover--handle-border-color);
                                                         }
                                                 }
                                         }
                                 }
-        
+
                                 &:disabled {
                                         @include bem.sibling-elem('label') {
                                                 color: props.get(vars.$disabled--label-color);
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss
index 10489a5..922c179 100644
--- a/src/objects/_switch.vars.scss
+++ b/src/objects/_switch.vars.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $inline-size:     props.def(--o-switch--inline-size, props.get(core.$size--350)) !default;
@@ -34,4 +34,3 @@ $disabled--handle-bg-color:     props.def(--o-switch--disabled--handle-bg-color,
 $key-focus--label-color:   props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
 $key-focus--border-color:  props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
 $key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
-
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 80aeb53..ba1a33b 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'tabbar.vars';
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss
index 3cf01fd..3a8c818 100644
--- a/src/objects/_tabbar.vars.scss
+++ b/src/objects/_tabbar.vars.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default;
@@ -9,7 +9,7 @@ $spacing:    props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default
 $tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default;
 
 $border--width:    props.def(--o-tabbar--border--width, props.get(core.$border-width--thin)) !default;
-$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; 
+$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default;
 
 $key-focus--border-width:  props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
 $key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 9e4891d..cc5f4bf 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'table.vars';
@@ -65,35 +65,35 @@
                 @include bem.modifier('box') {
                         @include bem.elem('cell') {
                                 background-color: props.get(vars.$box--bg-color);
-            
+
                                 &:first-child {
                                         border-inline-start-width: props.get(vars.$border-width);
                                 }
-            
+
                                 &:last-child {
                                         border-inline-end-width: props.get(vars.$border-width);
                                 }
                         }
-    
+
                         @include bem.elem('row') {
                                 &:first-child {
                                         @include bem.elem('cell') {
                                                 &:first-child {
                                                         border-start-start-radius: props.get(vars.$rounding);
                                                 }
-            
+
                                                 &:last-child {
                                                         border-start-end-radius: props.get(vars.$rounding);
                                                 }
                                         }
                                 }
-    
+
                                 &:last-child {
                                         @include bem.elem('cell') {
                                                 &:first-child {
                                                         border-end-start-radius: props.get(vars.$rounding);
                                                 }
-            
+
                                                 &:last-child {
                                                         border-end-end-radius: props.get(vars.$rounding);
                                                 }
@@ -113,7 +113,7 @@
                                                 background-color: props.get(vars.$hover--bg-color);
                                         }
                                 }
-    
+
                                 &:active {
                                         @include bem.elem('cell') {
                                                 background-color: props.get(vars.$active--bg-color);
@@ -128,7 +128,7 @@
                                                         background-color: props.get(vars.$box--hover--bg-color);
                                                 }
                                         }
-        
+
                                         &:active {
                                                 @include bem.elem('cell') {
                                                         background-color: props.get(vars.$box--active--bg-color);
diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss
index b8d8093..6c68492 100644
--- a/src/objects/_table.vars.scss
+++ b/src/objects/_table.vars.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $pad-i:        props.def(--o-table--pad-i, props.get(core.$size--175)) !default;
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index b89e148..66092ee 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'text-field.vars';
@@ -8,7 +8,7 @@
 
 @mixin -invalid {
         $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
-    
+
         @include bem.sibling-elem('bg') {
                 inset-block:   $focus-border-offset;
                 inset-inline:  $focus-border-offset;
@@ -42,7 +42,7 @@
 
         @include bem.object('text-field') {
                 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
-        
+
                 position:         relative;
                 min-inline-size:  0;
                 background-color: props.get(vars.$bg-color);
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index 51099d8..d9f7b0e 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $line-height:  props.def(--o-text-field--line-height, 1.4) !default;
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 2ccb50b..40103c6 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'thumbnail.vars';
@@ -72,7 +72,7 @@
                                 &:focus-visible {
                                         outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
                                 }
-    
+
                                 @include bem.is('selected') {
                                         border-color: props.get(vars.$static-themes, $theme, --selected, --border);
                                 }
@@ -80,7 +80,7 @@
                                 &:focus-visible {
                                         outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
                                         border-color:  transparent;
-                                        box-shadow: 
+                                        box-shadow:
                                                 0
                                                 0
                                                 0
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index d2a38c0..b4ae924 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $size:         props.def(--o-thumbnail--size, props.get(core.$size--900)) !default;
@@ -33,11 +33,11 @@ $static-themes: props.def(--o-thumbnail, (), 'color');
         $static-themes: props.merge($static-themes, (
                 $thumbnail-theme: (
                         --border: props.get(core.$transparent-colors, $theme, --400),
-    
+
                         --hover: (
                                 --border: props.get(core.$transparent-colors, $theme, --500),
                         ),
-            
+
                         --selected: (
                                 --border: props.get(core.$transparent-colors, $theme, --900),
                         ),
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index a99add8..84f2c46 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'blockquotes.vars';
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 6aae242..e193fff 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 @use './implicit.vars' as implicit;
 
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
index f307f58..75c450d 100644
--- a/src/scopes/_body.scss
+++ b/src/scopes/_body.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'body.vars';
@@ -55,5 +55,5 @@
                 blockquote {
                         margin-block-start: props.get(vars.$paragraph--margin-bs);
                 }
-        } 
+        }
 }
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
index 1de2cfd..022bc3a 100644
--- a/src/scopes/_body.vars.scss
+++ b/src/scopes/_body.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 @use '../layouts/container.vars' as container;
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index 8147a14..6b91404 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'code.vars';
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
index 08472f2..0ae4511 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 @use './implicit.vars' as implicit;
 
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss
index d931820..6f38fe5 100644
--- a/src/scopes/_figures.scss
+++ b/src/scopes/_figures.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../objects/figure.vars' as figure;
 
 @mixin styles {
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 362b116..e55273b 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../objects/heading.vars' as heading;
 
 @mixin styles {
@@ -72,14 +72,14 @@
                 @each $theme in map.keys(props.get(heading.$static-themes)) {
                         @include bem.modifier(string.slice($theme, 3)) {
                                 color: props.get(heading.$static-themes, $theme, --text-color);
-                                                
+
                                 @each $mod, $value in heading.$sizes {
                                         #{map.get($-size-map, $mod)} {
                                                 color: props.get(heading.$static-themes, $theme, --#{$mod}, --text-color);
                                         }
                                 }
 
-                                @include bem.modifier('display') {      
+                                @include bem.modifier('display') {
                                         @each $mod, $value in heading.$sizes {
                                                 #{map.get($-size-map, $mod)} {
                                                         color: props.get(heading.$static-themes, $theme, --display, --#{$mod}, --text-color);
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index c11d396..d7c1123 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -2,8 +2,8 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 @use '../core.vars' as core;
 
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 388f0af..203fd4f 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default;
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index a1d0425..31b56ab 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 
 @forward 'links.vars';
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index c69cc32..d0d7d46 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 
 $rounding:               props.def(--s-links--rounding, props.get(core.$rounding)) !default;
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index fc8a577..dc68b5c 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 @use '../core.vars' as core;
 
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
index 8c46bc3..8ea0d7e 100644
--- a/src/scopes/_lists.vars.scss
+++ b/src/scopes/_lists.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use '../core.vars' as core;
 @use './implicit.vars' as implicit;
 
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index 5b64301..db035bb 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -1,6 +1,6 @@
 @use 'sass:meta';
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../props' as *;
 @use '../objects/table.vars' as table;
 
@@ -62,35 +62,35 @@
                 @include bem.modifier('box') {
                         td {
                                 background-color: props.get(table.$box--bg-color);
-            
+
                                 &:first-child {
                                         border-inline-start-width: props.get(table.$border-width);
                                 }
-            
+
                                 &:last-child {
                                         border-inline-end-width: props.get(table.$border-width);
                                 }
                         }
-    
+
                         tr {
                                 &:first-child {
                                         td {
                                                 &:first-child {
                                                         border-start-start-radius: props.get(table.$rounding);
                                                 }
-            
+
                                                 &:last-child {
                                                         border-start-end-radius: props.get(table.$rounding);
                                                 }
                                         }
                                 }
-    
+
                                 &:last-child {
                                         td {
                                                 &:first-child {
                                                         border-end-start-radius: props.get(table.$rounding);
                                                 }
-            
+
                                                 &:last-child {
                                                         border-end-end-radius: props.get(table.$rounding);
                                                 }
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
index 362b70f..eca2f50 100644
--- a/src/scopes/_tables.vars.scss
+++ b/src/scopes/_tables.vars.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/props';
 @use 'implicit.vars' as implicit;
 
 $margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss
index d40a8b2..5bba505 100644
--- a/src_demo/components/_box.scss
+++ b/src_demo/components/_box.scss
@@ -1,5 +1,5 @@
-@use 'iro-sass/src/bem';
-@use 'iro-sass/src/props';
+@use 'pkg:iro-sass/bem';
+@use 'pkg:iro-sass/props';
 @use '../../src/core.vars';
 
 @include bem.component('box') {
diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss
index 026b0ec..999bccd 100644
--- a/src_demo/components/_content.scss
+++ b/src_demo/components/_content.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/bem';
+@use 'pkg:iro-sass/bem';
 
 @include bem.component('content') {
     grid-area: content;
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss
index da5d27c..5eb72a0 100644
--- a/src_demo/components/_sidebar.scss
+++ b/src_demo/components/_sidebar.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/bem';
+@use 'pkg:iro-sass/bem';
 
 @include bem.component('sidebar') {
     grid-area:        sidebar;
diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss
index 95e9db5..f3d099e 100644
--- a/src_demo/components/_view.scss
+++ b/src_demo/components/_view.scss
@@ -1,4 +1,4 @@
-@use 'iro-sass/src/bem';
+@use 'pkg:iro-sass/bem';
 
 @include bem.component('view') {
     display: none;