@marianmeres/stuic 3.66.0 → 3.67.0

package/dist/components/Input/FieldObject.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { Snippet } from "svelte";
 import type { ValidateOptions } from "../../actions/validate.svelte.js";
 import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends Record<string, any> {
+export interface Props extends InputWrapClassProps, Record<string, any> {
     value: string;
     name: string;
     label?: SnippetWithId | THC;
@@ -21,12 +22,6 @@ export interface Props extends Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     style?: string;
     onChange?: (value: string) => void;
 }

package/dist/components/Input/FieldOptions.svelte

@@ -24,6 +24,7 @@
 	import InputWrap from "./_internal/InputWrap.svelte";
 	import FieldLikeButton from "./FieldLikeButton.svelte";
 	import ListItemButton from "../ListItemButton/ListItemButton.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 
 	export interface Option {
 		label: string;
@@ -32,7 +33,7 @@
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends Record<string, any> {
+	export interface Props extends InputWrapClassProps, Record<string, any> {
 		trigger?: Snippet<[{ value: string; modal: ModalDialog }]>;
 		modal?: ModalDialog;
 		input?: HTMLInputElement;
@@ -53,13 +54,8 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
+		/** Classes for the inner FieldLikeButton element */
 		classInput?: string;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		classOption?: string;
 		classOptionActive?: string;
 		classOptgroup?: string;
@@ -154,8 +150,11 @@
 		classLabelBox,
 		classInputBox,
 		classInputBoxWrap,
+		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		//
 		classOption,
 		classOptionActive,
@@ -524,8 +523,11 @@
 			{classLabelBox}
 			{classInputBox}
 			{classInputBoxWrap}
+			{classInputBoxWrapInvalid}
 			{classDescBox}
+			{classDescBoxToggle}
 			{classBelowBox}
+			{classValidationBox}
 			{style}
 			validate={wrappedValidate}
 			{required}

package/dist/components/Input/FieldOptions.svelte.d.ts

@@ -5,6 +5,7 @@ import type { TranslateFn } from "../../types.js";
 import { ModalDialog } from "../ModalDialog/index.js";
 import { NotificationsStack } from "../Notifications/index.js";
 import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 export interface Option {
     label: string;
     value: any;
@@ -12,7 +13,7 @@ export interface Option {
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends Record<string, any> {
+export interface Props extends InputWrapClassProps, Record<string, any> {
     trigger?: Snippet<[{
         value: string;
         modal: ModalDialog;
@@ -36,13 +37,8 @@ export interface Props extends Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
+    /** Classes for the inner FieldLikeButton element */
     classInput?: string;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     classOption?: string;
     classOptionActive?: string;
     classOptgroup?: string;

package/dist/components/Input/FieldPhoneNumber.svelte

@@ -3,10 +3,11 @@
 	import type { ValidateOptions } from "../../actions/validate.svelte.js";
 	import type { TranslateFn } from "../../types.js";
 	import type { THC } from "../Thc/Thc.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends Record<string, any> {
+	export interface Props extends InputWrapClassProps, Record<string, any> {
 		input?: HTMLInputElement;
 		/** Full phone number string, e.g. "+421905123456". Bindable. */
 		value?: string;
@@ -46,14 +47,8 @@
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
 		//
+		/** Classes for the tel <input> element */
 		classInput?: string;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classInputBoxWrapInvalid?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		classPrefixTrigger?: string;
 		classPrefixDropdown?: string;
 		style?: string;
@@ -121,7 +116,9 @@
 		classInputBoxWrap,
 		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		classPrefixTrigger,
 		classPrefixDropdown,
 		style,
@@ -283,7 +280,9 @@
 	{classInputBoxWrap}
 	{classInputBoxWrapInvalid}
 	{classDescBox}
+	{classDescBoxToggle}
 	{classBelowBox}
+	{classValidationBox}
 	{validation}
 	{style}
 >

package/dist/components/Input/FieldPhoneNumber.svelte.d.ts

@@ -2,10 +2,11 @@ import type { Snippet } from "svelte";
 import type { ValidateOptions } from "../../actions/validate.svelte.js";
 import type { TranslateFn } from "../../types.js";
 import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends Record<string, any> {
+export interface Props extends InputWrapClassProps, Record<string, any> {
     input?: HTMLInputElement;
     /** Full phone number string, e.g. "+421905123456". Bindable. */
     value?: string;
@@ -43,14 +44,8 @@ export interface Props extends Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
+    /** Classes for the tel <input> element */
     classInput?: string;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classInputBoxWrapInvalid?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     classPrefixTrigger?: string;
     classPrefixDropdown?: string;
     style?: string;

package/dist/components/Input/FieldSelect.svelte

@@ -3,11 +3,11 @@
 	import type { HTMLSelectAttributes } from "svelte/elements";
 	import type { ValidateOptions } from "../../actions/validate.svelte.js";
 	import type { THC } from "../Thc/Thc.svelte";
-	import type { FieldSelectOption } from "./types.js";
+	import type { FieldSelectOption, InputWrapClassProps } from "./types.js";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends HTMLSelectAttributes {
+	export interface Props extends HTMLSelectAttributes, InputWrapClassProps {
 		input?: HTMLSelectElement;
 		value?: string | number;
 		label?: SnippetWithId | THC;
@@ -28,13 +28,8 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
+		/** Classes for the <select> element */
 		classInput?: string;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		style?: string;
 	}
 </script>
@@ -82,8 +77,11 @@
 		classLabelBox,
 		classInputBox,
 		classInputBoxWrap,
+		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		style,
 		//
 		...rest
@@ -128,8 +126,11 @@
 	{classLabelBox}
 	{classInputBox}
 	{classInputBoxWrap}
+	{classInputBoxWrapInvalid}
 	{classDescBox}
+	{classDescBoxToggle}
 	{classBelowBox}
+	{classValidationBox}
 	{validation}
 	{style}
 >

package/dist/components/Input/FieldSelect.svelte.d.ts

@@ -2,11 +2,11 @@ import type { Snippet } from "svelte";
 import type { HTMLSelectAttributes } from "svelte/elements";
 import type { ValidateOptions } from "../../actions/validate.svelte.js";
 import type { THC } from "../Thc/Thc.svelte";
-import type { FieldSelectOption } from "./types.js";
+import type { FieldSelectOption, InputWrapClassProps } from "./types.js";
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends HTMLSelectAttributes {
+export interface Props extends HTMLSelectAttributes, InputWrapClassProps {
     input?: HTMLSelectElement;
     value?: string | number;
     label?: SnippetWithId | THC;
@@ -27,13 +27,8 @@ export interface Props extends HTMLSelectAttributes {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
+    /** Classes for the <select> element */
     classInput?: string;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     style?: string;
 }
 declare const FieldSelect: import("svelte").Component<Props, {}, "value" | "input">;

package/dist/components/Input/FieldSwitch.svelte

@@ -2,10 +2,11 @@
 	import type { Snippet } from "svelte";
 	import type { ValidateOptions } from "../../actions/validate.svelte.js";
 	import type { THC } from "../Thc/Thc.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends Record<string, any> {
+	export interface Props extends InputWrapClassProps, Record<string, any> {
 		input?: HTMLInputElement;
 		checked?: boolean;
 		label?: SnippetWithId | THC;
@@ -27,13 +28,8 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
+		/** Classes for the underlying <Switch> element */
 		classInput?: string;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		style?: string;
 		renderValue?: (rawValue: any) => string;
 	}
@@ -79,8 +75,11 @@
 		classLabelBox,
 		classInputBox,
 		classInputBoxWrap,
+		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		style = "",
 		//
 		renderValue,
@@ -111,8 +110,11 @@
 	{classLabel}
 	{classLabelBox}
 	{classInputBox}
+	{classInputBoxWrapInvalid}
 	{classDescBox}
+	{classDescBoxToggle}
 	{classBelowBox}
+	{classValidationBox}
 	{validation}
 	classInputBoxWrap={twMerge("input-wrap-transparent", classInputBoxWrap)}
 	{style}

package/dist/components/Input/FieldSwitch.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { Snippet } from "svelte";
 import type { ValidateOptions } from "../../actions/validate.svelte.js";
 import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends Record<string, any> {
+export interface Props extends InputWrapClassProps, Record<string, any> {
     input?: HTMLInputElement;
     checked?: boolean;
     label?: SnippetWithId | THC;
@@ -26,13 +27,8 @@ export interface Props extends Record<string, any> {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
+    /** Classes for the underlying <Switch> element */
     classInput?: string;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     style?: string;
     renderValue?: (rawValue: any) => string;
 }

package/dist/components/Input/FieldTextarea.svelte

@@ -3,10 +3,11 @@
 	import type { HTMLTextareaAttributes } from "svelte/elements";
 	import type { ValidateOptions } from "../../actions/validate.svelte.js";
 	import type { THC } from "../Thc/Thc.svelte";
+	import type { InputWrapClassProps } from "./types.js";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	export interface Props extends HTMLTextareaAttributes {
+	export interface Props extends HTMLTextareaAttributes, InputWrapClassProps {
 		input?: HTMLTextAreaElement;
 		value?: string;
 		label?: SnippetWithId | THC;
@@ -28,14 +29,8 @@
 		labelLeft?: boolean;
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
+		/** Classes for the <textarea> element */
 		classInput?: string;
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classInputBoxWrapInvalid?: string;
-		classDescBox?: string;
-		classBelowBox?: string;
 		style?: string;
 	}
 </script>
@@ -85,7 +80,9 @@
 		classInputBoxWrap,
 		classInputBoxWrapInvalid,
 		classDescBox,
+		classDescBoxToggle,
 		classBelowBox,
+		classValidationBox,
 		style,
 		//
 		...rest
@@ -117,7 +114,9 @@
 	{classInputBoxWrap}
 	{classInputBoxWrapInvalid}
 	{classDescBox}
+	{classDescBoxToggle}
 	{classBelowBox}
+	{classValidationBox}
 	{validation}
 	{style}
 >

package/dist/components/Input/FieldTextarea.svelte.d.ts

@@ -2,10 +2,11 @@ import type { Snippet } from "svelte";
 import type { HTMLTextareaAttributes } from "svelte/elements";
 import type { ValidateOptions } from "../../actions/validate.svelte.js";
 import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-export interface Props extends HTMLTextareaAttributes {
+export interface Props extends HTMLTextareaAttributes, InputWrapClassProps {
     input?: HTMLTextAreaElement;
     value?: string;
     label?: SnippetWithId | THC;
@@ -30,14 +31,8 @@ export interface Props extends HTMLTextareaAttributes {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
+    /** Classes for the <textarea> element */
     classInput?: string;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classInputBoxWrapInvalid?: string;
-    classDescBox?: string;
-    classBelowBox?: string;
     style?: string;
 }
 declare const FieldTextarea: import("svelte").Component<Props, {}, "value" | "input">;

package/dist/components/Input/README.md

@@ -48,6 +48,26 @@ A comprehensive form input system with multiple field components, validation sup
 | `inputBelow`  | `Snippet \| THC` | Content below input                   |
 | `below`       | `Snippet \| THC` | Content below entire field            |
 
+## Shared wrapper class props (`InputWrapClassProps`)
+
+Every `Field*` component that uses the shared label/input/description scaffolding accepts **the same 9 class props**, exported as the `InputWrapClassProps` interface from `@marianmeres/stuic`. Each Field extends that interface in its own `Props`, so the shape stays in sync and new wrapper targets are added in one place.
+
+| Prop                        | Target                                                             |
+| --------------------------- | ------------------------------------------------------------------ |
+| `classLabel`                | `<label>` element                                                  |
+| `classLabelBox`             | Wrapper around the label area                                      |
+| `classInputBox`             | Wrapper around the whole input area                                |
+| `classInputBoxWrap`         | Inner input wrap (sibling to description/validation/below)         |
+| `classInputBoxWrapInvalid`  | Added to `classInputBoxWrap` when validation fails                 |
+| `classDescBox`              | Description/help text box                                          |
+| `classDescBoxToggle`        | Collapsible description's toggle button                            |
+| `classBelowBox`             | "Below" slot (rendered under the description)                      |
+| `classValidationBox`        | Validation message box                                             |
+
+Component-specific targets (e.g. `classInput` for the inner `<input>`/`<select>`/`<textarea>`, `classFileList` on `FieldFile`, `classOption`/`classOptgroup` on `FieldOptions`, `classPrefixTrigger` on `FieldPhoneNumber`, etc.) live on the component itself alongside these shared props.
+
+> `FieldCheckbox` and `FieldRadios` have bespoke inline layouts and don't use the shared wrapper — they declare only the class props relevant to their own layout.
+
 ## Usage
 
 ### Basic Text Input

package/dist/components/Input/_internal/InputWrap.svelte

@@ -5,10 +5,11 @@
 	import { twMerge } from "../../../utils/tw-merge.js";
 	import { Collapsible } from "../../Collapsible/index.js";
 	import Thc, { isTHCNotEmpty, type THC } from "../../Thc/Thc.svelte";
+	import type { InputWrapClassProps } from "../types.js";
 
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
-	interface Props {
+	interface Props extends InputWrapClassProps {
 		id: string;
 		size?: "sm" | "md" | "lg" | string;
 		class?: string;
@@ -28,15 +29,6 @@
 		labelLeftWidth?: "normal" | "wide";
 		labelLeftBreakpoint?: number;
 		//
-		classLabel?: string;
-		classLabelBox?: string;
-		classInputBox?: string;
-		classInputBoxWrap?: string;
-		classInputBoxWrapInvalid?: string;
-		classDescBox?: string;
-		classDescBoxToggle?: string;
-		classBelowBox?: string;
-		classValidationBox?: string;
 		descriptionCollapsible?: boolean;
 		descriptionDefaultExpanded?: boolean;
 		style?: string;

package/dist/components/Input/_internal/InputWrap.svelte.d.ts

@@ -1,10 +1,11 @@
 import type { Snippet } from "svelte";
 import type { ValidationResult } from "../../../actions/validate.svelte.js";
 import { type THC } from "../../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "../types.js";
 type SnippetWithId = Snippet<[{
     id: string;
 }]>;
-interface Props {
+interface Props extends InputWrapClassProps {
     id: string;
     size?: "sm" | "md" | "lg" | string;
     class?: string;
@@ -22,15 +23,6 @@ interface Props {
     labelLeft?: boolean;
     labelLeftWidth?: "normal" | "wide";
     labelLeftBreakpoint?: number;
-    classLabel?: string;
-    classLabelBox?: string;
-    classInputBox?: string;
-    classInputBoxWrap?: string;
-    classInputBoxWrapInvalid?: string;
-    classDescBox?: string;
-    classDescBoxToggle?: string;
-    classBelowBox?: string;
-    classValidationBox?: string;
     descriptionCollapsible?: boolean;
     descriptionDefaultExpanded?: boolean;
     style?: string;

package/dist/components/Input/types.d.ts

@@ -9,3 +9,31 @@ export interface FieldRadiosOption {
     value?: string;
     description?: THC;
 }
+/**
+ * Class props forwarded to the shared `InputWrap` scaffolding used by every
+ * `Field*` component that has a label/input/description layout.
+ *
+ * Field components extend this interface in their own `Props` so the class-prop
+ * shape stays consistent across the library. Component-specific class props
+ * (e.g. `classInput`, `classFileList`, `classOption`) live on the component itself.
+ */
+export interface InputWrapClassProps {
+    /** Classes for the <label> element */
+    classLabel?: string;
+    /** Classes for the wrapper around the label area */
+    classLabelBox?: string;
+    /** Classes for the wrapper around the input area (contains input + inputBefore/After/Below) */
+    classInputBox?: string;
+    /** Classes for the inner input wrap (sibling to description/validation/below) */
+    classInputBoxWrap?: string;
+    /** Extra classes applied to `classInputBoxWrap` when the field is invalid */
+    classInputBoxWrapInvalid?: string;
+    /** Classes for the description box (the subtle hint below the input) */
+    classDescBox?: string;
+    /** Classes for the description's collapsible toggle button */
+    classDescBoxToggle?: string;
+    /** Classes for the "below" slot — rendered under the description */
+    classBelowBox?: string;
+    /** Classes for the validation message box */
+    classValidationBox?: string;
+}

package/dist/components/Nav/Nav.svelte

@@ -11,9 +11,9 @@
 		id: string;
 		/** Display label (supports localization) */
 		label: MaybeLocalized;
-		/** Navigation URL (use href OR onClick, not both) */
+		/** Navigation URL. If both `href` and `onClick` are provided, `onClick` runs first (useful for analytics) and the browser then follows the href. */
 		href?: string;
-		/** Click handler (alternative to href) */
+		/** Click handler. Alternative to `href`, or runs before navigation if both are set. */
 		onClick?: () => void;
 		/** Icon content (THC for flexibility: string, html, component) */
 		icon?: THC;
@@ -603,7 +603,7 @@
 										class={twMerge(!unstyled && NAV_CHILDREN_CLASSES, classChildren)}
 										transition:slide={{ duration: transitionDuration }}
 									>
-										{#each item.children ?? [] as child}
+										{#each item.children ?? [] as child (child.id)}
 											{@render renderItem(child, depth + 1)}
 										{/each}
 									</ul>
@@ -627,6 +627,7 @@
 									data-expanding={!unstyled && isExpanding ? "" : undefined}
 									data-disabled={!unstyled && item.disabled ? "" : undefined}
 									data-touch-friendly={!unstyled && isTouchFriendly ? "" : undefined}
+									aria-current={active ? "page" : undefined}
 									aria-disabled={item.disabled}
 									tabindex={item.disabled ? -1 : 0}
 									use:tooltip={() => ({
@@ -691,7 +692,7 @@
 						</li>
 					{/snippet}
 
-					{#each group.items ?? [] as item}
+					{#each group.items ?? [] as item (item.id)}
 						{@render renderItem(item, 0)}
 					{/each}
 				</ul>

package/dist/components/Nav/Nav.svelte.d.ts

@@ -9,9 +9,9 @@ export interface NavItem {
     id: string;
     /** Display label (supports localization) */
     label: MaybeLocalized;
-    /** Navigation URL (use href OR onClick, not both) */
+    /** Navigation URL. If both `href` and `onClick` are provided, `onClick` runs first (useful for analytics) and the browser then follows the href. */
     href?: string;
-    /** Click handler (alternative to href) */
+    /** Click handler. Alternative to `href`, or runs before navigation if both are set. */
     onClick?: () => void;
     /** Icon content (THC for flexibility: string, html, component) */
     icon?: THC;

package/dist/components/Nav/README.md

@@ -48,8 +48,8 @@ interface NavGroup {
 	items?: NavItem[];
 	/** Group icon (optional) */
 	icon?: THC;
-	/** Whether the group starts collapsed */
-	defaultCollapsed?: boolean;
+	/** Whether the group starts expanded (default: false — groups are collapsed by default) */
+	defaultExpanded?: boolean;
 	/** Navigation URL for groups without items */
 	href?: string;
 	/** Click handler for groups without items */

package/dist/components/Nav/index.css

@@ -66,6 +66,10 @@
 	--stuic-nav-item-text-focus: var(--stuic-color-primary-foreground);
 }
 
+:root.dark {
+	--stuic-nav-item-bg-hover: rgb(255 255 255 / 0.08);
+}
+
 @layer components {
 	/* =============================================================================
 	   BASE CONTAINER