@14ch/svelte-ui 0.0.19 → 0.0.21

package/dist/assets/styles/variables.scss

@@ -635,8 +635,8 @@
 	--svelte-ui-drawer-description-color: var(--svelte-ui-text-subtle-color);
 
 	/* LoadingSpinner */
-	--svelte-ui-loadingspinner-color: var(--svelte-ui-primary-color);
-	--svelte-ui-loadingspinner-size: 32px;
+	--svelte-ui-loading-spinner-color: var(--svelte-ui-primary-color);
+	--svelte-ui-loading-spinner-size: 32px;
 
 	/* Snackbar */
 	--svelte-ui-snackbar-min-width: 300px;

package/dist/components/Button.svelte

@@ -141,7 +141,7 @@
 		onkeyup = () => {}, // No params for type inference
 
 		// マウスイベント
-		onclick,
+		onclick = () => {}, // No params for type inference
 		onmousedown = () => {}, // No params for type inference
 		onmouseup = () => {}, // No params for type inference
 		onmouseenter = () => {}, // No params for type inference
@@ -328,9 +328,10 @@
 	{type}
 	disabled={isDisabled}
 	class={buttonClasses}
-	style="color: {textColors[variant]}; background-color: {backgroundColors[variant]}; 
-		min-width: {minWidthStyle}; 
-		{customStyle ?? ''};"
+	style:color={textColors[variant]}
+	style:background-color={backgroundColors[variant]}
+	style:min-width={minWidthStyle}
+	style={customStyle}
 	onclick={handleClick}
 	onauxclick={handleAuxClick}
 	onfocus={handleFocus}

package/dist/components/Checkbox.svelte

@@ -37,9 +37,6 @@
 		// ARIA/アクセシビリティ
 		reducedMotion?: boolean;
 
-		// 入力イベント
-		onchange?: (value: boolean) => void;
-
 		// フォーカスイベント
 		onfocus?: FocusHandler;
 		onblur?: FocusHandler;
@@ -73,6 +70,9 @@
 		onpointermove?: PointerHandler;
 		onpointercancel?: PointerHandler;
 
+		// 入力イベント
+		onchange?: (value: boolean) => void;
+
 		// その他
 		[key: string]: any;
 	};
@@ -100,9 +100,6 @@
 		// ARIA/アクセシビリティ
 		reducedMotion = false,
 
-		// 入力イベント
-		onchange = () => {}, // No params for type inference
-
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
 		onblur = () => {}, // No params for type inference
@@ -136,6 +133,9 @@
 		onpointermove = () => {}, // No params for type inference
 		onpointercancel = () => {}, // No params for type inference
 
+		// 入力イベント
+		onchange = () => {}, // No params for type inference
+
 		// その他
 		...restProps
 	}: CheckboxProps = $props();

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

@@ -12,7 +12,6 @@ export type CheckboxProps = {
     disabled?: boolean;
     required?: boolean;
     reducedMotion?: boolean;
-    onchange?: (value: boolean) => void;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -36,6 +35,7 @@ export type CheckboxProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
+    onchange?: (value: boolean) => void;
     [key: string]: any;
 };
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value" | "indeterminate">;

package/dist/components/CheckboxGroup.svelte

@@ -87,11 +87,10 @@
 
 <ul
 	class="checkbox-group"
-	style="--svelte-ui-checkbox-group-flex-direction: {direction === 'vertical' ? 'column' : 'row'};
-    {gapStyle ? `--svelte-ui-checkbox-group-gap: ${gapStyle};` : ''}
-    --svelte-ui-checkbox-group-wrap: {wrap ? 'wrap' : 'none'};
-    --svelte-ui-checkbox-group-min-option-width: {minOptionWidthStyle}
-    "
+	style:--internal-checkbox-group-flex-direction={direction === 'vertical' ? 'column' : 'row'}
+	style:--internal-checkbox-group-gap={gapStyle}
+	style:--internal-checkbox-group-wrap={wrap ? 'wrap' : 'none'}
+	style:--internal-checkbox-group-min-option-width={minOptionWidthStyle}
 >
 	{#each options as option (option.value)}
 		{#if localValues[String(option.value)] !== undefined}
@@ -114,12 +113,18 @@
 <style>
 	.checkbox-group {
 		display: flex;
-		flex-direction: var(--svelte-ui-checkbox-group-flex-direction);
-		gap: var(--svelte-ui-checkbox-group-gap);
-		flex-wrap: var(--svelte-ui-checkbox-group-wrap);
+		flex-direction: var(
+			--internal-checkbox-group-flex-direction,
+			var(--svelte-ui-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));
 	}
 
 	.checkbox-group__option {
-		min-width: var(--svelte-ui-checkbox-group-min-option-width);
+		min-width: var(
+			--internal-checkbox-group-min-option-width,
+			var(--svelte-ui-checkbox-group-min-option-width)
+		);
 	}
 </style>

package/dist/components/Fab.svelte

@@ -307,10 +307,11 @@
 	class:fab--shadow={shadow}
 	class:fab--loading={loading}
 	class:fab--no-motion={reducedMotion}
-	style="color: {textColors[variant]}; background-color: {backgroundColors[variant]}; 
-		--fab-bottom: {bottomOffsetStyle};
-		--fab-side: {sideOffsetStyle};
-		{customStyle ?? ''};"
+	style:color={textColors[variant]}
+	style:background-color={backgroundColors[variant]}
+	style:--internal-fab-bottom={bottomOffsetStyle}
+	style:--internal-fab-side={sideOffsetStyle}
+	style={customStyle}
 	onclick={handleClick}
 	onfocus={handleFocus}
 	onblur={handleBlur}
@@ -368,7 +369,7 @@
   justify-content: center;
   align-items: center;
   position: fixed;
-  bottom: var(--fab-bottom, 24px);
+  bottom: var(--internal-fab-bottom, 24px);
   height: 56px;
   padding: 0 20px;
   background-color: transparent;
@@ -385,17 +386,17 @@
   transition-duration: var(--svelte-ui-transition-duration);
 }
 .fab.fab--left {
-  left: var(--fab-side, 24px);
+  left: var(--internal-fab-side, 24px);
 }
 .fab.fab--center {
   left: 50%;
   transform: translateX(-50%);
 }
 .fab.fab--right {
-  right: var(--fab-side, 24px);
+  right: var(--internal-fab-side, 24px);
 }
 .fab.fab--safe-area {
-  bottom: calc(var(--fab-bottom, 24px) + env(safe-area-inset-bottom, 0px));
+  bottom: calc(var(--internal-fab-bottom, 24px) + env(safe-area-inset-bottom, 0px));
 }
 .fab > * {
   z-index: 1;

package/dist/components/FileUploader.svelte

@@ -259,6 +259,7 @@
 	// $derived
 	// =========================================================================
 	const widthStyle = $derived(getStyleFromNumber(width) || '100%');
+	const heightStyle = $derived(getStyleFromNumber(height));
 </script>
 
 <button
@@ -266,10 +267,8 @@
 	class="file-uploader"
 	class:file-uploader--hover={isHover}
 	class:rounded
-	style="
-		--svelte-ui-file-uploader-width: {widthStyle};
-		--svelte-ui-file-uploader-height: {height}px
-	"
+	style:--internal-file-uploader-width={widthStyle}
+	style:--internal-file-uploader-height={heightStyle}
 	data-testid="file-uploader"
 	onclick={handleClick}
 	onfocus={handleFocus}
@@ -380,8 +379,14 @@
 		align-items: center;
 		gap: 16px;
 		position: relative;
-		width: var(--svelte-ui-file-uploader-width, 100%);
-		height: var(--svelte-ui-file-uploader-height);
+		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)
+		);
 		min-height: 100px;
 		padding: 16px;
 		background-color: var(--svelte-ui-file-uploader-bg);

package/dist/components/Icon.svelte

@@ -76,24 +76,24 @@
 		`'FILL' ${filled ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' ${opticalSize}`
 	);
 
+	const sizeStyle = $derived(getStyleFromNumber(size));
+	const colorStyle = $derived(color || undefined);
+
 	const ariaAttributes = $derived({
 		'aria-hidden': decorative && !ariaLabel ? true : undefined,
 		'aria-label': ariaLabel || undefined,
 		role: !decorative && ariaLabel ? 'img' : undefined
 	});
-
-	const iconStyle = $derived.by(() => {
-		const sizeStyle = getStyleFromNumber(size);
-		return `width: ${sizeStyle}; height: ${sizeStyle}; font-size: ${sizeStyle}; 
-		color: ${color}; 
-		font-variation-settings: ${fontVariationSettings}; 
-		${customStyle}`;
-	});
 </script>
 
 <i
 	class={iconClasses}
-	style={iconStyle}
+	style:width={sizeStyle}
+	style:height={sizeStyle}
+	style:font-size={sizeStyle}
+	style:color={colorStyle}
+	style:font-variation-settings={fontVariationSettings}
+	style={customStyle}
 	{title}
 	{...ariaAttributes}
 	{...restProps}
@@ -106,6 +106,8 @@
 	<!-- Unicode文字での代替表示 -->
 	<span
 		class="icon-fallback-text"
+		style:font-size={sizeStyle}
+		style:color={colorStyle}
 		style={customStyle}
 		{...ariaAttributes}
 		{...restProps}

package/dist/components/ImageUploader.svelte

@@ -337,10 +337,8 @@
 	class:image-uploader--multiple={multiple}
 	class:image-uploader--rounded={rounded}
 	class:image-uploader--adaptive={previewAdaptive}
-	style="
-			--svelte-ui-image-uploader-button-width: {previewWidthStyle};
-			--svelte-ui-image-uploader-button-height: {previewHeightStyle};
-		"
+	style:--internal-image-uploader-button-width={previewWidthStyle}
+	style:--internal-image-uploader-button-height={previewHeightStyle}
 	data-testid="image-uploader"
 >
 	{#if multiple}
@@ -446,8 +444,14 @@
 		align-items: center;
 		position: relative;
 		max-width: 100%;
-		min-width: var(--svelte-ui-image-uploader-button-width);
-		min-height: var(--svelte-ui-image-uploader-button-height);
+		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)
+		);
 		padding: 16px;
 		background-color: var(--svelte-ui-form-bg);
 		border-radius: var(--svelte-ui-border-radius);

package/dist/components/Input.svelte

@@ -672,7 +672,9 @@
 	class:input--readonly={readonly}
 	class:input--focused={isFocused}
 	data-testid="input"
-	style="width: {widthStyle}; max-width: {maxWidthStyle}; min-width: {minWidthStyle}"
+	style:width={widthStyle}
+	style:max-width={maxWidthStyle}
+	style:min-width={minWidthStyle}
 >
 	<!-- 表示用テキスト -->
 	<div class="input__display-text" style={customStyle}>
@@ -887,7 +889,6 @@
 		text-align: inherit;
 
 		&[type='number'] {
-			text-align: right;
 			&::-webkit-outer-spin-button,
 			&::-webkit-inner-spin-button {
 				-webkit-appearance: none;
@@ -916,10 +917,15 @@
 		transition: none;
 	}
 
+	.input__display-text-content {
+		width: 100%;
+	}
+
 	.input__link-text {
 		position: absolute;
 		top: 0;
 		left: 0;
+		width: 100%;
 		height: 100%;
 		pointer-events: none;
 		z-index: 1;
@@ -1127,13 +1133,6 @@
 	/* =============================================
  * タイプ別スタイル
  * ============================================= */
-	/* type-number */
-	.input--type-number {
-		.input__display-text {
-			justify-content: flex-end;
-		}
-	}
-
 	/* type-password: セキュリティのため常にinputを表示（display-textは非表示） */
 	.input--type-password {
 		/* inputを常に表示（表示制御の非フォーカス時の不可視化を上書き） */

package/dist/components/LoadingSpinner.svelte

@@ -44,13 +44,13 @@
 <div
 	class="loading-spinner"
 	class:spinner--no-motion={reducedMotion}
-	style:--svelte-ui-loading-spinner-grow-duration="{growDuration}s"
-	style:--svelte-ui-loading-spinner-rotate-duration="{rotateDuration}s"
-	style:--svelte-ui-loading-spinner-size="{size}px"
-	style:--svelte-ui-loading-spinner-color={color}
-	style:--svelte-ui-loading-spinner-circumference={circumference}
-	style:--svelte-ui-loading-spinner-half-circumference={halfCircumference}
-	style:--svelte-ui-loading-spinner-negative-half-circumference={negativeHalfCircumference}
+	style:--internal-loading-spinner-grow-duration="{growDuration}s"
+	style:--internal-loading-spinner-rotate-duration="{rotateDuration}s"
+	style:--internal-loading-spinner-size="{size}px"
+	style:--internal-loading-spinner-color={color}
+	style:--internal-loading-spinner-circumference={circumference}
+	style:--internal-loading-spinner-half-circumference={halfCircumference}
+	style:--internal-loading-spinner-negative-half-circumference={negativeHalfCircumference}
 	data-testid="loading-spinner"
 >
 	<svg viewBox="0 0 {size} {size}" width={size} height={size}>
@@ -60,23 +60,26 @@
 
 <style>
 	.loading-spinner {
-		width: var(--svelte-ui-loading-spinner-size, var(--svelte-ui-loadingspinner-size));
-		height: var(--svelte-ui-loading-spinner-size, var(--svelte-ui-loadingspinner-size));
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100px;
 		line-height: 1px;
 	}
 
 	.loading-spinner svg {
-		width: 100%;
-		height: 100%;
+		width: var(--internal-loading-spinner-size, var(--svelte-ui-loading-spinner-size));
+		height: var(--internal-loading-spinner-size, var(--svelte-ui-loading-spinner-size));
 		transform: rotate(-90deg);
-		animation: rotate var(--svelte-ui-loading-spinner-rotate-duration, 0.8s) linear infinite;
+		animation: rotate var(--internal-loading-spinner-rotate-duration, 0.8s) linear infinite;
 	}
 
 	.loading-spinner circle {
 		fill: none;
-		stroke: var(--svelte-ui-loading-spinner-color, var(--svelte-ui-loadingspinner-color));
+		stroke: var(--internal-loading-spinner-color, var(--svelte-ui-loading-spinner-color));
 		stroke-linecap: butt;
-		animation: complex-grow var(--svelte-ui-loading-spinner-grow-duration, 1.6s) linear infinite;
+		animation: complex-grow var(--internal-loading-spinner-grow-duration, 1.6s) linear infinite;
 		transform-origin: center;
 	}
 
@@ -92,17 +95,17 @@
 	@keyframes complex-grow {
 		/* 負の値も別のCSS変数として定義 */
 		0% {
-			stroke-dasharray: 0 var(--svelte-ui-loading-spinner-circumference);
-			stroke-dashoffset: var(--svelte-ui-loading-spinner-negative-half-circumference);
+			stroke-dasharray: 0 var(--internal-loading-spinner-circumference);
+			stroke-dashoffset: var(--internal-loading-spinner-negative-half-circumference);
 		}
 		50% {
-			stroke-dasharray: var(--svelte-ui-loading-spinner-half-circumference)
-				var(--svelte-ui-loading-spinner-circumference);
+			stroke-dasharray: var(--internal-loading-spinner-half-circumference)
+				var(--internal-loading-spinner-circumference);
 			stroke-dashoffset: 0;
 		}
 		100% {
-			stroke-dasharray: 0 var(--svelte-ui-loading-spinner-circumference);
-			stroke-dashoffset: var(--svelte-ui-loading-spinner-negative-half-circumference);
+			stroke-dasharray: 0 var(--internal-loading-spinner-circumference);
+			stroke-dashoffset: var(--internal-loading-spinner-negative-half-circumference);
 		}
 	}
 

package/dist/components/Radio.svelte

@@ -39,9 +39,6 @@
 		// ARIA/アクセシビリティ
 		reducedMotion?: boolean;
 
-		// 入力イベント
-		onchange?: BivariantValueHandler<OptionValue>;
-
 		// フォーカスイベント
 		onfocus?: FocusHandler;
 		onblur?: FocusHandler;
@@ -75,6 +72,9 @@
 		onpointermove?: PointerHandler;
 		onpointercancel?: PointerHandler;
 
+		// 入力イベント
+		onchange?: BivariantValueHandler<OptionValue>;
+
 		// その他
 		[key: string]: any;
 	};
@@ -102,9 +102,6 @@
 		// ARIA/アクセシビリティ
 		reducedMotion = false,
 
-		// 入力イベント
-		onchange = () => {}, // No params for type inference
-
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
 		onblur = () => {}, // No params for type inference
@@ -138,6 +135,9 @@
 		onpointermove = () => {}, // No params for type inference
 		onpointercancel = () => {}, // No params for type inference
 
+		// 入力イベント
+		onchange = () => {}, // No params for type inference
+
 		// その他
 		...restProps
 	}: RadioProps = $props();

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

@@ -13,7 +13,6 @@ export type RadioProps = {
     disabled?: boolean;
     required?: boolean;
     reducedMotion?: boolean;
-    onchange?: BivariantValueHandler<OptionValue>;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -37,6 +36,7 @@ export type RadioProps = {
     onpointerleave?: PointerHandler;
     onpointermove?: PointerHandler;
     onpointercancel?: PointerHandler;
+    onchange?: BivariantValueHandler<OptionValue>;
     [key: string]: any;
 };
 declare const Radio: import("svelte").Component<RadioProps, {}, "currentValue">;

package/dist/components/RadioGroup.svelte

@@ -73,11 +73,10 @@
 
 <ul
 	class="radio-group"
-	style="--svelte-ui-radio-group-flex-direction: {direction === 'vertical' ? 'column' : 'row'};
-    {gapStyle ? `--svelte-ui-radio-group-gap: ${gapStyle};` : ''}
-    --svelte-ui-radio-group-wrap: {wrap ? 'wrap' : 'none'};
-    --svelte-ui-radio-group-min-option-width: {minOptionWidthStyle}
-    "
+	style:--internal-radio-group-flex-direction={direction === 'vertical' ? 'column' : 'row'}
+	style:--internal-radio-group-gap={gapStyle}
+	style:--internal-radio-group-wrap={wrap ? 'wrap' : 'none'}
+	style:--internal-radio-group-min-option-width={minOptionWidthStyle}
 >
 	{#each options as option (option.value)}
 		<li class="radio-group__option">
@@ -100,12 +99,18 @@
 <style>
 	.radio-group {
 		display: flex;
-		flex-direction: var(--svelte-ui-radio-group-flex-direction);
-		gap: var(--svelte-ui-radio-group-gap);
-		flex-wrap: var(--svelte-ui-radio-group-wrap);
+		flex-direction: var(
+			--internal-radio-group-flex-direction,
+			var(--svelte-ui-radio-group-flex-direction)
+		);
+		gap: var(--internal-radio-group-gap, var(--svelte-ui-radio-group-gap));
+		flex-wrap: var(--internal-radio-group-wrap, var(--svelte-ui-radio-group-wrap));
 	}
 
 	.radio-group__option {
-		min-width: var(--svelte-ui-radio-group-min-option-width);
+		min-width: var(
+			--internal-radio-group-min-option-width,
+			var(--svelte-ui-radio-group-min-option-width)
+		);
 	}
 </style>

package/dist/components/SegmentedControl.svelte

@@ -399,7 +399,7 @@
 	role="radiogroup"
 	aria-label={ariaLabelledby ? undefined : ariaLabel}
 	aria-labelledby={ariaLabelledby}
-	style="--svelte-ui-segmented-control-selected-bg: {color || 'var(--svelte-ui-primary-color)'};"
+	style:--internal-segmented-control-selected-bg={color || 'var(--svelte-ui-primary-color)'}
 	{id}
 	data-testid="segmented-control"
 	{...restProps}
@@ -605,7 +605,7 @@
 
 .segmented-control__input:checked + .segmented-control__label,
 .segmented-control__label--selected {
-  background-color: var(--svelte-ui-segmented-control-selected-bg);
+  background-color: var(--internal-segmented-control-selected-bg, var(--svelte-ui-segmented-control-selected-bg));
   color: var(--svelte-ui-segmented-control-selected-text-color, white);
 }
 

package/dist/components/Select.svelte

@@ -378,6 +378,7 @@ select--focus-{focusStyle}"
 		color: inherit;
 		line-height: inherit;
 		text-align: inherit;
+		cursor: pointer;
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;

package/dist/components/Slider.svelte

@@ -284,28 +284,19 @@
 		oninput?.(value);
 	};
 
-	// パーセンテージ計算
+	// パーセンテージ計算（将来の表示用に保持）
 	const percentage = $derived(((value - min) / (max - min)) * 100);
 
 	// スタイル計算
-	const thumbColorStyle = $derived(
-		thumbColor ? `--svelte-ui-slider-thumb-background: ${thumbColor};` : ''
+	const sliderWidthStyle = $derived(width ? getStyleFromNumber(width) : undefined);
+	const sliderHeightStyle = $derived(
+		thumbHeight ? getStyleFromNumber(thumbHeight) : 'var(--svelte-ui-slider-thumb-height)'
 	);
-
 	const thumbWidthStyle = $derived(
-		thumbWidth ? `--svelte-ui-slider-thumb-width: ${getStyleFromNumber(thumbWidth)};` : ''
+		thumbWidth ? getStyleFromNumber(thumbWidth) : undefined
 	);
-
 	const thumbHeightStyle = $derived(
-		thumbHeight ? `--svelte-ui-slider-thumb-height: ${getStyleFromNumber(thumbHeight)};` : ''
-	);
-
-	const sliderWidthStyle = $derived(width ? `width: ${getStyleFromNumber(width)};` : '');
-
-	const sliderHeightStyle = $derived(
-		thumbHeight
-			? `height: ${getStyleFromNumber(thumbHeight)};`
-			: 'height: var(--svelte-ui-slider-thumb-height);'
+		thumbHeight ? getStyleFromNumber(thumbHeight) : undefined
 	);
 </script>
 
@@ -315,7 +306,12 @@
 	class:slider--disabled={disabled}
 	class:slider--focused={isFocused}
 	data-testid="slider"
-	style="{sliderWidthStyle} {sliderHeightStyle} {thumbColorStyle} {thumbWidthStyle} {thumbHeightStyle} {customStyle}"
+	style:width={sliderWidthStyle}
+	style:height={sliderHeightStyle}
+	style:--internal-slider-thumb-background={thumbColor}
+	style:--internal-slider-thumb-width={thumbWidthStyle}
+	style:--internal-slider-thumb-height={thumbHeightStyle}
+	style={customStyle}
 >
 	<input
 		{id}
@@ -382,7 +378,10 @@
 	 * ============================================= */
 	.slider__input {
 		width: 100%;
-		height: var(--svelte-ui-slider-track-height);
+		height: var(
+			--internal-slider-track-height,
+			var(--svelte-ui-slider-track-height)
+		);
 		margin: 0;
 		background: var(--svelte-ui-slider-track-background);
 		border-radius: var(--svelte-ui-slider-track-border-radius);
@@ -395,17 +394,35 @@
 	/* Track styles */
 	.slider__input::-webkit-slider-track {
 		width: 100%;
-		height: var(--svelte-ui-slider-track-height);
-		background: var(--svelte-ui-slider-track-background);
-		border-radius: var(--svelte-ui-slider-track-border-radius);
+		height: var(
+			--internal-slider-track-height,
+			var(--svelte-ui-slider-track-height)
+		);
+		background: var(
+			--internal-slider-track-background,
+			var(--svelte-ui-slider-track-background)
+		);
+		border-radius: var(
+			--internal-slider-track-border-radius,
+			var(--svelte-ui-slider-track-border-radius)
+		);
 		border: none;
 	}
 
 	.slider__input::-moz-range-track {
 		width: 100%;
-		height: var(--svelte-ui-slider-track-height);
-		background: var(--svelte-ui-slider-track-background);
-		border-radius: var(--svelte-ui-slider-track-border-radius);
+		height: var(
+			--internal-slider-track-height,
+			var(--svelte-ui-slider-track-height)
+		);
+		background: var(
+			--internal-slider-track-background,
+			var(--svelte-ui-slider-track-background)
+		);
+		border-radius: var(
+			--internal-slider-track-border-radius,
+			var(--svelte-ui-slider-track-border-radius)
+		);
 		border: none;
 	}
 
@@ -413,21 +430,51 @@
 	.slider__input::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
-		width: var(--svelte-ui-slider-thumb-width);
-		height: var(--svelte-ui-slider-thumb-height);
-		background: var(--svelte-ui-slider-thumb-background);
-		border-radius: var(--svelte-ui-slider-thumb-border-radius);
-		border: var(--svelte-ui-slider-thumb-border);
+		width: var(
+			--internal-slider-thumb-width,
+			var(--svelte-ui-slider-thumb-width)
+		);
+		height: var(
+			--internal-slider-thumb-height,
+			var(--svelte-ui-slider-thumb-height)
+		);
+		background: var(
+			--internal-slider-thumb-background,
+			var(--svelte-ui-slider-thumb-background)
+		);
+		border-radius: var(
+			--internal-slider-thumb-border-radius,
+			var(--svelte-ui-slider-thumb-border-radius)
+		);
+		border: var(
+			--internal-slider-thumb-border,
+			var(--svelte-ui-slider-thumb-border)
+		);
 		cursor: pointer;
 		box-shadow: var(--svelte-ui-slider-thumb-shadow);
 	}
 
 	.slider__input::-moz-range-thumb {
-		width: var(--svelte-ui-slider-thumb-width);
-		height: var(--svelte-ui-slider-thumb-height);
-		background: var(--svelte-ui-slider-thumb-background);
-		border-radius: var(--svelte-ui-slider-thumb-border-radius);
-		border: var(--svelte-ui-slider-thumb-border);
+		width: var(
+			--internal-slider-thumb-width,
+			var(--svelte-ui-slider-thumb-width)
+		);
+		height: var(
+			--internal-slider-thumb-height,
+			var(--svelte-ui-slider-thumb-height)
+		);
+		background: var(
+			--internal-slider-thumb-background,
+			var(--svelte-ui-slider-thumb-background)
+		);
+		border-radius: var(
+			--internal-slider-thumb-border-radius,
+			var(--svelte-ui-slider-thumb-border-radius)
+		);
+		border: var(
+			--internal-slider-thumb-border,
+			var(--svelte-ui-slider-thumb-border)
+		);
 		cursor: pointer;
 		box-shadow: var(--svelte-ui-slider-thumb-shadow);
 	}

package/dist/components/SnackbarItem.svelte

@@ -146,22 +146,33 @@
 
 <div
 	bind:this={snackbarRef}
-	class="snackbar-item snackbar-item--{position} {visible ? '' : 'snackbar-item--hidden'}"
+	class="snackbar-item"
+	class:snackbar-item--top={position === 'top'}
+	class:snackbar-item--bottom={position === 'bottom'}
+	class:snackbar-item--hidden={!visible}
 	data-testid="snackbar-item"
 >
 	<div
-		class="snackbar-item__content snackbar-item__content--{type} snackbar-item__content--{variant} snackbar-item__content--{position} {visible
-			? 'snackbar-item__content--visible'
-			: ''}"
-		style="--svelte-ui-snackbar-item-custom-color: {color ??
-			'unset'}; --svelte-ui-snackbar-item-custom-text-color: {textColor ?? 'unset'};"
+		class="snackbar-item__content"
+		class:snackbar-item__content--info={type === 'info'}
+		class:snackbar-item__content--success={type === 'success'}
+		class:snackbar-item__content--warning={type === 'warning'}
+		class:snackbar-item__content--error={type === 'error'}
+		class:snackbar-item__content--default={type === 'default'}
+		class:snackbar-item__content--filled={variant === 'filled'}
+		class:snackbar-item__content--outlined={variant === 'outlined'}
+		class:snackbar-item__content--top={position === 'top'}
+		class:snackbar-item__content--bottom={position === 'bottom'}
+		class:snackbar-item__content--visible={visible}
+		style:--internal-snackbar-item-custom-color={color ?? 'unset'}
+		style:--internal-snackbar-item-custom-text-color={textColor ?? 'unset'}
 		role={type === 'error' || type === 'warning' ? 'alert' : 'status'}
 		aria-live={type === 'error' || type === 'warning' ? 'assertive' : 'polite'}
 		aria-atomic="true"
 		aria-hidden={!visible}
 	>
 		{#if typeIcons[type]}
-			<div class="snackbar__icon" aria-hidden="true">
+			<div class="snackbar-item__icon" aria-hidden="true">
 				<Icon name={typeIcons[type]} size={32}>{typeIcons[type]}</Icon>
 			</div>
 		{/if}
@@ -332,90 +343,90 @@
 	/* Type variants - filled */
 	.snackbar-item__content--filled.snackbar-item__content--info {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-info-filled-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-info-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--info .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-info-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--success {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-success-filled-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-success-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--success .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-success-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--warning {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-warning-filled-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-warning-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--warning .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-warning-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--error {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-error-filled-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-error-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--error .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-error-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--default {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-default-filled-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-default-filled-text-color)
 		);
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--default .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-default-filled-text-color)
 		);
 	}
@@ -423,115 +434,115 @@
 	/* Type variants - outlined */
 	.snackbar-item__content--outlined.snackbar-item__content--info {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-info-outlined-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-info-outlined-text-color)
 		);
 		box-shadow: inset 0 0 0 1px
 			var(
-				--svelte-ui-snackbar-item-custom-color,
+				--internal-snackbar-item-custom-color,
 				var(--svelte-ui-snackbar-info-outlined-border-color)
 			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--info .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-info-outlined-text-color)
 		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--success {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-success-outlined-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-success-outlined-text-color)
 		);
 		box-shadow: inset 0 0 0 1px
 			var(
-				--svelte-ui-snackbar-item-custom-color,
+				--internal-snackbar-item-custom-color,
 				var(--svelte-ui-snackbar-success-outlined-border-color)
 			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--success .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-success-outlined-text-color)
 		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--warning {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-warning-outlined-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-warning-outlined-text-color)
 		);
 		box-shadow: inset 0 0 0 1px
 			var(
-				--svelte-ui-snackbar-item-custom-color,
+				--internal-snackbar-item-custom-color,
 				var(--svelte-ui-snackbar-warning-outlined-border-color)
 			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--warning .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-warning-outlined-text-color)
 		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--error {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-error-outlined-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-error-outlined-text-color)
 		);
 		box-shadow: inset 0 0 0 1px
 			var(
-				--svelte-ui-snackbar-item-custom-color,
+				--internal-snackbar-item-custom-color,
 				var(--svelte-ui-snackbar-error-outlined-border-color)
 			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--error .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-error-outlined-text-color)
 		);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--default {
 		background-color: var(
-			--svelte-ui-snackbar-item-custom-color,
+			--internal-snackbar-item-custom-color,
 			var(--svelte-ui-snackbar-default-outlined-bg)
 		);
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-default-outlined-text-color)
 		);
 		box-shadow: inset 0 0 0 1px
 			var(
-				--svelte-ui-snackbar-item-custom-color,
+				--internal-snackbar-item-custom-color,
 				var(--svelte-ui-snackbar-default-outlined-border-color)
 			);
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--default .snackbar-item__icon {
 		color: var(
-			--svelte-ui-snackbar-item-custom-text-color,
+			--internal-snackbar-item-custom-text-color,
 			var(--svelte-ui-snackbar-default-outlined-text-color)
 		);
 	}

package/dist/components/Tab.svelte

@@ -3,7 +3,7 @@
 <script lang="ts">
 	import TabItem from './TabItem.svelte';
 	import type { MenuItem } from '../types/menuItem';
-	import { afterNavigate } from '$app/navigation';
+	import { subscribeUrlChange } from '../utils/urlChange';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -44,6 +44,21 @@
 
 	let resolvedCurrentPath = $state('');
 
+	// =========================================================================
+	// Effects
+	// =========================================================================
+	$effect(() => {
+		// props の currentPath が変更されたとき
+		resolvedCurrentPath = getCurrentPath();
+	});
+
+	$effect(() => {
+		// URL の変更を subscribe
+		return subscribeUrlChange(() => {
+			resolvedCurrentPath = getCurrentPath();
+		});
+	});
+
 	// =========================================================================
 	// Methods
 	// =========================================================================
@@ -57,18 +72,10 @@
 		if (typeof window !== 'undefined') {
 			return window.location.pathname;
 		}
+
 		return '';
 	};
 
-	// currentPath が渡されたときやマウント時に選択状態を反映
-	$effect(() => {
-		resolvedCurrentPath = getCurrentPath();
-	});
-
-	afterNavigate(() => {
-		resolvedCurrentPath = getCurrentPath();
-	});
-
 	// パスの正規化処理
 	const normalizePath = (path: string): string => {
 		if (!pathPrefix) return path;
@@ -109,11 +116,6 @@
 		return normalizedCurrentPath !== '' && normalizedCurrentPath.startsWith(itemHref);
 	};
 
-	// 有効なタブのインデックス一覧（disabled を除く）
-	const enabledIndices = $derived(
-		tabItems.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0)
-	);
-
 	// シンプルなキーボードナビゲーション（disabled タブはスキップ）
 	const handleKeyDown = (event: KeyboardEvent) => {
 		if (tabItems.length === 0 || enabledIndices.length === 0) return;
@@ -171,6 +173,11 @@
 		}
 		return -1;
 	});
+
+	// 有効なタブのインデックス一覧（disabled を除く）
+	const enabledIndices = $derived(
+		tabItems.map((item, i) => (item.disabled ? -1 : i)).filter((i) => i >= 0)
+	);
 </script>
 
 <div

package/dist/components/TabItem.svelte

@@ -71,23 +71,19 @@
 		return `${pathPrefix}${tabItem.href.startsWith('/') ? '' : '/'}${tabItem.href}`;
 	});
 
-	// 明示的に渡されたときだけ style で上書き。未渡しなら variables の tab 用変数をそのまま参照
-	const tabItemStyle = $derived.by(() => {
-		const parts: string[] = [];
-		if (textColor !== undefined) parts.push(`--svelte-ui-tab-item-text-color: ${textColor}`);
-		if (selectedTextColor !== undefined)
-			parts.push(`--svelte-ui-tab-item-selected-text-color: ${selectedTextColor}`);
-		if (selectedBarColor !== undefined)
-			parts.push(`--svelte-ui-tab-item-selected-bar-color: ${selectedBarColor}`);
-		return parts.length > 0 ? parts.join('; ') : undefined;
-	});
+	// 明示的に渡されたときだけ内部CSS変数で上書き。未渡しなら variables の tab 用変数をそのまま参照
+	const internalTextColor = $derived(textColor);
+	const internalSelectedTextColor = $derived(selectedTextColor);
+	const internalSelectedBarColor = $derived(selectedBarColor);
 </script>
 
 {#if isDisabled}
 	<span
 		class="tab-item tab-item--disabled"
 		class:tab-item--selected={isSelected}
-		style={tabItemStyle}
+		style:--internal-tab-item-text-color={internalTextColor}
+		style:--internal-tab-item-selected-text-color={internalSelectedTextColor}
+		style:--internal-tab-item-selected-bar-color={internalSelectedBarColor}
 		role="tab"
 		aria-selected={isSelected}
 		aria-disabled="true"
@@ -116,7 +112,9 @@
 		href={hrefWithPrefix}
 		class="tab-item"
 		class:tab-item--selected={isSelected}
-		style={tabItemStyle}
+		style:--internal-tab-item-text-color={internalTextColor}
+		style:--internal-tab-item-selected-text-color={internalSelectedTextColor}
+		style:--internal-tab-item-selected-bar-color={internalSelectedBarColor}
 		role="tab"
 		aria-selected={isSelected}
 		tabindex={0}
@@ -149,7 +147,7 @@
   gap: var(--svelte-ui-tab-item-icon-gap);
   position: relative;
   padding: var(--svelte-ui-tab-item-padding);
-  color: var(--svelte-ui-tab-item-text-color);
+  color: var(--internal-tab-item-text-color, var(--svelte-ui-tab-item-text-color));
   white-space: nowrap;
   text-decoration: none;
   transition-property: background-color, color, outline;
@@ -159,7 +157,7 @@
 
 @media (hover: hover) {
   .tab-item:hover:not(.tab-item--selected) {
-    color: var(--svelte-ui-tab-item-selected-text-color);
+    color: var(--internal-tab-item-selected-text-color, var(--svelte-ui-tab-item-selected-text-color));
   }
   .tab-item:hover:not(.tab-item--selected)::before {
     opacity: 1;
@@ -178,7 +176,7 @@
     outline-offset: var(--svelte-ui-focus-outline-offset-inner);
   }
   .tab-item:focus:not(.tab-item--selected) {
-    color: var(--svelte-ui-tab-item-selected-text-color);
+    color: var(--internal-tab-item-selected-text-color, var(--svelte-ui-tab-item-selected-text-color));
   }
   .tab-item:focus:not(.tab-item--selected)::before {
     opacity: 1;
@@ -193,7 +191,7 @@
   bottom: 0;
   width: calc(100% - 2 * var(--svelte-ui-tab-item-padding-x) + 2 * var(--svelte-ui-tab-item-selected-bar-offset));
   height: var(--svelte-ui-tab-item-selected-bar-height);
-  background-color: var(--svelte-ui-tab-item-selected-bar-color);
+  background-color: var(--internal-tab-item-selected-bar-color, var(--svelte-ui-tab-item-selected-bar-color));
   border-radius: var(--svelte-ui-tab-item-selected-bar-radius);
   opacity: 0;
   transition-property: opacity;
@@ -201,7 +199,7 @@
 }
 
 .tab-item--selected {
-  color: var(--svelte-ui-tab-item-selected-text-color);
+  color: var(--internal-tab-item-selected-text-color, var(--svelte-ui-tab-item-selected-text-color));
   background-color: transparent;
 }
 

package/dist/components/Textarea.svelte

@@ -524,13 +524,16 @@
 	class:textarea--readonly={readonly}
 	class:textarea--focused={isFocused}
 	data-testid="textarea"
-	style="width: {widthStyle}; {!inline ? `max-height: ${maxHeightStyle};` : ''}"
+	style:width={widthStyle}
+	style:max-height={!inline ? maxHeightStyle : undefined}
 >
 	<div
 		bind:this={displayTextRef}
 		class="textarea__display-text"
 		class:textarea__display-text--placeholder={!hasDisplayValue}
-		style="min-height: {minHeightStyle}; max-height: {maxHeightStyle}; {customStyle}"
+		style:min-height={minHeightStyle}
+		style:max-height={maxHeightStyle}
+		style={customStyle}
 	>
 		{@html displayValue}
 	</div>
@@ -552,7 +555,8 @@
 			{spellcheck}
 			{autocapitalize}
 			class:resizable
-			style="min-height: {minHeightStyle}; {customStyle}"
+			style:min-height={minHeightStyle}
+			style={customStyle}
 			onchange={handleChange}
 			oninput={handleInput}
 			onfocus={handleFocus}
@@ -587,7 +591,9 @@
 		<div
 			bind:this={linkTextRef}
 			class="textarea__link-text"
-			style="min-height: {minHeightStyle}; max-height: {maxHeightStyle}; {customStyle}"
+			style:min-height={minHeightStyle}
+			style:max-height={maxHeightStyle}
+			style={customStyle}
 		>
 			{@html linkHtmlValue}
 		</div>

package/dist/utils/urlChange.d.ts

@@ -0,0 +1 @@
+export declare const subscribeUrlChange: (handler: () => void) => () => void;

package/dist/utils/urlChange.js

@@ -0,0 +1,29 @@
+const URL_CHANGE_EVENT = 'svelte-ui:urlchange';
+let historyPatched = false;
+const patchHistory = () => {
+    if (historyPatched || typeof window === 'undefined')
+        return;
+    historyPatched = true;
+    const originalPushState = history.pushState.bind(history);
+    const originalReplaceState = history.replaceState.bind(history);
+    history.pushState = (...args) => {
+        originalPushState(...args);
+        window.dispatchEvent(new Event(URL_CHANGE_EVENT));
+    };
+    history.replaceState = (...args) => {
+        originalReplaceState(...args);
+        window.dispatchEvent(new Event(URL_CHANGE_EVENT));
+    };
+};
+export const subscribeUrlChange = (handler) => {
+    if (typeof window === 'undefined') {
+        return () => { };
+    }
+    patchHistory();
+    window.addEventListener('popstate', handler);
+    window.addEventListener(URL_CHANGE_EVENT, handler);
+    return () => {
+        window.removeEventListener('popstate', handler);
+        window.removeEventListener(URL_CHANGE_EVENT, handler);
+    };
+};

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@14ch/svelte-ui",
 	"description": "Modern Svelte UI components library with TypeScript support",
 	"private": false,
-	"version": "0.0.19",
+	"version": "0.0.21",
 	"type": "module",
 	"keywords": [
 		"svelte",
@@ -106,7 +106,6 @@
 		"sass": "^1.89.2"
 	},
 	"peerDependencies": {
-		"@sveltejs/kit": "^2.0.0",
 		"svelte": "^5.0.0"
 	}
 }