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/objects/_navbar.scss | 247 ++++++++++++++++++++++++++++-------------------
 1 file changed, 146 insertions(+), 101 deletions(-)

(limited to 'src/objects/_navbar.scss')

diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index cc1eaaa..4b678e0 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -1,151 +1,197 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'navbar.vars';
-@use 'navbar.vars' as vars;
+@forward "navbar.vars";
+@use "navbar.vars" as vars;
 
 @mixin -apply-theme($theme, $key: ()) {
-	@include bem.elem('item-label') {
+	@include bem.elem("item-label") {
 		color: props.get($theme, list.join($key, --disabled --label-color)...);
 	}
 
-	@include bem.elem('item-content') {
+	@include bem.elem("item-content") {
 		color: props.get($theme, list.join($key, --disabled --text-color)...);
 
 		&::after {
-			outline: props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width);
-			box-shadow:
-				0
-				0
-				0
-				calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+			outline: props.get($theme, list.join($key, --key-focus --border)...) solid
+				props.get(vars.$key-focus--border-width);
+			box-shadow: 0 0 0
+				calc(
+					props.get(vars.$key-focus--border-width) +
+						props.get(vars.$key-focus--outline-width)
+				)
 				props.get($theme, list.join($key, --key-focus --outline)...);
 		}
 	}
 
-	@include bem.elem('item') {
+	@include bem.elem("item") {
 		&:link,
 		&:visited,
 		&:enabled {
-			@include bem.elem('item-label') {
+			@include bem.elem("item-label") {
 				color: props.get($theme, list.join($key, --label-color)...);
 			}
 
-			@include bem.elem('item-content') {
+			@include bem.elem("item-content") {
 				color: props.get($theme, list.join($key, --text-color)...);
 			}
 
 			&:hover,
 			&:focus-visible {
-				@include bem.elem('item-label') {
+				@include bem.elem("item-label") {
 					color: props.get($theme, list.join($key, --hover --label-color)...);
 				}
 
-				@include bem.elem('item-content') {
-					color:            props.get($theme, list.join($key, --hover --text-color)...);
+				@include bem.elem("item-content") {
+					color: props.get($theme, list.join($key, --hover --text-color)...);
 					background-color: props.get($theme, list.join($key, --hover --bg-color)...);
 				}
 			}
 
 			&:focus-visible {
-				@include bem.elem('item-label') {
+				@include bem.elem("item-label") {
 					color: props.get($theme, list.join($key, --key-focus --label)...);
 				}
 			}
 
 			&:active {
-				@include bem.elem('item-label') {
+				@include bem.elem("item-label") {
 					color: props.get($theme, list.join($key, --active --label-color)...);
 				}
 
-				@include bem.elem('item-content') {
-					color:            props.get($theme, list.join($key, --active --text-color)...);
+				@include bem.elem("item-content") {
+					color: props.get($theme, list.join($key, --active --text-color)...);
 					background-color: props.get($theme, list.join($key, --active --bg-color)...);
 				}
 			}
 		}
 
-		@include bem.is('selected') {
-			@include bem.elem('item-label') {
+		@include bem.is("selected") {
+			@include bem.elem("item-label") {
 				color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
 			}
 
-			@include bem.elem('item-content') {
-				color:            props.get($theme, list.join($key, --selected --disabled --text-color)...);
-				background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
+			@include bem.elem("item-content") {
+				color: props.get($theme, list.join($key, --selected --disabled --text-color)...);
+				background-color: props.get(
+					$theme,
+					list.join($key, --selected --disabled --bg-color)...
+				);
 			}
 
 			&:link,
 			&:visited,
 			&:enabled {
-				@include bem.elem('item-label') {
+				@include bem.elem("item-label") {
 					color: props.get($theme, list.join($key, --selected --label-color)...);
 				}
 
-				@include bem.elem('item-content') {
-					color:            props.get($theme, list.join($key, --selected --text-color)...);
+				@include bem.elem("item-content") {
+					color: props.get($theme, list.join($key, --selected --text-color)...);
 					background-color: props.get($theme, list.join($key, --selected --bg-color)...);
 				}
 
 				&:hover,
 				&:focus-visible {
-					@include bem.elem('item-label') {
-						color: props.get($theme, list.join($key, --selected --hover --label-color)...);
+					@include bem.elem("item-label") {
+						color: props.get(
+							$theme,
+							list.join($key, --selected --hover --label-color)...
+						);
 					}
 
-					@include bem.elem('item-content') {
-						color:            props.get($theme, list.join($key, --selected --hover --text-color)...);
-						background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
+					@include bem.elem("item-content") {
+						color: props.get(
+							$theme,
+							list.join($key, --selected --hover --text-color)...
+						);
+						background-color: props.get(
+							$theme,
+							list.join($key, --selected --hover --bg-color)...
+						);
 					}
 				}
 
 				&:active {
-					@include bem.elem('item-label') {
-						color: props.get($theme, list.join($key, --selected --active --label-color)...);
+					@include bem.elem("item-label") {
+						color: props.get(
+							$theme,
+							list.join($key, --selected --active --label-color)...
+						);
 					}
 
-					@include bem.elem('item-content') {
-						color:            props.get($theme, list.join($key, --selected --active --text-color)...);
-						background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
+					@include bem.elem("item-content") {
+						color: props.get(
+							$theme,
+							list.join($key, --selected --active --text-color)...
+						);
+						background-color: props.get(
+							$theme,
+							list.join($key, --selected --active --bg-color)...
+						);
 					}
 				}
 			}
 		}
 	}
 
-	@include bem.modifier('quiet') {
-		@include bem.elem('item') {
-			@include bem.is('selected') {
-				@include bem.elem('item-content') {
-					color:            props.get($theme, list.join($key, --quiet --selected --disabled --text-color)...);
-					background-color: props.get($theme, list.join($key, --quiet --selected --disabled --bg-color)...);
+	@include bem.modifier("quiet") {
+		@include bem.elem("item") {
+			@include bem.is("selected") {
+				@include bem.elem("item-content") {
+					color: props.get(
+						$theme,
+						list.join($key, --quiet --selected --disabled --text-color)...
+					);
+					background-color: props.get(
+						$theme,
+						list.join($key, --quiet --selected --disabled --bg-color)...
+					);
 				}
 
 				&:link,
 				&:visited,
 				&:enabled {
-					@include bem.elem('item-content') {
-						color:            props.get($theme, list.join($key, --quiet --selected --text-color)...);
-						background-color: props.get($theme, list.join($key, --quiet --selected --bg-color)...);
+					@include bem.elem("item-content") {
+						color: props.get(
+							$theme,
+							list.join($key, --quiet --selected --text-color)...
+						);
+						background-color: props.get(
+							$theme,
+							list.join($key, --quiet --selected --bg-color)...
+						);
 					}
 
 					&:hover,
 					&:focus-visible {
-						@include bem.elem('item-content') {
-							color:            props.get($theme, list.join($key, --quiet --selected --hover --text-color)...);
-							background-color: props.get($theme, list.join($key, --quiet --selected --hover --bg-color)...);
+						@include bem.elem("item-content") {
+							color: props.get(
+								$theme,
+								list.join($key, --quiet --selected --hover --text-color)...
+							);
+							background-color: props.get(
+								$theme,
+								list.join($key, --quiet --selected --hover --bg-color)...
+							);
 						}
 					}
 
 					&:active {
-						@include bem.elem('item-content') {
-							color:            props.get($theme, list.join($key, --quiet --selected --active --text-color)...);
-							background-color: props.get($theme, list.join($key, --quiet --selected --active --bg-color)...);
+						@include bem.elem("item-content") {
+							color: props.get(
+								$theme,
+								list.join($key, --quiet --selected --active --text-color)...
+							);
+							background-color: props.get(
+								$theme,
+								list.join($key, --quiet --selected --active --bg-color)...
+							);
 						}
 					}
 				}
@@ -155,64 +201,64 @@
 }
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables("vars"));
 
-	@include bem.object('navbar') {
-		display:    flex;
+	@include bem.object("navbar") {
+		display: flex;
 		block-size: props.get(vars.$block-size);
 
-		@include bem.elem('item-label') {
-			order:              2;
+		@include bem.elem("item-label") {
+			order: 2;
 			margin-block-start: props.get(vars.$item--pad-b-icon);
-			font-size:          props.get(vars.$item--label-font-size);
-			font-weight:        bold;
+			font-size: props.get(vars.$item--label-font-size);
+			font-weight: bold;
 
-			@include bem.next-elem('item-content') {
-				padding-block:  props.get(vars.$item--pad-b-icon);
+			@include bem.next-elem("item-content") {
+				padding-block: props.get(vars.$item--pad-b-icon);
 				padding-inline: props.get(vars.$item--pad-i-icon);
-				font-size:      props.get(vars.$item--icon-size);
+				font-size: props.get(vars.$item--icon-size);
 			}
 		}
 
-		@include bem.elem('item-content-text') {
+		@include bem.elem("item-content-text") {
 			margin-inline: props.get(vars.$item--pad-i-label);
 		}
 
-		@include bem.elem('item-content') {
-			position:        relative;
-			order:           1;
-			padding-block:   props.get(vars.$item--pad-b);
-			padding-inline:  props.get(vars.$item--pad-i);
-			font-size:       props.get(vars.$item--font-size);
-			white-space:     nowrap;
-			border-radius:   100em;
+		@include bem.elem("item-content") {
+			position: relative;
+			order: 1;
+			padding-block: props.get(vars.$item--pad-b);
+			padding-inline: props.get(vars.$item--pad-i);
+			font-size: props.get(vars.$item--font-size);
+			white-space: nowrap;
+			border-radius: 100em;
 
 			&::after {
-				position:       absolute;
-				inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
-				z-index:        -10;
-				display:        block;
-				visibility:     hidden;
+				position: absolute;
+				inset: calc(-1 * props.get(vars.$key-focus--border-offset));
+				z-index: -10;
+				display: block;
+				visibility: hidden;
 				pointer-events: none;
-				content:        '';
-				border-radius:  100em;
+				content: "";
+				border-radius: 100em;
 			}
 		}
 
-		@include bem.elem('item') {
-			display:         flex;
-			flex-direction:  column;
-			align-items:     center;
+		@include bem.elem("item") {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
 			justify-content: center;
-			inline-size:     100%;
-			padding-inline:  calc(.5 * props.get(vars.$spacing));
-			font-weight:     500;
+			inline-size: 100%;
+			padding-inline: calc(0.5 * props.get(vars.$spacing));
+			font-weight: 500;
 
 			&:link,
 			&:visited,
 			&:enabled {
 				&:focus-visible {
-					@include bem.elem('item-content') {
+					@include bem.elem("item-content") {
 						&::after {
 							visibility: visible;
 						}
@@ -220,7 +266,7 @@
 				}
 			}
 
-			@include bem.is('selected') {
+			@include bem.is("selected") {
 				font-weight: bold;
 			}
 		}
@@ -233,22 +279,21 @@
 			}
 		}
 
-		@include bem.modifier('hide-unselected') {
-			@include bem.elem('item') {
+		@include bem.modifier("hide-unselected") {
+			@include bem.elem("item") {
 				display: none;
 
-				@include bem.is('selected') {
+				@include bem.is("selected") {
 					display: flex;
 				}
 			}
 		}
 
-		@include bem.modifier('adapt') {
+		@include bem.modifier("adapt") {
 			block-size: 100%;
 		}
 
-
-		@include bem.modifier('align-block') {
+		@include bem.modifier("align-block") {
 			margin-inline: calc(-1 * props.get(vars.$item--pad-i));
 		}
 	}
-- 
cgit v1.3.1