@marianmeres/stuic 3.0.0 → 3.0.2

package/dist/components/Input/index.css

@@ -68,464 +68,477 @@
 	--stuic-field-options-optgroup-text: var(--stuic-color-muted-foreground);
 }
 
-/* ============================================================================
-   BASE INPUT ELEMENT STYLES
-   Replaces @tailwindcss/forms plugin for input elements
-   ============================================================================ */
+@layer components {
+	/* ============================================================================
+	   BASE INPUT ELEMENT STYLES
+	   Replaces @tailwindcss/forms plugin for input elements
+	   ============================================================================ */
+
+	.stuic-input
+		input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
+			[type="file"]
+		),
+	.stuic-input textarea,
+	.stuic-input select {
+		/* Reset browser defaults */
+		appearance: none;
+		-webkit-appearance: none;
+
+		/* Layout */
+		display: block;
+		width: 100%;
+		flex: 1;
+
+		/* Box model - remove internal styling, let wrapper handle border/bg */
+		border: 0;
+		background: transparent;
+		border-radius: 0;
+
+		/* Typography */
+		font-family: var(--stuic-input-font-family);
+		color: var(--stuic-input-text);
+		letter-spacing: -0.025em;
 
-.stuic-input
-	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
-.stuic-input textarea,
-.stuic-input select {
-	/* Reset browser defaults */
-	appearance: none;
-	-webkit-appearance: none;
-
-	/* Layout */
-	display: block;
-	width: 100%;
-	flex: 1;
-
-	/* Box model - remove internal styling, let wrapper handle border/bg */
-	border: 0;
-	background: transparent;
-	border-radius: 0;
-
-	/* Typography */
-	font-family: var(--stuic-input-font-family);
-	color: var(--stuic-input-text);
-	letter-spacing: -0.025em;
-
-	/* Focus - remove browser defaults, wrapper handles focus ring */
-	&:focus {
-		outline: none;
-		box-shadow: none;
+		/* Focus - remove browser defaults, wrapper handles focus ring */
+		&:focus {
+			outline: none;
+			box-shadow: none;
+		}
+
+		&:focus-visible {
+			outline: none;
+		}
+
+		/* Disabled state */
+		&:disabled {
+			cursor: not-allowed;
+		}
+
+		/* Placeholder */
+		&::placeholder {
+			color: var(--stuic-input-placeholder);
+			opacity: 0.5;
+			letter-spacing: -0.025em;
+		}
 	}
 
-	&:focus-visible {
-		outline: none;
+	/* ============================================================================
+	   SIZE VARIANTS
+	   Applied via data-size attribute on .stuic-input
+	   ============================================================================ */
+
+	.stuic-input[data-size="sm"]
+		input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
+			[type="file"]
+		),
+	.stuic-input[data-size="sm"] textarea,
+	.stuic-input[data-size="sm"] select {
+		padding: var(--stuic-input-padding-y-sm) var(--stuic-input-padding-x-sm);
+		font-size: var(--stuic-input-font-size-sm);
+		min-height: var(--stuic-input-min-height-sm);
 	}
 
-	/* Disabled state */
-	&:disabled {
-		cursor: not-allowed;
+	.stuic-input[data-size="sm"] select {
+		padding-right: 2.5rem;
 	}
 
-	/* Placeholder */
-	&::placeholder {
-		color: var(--stuic-input-placeholder);
-		opacity: 0.5;
-		letter-spacing: -0.025em;
+	.stuic-input[data-size="md"]
+		input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
+			[type="file"]
+		),
+	.stuic-input[data-size="md"] textarea,
+	.stuic-input[data-size="md"] select,
+	.stuic-input:not([data-size])
+		input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
+			[type="file"]
+		),
+	.stuic-input:not([data-size]) textarea,
+	.stuic-input:not([data-size]) select {
+		padding: var(--stuic-input-padding-y-md) var(--stuic-input-padding-x-md);
+		font-size: var(--stuic-input-font-size-md);
+		min-height: var(--stuic-input-min-height-md);
 	}
-}
-
-/* ============================================================================
-   SIZE VARIANTS
-   Applied via data-size attribute on .stuic-input
-   ============================================================================ */
-
-.stuic-input[data-size="sm"]
-	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
-.stuic-input[data-size="sm"] textarea,
-.stuic-input[data-size="sm"] select {
-	padding: var(--stuic-input-padding-y-sm) var(--stuic-input-padding-x-sm);
-	font-size: var(--stuic-input-font-size-sm);
-	min-height: var(--stuic-input-min-height-sm);
-}
-
-.stuic-input[data-size="sm"] select {
-	padding-right: 2.5rem;
-}
-
-.stuic-input[data-size="md"]
-	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
-.stuic-input[data-size="md"] textarea,
-.stuic-input[data-size="md"] select,
-.stuic-input:not([data-size])
-	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
-.stuic-input:not([data-size]) textarea,
-.stuic-input:not([data-size]) select {
-	padding: var(--stuic-input-padding-y-md) var(--stuic-input-padding-x-md);
-	font-size: var(--stuic-input-font-size-md);
-	min-height: var(--stuic-input-min-height-md);
-}
-
-.stuic-input[data-size="md"] select,
-.stuic-input:not([data-size]) select {
-	padding-right: 2.5rem;
-}
-
-.stuic-input[data-size="lg"]
-	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
-.stuic-input[data-size="lg"] textarea,
-.stuic-input[data-size="lg"] select {
-	padding: var(--stuic-input-padding-y-lg) var(--stuic-input-padding-x-lg);
-	font-size: var(--stuic-input-font-size-lg);
-	min-height: var(--stuic-input-min-height-lg);
-}
 
-.stuic-input[data-size="lg"] select {
-	padding-right: 2.5rem;
-}
-
-/* Label sizing */
-.stuic-input[data-size="sm"] .label-box label {
-	font-size: var(--stuic-input-font-size-sm);
-}
-
-.stuic-input[data-size="lg"] .label-box label {
-	font-weight: 600;
-}
+	.stuic-input[data-size="md"] select,
+	.stuic-input:not([data-size]) select {
+		padding-right: 2.5rem;
+	}
 
-/* ============================================================================
-   INPUT WRAPPER STYLES
-   The visual container that provides border, background, and focus ring
-   ============================================================================ */
+	.stuic-input[data-size="lg"]
+		input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
+			[type="file"]
+		),
+	.stuic-input[data-size="lg"] textarea,
+	.stuic-input[data-size="lg"] select {
+		padding: var(--stuic-input-padding-y-lg) var(--stuic-input-padding-x-lg);
+		font-size: var(--stuic-input-font-size-lg);
+		min-height: var(--stuic-input-min-height-lg);
+	}
 
-.stuic-input .input-wrap {
-	background: var(--stuic-input-bg);
-	border: 1px solid var(--stuic-input-border);
-	border-radius: var(--stuic-input-radius);
-	transition:
-		border-color var(--stuic-input-transition),
-		box-shadow var(--stuic-input-transition);
-}
+	.stuic-input[data-size="lg"] select {
+		padding-right: 2.5rem;
+	}
 
-.stuic-input .input-wrap:focus-within {
-	border-color: var(--stuic-input-border-focus);
-	box-shadow: 0 0 0 var(--stuic-input-ring-width) var(--stuic-input-ring-color);
-}
+	/* Label sizing */
+	.stuic-input[data-size="sm"] .label-box label {
+		font-size: var(--stuic-input-font-size-sm);
+	}
 
-/* Invalid state */
-.stuic-input.invalid .input-wrap,
-.stuic-input .input-wrap.invalid {
-	border-color: var(--stuic-input-accent-error);
-}
+	.stuic-input[data-size="lg"] .label-box label {
+		font-weight: 600;
+	}
 
-.stuic-input.invalid .input-wrap:focus-within,
-.stuic-input .input-wrap.invalid:focus-within {
-	border-color: var(--stuic-input-accent-error);
-	box-shadow: 0 0 0 var(--stuic-input-ring-width)
-		color-mix(in srgb, var(--stuic-input-accent-error) 20%, transparent);
-}
+	/* ============================================================================
+	   INPUT WRAPPER STYLES
+	   The visual container that provides border, background, and focus ring
+	   ============================================================================ */
+
+	.stuic-input .input-wrap {
+		background: var(--stuic-input-bg);
+		border: 1px solid var(--stuic-input-border);
+		border-radius: var(--stuic-input-radius);
+		transition:
+			border-color var(--stuic-input-transition),
+			box-shadow var(--stuic-input-transition);
+	}
 
-/* Disabled state */
-.stuic-input.disabled .input-wrap,
-.stuic-input .input-wrap.disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
+	.stuic-input .input-wrap:focus-within {
+		border-color: var(--stuic-input-border-focus);
+		box-shadow: 0 0 0 var(--stuic-input-ring-width) var(--stuic-input-ring-color);
+	}
 
-/* Transparent wrapper utility - for components like Switch that don't need wrapper styling */
-.stuic-input .input-wrap.input-wrap-transparent,
-.stuic-input.invalid .input-wrap.input-wrap-transparent,
-.stuic-input .input-wrap.input-wrap-transparent:focus-within,
-.stuic-input.invalid .input-wrap.input-wrap-transparent:focus-within {
-	background: transparent;
-	border: none;
-	box-shadow: none;
-}
+	/* Invalid state */
+	.stuic-input.invalid .input-wrap,
+	.stuic-input .input-wrap.invalid {
+		border-color: var(--stuic-input-accent-error);
+	}
 
-/* Size-specific input-wrap padding */
-.stuic-input[data-size="lg"] .input-wrap {
-	padding: calc(var(--spacing) * 1);
-}
+	.stuic-input.invalid .input-wrap:focus-within,
+	.stuic-input .input-wrap.invalid:focus-within {
+		border-color: var(--stuic-input-accent-error);
+		box-shadow: 0 0 0 var(--stuic-input-ring-width)
+			color-mix(in srgb, var(--stuic-input-accent-error) 20%, var(--stuic-color-background));
+	}
 
-/* ============================================================================
-   VALIDATION MESSAGE
-   ============================================================================ */
+	/* Disabled state */
+	.stuic-input.disabled .input-wrap,
+	.stuic-input .input-wrap.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 
-.stuic-input .validation-box {
-	color: var(--stuic-input-accent-error);
-}
+	/* Transparent wrapper utility - for components like Switch that don't need wrapper styling */
+	.stuic-input .input-wrap.input-wrap-transparent,
+	.stuic-input.invalid .input-wrap.input-wrap-transparent,
+	.stuic-input .input-wrap.input-wrap-transparent:focus-within,
+	.stuic-input.invalid .input-wrap.input-wrap-transparent:focus-within {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+	}
 
-/* ============================================================================
-   SELECT SPECIFIC
-   Custom dropdown arrow since we removed @tailwindcss/forms
-   ============================================================================ */
+	/* Size-specific input-wrap padding */
+	.stuic-input[data-size="lg"] .input-wrap {
+		padding: calc(var(--spacing) * 1);
+	}
 
-.stuic-input select {
-	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-	background-position: right 0.5rem center;
-	background-repeat: no-repeat;
-	background-size: 1.5em 1.5em;
-	cursor: pointer;
-}
+	/* ============================================================================
+	   VALIDATION MESSAGE
+	   ============================================================================ */
 
-/* ============================================================================
-   TEXTAREA SPECIFIC
-   ============================================================================ */
+	.stuic-input .validation-box {
+		color: var(--stuic-input-accent-error);
+	}
 
-.stuic-input textarea {
-	scrollbar-width: thin;
-	resize: vertical;
-}
+	/* ============================================================================
+	   SELECT SPECIFIC
+	   Custom dropdown arrow since we removed @tailwindcss/forms
+	   ============================================================================ */
+
+	.stuic-input select {
+		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+		background-position: right 0.5rem center;
+		background-repeat: no-repeat;
+		background-size: 1.5em 1.5em;
+		cursor: pointer;
+	}
 
-/* ============================================================================
-   FILE INPUT
-   ============================================================================ */
+	/* ============================================================================
+	   TEXTAREA SPECIFIC
+	   ============================================================================ */
 
-.stuic-input input[type="file"] {
-	padding: 0;
-	cursor: pointer;
-}
+	.stuic-input textarea {
+		scrollbar-width: thin;
+		resize: vertical;
+	}
 
-/* Remove padding from file input wrapper */
-.stuic-input:has(input[type="file"]) .input-wrap {
-	padding: 0;
-}
+	/* ============================================================================
+	   FILE INPUT
+	   ============================================================================ */
 
-.stuic-input input[type="file"]::file-selector-button {
-	padding: var(--stuic-input-padding-y-md) var(--stuic-input-padding-x-md);
-	margin-right: 1rem;
-	background: var(--stuic-color-muted);
-	color: var(--stuic-color-foreground);
-	border: 0;
-	border-radius: var(--stuic-input-radius);
-	cursor: pointer;
-	font-family: var(--stuic-input-font-family);
-	transition: background var(--stuic-input-transition);
-}
+	.stuic-input input[type="file"] {
+		padding: 0;
+		cursor: pointer;
+	}
 
-.stuic-input input[type="file"]::file-selector-button:hover {
-	background: var(--stuic-color-muted-hover);
-}
+	/* Remove padding from file input wrapper */
+	.stuic-input:has(input[type="file"]) .input-wrap {
+		padding: 0;
+	}
 
-/* ============================================================================
-   RANGE INPUT
-   Custom styling since we removed @tailwindcss/forms
-   ============================================================================ */
+	.stuic-input input[type="file"]::file-selector-button {
+		padding: var(--stuic-input-padding-y-md) var(--stuic-input-padding-x-md);
+		margin-right: 1rem;
+		background: var(--stuic-color-muted);
+		color: var(--stuic-color-foreground);
+		border: 0;
+		border-radius: var(--stuic-input-radius);
+		cursor: pointer;
+		font-family: var(--stuic-input-font-family);
+		transition: background var(--stuic-input-transition);
+	}
 
-.stuic-input input[type="range"] {
-	width: 100%;
-	padding: var(--stuic-input-padding-y-md) var(--stuic-input-padding-x-md);
-	margin: calc(
-			(var(--stuic-input-range-thumb-size) - var(--stuic-input-range-track-height)) / 2
-		)
-		0;
-	background-color: transparent;
-	appearance: none;
-	cursor: pointer;
-}
+	.stuic-input input[type="file"]::file-selector-button:hover {
+		background: var(--stuic-color-muted-hover);
+	}
 
-.stuic-input input[type="range"]:focus {
-	outline: none;
-}
+	/* ============================================================================
+	   RANGE INPUT
+	   Custom styling since we removed @tailwindcss/forms
+	   ============================================================================ */
+
+	.stuic-input input[type="range"] {
+		width: 100%;
+		padding: var(--stuic-input-padding-y-md) var(--stuic-input-padding-x-md);
+		margin: calc(
+				(var(--stuic-input-range-thumb-size) - var(--stuic-input-range-track-height)) / 2
+			)
+			0;
+		background-color: transparent;
+		appearance: none;
+		cursor: pointer;
+	}
 
-/* Webkit Track */
-.stuic-input input[type="range"]::-webkit-slider-runnable-track {
-	width: 100%;
-	height: var(--stuic-input-range-track-height);
-	background: var(--stuic-input-range-track-bg);
-	border: 0;
-	border-radius: var(--stuic-input-range-track-radius);
-	cursor: pointer;
-}
+	.stuic-input input[type="range"]:focus {
+		outline: none;
+	}
 
-/* Webkit Thumb */
-.stuic-input input[type="range"]::-webkit-slider-thumb {
-	width: var(--stuic-input-range-thumb-size);
-	height: var(--stuic-input-range-thumb-size);
-	margin-top: calc(
-		-1 * (var(--stuic-input-range-thumb-size) - var(--stuic-input-range-track-height)) / 2
-	);
-	background-color: var(--stuic-input-accent);
-	border: 0;
-	border-radius: 50%;
-	cursor: pointer;
-	-webkit-appearance: none;
-}
+	/* Webkit Track */
+	.stuic-input input[type="range"]::-webkit-slider-runnable-track {
+		width: 100%;
+		height: var(--stuic-input-range-track-height);
+		background: var(--stuic-input-range-track-bg);
+		border: 0;
+		border-radius: var(--stuic-input-range-track-radius);
+		cursor: pointer;
+	}
 
-/* Firefox Track */
-.stuic-input input[type="range"]::-moz-range-track {
-	width: 100%;
-	height: var(--stuic-input-range-track-height);
-	background: var(--stuic-input-range-track-bg);
-	border: 0;
-	border-radius: var(--stuic-input-range-track-radius);
-	cursor: pointer;
-}
+	/* Webkit Thumb */
+	.stuic-input input[type="range"]::-webkit-slider-thumb {
+		width: var(--stuic-input-range-thumb-size);
+		height: var(--stuic-input-range-thumb-size);
+		margin-top: calc(
+			-1 * (var(--stuic-input-range-thumb-size) - var(--stuic-input-range-track-height)) /
+				2
+		);
+		background-color: var(--stuic-input-accent);
+		border: 0;
+		border-radius: 50%;
+		cursor: pointer;
+		-webkit-appearance: none;
+	}
 
-/* Firefox Thumb */
-.stuic-input input[type="range"]::-moz-range-thumb {
-	width: var(--stuic-input-range-thumb-size);
-	height: var(--stuic-input-range-thumb-size);
-	background-color: var(--stuic-input-accent);
-	border: 0;
-	border-radius: 50%;
-	cursor: pointer;
-}
+	/* Firefox Track */
+	.stuic-input input[type="range"]::-moz-range-track {
+		width: 100%;
+		height: var(--stuic-input-range-track-height);
+		background: var(--stuic-input-range-track-bg);
+		border: 0;
+		border-radius: var(--stuic-input-range-track-radius);
+		cursor: pointer;
+	}
 
-/* MS Edge Track (legacy) */
-.stuic-input input[type="range"]::-ms-track {
-	width: 100%;
-	height: var(--stuic-input-range-track-height);
-	background: transparent;
-	border-color: transparent;
-	color: transparent;
-	cursor: pointer;
-}
+	/* Firefox Thumb */
+	.stuic-input input[type="range"]::-moz-range-thumb {
+		width: var(--stuic-input-range-thumb-size);
+		height: var(--stuic-input-range-thumb-size);
+		background-color: var(--stuic-input-accent);
+		border: 0;
+		border-radius: 50%;
+		cursor: pointer;
+	}
 
-.stuic-input input[type="range"]::-ms-fill-lower,
-.stuic-input input[type="range"]::-ms-fill-upper {
-	background: var(--stuic-input-range-track-bg);
-	border: 0;
-	border-radius: var(--stuic-input-range-track-radius);
-}
+	/* MS Edge Track (legacy) */
+	.stuic-input input[type="range"]::-ms-track {
+		width: 100%;
+		height: var(--stuic-input-range-track-height);
+		background: transparent;
+		border-color: transparent;
+		color: transparent;
+		cursor: pointer;
+	}
 
-.stuic-input input[type="range"]::-ms-thumb {
-	width: var(--stuic-input-range-thumb-size);
-	height: var(--stuic-input-range-thumb-size);
-	background-color: var(--stuic-input-accent);
-	border: 0;
-	border-radius: 50%;
-	cursor: pointer;
-	margin-top: 0;
-}
+	.stuic-input input[type="range"]::-ms-fill-lower,
+	.stuic-input input[type="range"]::-ms-fill-upper {
+		background: var(--stuic-input-range-track-bg);
+		border: 0;
+		border-radius: var(--stuic-input-range-track-radius);
+	}
 
-/* ============================================================================
-   CHECKBOX STYLES
-   ============================================================================ */
+	.stuic-input input[type="range"]::-ms-thumb {
+		width: var(--stuic-input-range-thumb-size);
+		height: var(--stuic-input-range-thumb-size);
+		background-color: var(--stuic-input-accent);
+		border: 0;
+		border-radius: 50%;
+		cursor: pointer;
+		margin-top: 0;
+	}
 
-.stuic-checkbox input[type="checkbox"] {
-	appearance: none;
-	-webkit-appearance: none;
-	width: var(--stuic-checkbox-size);
-	height: var(--stuic-checkbox-size);
-	border-radius: var(--stuic-checkbox-radius);
-	background: var(--stuic-checkbox-bg);
-	border: 1px solid var(--stuic-checkbox-border);
-	cursor: pointer;
-	transition:
-		background var(--stuic-input-transition),
-		border-color var(--stuic-input-transition),
-		box-shadow var(--stuic-input-transition);
-}
+	/* ============================================================================
+	   CHECKBOX STYLES
+	   ============================================================================ */
+
+	.stuic-checkbox input[type="checkbox"] {
+		appearance: none;
+		-webkit-appearance: none;
+		width: var(--stuic-checkbox-size);
+		height: var(--stuic-checkbox-size);
+		border-radius: var(--stuic-checkbox-radius);
+		background: var(--stuic-checkbox-bg);
+		border: 1px solid var(--stuic-checkbox-border);
+		cursor: pointer;
+		transition:
+			background var(--stuic-input-transition),
+			border-color var(--stuic-input-transition),
+			box-shadow var(--stuic-input-transition);
+	}
 
-.stuic-checkbox input[type="checkbox"]:checked {
-	background: var(--stuic-checkbox-checked-bg);
-	border-color: var(--stuic-checkbox-checked-border);
-	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-	background-size: 100% 100%;
-	background-position: center;
-	background-repeat: no-repeat;
-}
+	.stuic-checkbox input[type="checkbox"]:checked {
+		background: var(--stuic-checkbox-checked-bg);
+		border-color: var(--stuic-checkbox-checked-border);
+		background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+		background-size: 100% 100%;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
 
-.stuic-checkbox input[type="checkbox"]:focus {
-	outline: none;
-	border-color: var(--stuic-input-border-focus);
-	box-shadow: 0 0 0 var(--stuic-input-ring-width) var(--stuic-input-ring-color);
-}
+	.stuic-checkbox input[type="checkbox"]:focus {
+		outline: none;
+		border-color: var(--stuic-input-border-focus);
+		box-shadow: 0 0 0 var(--stuic-input-ring-width) var(--stuic-input-ring-color);
+	}
 
-.stuic-checkbox input[type="checkbox"]:disabled {
-	cursor: not-allowed;
-	opacity: 0.5;
-}
+	.stuic-checkbox input[type="checkbox"]:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
 
-.stuic-checkbox .validation-box {
-	color: var(--stuic-input-accent-error);
-}
+	.stuic-checkbox .validation-box {
+		color: var(--stuic-input-accent-error);
+	}
 
-/* ============================================================================
-   RADIO STYLES
-   ============================================================================ */
+	/* ============================================================================
+	   RADIO STYLES
+	   ============================================================================ */
 
-.stuic-radios .radios-box {
-	background: var(--stuic-input-bg);
-	border: 1px solid var(--stuic-input-border);
-	border-radius: var(--stuic-input-radius);
-}
+	.stuic-radios .radios-box {
+		background: var(--stuic-input-bg);
+		border: 1px solid var(--stuic-input-border);
+		border-radius: var(--stuic-input-radius);
+	}
 
-.stuic-radios.invalid .radios-box {
-	border-color: var(--stuic-input-accent-error);
-}
+	.stuic-radios.invalid .radios-box {
+		border-color: var(--stuic-input-accent-error);
+	}
 
-.stuic-radios .validation-box {
-	color: var(--stuic-input-accent-error);
-}
+	.stuic-radios .validation-box {
+		color: var(--stuic-input-accent-error);
+	}
 
-.stuic-radios input[type="radio"] {
-	appearance: none;
-	-webkit-appearance: none;
-	width: var(--stuic-radio-size);
-	height: var(--stuic-radio-size);
-	border-radius: 50%;
-	background: var(--stuic-checkbox-bg);
-	border: 1px solid var(--stuic-checkbox-border);
-	cursor: pointer;
-	transition:
-		background var(--stuic-input-transition),
-		border-color var(--stuic-input-transition),
-		box-shadow var(--stuic-input-transition);
-}
+	.stuic-radios input[type="radio"] {
+		appearance: none;
+		-webkit-appearance: none;
+		width: var(--stuic-radio-size);
+		height: var(--stuic-radio-size);
+		border-radius: 50%;
+		background: var(--stuic-checkbox-bg);
+		border: 1px solid var(--stuic-checkbox-border);
+		cursor: pointer;
+		transition:
+			background var(--stuic-input-transition),
+			border-color var(--stuic-input-transition),
+			box-shadow var(--stuic-input-transition);
+	}
 
-.stuic-radios input[type="radio"]:checked {
-	background: var(--stuic-checkbox-checked-bg);
-	border-color: var(--stuic-checkbox-checked-border);
-	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-	background-size: 100% 100%;
-	background-position: center;
-	background-repeat: no-repeat;
-}
+	.stuic-radios input[type="radio"]:checked {
+		background: var(--stuic-checkbox-checked-bg);
+		border-color: var(--stuic-checkbox-checked-border);
+		background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+		background-size: 100% 100%;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
 
-.stuic-radios input[type="radio"]:focus {
-	outline: none;
-	border-color: var(--stuic-input-border-focus);
-	box-shadow: 0 0 0 var(--stuic-input-ring-width) var(--stuic-input-ring-color);
-}
+	.stuic-radios input[type="radio"]:focus {
+		outline: none;
+		border-color: var(--stuic-input-border-focus);
+		box-shadow: 0 0 0 var(--stuic-input-ring-width) var(--stuic-input-ring-color);
+	}
 
-.stuic-radios input[type="radio"]:disabled {
-	cursor: not-allowed;
-	opacity: 0.5;
-}
+	.stuic-radios input[type="radio"]:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
 
-/* ============================================================================
-   FIELD OPTIONS COMPONENT STYLES
-   ============================================================================ */
+	/* ============================================================================
+	   FIELD OPTIONS COMPONENT STYLES
+	   ============================================================================ */
 
-/* Control buttons (Select All, Clear) */
-.stuic-field-options-control {
-	color: var(--stuic-field-options-control-text);
-	transition: color 150ms;
-}
+	/* Control buttons (Select All, Clear) */
+	.stuic-field-options-control {
+		color: var(--stuic-field-options-control-text);
+		transition: color 150ms;
+	}
 
-.stuic-field-options-control:hover:not(:disabled),
-.stuic-field-options-control:focus-visible {
-	color: var(--stuic-field-options-control-text-hover);
-}
+	.stuic-field-options-control:hover:not(:disabled),
+	.stuic-field-options-control:focus-visible {
+		color: var(--stuic-field-options-control-text-hover);
+	}
 
-.stuic-field-options-control:focus-visible {
-	outline: 2px solid var(--stuic-field-options-control-ring);
-	outline-offset: 1px;
-}
+	.stuic-field-options-control:focus-visible {
+		outline: 2px solid var(--stuic-field-options-control-ring);
+		outline-offset: 1px;
+	}
 
-.stuic-field-options-control:disabled,
-.stuic-field-options-control[data-disabled] {
-	opacity: 0.5;
-}
+	.stuic-field-options-control:disabled,
+	.stuic-field-options-control[data-disabled] {
+		opacity: 0.5;
+	}
 
-/* Muted/secondary text */
-.stuic-field-options-muted {
-	color: var(--stuic-field-options-muted-text);
-}
+	/* Muted/secondary text */
+	.stuic-field-options-muted {
+		color: var(--stuic-field-options-muted-text);
+	}
 
-/* Placeholder/loading states */
-.stuic-field-options-placeholder {
-	color: var(--stuic-field-options-muted-text);
-}
+	/* Placeholder/loading states */
+	.stuic-field-options-placeholder {
+		color: var(--stuic-field-options-muted-text);
+	}
 
-/* Optgroup labels */
-.stuic-field-options-optgroup {
-	color: var(--stuic-field-options-optgroup-text);
-}
+	/* Optgroup labels */
+	.stuic-field-options-optgroup {
+		color: var(--stuic-field-options-optgroup-text);
+	}
 
-/* Icon states - inherit color from parent ListItemButton */
-.stuic-field-options-icon {
-	color: inherit;
-	opacity: 0.5;
-	transition: opacity 150ms;
-}
+	/* Icon states - inherit color from parent ListItemButton */
+	.stuic-field-options-icon {
+		color: inherit;
+		opacity: 0.5;
+		transition: opacity 150ms;
+	}
 
-.stuic-field-options-icon--selected {
-	opacity: 1;
+	.stuic-field-options-icon--selected {
+		opacity: 1;
+	}
 }