From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 12:27:09 +0200
Subject: Paths

---
 src/layouts/_card-list.scss       | 178 ++++++++++++++++++++++----------------
 src/layouts/_card-list.vars.scss  | 135 ++++++++++++++++++++---------
 src/layouts/_container.scss       |  26 +++---
 src/layouts/_container.vars.scss  |  39 ++++-----
 src/layouts/_flex.scss            |  10 +--
 src/layouts/_form.scss            |  52 +++++------
 src/layouts/_form.vars.scss       |   6 +-
 src/layouts/_hlist.scss           |  71 ++++++++-------
 src/layouts/_hlist.vars.scss      |  18 ++--
 src/layouts/_media.scss           |  30 +++----
 src/layouts/_media.vars.scss      |  20 ++---
 src/layouts/_overflow.scss        |  10 +--
 src/layouts/_split-view.scss      |  93 +++++++++++---------
 src/layouts/_split-view.vars.scss |  15 ++--
 14 files changed, 403 insertions(+), 300 deletions(-)

(limited to 'src/layouts')

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index f2a6ff5..c05b798 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,39 +1,44 @@
-@use 'sass:meta';
-@use 'pkg:include-media/dist/include-media' as media;
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:include-media/dist/include-media" as media;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@use '../objects/card.vars' as card;
+@use "../objects/card.vars" as card;
 
-@forward 'card-list.vars';
-@use 'card-list.vars' as vars;
+@forward "card-list.vars";
+@use "card-list.vars" as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables("vars"));
 
-	@include bem.layout('card-list') {
-		display:        flex;
+	@include bem.layout("card-list") {
+		display: flex;
 		flex-direction: column;
-		gap:            props.get(vars.$row-gap);
+		gap: props.get(vars.$row-gap);
 
-		@include bem.modifier('merge') {
-			position:      relative;
-			gap:           0;
+		@include bem.modifier("merge") {
+			position: relative;
+			gap: 0;
 			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);
+			@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;
-				box-shadow:      none;
+				box-shadow: none;
 
 				&:not(:last-child) {
-					position:                relative;
+					position: relative;
 					border-end-start-radius: 0;
-					border-end-end-radius:   0;
+					border-end-end-radius: 0;
 				}
 
-				@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+				@include bem.multi(
+					"&:link, &:visited, &:enabled",
+					"modifier" "interactive",
+					"modifier" "collapsible"
+				) {
 					&:hover,
 					&:active,
 					&:focus-visible {
@@ -46,19 +51,28 @@
 				}
 
 				@include bem.next-twin-elem {
-					margin-block-start:        calc(-1 * props.get(card.$border-width));
-					border-block-start-color:  transparent;
+					margin-block-start: calc(-1 * props.get(card.$border-width));
+					border-block-start-color: transparent;
 					border-start-start-radius: 0;
-					border-start-end-radius:   0;
+					border-start-end-radius: 0;
 
-					@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+					@include bem.multi(
+						"&:link, &:visited, &:enabled",
+						"modifier" "interactive",
+						"modifier" "collapsible"
+					) {
 						&:hover,
 						&:active {
 							border-block-start-color: props.get(card.$hover--border-color);
 						}
 
 						&:focus-visible {
-							margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
+							margin-block-start: calc(
+								-1 *
+									props.get(card.$border-width) - props.get(
+										card.$key-focus--border-width
+									)
+							);
 						}
 					}
 				}
@@ -67,7 +81,11 @@
 					border-block-end-color: props.get(card.$border-color);
 				}
 
-				@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+				@include bem.multi(
+					"&:link, &:visited, &:enabled",
+					"modifier" "interactive",
+					"modifier" "collapsible"
+				) {
 					&:hover,
 					&:active {
 						border-color: props.get(card.$hover--border-color);
@@ -75,17 +93,20 @@
 
 					&:focus-visible {
 						border-color: props.get(card.$hover--bg-color);
-						box-shadow:
-							0 0 0
-							calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width))
+						box-shadow: 0 0 0
+							calc(
+								props.get(card.$key-focus--border-width) +
+									props.get(card.$key-focus--outline-width)
+							)
 							props.get(card.$key-focus--outline-color);
 					}
 				}
 			}
 
-			@include bem.modifier('borderless') {
-				@include bem.elem('card') {
-					border-color: props.get(card.$bg-color) props.get(card.$bg-color) props.get(vars.$border-color);
+			@include bem.modifier("borderless") {
+				@include bem.elem("card") {
+					border-color: props.get(card.$bg-color) props.get(card.$bg-color)
+						props.get(vars.$border-color);
 
 					@include bem.next-twin-elem {
 						border-block-start-color: transparent;
@@ -95,7 +116,11 @@
 						border-block-end-color: props.get(card.$bg-color);
 					}
 
-					@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+					@include bem.multi(
+						"&:link, &:visited, &:enabled",
+						"modifier" "interactive",
+						"modifier" "collapsible"
+					) {
 						&:hover,
 						&:active {
 							border-color: props.get(card.$hover--border-color);
@@ -108,84 +133,87 @@
 				}
 			}
 
-			@include bem.modifier('shadow') {
-				box-shadow:
-					props.get(vars.$shadow-x)
-					props.get(vars.$shadow-y)
-					props.get(vars.$shadow-blur)
-					props.get(vars.$shadow-grow)
+			@include bem.modifier("shadow") {
+				box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
+					props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
 					props.get(card.$shadow-color);
 			}
 
-			@include bem.modifier('interactive') {
-				transition: transform .2s, box-shadow .2s;
+			@include bem.modifier("interactive") {
+				transition:
+					transform 0.2s,
+					box-shadow 0.2s;
 
 				&:hover,
 				&:active,
 				&:focus-within {
 					box-shadow: none;
-					transform:  translateY(props.get(card.$hover--offset-b));
+					transform: translateY(props.get(card.$hover--offset-b));
 				}
 			}
 		}
 
-		@include bem.modifier('quiet') {
+		@include bem.modifier("quiet") {
 			row-gap: props.get(vars.$quiet--row-gap);
 		}
 
-		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$grid-layouts {
+		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap,
+			$breakpoint in vars.$grid-layouts
+		{
 			@include bem.modifier($mod) {
-				display:               grid;
+				display: grid;
 				grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr));
-				gap:                   props.get($row-gap) props.get($col-gap);
+				gap: props.get($row-gap) props.get($col-gap);
 
-				@include bem.modifier('quiet') {
+				@include bem.modifier("quiet") {
 					row-gap: props.get($quiet--row-gap);
 				}
 
-				@include media.media('<=#{$breakpoint}') {
+				@include media.media("<=#{$breakpoint}") {
 					display: flex;
 				}
 			}
 		}
 
-		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$flex-layouts {
+		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap,
+			$breakpoint in vars.$flex-layouts
+		{
 			@include bem.modifier($mod) {
-				display:   flex;
+				display: flex;
 				flex-flow: row wrap;
-				gap:       props.get($row-gap) props.get($col-gap);
+				gap: props.get($row-gap) props.get($col-gap);
 
-				@include bem.modifier('quiet') {
+				@include bem.modifier("quiet") {
 					row-gap: props.get($quiet--row-gap);
 				}
 
-				@include bem.elem('card') {
-					flex:        0.1 0 auto;
+				@include bem.elem("card") {
+					flex: 0.1 0 auto;
 					inline-size: props.get($col-width);
 				}
 
-				@include media.media('<=#{$breakpoint}') {
+				@include media.media("<=#{$breakpoint}") {
 					flex-flow: column nowrap;
 
-					@include bem.elem('card') {
+					@include bem.elem("card") {
 						inline-size: auto;
 					}
 				}
 			}
 		}
 
-		@include bem.modifier('masonry') {
-			display:    block;
-			columns:    auto props.get(vars.$masonry--col-width);
+		@include bem.modifier("masonry") {
+			display: block;
+			columns: auto props.get(vars.$masonry--col-width);
 			column-gap: props.get(vars.$masonry--col-gap);
 
-			@include bem.elem('card') {
+			@include bem.elem("card") {
 				margin-block-end: props.get(vars.$masonry--row-gap);
-				break-inside:     avoid;
+				break-inside: avoid;
 			}
 
-			@include bem.modifier('quiet') {
-				@include bem.elem('card') {
+			@include bem.modifier("quiet") {
+				@include bem.elem("card") {
 					margin-block-end: props.get(vars.$masonry--quiet--row-gap);
 				}
 			}
@@ -194,34 +222,34 @@
 		@each $mod, $row-gap, $col-gap, $row-height, $quiet--row-gap in vars.$masonry-h-layouts {
 			@include bem.modifier($mod) {
 				flex-flow: row wrap;
-				gap:       props.get($row-gap) props.get($col-gap);
+				gap: props.get($row-gap) props.get($col-gap);
 
-				@include bem.modifier('no-flush') {
+				@include bem.modifier("no-flush") {
 					&::after {
-						display:     block;
-						flex:        1 0 auto;
+						display: block;
+						flex: 1 0 auto;
 						inline-size: props.get($row-height);
-						content:     '';
+						content: "";
 					}
 				}
 
-				@include bem.elem('card') {
-					flex:            1 0 auto;
+				@include bem.elem("card") {
+					flex: 1 0 auto;
 					max-inline-size: 100%;
 				}
 
-				@include bem.elem('card-image') {
+				@include bem.elem("card-image") {
 					block-size: props.get($row-height);
 				}
 
-				@include bem.modifier('quiet') {
+				@include bem.modifier("quiet") {
 					row-gap: props.get($quiet--row-gap);
 				}
 			}
 		}
 
-		@include bem.modifier('aspect-5\\/4') {
-			@include bem.elem('card-image') {
+		@include bem.modifier("aspect-5\\/4") {
+			@include bem.elem("card-image") {
 				aspect-ratio: 5 / 4;
 			}
 		}
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index fb89b52..ece68f3 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,61 +1,116 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
-@use '../objects/card' as card;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
+@use "../objects/card" as card;
 
-$row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
+$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
 $quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
 
-$grid--row-gap:        props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default;
-$grid--col-gap:        props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default;
-$grid--col-width:      props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
-$grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
+$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--600)) !default;
+$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--600)) !default;
+$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
+$grid--quiet--row-gap: props.def(
+	--l-card-list--grid--quiet--row-gap,
+	props.get(core.$size--800)
+) !default;
 
-$grid-sm--row-gap:        props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default;
-$grid-sm--col-gap:        props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default;
-$grid-sm--col-width:      props.def(--l-card-list--grid-sm--col-width, props.get(core.$size--4600)) !default;
-$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default;
+$grid-sm--row-gap: props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-gap: props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-width: props.def(
+	--l-card-list--grid-sm--col-width,
+	props.get(core.$size--4600)
+) !default;
+$grid-sm--quiet--row-gap: props.def(
+	--l-card-list--grid-sm--quiet--row-gap,
+	props.get(core.$size--800)
+) !default;
 
-$grid-xs--row-gap:        props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default;
-$grid-xs--col-gap:        props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default;
-$grid-xs--col-width:      props.def(--l-card-list--grid-xs--col-width, props.get(core.$size--1600)) !default;
-$grid-xs--quiet--row-gap: props.def(--l-card-list--grid-xs--quiet--row-gap, props.get(core.$size--800)) !default;
+$grid-xs--row-gap: props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default;
+$grid-xs--col-gap: props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default;
+$grid-xs--col-width: props.def(
+	--l-card-list--grid-xs--col-width,
+	props.get(core.$size--1600)
+) !default;
+$grid-xs--quiet--row-gap: props.def(
+	--l-card-list--grid-xs--quiet--row-gap,
+	props.get(core.$size--800)
+) !default;
 
 $grid-layouts: (
-	'grid'    $grid--row-gap    $grid--col-gap    $grid--col-width    $grid--quiet--row-gap    sm,
-	'grid-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
-	'grid-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
+	"grid" $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm,
+	"grid-sm" $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
+	"grid-xs" $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs
 ) !default;
 
 $flex-layouts: (
-	'flex'    $grid--row-gap    $grid--col-gap    $grid--col-width    $grid--quiet--row-gap    sm,
-	'flex-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
-	'flex-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
+	"flex" $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap sm,
+	"flex-sm" $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
+	"flex-xs" $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs
 ) !default;
 
-$masonry-h--row-gap:        props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default;
-$masonry-h--col-gap:        props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default;
-$masonry-h--row-height:     props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
-$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default;
+$masonry-h--row-gap: props.def(
+	--l-card-list--masonry-h--row-gap,
+	props.get(core.$size--400)
+) !default;
+$masonry-h--col-gap: props.def(
+	--l-card-list--masonry-h--col-gap,
+	props.get(core.$size--400)
+) !default;
+$masonry-h--row-height: props.def(
+	--l-card-list--masonry-h--row-height,
+	props.get(core.$size--3200)
+) !default;
+$masonry-h--quiet--row-gap: props.def(
+	--l-card-list--masonry-h--quiet--row-gap,
+	props.get(core.$size--800)
+) !default;
 
-$masonry-h-sm--row-gap:        props.def(--l-card-list--masonry-h-sm--row-gap, props.get(core.$size--400)) !default;
-$masonry-h-sm--col-gap:        props.def(--l-card-list--masonry-h-sm--col-gap, props.get(core.$size--400)) !default;
-$masonry-h-sm--row-height:     props.def(--l-card-list--masonry-h-sm--row-height, props.get(core.$size--2600)) !default;
-$masonry-h-sm--quiet--row-gap: props.def(--l-card-list--masonry-h-sm--quiet--row-gap, props.get(core.$size--800)) !default;
+$masonry-h-sm--row-gap: props.def(
+	--l-card-list--masonry-h-sm--row-gap,
+	props.get(core.$size--400)
+) !default;
+$masonry-h-sm--col-gap: props.def(
+	--l-card-list--masonry-h-sm--col-gap,
+	props.get(core.$size--400)
+) !default;
+$masonry-h-sm--row-height: props.def(
+	--l-card-list--masonry-h-sm--row-height,
+	props.get(core.$size--2600)
+) !default;
+$masonry-h-sm--quiet--row-gap: props.def(
+	--l-card-list--masonry-h-sm--quiet--row-gap,
+	props.get(core.$size--800)
+) !default;
 
 $masonry-h-layouts: (
-	'masonry-h'    $masonry-h--row-gap    $masonry-h--col-gap    $masonry-h--row-height    $masonry-h--quiet--row-gap,
-	'masonry-h-sm' $masonry-h-sm--row-gap $masonry-h-sm--col-gap $masonry-h-sm--row-height $masonry-h-sm--quiet--row-gap,
+	"masonry-h" $masonry-h--row-gap $masonry-h--col-gap $masonry-h--row-height
+		$masonry-h--quiet--row-gap,
+	"masonry-h-sm" $masonry-h-sm--row-gap $masonry-h-sm--col-gap $masonry-h-sm--row-height
+		$masonry-h-sm--quiet--row-gap
 ) !default;
 
-$masonry--row-gap:        props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
-$masonry--col-gap:        props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
-$masonry--col-width:      props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
-$masonry--quiet--row-gap: props.def(--l-card-list--masonry--quiet--row-gap, props.get(core.$size--800)) !default;
+$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
+$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
+$masonry--col-width: props.def(
+	--l-card-list--masonry--col-width,
+	props.get(core.$size--3200)
+) !default;
+$masonry--quiet--row-gap: props.def(
+	--l-card-list--masonry--quiet--row-gap,
+	props.get(core.$size--800)
+) !default;
 
-$shadow-x:    props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
-$shadow-y:    props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
+$shadow-x: props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
+$shadow-y: props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
 $shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
 $shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default;
 
-$border-color:       props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default;
-$border-color-dark:  props.def(--l-card-list--border-color, props.get(core.$theme, --border-mute), 'dark') !default;
+$border-color: props.def(
+	--l-card-list--border-color,
+	props.get(card.$border-color),
+	"color"
+) !default;
+$border-color-dark: props.def(
+	--l-card-list--border-color,
+	props.get(core.$theme, --border-mute),
+	"dark"
+) !default;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 46ded23..7b3dc3f 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,37 +1,37 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'container.vars';
-@use 'container.vars' as vars;
+@forward "container.vars";
+@use "container.vars" as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables("vars"));
 
-	@include bem.layout('container') {
+	@include bem.layout("container") {
 		@each $mod, $size in vars.$fixed-sizes {
 			@include bem.modifier($mod) {
 				max-inline-size: props.get($size);
-				margin-inline:   auto;
+				margin-inline: auto;
 			}
 		}
 
-		@include bem.modifier('pad-i') {
+		@include bem.modifier("pad-i") {
 			padding-inline: props.get(vars.$pad-i);
 		}
 
-		@include bem.modifier('pad-b') {
+		@include bem.modifier("pad-b") {
 			padding-block: props.get(vars.$pad-b);
 		}
 
 		@each $mod, $pad-i, $pad-b in vars.$sizes {
 			@include bem.modifier($mod) {
-				@include bem.modifier('pad-i') {
+				@include bem.modifier("pad-i") {
 					padding-inline: props.get($pad-i);
 				}
 
-				@include bem.modifier('pad-b') {
+				@include bem.modifier("pad-b") {
 					padding-block: props.get($pad-b);
 				}
 			}
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index 094046f..09ef165 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -1,39 +1,36 @@
-@use 'pkg:iro-sass/src/functions' as fn;
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@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;
 $fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default;
-$fixed:     props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
+$fixed: props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
 
 $fixed-sizes: (
-	'fixed-200': $fixed-200,
-	'fixed-150': $fixed-150,
-	'fixed':     $fixed
+	"fixed-200": $fixed-200,
+	"fixed-150": $fixed-150,
+	"fixed": $fixed,
 ) !default;
 
 $pad-i: props.def(--l-container--pad-i, props.get(core.$size--600)) !default;
 $pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default;
 
-$pad-i--md: props.def(--l-container--pad-i, props.get(core.$size--400), 'md') !default;
-$pad-b--md: props.def(--l-container--pad-b, props.get(core.$size--700), 'md') !default;
+$pad-i--md: props.def(--l-container--pad-i, props.get(core.$size--400), "md") !default;
+$pad-b--md: props.def(--l-container--pad-b, props.get(core.$size--700), "md") !default;
 
-$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), 'sm') !default;
-$pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), 'sm') !default;
+$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), "sm") !default;
+$pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), "sm") !default;
 
-$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), 'xs') !default;
-$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), 'xs') !default;
+$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), "xs") !default;
+$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), "xs") !default;
 
 $sm--pad-i: props.def(--l-container--sm--pad-i, props.get(core.$size--300)) !default;
 $sm--pad-b: props.def(--l-container--sm--pad-b, props.get(core.$size--800)) !default;
 
-$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), 'sm') !default;
-$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), 'sm') !default;
+$sm--pad-i--sm: props.def(--l-container--sm--pad-i, props.get(core.$size--200), "sm") !default;
+$sm--pad-b--sm: props.def(--l-container--sm--pad-b, props.get(core.$size--600), "sm") !default;
 
-$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), 'xs') !default;
-$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), 'xs') !default;
+$sm--pad-i--xs: props.def(--l-container--sm--pad-i, props.get(core.$size--150), "xs") !default;
+$sm--pad-b--xs: props.def(--l-container--sm--pad-b, props.get(core.$size--450), "xs") !default;
 
-$sizes: (
-	'sm' $sm--pad-i $sm--pad-b,
-	'md' $sm--pad-i $sm--pad-b,
-) !default;
+$sizes: ("sm" $sm--pad-i $sm--pad-b, "md" $sm--pad-i $sm--pad-b) !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index ea0b268..70d29f9 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,18 +1,18 @@
-@use 'pkg:iro-sass/src/bem';
+@use "pkg:iro-sass/bem";
 
 @mixin styles {
-	@include bem.layout('flex') {
+	@include bem.layout("flex") {
 		display: flex;
 
-		@include bem.modifier('column') {
+		@include bem.modifier("column") {
 			flex-direction: column;
 		}
 
-		@include bem.modifier('wrap') {
+		@include bem.modifier("wrap") {
 			flex-wrap: wrap;
 		}
 
-		@include bem.modifier('wrap-reverse') {
+		@include bem.modifier("wrap-reverse") {
 			flex-wrap: wrap-reverse;
 		}
 	}
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index f094cbc..f71e469 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,57 +1,57 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'form.vars';
-@use 'form.vars' as vars;
+@forward "form.vars";
+@use "form.vars" as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables("vars"));
 
-	@include bem.layout('form') {
-		display:        flex;
+	@include bem.layout("form") {
+		display: flex;
 		flex-direction: column;
-		gap:            props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
+		gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
 
-		@include bem.elem('item') {
+		@include bem.elem("item") {
 			display: block;
 		}
 
-		@include bem.elem('item-content') {
-			@include bem.modifier('align-start') {
+		@include bem.elem("item-content") {
+			@include bem.modifier("align-start") {
 				align-self: start;
 			}
 		}
 
-		@include bem.modifier('row') {
+		@include bem.modifier("row") {
 			flex-direction: row;
-			align-items:    flex-end;
+			align-items: flex-end;
 		}
 
-		@include bem.modifier('labels-start', 'labels-end') {
-			display:               grid;
-			grid-template-rows:    auto;
+		@include bem.modifier("labels-start", "labels-end") {
+			display: grid;
+			grid-template-rows: auto;
 			grid-template-columns: auto 1fr;
-			align-items:           baseline;
+			align-items: baseline;
 
-			@include bem.elem('item') {
+			@include bem.elem("item") {
 				display: contents;
 			}
 
-			@include bem.elem('item-label') {
-				grid-column:        1;
+			@include bem.elem("item-label") {
+				grid-column: 1;
 				padding-inline-end: 0;
 			}
 
-			@include bem.elem('item-content') {
-				grid-column:        2;
+			@include bem.elem("item-content") {
+				grid-column: 2;
 				margin-block-start: 0;
 			}
 		}
 
-		@include bem.modifier('labels-end') {
-			@include bem.elem('item-label') {
+		@include bem.modifier("labels-end") {
+			@include bem.elem("item-label") {
 				text-align: end;
 			}
 		}
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss
index 52670cc..68cb23a 100644
--- a/src/layouts/_form.vars.scss
+++ b/src/layouts/_form.vars.scss
@@ -1,5 +1,5 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@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;
+$item-spacing-b: props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default;
 $label-spacing-i: props.def(--l-form--label-spacing-i, props.get(core.$size--325)) !default;
diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss
index 32b3097..00787db 100644
--- a/src/layouts/_hlist.scss
+++ b/src/layouts/_hlist.scss
@@ -1,30 +1,30 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'hlist.vars';
-@use 'hlist.vars' as vars;
-@use '../objects/button.vars' as button;
+@forward "hlist.vars";
+@use "hlist.vars" as vars;
+@use "../objects/button.vars" as button;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables("vars"));
 
-	@include bem.layout('hlist') {
-		display:   inline-flex;
+	@include bem.layout("hlist") {
+		display: inline-flex;
 		flex-wrap: wrap;
-		gap:       props.get(vars.$gap);
+		gap: props.get(vars.$gap);
 
 		@each $mod, $size in vars.$sizes {
 			@include bem.modifier($mod) {
 				gap: props.get($size);
 
-				@include bem.modifier('separated') {
-					@include bem.elem('item') {
+				@include bem.modifier("separated") {
+					@include bem.elem("item") {
 						@include bem.next-twin-elem {
 							&::before {
-								content: '·';
-								margin-inline: calc(.65 * props.get($size));
+								content: "·";
+								margin-inline: calc(0.65 * props.get($size));
 							}
 						}
 					}
@@ -32,40 +32,51 @@
 			}
 		}
 
-		@include bem.modifier('separated') {
+		@include bem.modifier("separated") {
 			gap: 0;
 
-			@include bem.elem('item') {
+			@include bem.elem("item") {
 				@include bem.next-twin-elem {
 					&::before {
-						content: '·';
-						margin-inline: calc(.65 * props.get(vars.$gap));
+						content: "·";
+						margin-inline: calc(0.65 * props.get(vars.$gap));
 					}
 				}
 			}
 		}
 
-		@include bem.modifier('buttons') {
+		@include bem.modifier("buttons") {
 			margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
 
-			@include bem.modifier('pill') {
-				margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
+			@include bem.modifier("pill") {
+				margin-inline: calc(
+					-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)
+				);
 			}
 
-			@include bem.modifier('icon') {
-				margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+			@include bem.modifier("icon") {
+				margin-inline: calc(
+					-1 * props.get(button.$pad-b) - props.get(button.$border-width) - 0.5em *
+						(props.get(button.$line-height) - 1)
+				);
 			}
 
-			@each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
-				@include bem.modifier('buttons-#{$mod}') {
+			@each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes
+			{
+				@include bem.modifier("buttons-#{$mod}") {
 					margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
 
-					@include bem.modifier('pill') {
-						margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
+					@include bem.modifier("pill") {
+						margin-inline: calc(
+							-1 * props.get($pad-i-pill) - props.get(button.$border-width)
+						);
 					}
 
-					@include bem.modifier('icon') {
-						margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+					@include bem.modifier("icon") {
+						margin-inline: calc(
+							-1 * props.get($pad-b) - props.get(button.$border-width) - 0.5em *
+								(props.get(button.$line-height) - 1)
+						);
 					}
 				}
 			}
diff --git a/src/layouts/_hlist.vars.scss b/src/layouts/_hlist.vars.scss
index 2d99057..557cfae 100644
--- a/src/layouts/_hlist.vars.scss
+++ b/src/layouts/_hlist.vars.scss
@@ -1,16 +1,16 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 $gap: props.def(--l-hlist--gap, props.get(core.$size--150)) !default;
 
 $gapless: props.def(--l-hlist--gapless, 0) !default;
-$sm:      props.def(--l-hlist--sm, props.get(core.$size--100)) !default;
-$lg:      props.def(--l-hlist--lg, props.get(core.$size--300)) !default;
-$xl:      props.def(--l-hlist--xl, props.get(core.$size--450)) !default;
+$sm: props.def(--l-hlist--sm, props.get(core.$size--100)) !default;
+$lg: props.def(--l-hlist--lg, props.get(core.$size--300)) !default;
+$xl: props.def(--l-hlist--xl, props.get(core.$size--450)) !default;
 
 $sizes: (
-	'gapless': $gapless,
-	'sm':      $sm,
-	'lg':      $lg,
-	'xl':      $xl,
+	"gapless": $gapless,
+	"sm": $sm,
+	"lg": $lg,
+	"xl": $xl,
 ) !default;
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 4492ea9..b6732bf 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -1,17 +1,17 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'media.vars';
-@use 'media.vars' as vars;
+@forward "media.vars";
+@use "media.vars" as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables("vars"));
 
-	@include bem.layout('media') {
-		display:     flex;
-		gap:         props.get(vars.$gap);
+	@include bem.layout("media") {
+		display: flex;
+		gap: props.get(vars.$gap);
 		align-items: center;
 		line-height: 1.4;
 
@@ -21,19 +21,19 @@
 			}
 		}
 
-		@include bem.modifier('wrap') {
+		@include bem.modifier("wrap") {
 			flex-wrap: wrap;
 		}
 
-		@include bem.elem('block') {
+		@include bem.elem("block") {
 			flex: 0 0 auto;
 
-			@include bem.modifier('shrink', 'main') {
-				flex-shrink:     1;
+			@include bem.modifier("shrink", "main") {
+				flex-shrink: 1;
 				min-inline-size: 0;
 			}
 
-			@include bem.modifier('main') {
+			@include bem.modifier("main") {
 				inline-size: 100%;
 			}
 		}
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index 78e157f..f24ea2a 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -1,16 +1,16 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
-$gap:  props.def(--l-media--gap, props.get(core.$size--150)) !default;
+$gap: props.def(--l-media--gap, props.get(core.$size--150)) !default;
 
 $gapless: props.def(--l-media--gapless, 0) !default;
-$sm:      props.def(--l-media--sm, props.get(core.$size--100)) !default;
-$lg:      props.def(--l-media--lg, props.get(core.$size--300)) !default;
-$xl:      props.def(--l-media--xl, props.get(core.$size--450)) !default;
+$sm: props.def(--l-media--sm, props.get(core.$size--100)) !default;
+$lg: props.def(--l-media--lg, props.get(core.$size--300)) !default;
+$xl: props.def(--l-media--xl, props.get(core.$size--450)) !default;
 
 $sizes: (
-	'gapless': $gapless,
-	'sm':      $sm,
-	'lg':      $lg,
-	'xl':      $xl,
+	"gapless": $gapless,
+	"sm": $sm,
+	"lg": $lg,
+	"xl": $xl,
 ) !default;
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index ab983b9..57e2512 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -1,10 +1,10 @@
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 @mixin styles {
-	@include bem.layout('overflow') {
-		overflow:        auto;
+	@include bem.layout("overflow") {
+		overflow: auto;
 		scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
 	}
 }
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index ea651c7..1bffddd 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -1,101 +1,110 @@
-@use 'sass:meta';
-@use 'pkg:include-media/dist/include-media' as media;
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:meta";
+@use "pkg:include-media/dist/include-media" as media;
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'split-view.vars';
-@use 'split-view.vars' as vars;
+@forward "split-view.vars";
+@use "split-view.vars" as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables("vars"));
 
-	@include bem.layout('split-view') {
-		display:     flex;
-		gap:         props.get(vars.$col-gap);
+	@include bem.layout("split-view") {
+		display: flex;
+		gap: props.get(vars.$col-gap);
 		align-items: start;
 
-		@include bem.elem('panel') {
-			flex:            1 1 auto;
-			inline-size:     100%;
+		@include bem.elem("panel") {
+			flex: 1 1 auto;
+			inline-size: 100%;
 			min-inline-size: 0;
 
 			&::before {
-				display:       block;
-				margin-block:  -100em 100em;
-				content:       '';
+				display: block;
+				margin-block: -100em 100em;
+				content: "";
 			}
 
-			@include bem.modifier('side-25') {
-				flex:        0 0 auto;
+			@include bem.modifier("side-25") {
+				flex: 0 0 auto;
 				inline-size: 25%;
 			}
 
-			@include bem.modifier('min-50') {
+			@include bem.modifier("min-50") {
 				min-inline-size: props.get(vars.$panel--min-50);
 			}
 
-			@include bem.modifier('min-100') {
+			@include bem.modifier("min-100") {
 				min-inline-size: props.get(vars.$panel--min-100);
 			}
 
-			@include bem.modifier('min-200') {
+			@include bem.modifier("min-200") {
 				min-inline-size: props.get(vars.$panel--min-200);
 			}
 
-			@include bem.modifier('sticky') {
-				position:          sticky;
+			@include bem.modifier("sticky") {
+				position: sticky;
 				inset-block-start: props.get(vars.$panel--sticky-offset);
 			}
 		}
 
-		@include bem.modifier('gapless') {
+		@include bem.modifier("gapless") {
 			gap: props.get(vars.$gapless);
 
-			@include bem.elem('panel') {
-				@include bem.modifier('min-50') {
-					min-inline-size: calc(props.get(vars.$panel--min-50) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+			@include bem.elem("panel") {
+				@include bem.modifier("min-50") {
+					min-inline-size: calc(
+						props.get(vars.$panel--min-50) +
+							props.get(vars.$col-gap) - props.get(vars.$gapless)
+					);
 				}
 
-				@include bem.modifier('min-100') {
-					min-inline-size: calc(props.get(vars.$panel--min-100) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+				@include bem.modifier("min-100") {
+					min-inline-size: calc(
+						props.get(vars.$panel--min-100) +
+							props.get(vars.$col-gap) - props.get(vars.$gapless)
+					);
 				}
 
-				@include bem.modifier('min-200') {
-					min-inline-size: calc(props.get(vars.$panel--min-200) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+				@include bem.modifier("min-200") {
+					min-inline-size: calc(
+						props.get(vars.$panel--min-200) +
+							props.get(vars.$col-gap) - props.get(vars.$gapless)
+					);
 				}
 			}
 		}
 
-		@include bem.elem('content') {
+		@include bem.elem("content") {
 			inline-size: 100%;
 		}
 
-		@include media.media('<=md') {
+		@include media.media("<=md") {
 			flex-direction: column;
-			gap:            props.get(vars.$row-gap);
-			align-items:    stretch;
+			gap: props.get(vars.$row-gap);
+			align-items: stretch;
 
-			@include bem.modifier('gapless') {
+			@include bem.modifier("gapless") {
 				gap: props.get(vars.$gapless);
 			}
 
-			@include bem.modifier('wrap-reverse') {
+			@include bem.modifier("wrap-reverse") {
 				flex-direction: column-reverse;
 			}
 
-			@include bem.elem('panel') {
+			@include bem.elem("panel") {
 				inline-size: auto;
 
-				@include bem.modifier('side-25') {
+				@include bem.modifier("side-25") {
 					inline-size: auto;
 				}
 
-				@include bem.modifier('min-50', 'min-100', 'min-200') {
+				@include bem.modifier("min-50", "min-100", "min-200") {
 					min-inline-size: 0;
 				}
 
-				@include bem.modifier('sticky') {
+				@include bem.modifier("sticky") {
 					position: static;
 				}
 			}
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
index b2944e7..9b6dd21 100644
--- a/src/layouts/_split-view.vars.scss
+++ b/src/layouts/_split-view.vars.scss
@@ -1,13 +1,16 @@
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@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;
-$row-gap:  props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
+$col-gap: props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
+$row-gap: props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
 
 $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;
 
-$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;
+$panel--sticky-offset: props.def(
+	--l-split-view--panel--sticky-offset,
+	props.get(core.$sticky-top-offset)
+) !default;
-- 
cgit v1.3.1