@14ch/svelte-ui 0.0.71 → 0.0.73

package/dist/assets/styles/core.scss

@@ -19,6 +19,8 @@
 button {
 	background: transparent;
 	border: none;
+	/* UA 既定の color: buttontext は継承より強く、ダークテーマでも黒のままになる */
+	color: inherit;
 	font-size: inherit;
 	font-weight: inherit;
 	cursor: pointer;

package/dist/assets/styles/import.css

@@ -157,6 +157,8 @@
   --svelte-ui-form-bg: var(--base-50-transparent);
   /* サーフェス背景色 */
   --svelte-ui-surface-color: var(--white);
+  /* 浮き上がる面（ポップアップ・ダイアログ等）。ライトは白より明るくできないため地の面と同じ */
+  --svelte-ui-surface-elevated-color: var(--svelte-ui-surface-color);
   --svelte-ui-surface-accent-color: var(--base-50-transparent);
   --svelte-ui-surface-inverse-color: var(--base-800-transparent);
   /* スケルトン色 */
@@ -174,6 +176,10 @@
   --svelte-ui-disabled-bg: var(--base-50-transparent);
   /* Glass色 */
   --svelte-ui-glass-bg: var(--base-50-transparent);
+  /* 影の色（浮き上がり表現） */
+  --svelte-ui-shadow-color-strong: rgba(0, 0, 0, 0.2);
+  --svelte-ui-shadow-color: rgba(0, 0, 0, 0.14);
+  --svelte-ui-shadow-color-weak: rgba(0, 0, 0, 0.12);
 }
 
 /* ====================================
@@ -199,6 +205,8 @@
   --svelte-ui-form-bg: var(--white-100-transparent);
   /* サーフェス背景色 */
   --svelte-ui-surface-color: var(--base-950);
+  /* 浮き上がる面。暗いテーマでは「明るい＝手前」で奥行きを示すため一段明るくする */
+  --svelte-ui-surface-elevated-color: var(--base-900);
   --svelte-ui-surface-accent-color: var(--white-50-transparent);
   --svelte-ui-surface-inverse-color: var(--white-800-transparent);
   /* スケルトン色 */
@@ -214,6 +222,10 @@
   --svelte-ui-disabled-bg: var(--white-100-transparent);
   /* Glass色 */
   --svelte-ui-glass-bg: var(--white-100-transparent);
+  /* 影の色（浮き上がり表現）。暗い背景では黒い影が沈んで見えないため濃くする */
+  --svelte-ui-shadow-color-strong: rgba(0, 0, 0, 0.6);
+  --svelte-ui-shadow-color: rgba(0, 0, 0, 0.45);
+  --svelte-ui-shadow-color-weak: rgba(0, 0, 0, 0.4);
 }
 
 :where(:root),
@@ -369,7 +381,7 @@
   --svelte-ui-nav-children-offset: 8px;
   /* Nav: sub-menu */
   --svelte-ui-nav-sub-popup-min-width: 160px;
-  --svelte-ui-nav-sub-popup-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --svelte-ui-nav-sub-popup-shadow: 0 4px 16px var(--svelte-ui-shadow-color-weak);
   --svelte-ui-nav-item-child-indent: 32px;
   --svelte-ui-nav-bottom-sheet-overlay-bg: rgba(0, 0, 0, 0.4);
   --svelte-ui-nav-bottom-sheet-border-radius: 16px 16px 0 0;
@@ -581,7 +593,7 @@
   --svelte-ui-combobox-border-radius: var(--svelte-ui-form-border-radius);
   --svelte-ui-combobox-border-radius-rounded: var(--svelte-ui-form-border-radius-rounded);
   --svelte-ui-combobox-border-color: var(--svelte-ui-border-weak-color);
-  --svelte-ui-combobox-bg: var(--svelte-ui-surface-color);
+  --svelte-ui-combobox-bg: var(--svelte-ui-surface-elevated-color);
   --svelte-ui-combobox-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
   --svelte-ui-combobox-option-hover-bg: var(--svelte-ui-hover-overlay);
   --svelte-ui-combobox-option-selected-bg: var(--svelte-ui-select-overlay);
@@ -684,7 +696,7 @@
   --svelte-ui-snackbar-z-index: 9999;
   --svelte-ui-snackbar-font-size: var(--svelte-ui-font-size);
   --svelte-ui-snackbar-line-height: 1.4;
-  --svelte-ui-snackbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --svelte-ui-snackbar-shadow: 0 4px 12px var(--svelte-ui-shadow-color);
   --svelte-ui-snackbar-action-font-size: var(--svelte-ui-font-size-xs);
   --svelte-ui-snackbar-action-font-weight: 600;
   --svelte-ui-snackbar-action-padding: 4px 8px;
@@ -700,7 +712,7 @@
   --svelte-ui-snackbar-default-filled-text-color: var(--svelte-ui-text-inverse-color);
   --svelte-ui-snackbar-default-outlined-bg: color-mix(
   	in srgb,
-  	var(--svelte-ui-surface-color) 85%,
+  	var(--svelte-ui-surface-elevated-color) 85%,
   	transparent
   );
   --svelte-ui-snackbar-default-outlined-text-color: var(--svelte-ui-text-color);
@@ -714,7 +726,7 @@
   --svelte-ui-snackbar-info-filled-text-color: var(--svelte-ui-text-on-filled-color);
   --svelte-ui-snackbar-info-outlined-bg: color-mix(
   	in srgb,
-  	var(--svelte-ui-surface-color) 85%,
+  	var(--svelte-ui-surface-elevated-color) 85%,
   	transparent
   );
   --svelte-ui-snackbar-info-outlined-text-color: var(--svelte-ui-info-color);
@@ -728,7 +740,7 @@
   --svelte-ui-snackbar-success-filled-text-color: var(--svelte-ui-text-on-filled-color);
   --svelte-ui-snackbar-success-outlined-bg: color-mix(
   	in srgb,
-  	var(--svelte-ui-surface-color) 85%,
+  	var(--svelte-ui-surface-elevated-color) 85%,
   	transparent
   );
   --svelte-ui-snackbar-success-outlined-text-color: var(--svelte-ui-success-color);
@@ -742,7 +754,7 @@
   --svelte-ui-snackbar-warning-filled-text-color: var(--svelte-ui-text-on-filled-color);
   --svelte-ui-snackbar-warning-outlined-bg: color-mix(
   	in srgb,
-  	var(--svelte-ui-surface-color) 85%,
+  	var(--svelte-ui-surface-elevated-color) 85%,
   	transparent
   );
   --svelte-ui-snackbar-warning-outlined-text-color: var(--svelte-ui-warning-color);
@@ -756,7 +768,7 @@
   --svelte-ui-snackbar-error-filled-text-color: var(--svelte-ui-text-on-filled-color);
   --svelte-ui-snackbar-error-outlined-bg: color-mix(
   	in srgb,
-  	var(--svelte-ui-surface-color) 85%,
+  	var(--svelte-ui-surface-elevated-color) 85%,
   	transparent
   );
   --svelte-ui-snackbar-error-outlined-text-color: var(--svelte-ui-error-color);
@@ -927,6 +939,8 @@
 button {
   background: transparent;
   border: none;
+  /* UA 既定の color: buttontext は継承より強く、ダークテーマでも黒のままになる */
+  color: inherit;
   font-size: inherit;
   font-weight: inherit;
   cursor: pointer;

package/dist/assets/styles/variables.scss

@@ -163,6 +163,8 @@
 
 	/* サーフェス背景色 */
 	--svelte-ui-surface-color: var(--white);
+	/* 浮き上がる面（ポップアップ・ダイアログ等）。ライトは白より明るくできないため地の面と同じ */
+	--svelte-ui-surface-elevated-color: var(--svelte-ui-surface-color);
 	--svelte-ui-surface-accent-color: var(--base-50-transparent);
 	--svelte-ui-surface-inverse-color: var(--base-800-transparent);
 
@@ -187,6 +189,11 @@
 
 	/* Glass色 */
 	--svelte-ui-glass-bg: var(--base-50-transparent);
+
+	/* 影の色（浮き上がり表現） */
+	--svelte-ui-shadow-color-strong: rgba(0, 0, 0, 0.2);
+	--svelte-ui-shadow-color: rgba(0, 0, 0, 0.14);
+	--svelte-ui-shadow-color-weak: rgba(0, 0, 0, 0.12);
 }
 
 /* ====================================
@@ -217,6 +224,8 @@
 
 	/* サーフェス背景色 */
 	--svelte-ui-surface-color: var(--base-950);
+	/* 浮き上がる面。暗いテーマでは「明るい＝手前」で奥行きを示すため一段明るくする */
+	--svelte-ui-surface-elevated-color: var(--base-900);
 	--svelte-ui-surface-accent-color: var(--white-50-transparent);
 	--svelte-ui-surface-inverse-color: var(--white-800-transparent);
 
@@ -238,6 +247,11 @@
 
 	/* Glass色 */
 	--svelte-ui-glass-bg: var(--white-100-transparent);
+
+	/* 影の色（浮き上がり表現）。暗い背景では黒い影が沈んで見えないため濃くする */
+	--svelte-ui-shadow-color-strong: rgba(0, 0, 0, 0.6);
+	--svelte-ui-shadow-color: rgba(0, 0, 0, 0.45);
+	--svelte-ui-shadow-color-weak: rgba(0, 0, 0, 0.4);
 }
 
 :where(:root),
@@ -407,7 +421,7 @@
 	--svelte-ui-nav-children-offset: 8px;
 	/* Nav: sub-menu */
 	--svelte-ui-nav-sub-popup-min-width: 160px;
-	--svelte-ui-nav-sub-popup-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+	--svelte-ui-nav-sub-popup-shadow: 0 4px 16px var(--svelte-ui-shadow-color-weak);
 	--svelte-ui-nav-item-child-indent: 32px;
 	--svelte-ui-nav-bottom-sheet-overlay-bg: rgba(0, 0, 0, 0.4);
 	--svelte-ui-nav-bottom-sheet-border-radius: 16px 16px 0 0;
@@ -631,7 +645,7 @@
 	--svelte-ui-combobox-border-radius: var(--svelte-ui-form-border-radius);
 	--svelte-ui-combobox-border-radius-rounded: var(--svelte-ui-form-border-radius-rounded);
 	--svelte-ui-combobox-border-color: var(--svelte-ui-border-weak-color);
-	--svelte-ui-combobox-bg: var(--svelte-ui-surface-color);
+	--svelte-ui-combobox-bg: var(--svelte-ui-surface-elevated-color);
 	--svelte-ui-combobox-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
 	--svelte-ui-combobox-option-hover-bg: var(--svelte-ui-hover-overlay);
 	--svelte-ui-combobox-option-selected-bg: var(--svelte-ui-select-overlay);
@@ -744,7 +758,7 @@
 	--svelte-ui-snackbar-z-index: 9999;
 	--svelte-ui-snackbar-font-size: var(--svelte-ui-font-size);
 	--svelte-ui-snackbar-line-height: 1.4;
-	--svelte-ui-snackbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+	--svelte-ui-snackbar-shadow: 0 4px 12px var(--svelte-ui-shadow-color);
 	--svelte-ui-snackbar-action-font-size: var(--svelte-ui-font-size-xs);
 	--svelte-ui-snackbar-action-font-weight: 600;
 	--svelte-ui-snackbar-action-padding: 4px 8px;
@@ -761,7 +775,7 @@
 	--svelte-ui-snackbar-default-filled-text-color: var(--svelte-ui-text-inverse-color);
 	--svelte-ui-snackbar-default-outlined-bg: color-mix(
 		in srgb,
-		var(--svelte-ui-surface-color) 85%,
+		var(--svelte-ui-surface-elevated-color) 85%,
 		transparent
 	);
 	--svelte-ui-snackbar-default-outlined-text-color: var(--svelte-ui-text-color);
@@ -776,7 +790,7 @@
 	--svelte-ui-snackbar-info-filled-text-color: var(--svelte-ui-text-on-filled-color);
 	--svelte-ui-snackbar-info-outlined-bg: color-mix(
 		in srgb,
-		var(--svelte-ui-surface-color) 85%,
+		var(--svelte-ui-surface-elevated-color) 85%,
 		transparent
 	);
 	--svelte-ui-snackbar-info-outlined-text-color: var(--svelte-ui-info-color);
@@ -791,7 +805,7 @@
 	--svelte-ui-snackbar-success-filled-text-color: var(--svelte-ui-text-on-filled-color);
 	--svelte-ui-snackbar-success-outlined-bg: color-mix(
 		in srgb,
-		var(--svelte-ui-surface-color) 85%,
+		var(--svelte-ui-surface-elevated-color) 85%,
 		transparent
 	);
 	--svelte-ui-snackbar-success-outlined-text-color: var(--svelte-ui-success-color);
@@ -806,7 +820,7 @@
 	--svelte-ui-snackbar-warning-filled-text-color: var(--svelte-ui-text-on-filled-color);
 	--svelte-ui-snackbar-warning-outlined-bg: color-mix(
 		in srgb,
-		var(--svelte-ui-surface-color) 85%,
+		var(--svelte-ui-surface-elevated-color) 85%,
 		transparent
 	);
 	--svelte-ui-snackbar-warning-outlined-text-color: var(--svelte-ui-warning-color);
@@ -821,7 +835,7 @@
 	--svelte-ui-snackbar-error-filled-text-color: var(--svelte-ui-text-on-filled-color);
 	--svelte-ui-snackbar-error-outlined-bg: color-mix(
 		in srgb,
-		var(--svelte-ui-surface-color) 85%,
+		var(--svelte-ui-surface-elevated-color) 85%,
 		transparent
 	);
 	--svelte-ui-snackbar-error-outlined-text-color: var(--svelte-ui-error-color);

package/dist/components/DatepickerCalendar.svelte

@@ -506,6 +506,10 @@
 		return `calendar-date-${date.format('YYYY-MM-DD')}`;
 	};
 
+	// id 未指定でも aria の参照先が作れるようフォールバックを持つ
+	const fallbackId = `datepicker-calendar-${Math.random().toString(36).substring(2, 15)}`;
+	const monthLabelId = $derived(`${id ?? fallbackId}-month-label`);
+
 	const handleMouseEnter = (date: dayjs.Dayjs) => {
 		if (mode !== 'range' || isOutOfRange(date)) return;
 		hoveredDate = date;
@@ -584,6 +588,7 @@
 		</div>
 		<button
 			type="button"
+			id={monthLabelId}
 			class="datepicker-calendar__header__month-label-button"
 			aria-live="polite"
 			aria-atomic="true"
@@ -632,7 +637,7 @@
 			{/each}
 		</div>
 	{:else}
-		<div class="datepicker-calendar__date-selection" role="grid" aria-labelledby="month-label">
+		<div class="datepicker-calendar__date-selection" role="grid" aria-labelledby={monthLabelId}>
 			<div class="datepicker-calendar__day-list" role="row">
 				{#each DAY_ARRAY as day}
 					<div class="datepicker-calendar__day-item" role="columnheader">
@@ -730,7 +735,8 @@
 .datepicker-calendar__month-button {
   padding: 8px;
   border-radius: var(--svelte-ui-border-radius);
-  background-color: var(--svelte-ui-surface-color);
+  /* 器（ポップアップ）の色に追従させる */
+  background-color: transparent;
   color: var(--svelte-ui-datepicker-date-color);
   font-size: var(--svelte-ui-font-size);
   cursor: pointer;

package/dist/components/Dialog.svelte

@@ -143,9 +143,19 @@
 
 	const dialogClasses = $derived('');
 
-	const ariaLabelledby = $derived(title ? 'dialog-title' : undefined);
+	// id 未指定でも aria の参照先が作れるようフォールバックを持つ
+	const fallbackId = `dialog-${Math.random().toString(36).substring(2, 15)}`;
+	const baseId = $derived(id ?? fallbackId);
+	const titleId = $derived(`${baseId}-dialog-title`);
+	const descriptionId = $derived(`${baseId}-dialog-description`);
+
+	// 名前は 1 つだけ与える。aria-labelledby は aria-label より優先されるため、両方は付けない。
+	// header を差し替えるとタイトル要素が描画されないので、そのときは title を aria-label で渡す
+	const hasTitleElement = $derived(!!title && !header);
+	const ariaLabelValue = $derived(ariaLabel || (title && !hasTitleElement ? title : undefined));
+	const ariaLabelledby = $derived(!ariaLabelValue && hasTitleElement ? titleId : undefined);
 	const ariaDescribedbyValue = $derived(
-		ariaDescribedby || (description ? 'dialog-description' : undefined)
+		ariaDescribedby || (description ? descriptionId : undefined)
 	);
 </script>
 
@@ -158,7 +168,7 @@
 	{onOpen}
 	{onClose}
 	componentType="Dialog"
-	{ariaLabel}
+	ariaLabel={ariaLabelValue}
 	{ariaLabelledby}
 	ariaDescribedby={ariaDescribedbyValue}
 	customClass={dialogClasses}
@@ -171,14 +181,14 @@
 				{#if header}
 					{@render header()}
 				{:else}
-					<div class="dialog__title" id={id ? `${id}-dialog-title` : undefined}>
+					<div class="dialog__title" id={titleId}>
 						{title || ''}
 					</div>
 				{/if}
 			</div>
 		{/if}
 		{#if description}
-			<div class="dialog__description" id={id ? `${id}-dialog-description` : undefined}>
+			<div class="dialog__description" id={descriptionId}>
 				{description}
 			</div>
 		{/if}

package/dist/components/Drawer.svelte

@@ -93,7 +93,7 @@
 		focusFirstOnOpen = false,
 
 		// ARIA/アクセシビリティ
-		ariaLabel = 'Drawer',
+		ariaLabel,
 		ariaDescribedby,
 
 		// イベントハンドラー
@@ -108,17 +108,17 @@
 	// =========================================================================
 	/** Opens the drawer. */
 	export const open = (): void => {
-		modalRef?.open(title || ariaLabel);
+		modalRef?.open(title || ariaLabelValue);
 	};
 
 	/** Closes the drawer. */
 	export const close = (): void => {
-		modalRef?.close(title || ariaLabel);
+		modalRef?.close(title || ariaLabelValue);
 	};
 
 	/** Toggles between open and closed. */
 	export const toggle = (): void => {
-		modalRef?.toggle(title || ariaLabel);
+		modalRef?.toggle(title || ariaLabelValue);
 	};
 
 	/** @internal Completes the close animation. Called automatically. */
@@ -157,9 +157,19 @@
 		['drawer-wrapper', `drawer-wrapper--${position}`].filter(Boolean).join(' ')
 	);
 
-	const ariaLabelledby = $derived(title ? 'drawer-title' : undefined);
+	// id 未指定でも aria の参照先が作れるようフォールバックを持つ
+	const fallbackId = `drawer-${Math.random().toString(36).substring(2, 15)}`;
+	const baseId = $derived(id ?? fallbackId);
+	const titleId = $derived(`${baseId}-drawer-title`);
+	const descriptionId = $derived(`${baseId}-drawer-description`);
+
+	// 名前は 1 つだけ与える。aria-labelledby は aria-label より優先されるため、両方は付けない。
+	// header を差し替えるとタイトル要素が描画されないので、そのときは title を aria-label で渡す
+	const hasTitleElement = $derived(!!title && !header);
+	const ariaLabelValue = $derived(ariaLabel ?? (hasTitleElement ? undefined : title || 'Drawer'));
+	const ariaLabelledby = $derived(!ariaLabelValue && hasTitleElement ? titleId : undefined);
 	const ariaDescribedbyValue = $derived(
-		ariaDescribedby || (description ? 'drawer-description' : undefined)
+		ariaDescribedby || (description ? descriptionId : undefined)
 	);
 </script>
 
@@ -172,27 +182,30 @@
 	{onOpen}
 	{onClose}
 	componentType="Drawer"
-	{ariaLabel}
+	ariaLabel={ariaLabelValue}
 	{ariaLabelledby}
 	ariaDescribedby={ariaDescribedbyValue}
 	customClass={drawerClasses}
 	customStyles={drawerStyles()}
 	id={id ? `${id}-modal` : undefined}
 >
-	<div class="drawer drawer--{position} {scrollable ? 'drawer--scrollable' : ''}" data-testid="drawer">
+	<div
+		class="drawer drawer--{position} {scrollable ? 'drawer--scrollable' : ''}"
+		data-testid="drawer"
+	>
 		{#if header || title}
 			<div class="drawer__header">
 				{#if header}
 					{@render header()}
 				{:else}
-					<div class="drawer__title" id={id ? `${id}-drawer-title` : undefined}>
+					<div class="drawer__title" id={titleId}>
 						{title || ''}
 					</div>
 				{/if}
 			</div>
 		{/if}
 		{#if description}
-			<div class="drawer__description" id={id ? `${id}-drawer-description` : undefined}>
+			<div class="drawer__description" id={descriptionId}>
 				{description}
 			</div>
 		{/if}

package/dist/components/Fab.svelte

@@ -488,24 +488,24 @@
   -webkit-backdrop-filter: var(--svelte-ui-glass-blur);
 }
 .fab.fab--shadow {
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 3px 5px -1px var(--svelte-ui-shadow-color-strong), 0px 6px 10px 0px var(--svelte-ui-shadow-color), 0px 1px 18px 0px var(--svelte-ui-shadow-color-weak);
 }
 .fab.fab--outlined.fab--shadow {
-  box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 3px 5px -1px var(--svelte-ui-shadow-color-strong), 0px 6px 10px 0px var(--svelte-ui-shadow-color), 0px 1px 18px 0px var(--svelte-ui-shadow-color-weak);
 }
 @media (hover: hover) {
   .fab.fab--shadow:hover {
-    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 5px 5px -3px var(--svelte-ui-shadow-color-strong), 0px 8px 10px 1px var(--svelte-ui-shadow-color), 0px 3px 14px 2px var(--svelte-ui-shadow-color-weak);
   }
   .fab.fab--outlined.fab--shadow:hover {
-    box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+    box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 5px 5px -3px var(--svelte-ui-shadow-color-strong), 0px 8px 10px 1px var(--svelte-ui-shadow-color), 0px 3px 14px 2px var(--svelte-ui-shadow-color-weak);
   }
 }
 .fab.fab--shadow:active {
-  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 7px 8px -4px var(--svelte-ui-shadow-color-strong), 0px 12px 17px 2px var(--svelte-ui-shadow-color), 0px 5px 22px 4px var(--svelte-ui-shadow-color-weak);
 }
 .fab.fab--outlined.fab--shadow:active {
-  box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+  box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 7px 8px -4px var(--svelte-ui-shadow-color-strong), 0px 12px 17px 2px var(--svelte-ui-shadow-color), 0px 5px 22px 4px var(--svelte-ui-shadow-color-weak);
 }
 .fab.fab--no-motion, .fab.fab--no-motion::before {
   transition-duration: 0.01s;

package/dist/components/FileUploader.svelte

@@ -305,10 +305,13 @@
 		}
 	}}
 	aria-label={t('fileUploader.uploadFile')}
-	aria-describedby={`${id}-help`}
+	aria-describedby={`${id}-description`}
 >
 	{#if value && value.length > 0}
-		<div class="file-uploader__description file-uploader__description--with-file">
+		<div
+			id={`${id}-description`}
+			class="file-uploader__description file-uploader__description--with-file"
+		>
 			<Icon
 				size={iconSize}
 				filled={iconFilled}
@@ -340,7 +343,7 @@
 			{/each}
 		</ul>
 	{:else}
-		<div class="file-uploader__description">
+		<div id={`${id}-description`} class="file-uploader__description">
 			<Icon
 				size={iconSize}
 				filled={iconFilled}

package/dist/components/Modal.svelte

@@ -283,8 +283,8 @@
 .modal {
   padding: 0;
   border-width: 0;
-  background-color: var(--svelte-ui-surface-color);
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+  background-color: var(--svelte-ui-surface-elevated-color);
+  box-shadow: 0 11px 15px -7px var(--svelte-ui-shadow-color-strong), 0 24px 38px 3px var(--svelte-ui-shadow-color), 0 9px 46px 8px var(--svelte-ui-shadow-color-weak);
 }
 
 .modal::backdrop {

package/dist/components/NavItem.svelte

@@ -60,7 +60,6 @@
 		isChild?: boolean;
 		/** Whether this item's children are currently visible. */
 		isChildrenVisible?: boolean;
-
 	};
 
 	let {
@@ -84,7 +83,11 @@
 		textColor,
 		selectedTextColor,
 		selectedBarColor,
-		childrenVariant = variant === 'mobile' ? 'bottom-sheet' : variant === 'vertical' ? 'accordion' : 'bar',
+		childrenVariant = variant === 'mobile'
+			? 'bottom-sheet'
+			: variant === 'vertical'
+				? 'accordion'
+				: 'bar',
 		customStyle,
 		customChildrenStyle,
 		customChildrenContainerStyle,
@@ -93,8 +96,7 @@
 		isSelected = false,
 		isDisabled = false,
 		isChild = false,
-		isChildrenVisible = $bindable(false),
-
+		isChildrenVisible = $bindable(false)
 	}: NavItemProps = $props();
 
 	// =========================================================================
@@ -139,14 +141,17 @@
 		container?.querySelector<HTMLElement>('[data-nav-item-child]:not([tabindex="-1"])')?.focus();
 
 	$effect(() => {
-		if (isChildrenVisible && childrenVariant === 'bottom-sheet') tick().then(() => focusFirstChild(bottomSheetEl));
+		if (isChildrenVisible && childrenVariant === 'bottom-sheet')
+			tick().then(() => focusFirstChild(bottomSheetEl));
 	});
 
 	const popupPosition = $derived<PopupPosition>(
 		variant === 'vertical' ? 'right-top' : variant === 'mobile' ? 'top-center' : 'bottom-left'
 	);
 
-	const showChevron = $derived(hasChildren && chevron && variant !== 'mobile' && childrenVariant !== 'expanded');
+	const showChevron = $derived(
+		hasChildren && chevron && variant !== 'mobile' && childrenVariant !== 'expanded'
+	);
 
 	// popup の方向に合わせたアイコン。それ以外は expand_more
 	const chevronIcon = $derived(
@@ -342,7 +347,12 @@
 
 		<!-- accordion / expanded サブメニュー -->
 		{#if childrenVariant === 'expanded' || (childrenVariant === 'accordion' && isChildrenVisible)}
-			<div class="nav-item__children" role="presentation" style={customChildrenContainerStyle} transition:slide={{ duration: 200 }}>
+			<div
+				class="nav-item__children"
+				role="presentation"
+				style={customChildrenContainerStyle}
+				transition:slide={{ duration: 200 }}
+			>
 				{#each item.children! as child}
 					<NavItem
 						item={child}
@@ -652,7 +662,7 @@
   left: 0;
   right: 0;
   z-index: 1001;
-  background-color: var(--svelte-ui-surface-color);
+  background-color: var(--svelte-ui-surface-elevated-color);
   border-radius: var(--svelte-ui-nav-bottom-sheet-border-radius);
   padding: var(--svelte-ui-nav-bottom-sheet-padding);
   display: flex;

package/dist/components/Popup.svelte

@@ -582,8 +582,8 @@
 :popover-open {
   border: solid 1px var(--svelte-ui-border-weak-color);
   border-radius: var(--svelte-ui-popup-border-radius);
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
-  background: var(--svelte-ui-surface-color);
+  box-shadow: 0 11px 15px -7px var(--svelte-ui-shadow-color-strong), 0 24px 38px 3px var(--svelte-ui-shadow-color), 0 9px 46px 8px var(--svelte-ui-shadow-color-weak);
+  background: var(--svelte-ui-surface-elevated-color);
   color: var(--svelte-ui-text-color);
   z-index: 1000; /* Popupを最前面に表示 */
 }
@@ -640,8 +640,8 @@
   border-top-right-radius: var(--svelte-ui-popup-mobile-border-radius);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
-  background: var(--svelte-ui-surface-color);
+  box-shadow: 0 -4px 6px -1px var(--svelte-ui-shadow-color-weak), 0 -2px 4px -1px var(--svelte-ui-shadow-color-weak);
+  background: var(--svelte-ui-surface-elevated-color);
   z-index: var(--svelte-ui-z-modal);
   overflow-y: auto;
   overflow-x: hidden;

package/dist/components/PopupMenu.svelte

@@ -318,9 +318,9 @@
 
 <style>@charset "UTF-8";
 .popup-menu {
-  background-color: var(--svelte-ui-surface-color);
+  background-color: var(--svelte-ui-surface-elevated-color);
   border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px var(--svelte-ui-shadow-color);
   outline: none;
   min-width: 160px;
 }

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.71",
+	"version": "0.0.73",
 	"type": "module",
 	"keywords": [
 		"svelte",