@14ch/svelte-ui 0.0.62 → 0.0.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/assets/styles/import.css +7 -7
  2. package/dist/assets/styles/variables.scss +7 -7
  3. package/dist/components/Modal.svelte +9 -7
  4. package/dist/components/Popup.svelte +1 -1
  5. package/package.json +1 -1
package/dist/assets/styles/import.css CHANGED
@@ -185,22 +185,22 @@
185
185
  --svelte-ui-text-inverse-subtle-color: var(--base-500-transparent);
186
186
  --svelte-ui-text-placeholder-color: var(--white-500-transparent);
187
187
  /* ボーダーカラー */
188
- --svelte-ui-border-color: var(--white-400-transparent);
189
- --svelte-ui-border-weak-color: var(--white-200-transparent);
190
- --svelte-ui-border-strong-color: var(--white-600-transparent);
188
+ --svelte-ui-border-color: var(--white-200-transparent);
189
+ --svelte-ui-border-weak-color: var(--white-100-transparent);
190
+ --svelte-ui-border-strong-color: var(--white-300-transparent);
191
191
  /* 非アクティブ色 */
192
- --svelte-ui-inactive-color: var(--white-400-transparent);
192
+ --svelte-ui-inactive-color: var(--white-200-transparent);
193
193
  /* 入力欄背景色 */
194
194
  --svelte-ui-form-bg: var(--white-100-transparent);
195
195
  /* サーフェス背景色 */
196
- --svelte-ui-surface-color: var(--base-900);
196
+ --svelte-ui-surface-color: var(--base-950);
197
197
  --svelte-ui-surface-accent-color: var(--white-50-transparent);
198
198
  --svelte-ui-surface-inverse-color: var(--white-800-transparent);
199
199
  /* スケルトン色 */
200
200
  --svelte-ui-skeleton-color: var(--white-100-transparent);
201
201
  /* hover & select 効果 */
202
202
  --svelte-ui-hover-overlay: var(--white-100-transparent);
203
- --svelte-ui-select-overlay: var(--primary-200-transparent);
203
+ --svelte-ui-select-overlay: var(--primary-800-transparent);
204
204
  /* ドロップダウンアイコン */
205
205
  --svelte-ui-dropdown-icon-color: var(--svelte-ui-text-subtle-color);
206
206
  /* フォーカス色 */
@@ -208,7 +208,7 @@
208
208
  /* Disabled色 */
209
209
  --svelte-ui-disabled-bg: var(--white-100-transparent);
210
210
  /* Glass色 */
211
- --svelte-ui-glass-bg: var(--white-200-transparent);
211
+ --svelte-ui-glass-bg: var(--white-100-transparent);
212
212
  }
213
213
 
214
214
  :where(:root),
package/dist/assets/styles/variables.scss CHANGED
@@ -200,18 +200,18 @@
200
200
  --svelte-ui-text-placeholder-color: var(--white-500-transparent);
201
201
 
202
202
  /* ボーダーカラー */
203
- --svelte-ui-border-color: var(--white-400-transparent);
204
- --svelte-ui-border-weak-color: var(--white-200-transparent);
205
- --svelte-ui-border-strong-color: var(--white-600-transparent);
203
+ --svelte-ui-border-color: var(--white-200-transparent);
204
+ --svelte-ui-border-weak-color: var(--white-100-transparent);
205
+ --svelte-ui-border-strong-color: var(--white-300-transparent);
206
206
 
207
207
  /* 非アクティブ色 */
208
- --svelte-ui-inactive-color: var(--white-400-transparent);
208
+ --svelte-ui-inactive-color: var(--white-200-transparent);
209
209
 
210
210
  /* 入力欄背景色 */
211
211
  --svelte-ui-form-bg: var(--white-100-transparent);
212
212
 
213
213
  /* サーフェス背景色 */
214
- --svelte-ui-surface-color: var(--base-900);
214
+ --svelte-ui-surface-color: var(--base-950);
215
215
  --svelte-ui-surface-accent-color: var(--white-50-transparent);
216
216
  --svelte-ui-surface-inverse-color: var(--white-800-transparent);
217
217
 
@@ -220,7 +220,7 @@
220
220
 
221
221
  /* hover & select 効果 */
222
222
  --svelte-ui-hover-overlay: var(--white-100-transparent);
223
- --svelte-ui-select-overlay: var(--primary-200-transparent);
223
+ --svelte-ui-select-overlay: var(--primary-800-transparent);
224
224
 
225
225
  /* ドロップダウンアイコン */
226
226
  --svelte-ui-dropdown-icon-color: var(--svelte-ui-text-subtle-color);
@@ -232,7 +232,7 @@
232
232
  --svelte-ui-disabled-bg: var(--white-100-transparent);
233
233
 
234
234
  /* Glass色 */
235
- --svelte-ui-glass-bg: var(--white-200-transparent);
235
+ --svelte-ui-glass-bg: var(--white-100-transparent);
236
236
  }
237
237
 
238
238
  :where(:root),
package/dist/components/Modal.svelte CHANGED
@@ -103,18 +103,20 @@
103
103
  });
104
104
 
105
105
  $effect(() => {
106
- if (!isOpen || !dialogRef) return;
106
+ if (!dialogRef) return;
107
107
 
108
- const handleKeyDown = (event: KeyboardEvent) => {
109
- if (event.key === 'Escape') {
110
- close();
111
- }
108
+ // showModal() した dialog は最前面の1つだけに cancel が配送されるため、
109
+ // Escape で多重の Modal がまとめて閉じることを防げる。ネイティブの即時
110
+ // クローズは抑止し、fade-out アニメーション付きの close() を使う。
111
+ const handleCancel = (event: Event) => {
112
+ event.preventDefault();
113
+ close();
112
114
  };
113
115
 
114
- document.addEventListener('keydown', handleKeyDown);
116
+ dialogRef.addEventListener('cancel', handleCancel);
115
117
 
116
118
  return () => {
117
- document.removeEventListener('keydown', handleKeyDown);
119
+ dialogRef.removeEventListener('cancel', handleCancel);
118
120
  };
119
121
  });
120
122
 
package/dist/components/Popup.svelte CHANGED
@@ -553,7 +553,7 @@
553
553
  id={popupId}
554
554
  data-testid="popup"
555
555
  use:clickOutside={() => {
556
- close('outside');
556
+ if (isOpen) close('outside');
557
557
  }}
558
558
  >
559
559
  {@render children()}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@14ch/svelte-ui",
3
3
  "description": "Modern Svelte UI components library with TypeScript support",
4
4
  "private": false,
5
- "version": "0.0.62",
5
+ "version": "0.0.64",
6
6
  "type": "module",
7
7
  "keywords": [
8
8
  "svelte",