@14ch/svelte-ui 0.0.42 → 0.0.44

package/dist/assets/styles/variables.scss

@@ -127,6 +127,7 @@
 	/* State Colors */
 	--svelte-ui-success-color: #12b073;
 	--svelte-ui-error-color: #f54d4d;
+	--svelte-ui-error-container-color: transparent;
 	--svelte-ui-danger-color: #f54d4d;
 	--svelte-ui-warning-color: #f57c00;
 	--svelte-ui-info-color: #13a3b4;
@@ -277,6 +278,7 @@
 	--svelte-ui-form-height-lg: 44px;
 	--svelte-ui-form-padding: 0 12px;
 	--svelte-ui-form-padding-left: 12px;
+	--svelte-ui-form-padding-inline: 12px;
 	--svelte-ui-form-icon-offset: 4px;
 	--svelte-ui-form-icon-space: 32px;
 	--svelte-ui-form-icon-space-inline: 32px;
@@ -528,9 +530,11 @@
 
 	/* CheckboxGroup */
 	--svelte-ui-checkbox-group-gap: 8px 24px;
+	--svelte-ui-checkbox-group-min-option-width: auto;
 
 	/* RadioGroup */
 	--svelte-ui-radio-group-gap: 8px 24px;
+	--svelte-ui-radio-group-min-option-width: auto;
 	--svelte-ui-radio-disabled-opacity: var(--svelte-ui-disabled-opacity);
 	--svelte-ui-radio-border-color: var(--svelte-ui-border-color);
 	--svelte-ui-radio-bg-checked: var(--svelte-ui-radio-checked-color);
@@ -581,6 +585,7 @@
 	/* FileUploader */
 	--svelte-ui-file-uploader-border-width: 1px;
 	--svelte-ui-file-uploader-border-style: dashed;
+	--svelte-ui-file-uploader-height: auto;
 	--svelte-ui-file-uploader-bg: var(--svelte-ui-form-bg);
 	--svelte-ui-file-uploader-border-color: var(--svelte-ui-border-color);
 	--svelte-ui-file-uploader-hover-bg: var(--svelte-ui-hover-overlay);

package/dist/components/Checkbox.svelte

@@ -7,8 +7,10 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler
+		PointerHandler,
+		BivariantValueHandler
 	} from '../types/callbackHandlers';
+	import type { ComponentSize } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -31,17 +33,19 @@
 
 		// スタイル/レイアウト
 		/** Checkbox size. @default 'medium' */
-		size?: 'small' | 'medium' | 'large';
+		size?: ComponentSize;
 		customStyle?: string;
+		/** Stretches the checkbox to fill its container width. @default false */
+		fullWidth?: boolean;
 
 		// 状態/動作
 		/** Disables the checkbox. @default false */
 		disabled?: boolean;
-		/** Stretches the checkbox to fill its container width. @default false */
-		fullWidth?: boolean;
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
+		/** Accessible label, used when no visible label (children) is provided. */
+		ariaLabel?: string;
 		/** Disables animations for users who prefer reduced motion. @default false */
 		reducedMotion?: boolean;
 
@@ -79,7 +83,7 @@
 		onpointercancel?: PointerHandler;
 
 		// 入力イベント
-		onchange?: (value: boolean) => void;
+		onchange?: BivariantValueHandler<boolean>;
 
 		// その他
 		[key: string]: any;
@@ -100,13 +104,14 @@
 		// スタイル/レイアウト
 		size = 'medium',
 		customStyle = '',
+		fullWidth = false,
 
 		// 状態/動作
 		disabled = false,
-		fullWidth = false,
 		required = false,
 
 		// ARIA/アクセシビリティ
+		ariaLabel,
 		reducedMotion = false,
 
 		// フォーカスイベント
@@ -304,6 +309,7 @@
 		{name}
 		{disabled}
 		{required}
+		aria-label={ariaLabel}
 		aria-invalid={false}
 		aria-required={required ? 'true' : 'false'}
 		aria-describedby={undefined}
@@ -444,7 +450,6 @@
 
 	/* Checked state */
 	input[type='checkbox']:checked + .checkbox__icon::after {
-		width: var(--svelte-ui-checkbox-icon-width);
 		clip-path: inset(0 0 0 0);
 		opacity: 1;
 		transition-delay:
@@ -454,7 +459,6 @@
 	/* Indeterminate state */
 	input[type='checkbox']:indeterminate + .checkbox__icon::after {
 		content: 'remove';
-		width: var(--svelte-ui-checkbox-icon-width);
 		clip-path: inset(0 0 0 0);
 		opacity: 1;
 		transition-delay:

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

@@ -1,5 +1,6 @@
 import { type Snippet } from 'svelte';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
+import type { ComponentSize } from '../types/propOptions';
 export type CheckboxProps = {
     /** Label content displayed next to the checkbox. */
     children?: Snippet;
@@ -11,13 +12,15 @@ export type CheckboxProps = {
     indeterminate?: boolean;
     id?: string;
     /** Checkbox size. @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    size?: ComponentSize;
     customStyle?: string;
-    /** Disables the checkbox. @default false */
-    disabled?: boolean;
     /** Stretches the checkbox to fill its container width. @default false */
     fullWidth?: boolean;
+    /** Disables the checkbox. @default false */
+    disabled?: boolean;
     required?: boolean;
+    /** Accessible label, used when no visible label (children) is provided. */
+    ariaLabel?: string;
     /** Disables animations for users who prefer reduced motion. @default false */
     reducedMotion?: boolean;
     onfocus?: FocusHandler;
@@ -43,7 +46,7 @@ export type CheckboxProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
-    onchange?: (value: boolean) => void;
+    onchange?: BivariantValueHandler<boolean>;
     [key: string]: any;
 };
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value" | "indeterminate">;

package/dist/components/CheckboxGroup.svelte

@@ -5,6 +5,7 @@
 	import Checkbox from './Checkbox.svelte';
 	import { getStyleFromNumber } from '../utils/style';
 	import type { BivariantValueHandler } from '../types/callbackHandlers';
+	import type { ComponentSize } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -24,7 +25,7 @@
 		wrap?: boolean;
 		minOptionWidth?: string | number;
 		/** @default 'medium' */
-		size?: 'small' | 'medium' | 'large';
+		size?: ComponentSize;
 
 		// 状態/動作
 		disabled?: boolean;
@@ -84,6 +85,7 @@
 	style:--internal-checkbox-group-gap={gapStyle}
 	style:--internal-checkbox-group-wrap={wrap ? 'wrap' : 'none'}
 	style:--internal-checkbox-group-min-option-width={minOptionWidthStyle}
+	data-testid="checkbox-group"
 >
 	{#each options as option (option.value)}
 		<li class="checkbox-group__option">
@@ -104,12 +106,9 @@
 <style>
 	.checkbox-group {
 		display: flex;
-		flex-direction: var(
-			--internal-checkbox-group-flex-direction,
-			var(--svelte-ui-checkbox-group-flex-direction)
-		);
+		flex-direction: var(--internal-checkbox-group-flex-direction);
 		gap: var(--internal-checkbox-group-gap, var(--svelte-ui-checkbox-group-gap));
-		flex-wrap: var(--internal-checkbox-group-wrap, var(--svelte-ui-checkbox-group-wrap));
+		flex-wrap: var(--internal-checkbox-group-wrap);
 	}
 
 	.checkbox-group__option {

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

@@ -1,5 +1,6 @@
 import type { Option, OptionValue } from '../types/options';
 import type { BivariantValueHandler } from '../types/callbackHandlers';
+import type { ComponentSize } from '../types/propOptions';
 export type CheckboxGroupProps = {
     /** `{ label, value, disabled? }[]` */
     options: Option[];
@@ -11,7 +12,7 @@ export type CheckboxGroupProps = {
     wrap?: boolean;
     minOptionWidth?: string | number;
     /** @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    size?: ComponentSize;
     disabled?: boolean;
     required?: boolean;
     /** Disables animations for accessibility. @default false */

package/dist/components/ColorPicker.svelte

@@ -10,7 +10,8 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler
+		PointerHandler,
+		BivariantValueHandler
 	} from '../types/callbackHandlers';
 
 	// =========================================================================
@@ -43,8 +44,8 @@
 		iconVariant?: IconVariant;
 
 		// 入力イベント
-		onchange?: (value: string) => void;
-		oninput?: (value: string) => void;
+		onchange?: BivariantValueHandler<string>;
+		oninput?: BivariantValueHandler<string>;
 
 		// フォーカスイベント
 		onfocus?: FocusHandler;

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

@@ -1,5 +1,5 @@
 import type { IconVariant } from '../types/icon';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 export type ColorPickerProps = {
     /** Hex color string (e.g. `"#ff0000"`). Supports `bind:value`. */
     value: string | null | undefined;
@@ -19,8 +19,8 @@ export type ColorPickerProps = {
     clearable?: boolean;
     clearButtonAriaLabel?: string;
     iconVariant?: IconVariant;
-    onchange?: (value: string) => void;
-    oninput?: (value: string) => void;
+    onchange?: BivariantValueHandler<string>;
+    oninput?: BivariantValueHandler<string>;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;

package/dist/components/Combobox.svelte

@@ -416,9 +416,10 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	// 各要素のIDを生成
-	const inputId = $derived(`${id}-input`);
-	const listboxId = $derived(`${id}-listbox`);
+	// 各要素のIDを生成（id 未指定時は安定した一意のフォールバックを使用）
+	const fallbackId = `combobox-${Math.random().toString(36).substring(2, 15)}`;
+	const inputId = $derived(`${id ?? fallbackId}-input`);
+	const listboxId = $derived(`${id ?? fallbackId}-listbox`);
 
 	// フィルタリングされたオプション
 	const filteredOptions = $derived.by(() => {

package/dist/components/Datepicker.svelte

@@ -599,7 +599,8 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	const calendarId = $derived(`${id}-calendar`);
+	const fallbackId = `datepicker-${Math.random().toString(36).substring(2, 15)}`;
+	const calendarId = $derived(`${id ?? fallbackId}-calendar`);
 	const currentLocaleConfig = $derived(localeConfig[resolvedLocale]);
 	const finalFormat = $derived(
 		format ||

package/dist/components/Dialog.svelte

@@ -153,7 +153,7 @@
 	customStyles={dialogStyles}
 	id={id ? `${id}-modal` : undefined}
 >
-	<div class="dialog {scrollable ? 'dialog--scrollable' : ''}">
+	<div class="dialog {scrollable ? 'dialog--scrollable' : ''}" data-testid="dialog">
 		{#if header || title}
 			<div class="dialog__header">
 				{#if header}

package/dist/components/Drawer.svelte

@@ -167,7 +167,7 @@
 	customStyles={drawerStyles()}
 	id={id ? `${id}-modal` : undefined}
 >
-	<div class="drawer drawer--{position} {scrollable ? 'drawer--scrollable' : ''}">
+	<div class="drawer drawer--{position} {scrollable ? 'drawer--scrollable' : ''}" data-testid="drawer">
 		{#if header || title}
 			<div class="drawer__header">
 				{#if header}

package/dist/components/FileUploader.svelte

@@ -383,14 +383,8 @@
 		align-items: center;
 		gap: 16px;
 		position: relative;
-		width: var(
-			--internal-file-uploader-width,
-			var(--svelte-ui-file-uploader-width, 100%)
-		);
-		height: var(
-			--internal-file-uploader-height,
-			var(--svelte-ui-file-uploader-height, auto)
-		);
+		width: var(--internal-file-uploader-width);
+		height: var(--internal-file-uploader-height, var(--svelte-ui-file-uploader-height));
 		min-height: 100px;
 		padding: 16px;
 		background-color: var(--svelte-ui-file-uploader-bg);

package/dist/components/ImageUploader.svelte

@@ -450,14 +450,8 @@
 		align-items: center;
 		position: relative;
 		max-width: 100%;
-		min-width: var(
-			--internal-image-uploader-button-width,
-			var(--svelte-ui-image-uploader-button-width)
-		);
-		min-height: var(
-			--internal-image-uploader-button-height,
-			var(--svelte-ui-image-uploader-button-height)
-		);
+		min-width: var(--internal-image-uploader-button-width);
+		min-height: var(--internal-image-uploader-button-height);
 		padding: 16px;
 		background-color: var(--svelte-ui-form-bg);
 		border-radius: var(--svelte-ui-border-radius);

package/dist/components/ImageUploaderPreview.svelte

@@ -110,6 +110,7 @@
 	class:image-uploader-preview--adaptive={previewAdaptive}
 	class:image-uploader-preview--plain={previewStyle === 'plain'}
 	style={imageSizeStyle}
+	data-testid="image-uploader-preview"
 >
 	<img
 		src={getImageUrl(file)}

package/dist/components/Input.svelte

@@ -83,6 +83,10 @@
 		/** Adds increment/decrement stepper buttons. Only for `type="number"`. @default false */
 		enableNumberStepper?: boolean;
 
+		// ARIA/アクセシビリティ
+		/** Accessible label for the input, used when no associated visible label exists. */
+		ariaLabel?: string;
+
 		// フォーカスイベント
 		onfocus?: FocusHandler;
 		onblur?: FocusHandler;
@@ -192,6 +196,9 @@
 		clearButtonAriaLabel = t('input.clear'),
 		linkify = false,
 
+		// ARIA/アクセシビリティ
+		ariaLabel,
+
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
 		onblur = () => {}, // No params for type inference
@@ -718,6 +725,7 @@
 			{disabled}
 			{readonly}
 			{required}
+			aria-label={ariaLabel}
 			{tabindex}
 			{spellcheck}
 			onchange={handleChange}
@@ -1099,7 +1107,6 @@
 		width: 32px;
 		height: 32px;
 		transform: translateY(-50%);
-		font-size: var(--svelte-ui-select-dropdown-icon-size);
 		color: var(--svelte-ui-input-icon-color);
 		pointer-events: none;
 		z-index: 1;
@@ -1115,7 +1122,6 @@
 		width: 32px;
 		height: 32px;
 		transform: translateY(-50%);
-		font-size: var(--svelte-ui-select-dropdown-icon-size);
 		color: var(--svelte-ui-input-icon-color);
 		pointer-events: none;
 		z-index: 2;

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

@@ -55,6 +55,8 @@ export type InputProps = {
     enablePasswordVisibilityToggle?: boolean;
     /** Adds increment/decrement stepper buttons. Only for `type="number"`. @default false */
     enableNumberStepper?: boolean;
+    /** Accessible label for the input, used when no associated visible label exists. */
+    ariaLabel?: string;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;

package/dist/components/LoadingSpinner.svelte

@@ -47,7 +47,7 @@
 
 <div
 	class="loading-spinner"
-	class:spinner--no-motion={reducedMotion}
+	class:loading-spinner--no-motion={reducedMotion}
 	style:--internal-loading-spinner-grow-duration="{growDuration}s"
 	style:--internal-loading-spinner-rotate-duration="{rotateDuration}s"
 	style:--internal-loading-spinner-size="{size}px"
@@ -114,8 +114,8 @@
 	}
 
 	/* Reduced motion */
-	.spinner--no-motion svg,
-	.spinner--no-motion circle {
+	.loading-spinner--no-motion svg,
+	.loading-spinner--no-motion circle {
 		animation-duration: 0.01s;
 	}
 

package/dist/components/Modal.svelte

@@ -26,6 +26,9 @@
 		/** Internal label used for accessibility announcements. @default 'Modal' */
 		componentType?: string;
 
+		// HTML属性
+		id?: string;
+
 		// スタイル/レイアウト
 		customClass?: string;
 		customStyles?: string;
@@ -44,9 +47,6 @@
 		ariaLabel?: string;
 		ariaLabelledby?: string;
 		ariaDescribedby?: string;
-
-		// HTML属性
-		id?: string;
 	};
 
 	let {
@@ -56,6 +56,9 @@
 		// 基本プロパティ
 		componentType = 'Modal',
 
+		// HTML属性
+		id,
+
 		// スタイル/レイアウト
 		customClass = '',
 		customStyles = '',
@@ -69,10 +72,7 @@
 		// ARIA/アクセシビリティ
 		ariaLabel,
 		ariaLabelledby,
-		ariaDescribedby,
-
-		// HTML属性
-		id
+		ariaDescribedby
 	}: ModalProps = $props();
 
 	let dialogRef: HTMLDialogElement;

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

@@ -15,6 +15,7 @@ export type ModalProps = {
     children?: Snippet;
     /** Internal label used for accessibility announcements. @default 'Modal' */
     componentType?: string;
+    id?: string;
     customClass?: string;
     customStyles?: string;
     /** Use `modalRef.open()` / `.close()` instead of binding this directly. */
@@ -28,7 +29,6 @@ export type ModalProps = {
     ariaLabel?: string;
     ariaLabelledby?: string;
     ariaDescribedby?: string;
-    id?: string;
 };
 declare const Modal: import("svelte").Component<ModalProps, {
     /** Opens the modal. */ open: (title?: string) => void;

package/dist/components/MultiSelect.svelte

@@ -82,7 +82,8 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
-	const listboxId = $derived(`${id}-listbox`);
+	const fallbackId = `multi-select-${Math.random().toString(36).substring(2, 15)}`;
+	const listboxId = $derived(`${id ?? fallbackId}-listbox`);
 
 	const selectedLabels = $derived(
 		options.filter((o) => value.includes(o.value)).map((o) => o.label)
@@ -291,7 +292,6 @@
   margin-right: calc(0px - var(--svelte-ui-select-icon-space));
   width: 32px;
   height: 32px;
-  font-size: var(--svelte-ui-select-dropdown-icon-size);
   color: var(--svelte-ui-select-dropdown-icon-color);
   pointer-events: none;
 }

package/dist/components/Nav.svelte

@@ -38,6 +38,12 @@
 		// スタイル/レイアウト
 		/** Visual style for the selected item. */
 		selectedVariant?: NavItemSelectedVariant;
+		/** Custom CSS color for item labels (underline variant). */
+		textColor?: string;
+		/** Custom CSS color for the selected item label (underline variant). */
+		selectedTextColor?: string;
+		/** Custom CSS color for the selected underline bar (underline variant). */
+		selectedBarColor?: string;
 		gap?: number | string;
 		/** How child items are displayed. Defaults to `accordion` (vertical), `bar` (horizontal), `bottom-sheet` (mobile). */
 		childrenVariant?: ChildrenVariant;
@@ -77,6 +83,9 @@
 
 		// スタイル/レイアウト
 		selectedVariant,
+		textColor,
+		selectedTextColor,
+		selectedBarColor,
 		gap,
 		childrenVariant = variant === 'mobile'
 			? 'bottom-sheet'
@@ -290,6 +299,9 @@
 				{iconOpticalSize}
 				{iconVariant}
 				{selectedVariant}
+				{textColor}
+				{selectedTextColor}
+				{selectedBarColor}
 				{childrenVariant}
 				{chevron}
 				customStyle={customItemStyle}
@@ -325,6 +337,9 @@
 				{iconOpticalSize}
 				{iconVariant}
 				{selectedVariant}
+				{textColor}
+				{selectedTextColor}
+				{selectedBarColor}
 				customStyle={customChildrenItemStyle}
 				isChild={true}
 				{resolvedCurrentPath}

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

@@ -21,6 +21,12 @@ export type NavProps = {
     iconVariant?: IconVariant;
     /** Visual style for the selected item. */
     selectedVariant?: NavItemSelectedVariant;
+    /** Custom CSS color for item labels (underline variant). */
+    textColor?: string;
+    /** Custom CSS color for the selected item label (underline variant). */
+    selectedTextColor?: string;
+    /** Custom CSS color for the selected underline bar (underline variant). */
+    selectedBarColor?: string;
     gap?: number | string;
     /** How child items are displayed. Defaults to `accordion` (vertical), `bar` (horizontal), `bottom-sheet` (mobile). */
     childrenVariant?: ChildrenVariant;

package/dist/components/NavItem.svelte

@@ -38,6 +38,12 @@
 		/** Show chevron icon on parent items. @default true */
 		chevron?: boolean;
 		selectedVariant?: NavItemSelectedVariant;
+		/** Custom CSS color for the item label (underline variant). */
+		textColor?: string;
+		/** Custom CSS color for the selected item label (underline variant). */
+		selectedTextColor?: string;
+		/** Custom CSS color for the selected underline bar (underline variant). */
+		selectedBarColor?: string;
 		/** How child items are displayed. Defaults to `accordion` (vertical), `bar` (horizontal), `bottom-sheet` (mobile). */
 		childrenVariant?: ChildrenVariant;
 		/** Inline style applied to this nav item element. */
@@ -75,6 +81,9 @@
 		// スタイル/レイアウト
 		chevron = true,
 		selectedVariant,
+		textColor,
+		selectedTextColor,
+		selectedBarColor,
 		childrenVariant = variant === 'mobile' ? 'bottom-sheet' : variant === 'vertical' ? 'accordion' : 'bar',
 		customStyle,
 		customChildrenStyle,
@@ -231,6 +240,9 @@
 		class:nav-item--style-filled={isSelected && resolvedSelectedStyle === 'filled'}
 		class:nav-item--style-tonal={isSelected && resolvedSelectedStyle === 'tonal'}
 		class:nav-item--style-underline={resolvedSelectedStyle === 'underline'}
+		style:--internal-nav-item-underline-text-color={textColor}
+		style:--internal-nav-item-underline-selected-text-color={selectedTextColor}
+		style:--internal-nav-item-underline-bar-color={selectedBarColor}
 		style={customStyle}
 		aria-disabled="true"
 		tabindex="-1"
@@ -260,6 +272,9 @@
 	<div
 		class="nav-item__group nav-item__group--{variant}"
 		class:nav-item__group--open={childrenVariant === 'expanded' || isChildrenVisible}
+		style:--internal-nav-item-underline-text-color={textColor}
+		style:--internal-nav-item-underline-selected-text-color={selectedTextColor}
+		style:--internal-nav-item-underline-bar-color={selectedBarColor}
 	>
 		<a
 			href={resolvedParentHref}
@@ -402,6 +417,9 @@
 		class:nav-item--style-filled={isSelected && resolvedSelectedStyle === 'filled'}
 		class:nav-item--style-tonal={isSelected && resolvedSelectedStyle === 'tonal'}
 		class:nav-item--style-underline={resolvedSelectedStyle === 'underline'}
+		style:--internal-nav-item-underline-text-color={textColor}
+		style:--internal-nav-item-underline-selected-text-color={selectedTextColor}
+		style:--internal-nav-item-underline-bar-color={selectedBarColor}
 		style={customStyle}
 		aria-current={isSelected ? 'page' : undefined}
 		tabindex={0}
@@ -508,7 +526,7 @@
   padding: var(--svelte-ui-nav-item-padding-y) var(--svelte-ui-nav-item-padding-x);
   justify-content: center;
   border-radius: 0;
-  color: var(--svelte-ui-nav-item-underline-text-color);
+  color: var(--internal-nav-item-underline-text-color, var(--svelte-ui-nav-item-underline-text-color));
 }
 
 .nav-item--horizontal::after {
@@ -524,7 +542,7 @@
     opacity: 1;
   }
   .nav-item--horizontal.nav-item--style-underline:hover {
-    color: var(--svelte-ui-nav-item-underline-selected-text-color);
+    color: var(--internal-nav-item-underline-selected-text-color, var(--svelte-ui-nav-item-underline-selected-text-color));
   }
   .nav-item--horizontal.nav-item--style-underline:hover::before {
     opacity: 1;
@@ -545,7 +563,7 @@
 }
 
 .nav-item--horizontal.nav-item--style-underline.nav-item--selected {
-  color: var(--svelte-ui-nav-item-underline-selected-text-color);
+  color: var(--internal-nav-item-underline-selected-text-color, var(--svelte-ui-nav-item-underline-selected-text-color));
 }
 
 .nav-item--horizontal.nav-item--style-underline::before {
@@ -556,7 +574,7 @@
   left: calc(var(--svelte-ui-nav-item-padding-x) - var(--svelte-ui-nav-item-underline-bar-offset));
   width: calc(100% - 2 * var(--svelte-ui-nav-item-padding-x) + 2 * var(--svelte-ui-nav-item-underline-bar-offset));
   height: var(--svelte-ui-nav-item-underline-bar-height);
-  background-color: var(--svelte-ui-nav-item-underline-bar-color);
+  background-color: var(--internal-nav-item-underline-bar-color, var(--svelte-ui-nav-item-underline-bar-color));
   border-radius: var(--svelte-ui-nav-item-underline-bar-radius);
   opacity: 0;
   transition-property: opacity;

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

@@ -19,6 +19,12 @@ export type NavItemProps = {
     /** Show chevron icon on parent items. @default true */
     chevron?: boolean;
     selectedVariant?: NavItemSelectedVariant;
+    /** Custom CSS color for the item label (underline variant). */
+    textColor?: string;
+    /** Custom CSS color for the selected item label (underline variant). */
+    selectedTextColor?: string;
+    /** Custom CSS color for the selected underline bar (underline variant). */
+    selectedBarColor?: string;
     /** How child items are displayed. Defaults to `accordion` (vertical), `bar` (horizontal), `bottom-sheet` (mobile). */
     childrenVariant?: ChildrenVariant;
     /** Inline style applied to this nav item element. */