@14ch/svelte-ui 0.0.55 → 0.0.56

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 (18) hide show
  1. package/dist/assets/styles/import.css +4 -4
  2. package/dist/assets/styles/variables.scss +4 -4
  3. package/dist/components/StepNav.svelte +29 -19
  4. package/dist/components/StepNav.svelte.d.ts +5 -1
  5. package/dist/i18n/index.d.ts +12 -12
  6. package/dist/i18n/locales/de.d.ts +2 -2
  7. package/dist/i18n/locales/de.js +2 -2
  8. package/dist/i18n/locales/en.d.ts +2 -2
  9. package/dist/i18n/locales/en.js +2 -2
  10. package/dist/i18n/locales/es.d.ts +2 -2
  11. package/dist/i18n/locales/es.js +2 -2
  12. package/dist/i18n/locales/fr.d.ts +2 -2
  13. package/dist/i18n/locales/fr.js +2 -2
  14. package/dist/i18n/locales/ja.d.ts +2 -2
  15. package/dist/i18n/locales/ja.js +2 -2
  16. package/dist/i18n/locales/zh-cn.d.ts +2 -2
  17. package/dist/i18n/locales/zh-cn.js +2 -2
  18. package/package.json +1 -1
package/dist/assets/styles/import.css CHANGED
@@ -371,8 +371,8 @@
371
371
  /* StepNav */
372
372
  /* 強調色（現在／完了）。color prop 指定時は --internal-step-nav-accent が優先。 */
373
373
  --svelte-ui-step-nav-accent-color: var(--svelte-ui-primary-color);
374
- --svelte-ui-step-nav-completed-color: var(--svelte-ui-step-nav-accent-color);
375
- --svelte-ui-step-nav-current-color: var(--svelte-ui-step-nav-accent-color);
374
+ --svelte-ui-step-nav-done-color: var(--svelte-ui-step-nav-accent-color);
375
+ --svelte-ui-step-nav-in-progress-color: var(--svelte-ui-step-nav-accent-color);
376
376
  /* マーカー */
377
377
  --svelte-ui-step-nav-marker-size-sm: 24px;
378
378
  --svelte-ui-step-nav-marker-size: 32px;
@@ -392,7 +392,7 @@
392
392
  --svelte-ui-step-nav-label-line-height: 1.3;
393
393
  /* コネクター（完了区間 / 未完了区間） */
394
394
  --svelte-ui-step-nav-connector-color: var(--svelte-ui-border-color);
395
- --svelte-ui-step-nav-connector-completed-color: var(--svelte-ui-step-nav-accent-color);
395
+ --svelte-ui-step-nav-connector-done-color: var(--svelte-ui-step-nav-accent-color);
396
396
  --svelte-ui-step-nav-connector-thickness: 2px;
397
397
  /* 間隔 */
398
398
  --svelte-ui-step-nav-marker-label-gap: 8px;
@@ -864,7 +864,7 @@
864
864
  --svelte-ui-step-nav-description-color: CanvasText;
865
865
  --svelte-ui-step-nav-error-color: CanvasText;
866
866
  --svelte-ui-step-nav-connector-color: CanvasText;
867
- --svelte-ui-step-nav-connector-completed-color: Highlight;
867
+ --svelte-ui-step-nav-connector-done-color: Highlight;
868
868
  --svelte-ui-step-nav-ring-color: Highlight;
869
869
  --svelte-ui-step-nav-focus-color: CanvasText;
870
870
  /* Radio */
package/dist/assets/styles/variables.scss CHANGED
@@ -410,8 +410,8 @@
410
410
  /* StepNav */
411
411
  /* 強調色（現在／完了）。color prop 指定時は --internal-step-nav-accent が優先。 */
412
412
  --svelte-ui-step-nav-accent-color: var(--svelte-ui-primary-color);
413
- --svelte-ui-step-nav-completed-color: var(--svelte-ui-step-nav-accent-color);
414
- --svelte-ui-step-nav-current-color: var(--svelte-ui-step-nav-accent-color);
413
+ --svelte-ui-step-nav-done-color: var(--svelte-ui-step-nav-accent-color);
414
+ --svelte-ui-step-nav-in-progress-color: var(--svelte-ui-step-nav-accent-color);
415
415
  /* マーカー */
416
416
  --svelte-ui-step-nav-marker-size-sm: 24px;
417
417
  --svelte-ui-step-nav-marker-size: 32px;
@@ -431,7 +431,7 @@
431
431
  --svelte-ui-step-nav-label-line-height: 1.3;
432
432
  /* コネクター（完了区間 / 未完了区間） */
433
433
  --svelte-ui-step-nav-connector-color: var(--svelte-ui-border-color);
434
- --svelte-ui-step-nav-connector-completed-color: var(--svelte-ui-step-nav-accent-color);
434
+ --svelte-ui-step-nav-connector-done-color: var(--svelte-ui-step-nav-accent-color);
435
435
  --svelte-ui-step-nav-connector-thickness: 2px;
436
436
  /* 間隔 */
437
437
  --svelte-ui-step-nav-marker-label-gap: 8px;
@@ -947,7 +947,7 @@
947
947
  --svelte-ui-step-nav-description-color: CanvasText;
948
948
  --svelte-ui-step-nav-error-color: CanvasText;
949
949
  --svelte-ui-step-nav-connector-color: CanvasText;
950
- --svelte-ui-step-nav-connector-completed-color: Highlight;
950
+ --svelte-ui-step-nav-connector-done-color: Highlight;
951
951
  --svelte-ui-step-nav-ring-color: Highlight;
952
952
  --svelte-ui-step-nav-focus-color: CanvasText;
953
953
 
package/dist/components/StepNav.svelte CHANGED
@@ -30,8 +30,9 @@
30
30
  /**
31
31
  * 到達済みの最遠ステップ（進捗軸）。未指定時は表示中ステップ位置。
32
32
  * 数値なら 0 始まりのインデックス、文字列ならアイテムのユニークキー（`value`。省略時は配列 index の文字列）で指定する。URL方式でも `value` をキーに使う。
33
+ * `{ step, status }` を渡すと指したステップの状態を明示できる。`status: 'done'` なら当該ステップも完了表示（進行中なし）。数値／文字列のみ指定時は `'in-progress'` 扱い。
33
34
  */
34
- progress?: number | string;
35
+ progress?: number | string | { step: number | string; status: 'in-progress' | 'done' };
35
36
 
36
37
  // URL 方式（href 使用時）
37
38
  /** 各 href のアクティブ判定に前置するパス。 */
@@ -171,11 +172,20 @@
171
172
  return items.findIndex((item, index) => (item.value ?? String(index)) === value);
172
173
  });
173
174
 
175
+ // progress の step 部分（オブジェクト形なら .step、それ以外は progress 自身）。
176
+ const progressStep = $derived(
177
+ typeof progress === 'object' && progress !== null ? progress.step : progress
178
+ );
179
+ // 指したステップの状態。オブジェクト形の status のみ 'done' になり得る。未指定は 'in-progress'。
180
+ const progressStepStatus = $derived<'in-progress' | 'done'>(
181
+ typeof progress === 'object' && progress !== null ? progress.status : 'in-progress'
182
+ );
183
+
174
184
  // progress を数値インデックスへ解決する。文字列ならアイテムのユニークキー（value）で一致判定。未指定なら表示中位置。
175
185
  const progressIndex = $derived.by(() => {
176
- if (progress == null) return activeIndex;
177
- if (typeof progress === 'number') return progress;
178
- return items.findIndex((item, index) => (item.value ?? String(index)) === progress);
186
+ if (progressStep == null) return activeIndex;
187
+ if (typeof progressStep === 'number') return progressStep;
188
+ return items.findIndex((item, index) => (item.value ?? String(index)) === progressStep);
179
189
  });
180
190
 
181
191
  const resolvedIconSize = $derived(
@@ -208,11 +218,11 @@
208
218
  // =========================================================================
209
219
  // Helpers
210
220
  // =========================================================================
211
- type StepStatus = 'completed' | 'current' | 'upcoming';
221
+ type StepStatus = 'done' | 'in-progress' | 'upcoming';
212
222
 
213
223
  const getStatus = (index: number): StepStatus => {
214
- if (index < progressIndex) return 'completed';
215
- if (index === progressIndex) return 'current';
224
+ if (index < progressIndex) return 'done';
225
+ if (index === progressIndex) return progressStepStatus === 'done' ? 'done' : 'in-progress';
216
226
  return 'upcoming';
217
227
  };
218
228
 
@@ -239,10 +249,10 @@
239
249
  const step = t('stepNav.step', { number: index + 1 });
240
250
  const state = item.error
241
251
  ? t('stepNav.error')
242
- : getStatus(index) === 'completed'
243
- ? t('stepNav.completed')
244
- : getStatus(index) === 'current'
245
- ? t('stepNav.current')
252
+ : getStatus(index) === 'done'
253
+ ? t('stepNav.done')
254
+ : getStatus(index) === 'in-progress'
255
+ ? t('stepNav.inProgress')
246
256
  : t('stepNav.upcoming');
247
257
  return `${step}: ${state}`;
248
258
  };
@@ -304,7 +314,7 @@
304
314
  variant={iconVariant}
305
315
  filled>error</Icon
306
316
  >
307
- {:else if status === 'completed'}
317
+ {:else if status === 'done'}
308
318
  <Icon size={resolvedIconSize} weight={iconWeight} grade={iconGrade} variant={iconVariant}
309
319
  >check</Icon
310
320
  >
@@ -393,7 +403,7 @@
393
403
  {#if index < items.length - 1}
394
404
  <span
395
405
  class="step-nav__connector"
396
- class:step-nav__connector--completed={index < progressIndex}
406
+ class:step-nav__connector--done={index < progressIndex}
397
407
  aria-hidden="true"
398
408
  ></span>
399
409
  {/if}
@@ -499,15 +509,15 @@ button.step-nav__step {
499
509
  border: var(--svelte-ui-step-nav-marker-border-width) solid var(--svelte-ui-step-nav-upcoming-marker-color);
500
510
  }
501
511
 
502
- /* current: primary アウトライン + 番号 */
503
- .step-nav__step--current .step-nav__marker {
512
+ /* in-progress: primary アウトライン + 番号 */
513
+ .step-nav__step--in-progress .step-nav__marker {
504
514
  background: var(--svelte-ui-surface-color);
505
515
  color: var(--internal-step-nav-accent, var(--svelte-ui-step-nav-accent-color));
506
516
  border: var(--svelte-ui-step-nav-marker-border-width) solid var(--internal-step-nav-accent, var(--svelte-ui-step-nav-accent-color));
507
517
  }
508
518
 
509
- /* completed: primary 塗り + check */
510
- .step-nav__step--completed .step-nav__marker {
519
+ /* done: primary 塗り + check */
520
+ .step-nav__step--done .step-nav__marker {
511
521
  background: var(--internal-step-nav-accent, var(--svelte-ui-step-nav-accent-color));
512
522
  color: var(--svelte-ui-step-nav-marker-text-color);
513
523
  border: var(--svelte-ui-step-nav-marker-border-width) solid var(--internal-step-nav-accent, var(--svelte-ui-step-nav-accent-color));
@@ -564,8 +574,8 @@ button.step-nav__step {
564
574
  background: var(--svelte-ui-step-nav-connector-color);
565
575
  }
566
576
 
567
- .step-nav__connector--completed {
568
- background: var(--internal-step-nav-accent, var(--svelte-ui-step-nav-connector-completed-color));
577
+ .step-nav__connector--done {
578
+ background: var(--internal-step-nav-accent, var(--svelte-ui-step-nav-connector-done-color));
569
579
  }
570
580
 
571
581
  /* ======================= 水平レイアウト ======================= */
package/dist/components/StepNav.svelte.d.ts CHANGED
@@ -12,8 +12,12 @@ export type StepNavProps = {
12
12
  /**
13
13
  * 到達済みの最遠ステップ（進捗軸）。未指定時は表示中ステップ位置。
14
14
  * 数値なら 0 始まりのインデックス、文字列ならアイテムのユニークキー（`value`。省略時は配列 index の文字列）で指定する。URL方式でも `value` をキーに使う。
15
+ * `{ step, status }` を渡すと指したステップの状態を明示できる。`status: 'done'` なら当該ステップも完了表示（進行中なし）。数値／文字列のみ指定時は `'in-progress'` 扱い。
15
16
  */
16
- progress?: number | string;
17
+ progress?: number | string | {
18
+ step: number | string;
19
+ status: 'in-progress' | 'done';
20
+ };
17
21
  /** 各 href のアクティブ判定に前置するパス。 */
18
22
  pathPrefix?: string;
19
23
  /** アクティブ判定をカスタムする関数。 */
package/dist/i18n/index.d.ts CHANGED
@@ -60,8 +60,8 @@ export declare const TRANSLATIONS: {
60
60
  };
61
61
  readonly stepNav: {
62
62
  readonly step: "Step {{number}}";
63
- readonly completed: "Completed";
64
- readonly current: "Current step";
63
+ readonly done: "Completed";
64
+ readonly inProgress: "Current step";
65
65
  readonly upcoming: "Not started";
66
66
  readonly error: "Error";
67
67
  };
@@ -126,8 +126,8 @@ export declare const TRANSLATIONS: {
126
126
  };
127
127
  readonly stepNav: {
128
128
  readonly step: "ステップ{{number}}";
129
- readonly completed: "完了";
130
- readonly current: "現在のステップ";
129
+ readonly done: "完了";
130
+ readonly inProgress: "現在のステップ";
131
131
  readonly upcoming: "未到達";
132
132
  readonly error: "エラー";
133
133
  };
@@ -192,8 +192,8 @@ export declare const TRANSLATIONS: {
192
192
  };
193
193
  readonly stepNav: {
194
194
  readonly step: "Étape {{number}}";
195
- readonly completed: "Terminé";
196
- readonly current: "Étape actuelle";
195
+ readonly done: "Terminé";
196
+ readonly inProgress: "Étape actuelle";
197
197
  readonly upcoming: "Non commencé";
198
198
  readonly error: "Erreur";
199
199
  };
@@ -258,8 +258,8 @@ export declare const TRANSLATIONS: {
258
258
  };
259
259
  readonly stepNav: {
260
260
  readonly step: "Schritt {{number}}";
261
- readonly completed: "Abgeschlossen";
262
- readonly current: "Aktueller Schritt";
261
+ readonly done: "Abgeschlossen";
262
+ readonly inProgress: "Aktueller Schritt";
263
263
  readonly upcoming: "Noch nicht begonnen";
264
264
  readonly error: "Fehler";
265
265
  };
@@ -324,8 +324,8 @@ export declare const TRANSLATIONS: {
324
324
  };
325
325
  readonly stepNav: {
326
326
  readonly step: "Paso {{number}}";
327
- readonly completed: "Completado";
328
- readonly current: "Paso actual";
327
+ readonly done: "Completado";
328
+ readonly inProgress: "Paso actual";
329
329
  readonly upcoming: "No iniciado";
330
330
  readonly error: "Error";
331
331
  };
@@ -390,8 +390,8 @@ export declare const TRANSLATIONS: {
390
390
  };
391
391
  readonly stepNav: {
392
392
  readonly step: "第{{number}}步";
393
- readonly completed: "已完成";
394
- readonly current: "当前步骤";
393
+ readonly done: "已完成";
394
+ readonly inProgress: "当前步骤";
395
395
  readonly upcoming: "未开始";
396
396
  readonly error: "错误";
397
397
  };
package/dist/i18n/locales/de.d.ts CHANGED
@@ -58,8 +58,8 @@ export declare const de: {
58
58
  };
59
59
  readonly stepNav: {
60
60
  readonly step: "Schritt {{number}}";
61
- readonly completed: "Abgeschlossen";
62
- readonly current: "Aktueller Schritt";
61
+ readonly done: "Abgeschlossen";
62
+ readonly inProgress: "Aktueller Schritt";
63
63
  readonly upcoming: "Noch nicht begonnen";
64
64
  readonly error: "Fehler";
65
65
  };
package/dist/i18n/locales/de.js CHANGED
@@ -58,8 +58,8 @@ export const de = {
58
58
  },
59
59
  stepNav: {
60
60
  step: 'Schritt {{number}}',
61
- completed: 'Abgeschlossen',
62
- current: 'Aktueller Schritt',
61
+ done: 'Abgeschlossen',
62
+ inProgress: 'Aktueller Schritt',
63
63
  upcoming: 'Noch nicht begonnen',
64
64
  error: 'Fehler'
65
65
  }
package/dist/i18n/locales/en.d.ts CHANGED
@@ -58,8 +58,8 @@ export declare const en: {
58
58
  };
59
59
  readonly stepNav: {
60
60
  readonly step: "Step {{number}}";
61
- readonly completed: "Completed";
62
- readonly current: "Current step";
61
+ readonly done: "Completed";
62
+ readonly inProgress: "Current step";
63
63
  readonly upcoming: "Not started";
64
64
  readonly error: "Error";
65
65
  };
package/dist/i18n/locales/en.js CHANGED
@@ -58,8 +58,8 @@ export const en = {
58
58
  },
59
59
  stepNav: {
60
60
  step: 'Step {{number}}',
61
- completed: 'Completed',
62
- current: 'Current step',
61
+ done: 'Completed',
62
+ inProgress: 'Current step',
63
63
  upcoming: 'Not started',
64
64
  error: 'Error'
65
65
  }
package/dist/i18n/locales/es.d.ts CHANGED
@@ -58,8 +58,8 @@ export declare const es: {
58
58
  };
59
59
  readonly stepNav: {
60
60
  readonly step: "Paso {{number}}";
61
- readonly completed: "Completado";
62
- readonly current: "Paso actual";
61
+ readonly done: "Completado";
62
+ readonly inProgress: "Paso actual";
63
63
  readonly upcoming: "No iniciado";
64
64
  readonly error: "Error";
65
65
  };
package/dist/i18n/locales/es.js CHANGED
@@ -58,8 +58,8 @@ export const es = {
58
58
  },
59
59
  stepNav: {
60
60
  step: 'Paso {{number}}',
61
- completed: 'Completado',
62
- current: 'Paso actual',
61
+ done: 'Completado',
62
+ inProgress: 'Paso actual',
63
63
  upcoming: 'No iniciado',
64
64
  error: 'Error'
65
65
  }
package/dist/i18n/locales/fr.d.ts CHANGED
@@ -58,8 +58,8 @@ export declare const fr: {
58
58
  };
59
59
  readonly stepNav: {
60
60
  readonly step: "Étape {{number}}";
61
- readonly completed: "Terminé";
62
- readonly current: "Étape actuelle";
61
+ readonly done: "Terminé";
62
+ readonly inProgress: "Étape actuelle";
63
63
  readonly upcoming: "Non commencé";
64
64
  readonly error: "Erreur";
65
65
  };
package/dist/i18n/locales/fr.js CHANGED
@@ -58,8 +58,8 @@ export const fr = {
58
58
  },
59
59
  stepNav: {
60
60
  step: 'Étape {{number}}',
61
- completed: 'Terminé',
62
- current: 'Étape actuelle',
61
+ done: 'Terminé',
62
+ inProgress: 'Étape actuelle',
63
63
  upcoming: 'Non commencé',
64
64
  error: 'Erreur'
65
65
  }
package/dist/i18n/locales/ja.d.ts CHANGED
@@ -58,8 +58,8 @@ export declare const ja: {
58
58
  };
59
59
  readonly stepNav: {
60
60
  readonly step: "ステップ{{number}}";
61
- readonly completed: "完了";
62
- readonly current: "現在のステップ";
61
+ readonly done: "完了";
62
+ readonly inProgress: "現在のステップ";
63
63
  readonly upcoming: "未到達";
64
64
  readonly error: "エラー";
65
65
  };
package/dist/i18n/locales/ja.js CHANGED
@@ -58,8 +58,8 @@ export const ja = {
58
58
  },
59
59
  stepNav: {
60
60
  step: 'ステップ{{number}}',
61
- completed: '完了',
62
- current: '現在のステップ',
61
+ done: '完了',
62
+ inProgress: '現在のステップ',
63
63
  upcoming: '未到達',
64
64
  error: 'エラー'
65
65
  }
package/dist/i18n/locales/zh-cn.d.ts CHANGED
@@ -58,8 +58,8 @@ export declare const zhCn: {
58
58
  };
59
59
  readonly stepNav: {
60
60
  readonly step: "第{{number}}步";
61
- readonly completed: "已完成";
62
- readonly current: "当前步骤";
61
+ readonly done: "已完成";
62
+ readonly inProgress: "当前步骤";
63
63
  readonly upcoming: "未开始";
64
64
  readonly error: "错误";
65
65
  };
package/dist/i18n/locales/zh-cn.js CHANGED
@@ -58,8 +58,8 @@ export const zhCn = {
58
58
  },
59
59
  stepNav: {
60
60
  step: '第{{number}}步',
61
- completed: '已完成',
62
- current: '当前步骤',
61
+ done: '已完成',
62
+ inProgress: '当前步骤',
63
63
  upcoming: '未开始',
64
64
  error: '错误'
65
65
  }
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.55",
5
+ "version": "0.0.56",
6
6
  "type": "module",
7
7
  "keywords": [
8
8
  "svelte",