@14ch/svelte-ui 0.0.61 → 0.0.63

package/dist/assets/styles/import.css

@@ -185,22 +185,22 @@
   --svelte-ui-text-inverse-subtle-color: var(--base-500-transparent);
   --svelte-ui-text-placeholder-color: var(--white-500-transparent);
   /* ボーダーカラー */
-  --svelte-ui-border-color: var(--white-400-transparent);
-  --svelte-ui-border-weak-color: var(--white-200-transparent);
-  --svelte-ui-border-strong-color: var(--white-600-transparent);
+  --svelte-ui-border-color: var(--white-200-transparent);
+  --svelte-ui-border-weak-color: var(--white-100-transparent);
+  --svelte-ui-border-strong-color: var(--white-300-transparent);
   /* 非アクティブ色 */
-  --svelte-ui-inactive-color: var(--white-400-transparent);
+  --svelte-ui-inactive-color: var(--white-200-transparent);
   /* 入力欄背景色 */
   --svelte-ui-form-bg: var(--white-100-transparent);
   /* サーフェス背景色 */
-  --svelte-ui-surface-color: var(--base-900);
+  --svelte-ui-surface-color: var(--base-950);
   --svelte-ui-surface-accent-color: var(--white-50-transparent);
   --svelte-ui-surface-inverse-color: var(--white-800-transparent);
   /* スケルトン色 */
   --svelte-ui-skeleton-color: var(--white-100-transparent);
   /* hover & select 効果 */
   --svelte-ui-hover-overlay: var(--white-100-transparent);
-  --svelte-ui-select-overlay: var(--primary-200-transparent);
+  --svelte-ui-select-overlay: var(--primary-800-transparent);
   /* ドロップダウンアイコン */
   --svelte-ui-dropdown-icon-color: var(--svelte-ui-text-subtle-color);
   /* フォーカス色 */
@@ -208,7 +208,7 @@
   /* Disabled色 */
   --svelte-ui-disabled-bg: var(--white-100-transparent);
   /* Glass色 */
-  --svelte-ui-glass-bg: var(--white-200-transparent);
+  --svelte-ui-glass-bg: var(--white-100-transparent);
 }
 
 :where(:root),

package/dist/assets/styles/variables.scss

@@ -200,18 +200,18 @@
 	--svelte-ui-text-placeholder-color: var(--white-500-transparent);
 
 	/* ボーダーカラー */
-	--svelte-ui-border-color: var(--white-400-transparent);
-	--svelte-ui-border-weak-color: var(--white-200-transparent);
-	--svelte-ui-border-strong-color: var(--white-600-transparent);
+	--svelte-ui-border-color: var(--white-200-transparent);
+	--svelte-ui-border-weak-color: var(--white-100-transparent);
+	--svelte-ui-border-strong-color: var(--white-300-transparent);
 
 	/* 非アクティブ色 */
-	--svelte-ui-inactive-color: var(--white-400-transparent);
+	--svelte-ui-inactive-color: var(--white-200-transparent);
 
 	/* 入力欄背景色 */
 	--svelte-ui-form-bg: var(--white-100-transparent);
 
 	/* サーフェス背景色 */
-	--svelte-ui-surface-color: var(--base-900);
+	--svelte-ui-surface-color: var(--base-950);
 	--svelte-ui-surface-accent-color: var(--white-50-transparent);
 	--svelte-ui-surface-inverse-color: var(--white-800-transparent);
 
@@ -220,7 +220,7 @@
 
 	/* hover & select 効果 */
 	--svelte-ui-hover-overlay: var(--white-100-transparent);
-	--svelte-ui-select-overlay: var(--primary-200-transparent);
+	--svelte-ui-select-overlay: var(--primary-800-transparent);
 
 	/* ドロップダウンアイコン */
 	--svelte-ui-dropdown-icon-color: var(--svelte-ui-text-subtle-color);
@@ -232,7 +232,7 @@
 	--svelte-ui-disabled-bg: var(--white-100-transparent);
 
 	/* Glass色 */
-	--svelte-ui-glass-bg: var(--white-200-transparent);
+	--svelte-ui-glass-bg: var(--white-100-transparent);
 }
 
 :where(:root),

package/dist/components/Snackbar.svelte

@@ -55,6 +55,26 @@
 	let bottomItems: SnackbarData[] = $derived(
 		snackbarManager.items.filter((item) => item.position === 'bottom')
 	);
+
+	// =========================================================================
+	// Top layer (popover)
+	// =========================================================================
+	// Modal は <dialog>.showModal() でトップレイヤーに載るため、通常の z-index では前面に出せない。
+	// Snackbar 自身も popover でトップレイヤーに載せて Dialog より前面に表示する。
+	let topEl: HTMLDivElement | null = $state(null);
+	let bottomEl: HTMLDivElement | null = $state(null);
+
+	const ensureShown = (el: HTMLDivElement | null) => {
+		if (!el || typeof el.showPopover !== 'function') return;
+		if (!el.matches(':popover-open')) el.showPopover();
+	};
+
+	$effect(() => {
+		if (topItems.length > 0) ensureShown(topEl);
+	});
+	$effect(() => {
+		if (bottomItems.length > 0) ensureShown(bottomEl);
+	});
 </script>
 
 {#snippet snackbarItemSnippet(item: SnackbarData, index: number)}
@@ -79,7 +99,7 @@
 
 <!-- Snackbar Top Items -->
 {#if topItems.length > 0}
-	<div class="snackbar snackbar--top" data-testid="snackbar">
+	<div bind:this={topEl} class="snackbar snackbar--top" popover="manual" data-testid="snackbar">
 		{#each topItems as item, index (item.id)}
 			{@render snackbarItemSnippet(item, index)}
 		{/each}
@@ -88,7 +108,12 @@
 
 <!-- Snackbar Bottom Items -->
 {#if bottomItems.length > 0}
-	<div class="snackbar snackbar--bottom" data-testid="snackbar">
+	<div
+		bind:this={bottomEl}
+		class="snackbar snackbar--bottom"
+		popover="manual"
+		data-testid="snackbar"
+	>
 		{#each bottomItems as item, index (item.id)}
 			{@render snackbarItemSnippet(item, index)}
 		{/each}
@@ -97,12 +122,23 @@
 
 <style>
 	.snackbar {
+		/* popover の UA デフォルトスタイルを打ち消す（inset/margin/border/padding/背景/overflow）。
+		   inset は left より先に打ち消す（あとに置くと left の中央寄せを上書きしてしまう） */
+		inset: auto;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		overflow: visible;
+		color: inherit;
+
 		position: fixed;
 		left: 50%;
 		transform: translateX(-50%);
 		width: max-content;
 		max-width: 90vw;
 		pointer-events: none;
+		/* popover 非対応ブラウザ向けフォールバック（対応時はトップレイヤーで最前面になる） */
 		z-index: var(--svelte-ui-snackbar-z-index, 1000);
 		display: flex;
 		flex-direction: column;

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