cclkit4svelte 3.1.0 → 4.0.0

package/README.md

@@ -10,6 +10,11 @@ CANDY CHUPS Labのサイトで使うコンポーネントのキットです。
 
 このライブラリの開発を行うにはSvelteの導入が必要です。
 
+## Svelte互換性
+
+`cclkit4svelte` 4.x はSvelte 5専用です。Svelte 4はサポート対象外です。
+実装方針と段階的な移行ルールは[docs/SVELTE_5_MIGRATION.md](docs/SVELTE_5_MIGRATION.md)を参照してください。
+
 ## Figma
 
 [Figma](https://www.figma.com/file/RWLq3IaUeF0soEH666sXQC/Common-Component?type=design&node-id=0%3A1&mode=design&t=ESVNyUtQevAFIe3o-1)

package/dist/BookCard.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import Button from './Button.svelte';
+  import { CCLVividColor } from './const/config';
+  import type { ColorVar } from './const/config';
 
   /**
    * 書籍のタイトル
@@ -43,7 +45,10 @@
    * @default --strawberry-pink
    * @type string
    */
-  export let borderColor: string = '--strawberry-pink';
+  export let borderColor: string = CCLVividColor.STRAWBERRY_PINK;
+  let buttonColor: ColorVar;
+  // Preserve support for consumer-defined CSS custom properties at the public boundary.
+  $: buttonColor = borderColor as ColorVar;
 
   function handleLinkClick() {
     if (linkUrl) {
@@ -63,7 +68,7 @@
     </div>
     {#if linkUrl}
       <div class="BookCardLinkWrapper">
-        <Button label={linkText} bgColor={borderColor} onClick={handleLinkClick} />
+        <Button label={linkText} bgColor={buttonColor} onClick={handleLinkClick} />
       </div>
     {/if}
   </div>

package/dist/Carousel.svelte

@@ -44,12 +44,12 @@
 >
   <div class="slides">
     {#each src as item, index}
-      <img class="slide" src={item.src} alt={item.alt} />
+      <img class="slide" src={item.src} alt={item.alt} aria-hidden={index !== currentIndex} />
     {/each}
   </div>
   <div class="buttons">
-    <button on:click={prevSlide}>❮</button>
-    <button on:click={nextSlide}>❯</button>
+    <button type="button" aria-label="前のスライドへ" on:click={prevSlide}>❮</button>
+    <button type="button" aria-label="次のスライドへ" on:click={nextSlide}>❯</button>
   </div>
 </div>
 

package/dist/ChangeHistory.svelte

@@ -1,3 +1,17 @@
+<script context="module" lang="ts">
+  /**
+   * 更新履歴の表示項目
+   */
+  export interface HistoryItem {
+    date: string;
+    title: string;
+    tag?: string;
+    color?: string;
+    version?: string;
+    details?: string[];
+  }
+</script>
+
 <script lang="ts">
   import { CCLVividColor, CCLPastelColor } from './const/config';
 
@@ -10,15 +24,6 @@
    * @property {string} [version] - バージョン番号 (例: "v1.1.0")。省略可能
    * @property {string[]} [details] - 更新内容の詳細なリスト。省略可能
    */
-  export interface HistoryItem {
-    date: string;
-    title: string;
-    tag?: string;
-    color?: string;
-    version?: string;
-    details?: string[];
-  }
-
   /**
    * 表示する更新履歴の配列
    * @type {HistoryItem[]}

package/dist/ChangeHistory.svelte.d.ts

@@ -1,3 +1,14 @@
+/**
+ * 更新履歴の表示項目
+ */
+export interface HistoryItem {
+    date: string;
+    title: string;
+    tag?: string;
+    color?: string;
+    version?: string;
+    details?: string[];
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/DatePicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
+  import type { Action } from 'svelte/action';
   import { DateTime } from 'luxon';
 
   const dispatch = createEventDispatcher();
@@ -89,7 +90,11 @@
    * Svelte Action to detect clicks outside an element.
    * @param {HTMLElement} node
    */
-  function clickOutside(node: HTMLElement) {
+  const clickOutside: Action<
+    HTMLElement,
+    undefined,
+    { 'on:click_outside': (event: CustomEvent<void>) => void }
+  > = (node) => {
     const handleClick = (event: MouseEvent) => {
       if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
         // 'click_outside' というカスタムイベントを発行
@@ -104,7 +109,7 @@
         document.removeEventListener('click', handleClick, true);
       }
     };
-  }
+  };
 
   $: daysInMonth = getDaysInMonth(currentMonth);
 </script>

package/dist/Dialog.svelte.d.ts

@@ -31,7 +31,7 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
        */ closeOnOutside?: boolean;
     /**
        * アクセント色（境界線やタイトルに使用）
-       */ borderColor?: any;
+       */ borderColor?: "--strawberry-pink" | "--pineapple-yellow" | "--soda-blue" | "--melon-green" | "--grape-purple" | "--wrap-grey";
 }, {
     title: {};
     default: {};

package/dist/Select.svelte

@@ -1,10 +1,12 @@
-<script lang="ts">
-  import { CCLVividColor } from './const/config';
-
+<script context="module" lang="ts">
   /**
    * オプションの型定義
    */
   export type SelectOption = { value: string; label: string };
+</script>
+
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
 
   /**
    * ラベルのテキスト

package/dist/Select.svelte.d.ts

@@ -1,3 +1,10 @@
+/**
+ * オプションの型定義
+ */
+export type SelectOption = {
+    value: string;
+    label: string;
+};
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -20,10 +27,7 @@ declare const Select: $$__sveltets_2_IsomorphicComponent<{
     /**
        * 選択肢のリスト
        * @type SelectOption[]
-       */ options?: {
-        value: string;
-        label: string;
-    }[];
+       */ options?: SelectOption[];
     /**
        * 選択された値
        * @default ''

package/dist/TabPanel.svelte

@@ -22,7 +22,8 @@
   export let disabled: boolean = false;
 
   import { TABS_CONTEXT_KEY } from './scripts/tabsContext';
-  const { addTab, activeTabLabel } = getContext(TABS_CONTEXT_KEY);
+  import type { TabsContext } from './scripts/tabsContext';
+  const { addTab, activeTabLabel } = getContext<TabsContext>(TABS_CONTEXT_KEY);
 
   onMount(() => {
     addTab({ label, color, disabled });

package/dist/Tabs.svelte

@@ -3,11 +3,12 @@
   import { writable } from 'svelte/store';
 
   import { TABS_CONTEXT_KEY } from './scripts/tabsContext';
+  import type { TabData, TabsContext } from './scripts/tabsContext';
 
-  const tabData = writable([]);
+  const tabData = writable<TabData[]>([]);
   const activeTabLabel = writable('');
 
-  setContext(TABS_CONTEXT_KEY, {
+  setContext<TabsContext>(TABS_CONTEXT_KEY, {
     addTab: (tab) => {
       tabData.update((currentTabs) => {
         const newTabs = [...currentTabs, tab];

package/dist/const/colorMap.js

@@ -1,14 +1,13 @@
-var _a;
 import { CCLPastelColor, CCLVividColor } from './config';
 // Pastel -> Vivid CSS variable mapping
-export var pastelToVividMap = (_a = {},
-    _a[CCLPastelColor.PEACH_PINK] = CCLVividColor.STRAWBERRY_PINK,
-    _a[CCLPastelColor.LEMON_YELLOW] = CCLVividColor.PINEAPPLE_YELLOW,
-    _a[CCLPastelColor.SUGAR_BLUE] = CCLVividColor.SODA_BLUE,
-    _a[CCLPastelColor.MATCHA_GREEN] = CCLVividColor.MELON_GREEN,
-    _a[CCLPastelColor.AKEBI_PURPLE] = CCLVividColor.GRAPE_PURPLE,
-    _a[CCLPastelColor.CLOUD_GREY] = CCLVividColor.WRAP_GREY,
-    _a);
+export const pastelToVividMap = {
+    [CCLPastelColor.PEACH_PINK]: CCLVividColor.STRAWBERRY_PINK,
+    [CCLPastelColor.LEMON_YELLOW]: CCLVividColor.PINEAPPLE_YELLOW,
+    [CCLPastelColor.SUGAR_BLUE]: CCLVividColor.SODA_BLUE,
+    [CCLPastelColor.MATCHA_GREEN]: CCLVividColor.MELON_GREEN,
+    [CCLPastelColor.AKEBI_PURPLE]: CCLVividColor.GRAPE_PURPLE,
+    [CCLPastelColor.CLOUD_GREY]: CCLVividColor.WRAP_GREY
+};
 /** Returns the vivid counterpart for a given color var if it's pastel; otherwise undefined. */
 export function vividFor(colorVar) {
     if (!colorVar)

package/dist/const/config.js

@@ -1,15 +1,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var CCLVividColor = {
+const CCLVividColor = {
     STRAWBERRY_PINK: '--strawberry-pink',
     PINEAPPLE_YELLOW: '--pineapple-yellow',
     SODA_BLUE: '--soda-blue',
@@ -17,7 +6,7 @@ var CCLVividColor = {
     GRAPE_PURPLE: '--grape-purple',
     WRAP_GREY: '--wrap-grey'
 };
-var CCLPastelColorBase = {
+const CCLPastelColorBase = {
     PEACH_PINK: '--peach-pink',
     LEMON_YELLOW: '--lemon-yellow',
     SUGAR_BLUE: '--sugar-blue',
@@ -25,8 +14,10 @@ var CCLPastelColorBase = {
     AKEBI_PURPLE: '--akebi-purple',
     CLOUD_GREY: '--cloud-grey'
 };
-var CCLPastelColor = __assign({}, CCLPastelColorBase);
-var CCLPaletteColor = {
+const CCLPastelColor = {
+    ...CCLPastelColorBase
+};
+const CCLPaletteColor = {
     STRAWBERRY_50: '--palette-strawberry-50',
     STRAWBERRY_100: '--palette-strawberry-100',
     STRAWBERRY_200: '--palette-strawberry-200',
@@ -148,7 +139,7 @@ var CCLPaletteColor = {
     CLOUD_800: '--palette-cloud-800',
     CLOUD_900: '--palette-cloud-900'
 };
-var CCLSemanticColor = {
+const CCLSemanticColor = {
     SURFACE_GLASS: '--color-surface-glass',
     ACTION_PRIMARY_DEFAULT: '--color-action-primary-default',
     ACTION_PRIMARY_HOVER: '--color-action-primary-hover',
@@ -171,7 +162,7 @@ export var ProgressBarHeight;
     ProgressBarHeight["DEFAULT"] = "10px";
     ProgressBarHeight["WIDE"] = "20px";
 })(ProgressBarHeight || (ProgressBarHeight = {}));
-var HeaderHeight = {
+const HeaderHeight = {
     WIDE: '--hd-wide',
     NORMAL: '--hd-normal',
     NALLOW: '--hd-nallow'

package/dist/scripts/accordionContext.d.ts

@@ -1 +1 @@
-export declare const ACCORDION_CONTEXT_KEY: any;
+export declare const ACCORDION_CONTEXT_KEY: unique symbol;

package/dist/scripts/accordionContext.js

@@ -1 +1 @@
-export var ACCORDION_CONTEXT_KEY = Symbol('accordion-context');
+export const ACCORDION_CONTEXT_KEY = Symbol('accordion-context');

package/dist/scripts/date.js

@@ -1,4 +1,4 @@
-var getYear = function () {
+const getYear = () => {
     return new Date().getFullYear();
 };
 export { getYear };

package/dist/scripts/tabsContext.d.ts

@@ -1 +1,11 @@
-export declare const TABS_CONTEXT_KEY: any;
+import type { Writable } from 'svelte/store';
+export type TabData = {
+    label: string;
+    color: string;
+    disabled: boolean;
+};
+export type TabsContext = {
+    addTab: (tab: TabData) => void;
+    activeTabLabel: Writable<string>;
+};
+export declare const TABS_CONTEXT_KEY: unique symbol;

package/dist/scripts/tabsContext.js

@@ -1 +1 @@
-export var TABS_CONTEXT_KEY = Symbol('tabs-context');
+export const TABS_CONTEXT_KEY = Symbol('tabs-context');

package/dist/toast.js

@@ -1,64 +1,50 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { writable } from 'svelte/store';
 import { CCLVividColor } from './const/config';
-export var toasts = writable([]);
+export const toasts = writable([]);
 function genId() {
     return Math.random().toString(36).slice(2) + Date.now().toString(36);
 }
 // Default auto-dismiss duration held internally
-var DEFAULT_DURATION = 3000;
+const DEFAULT_DURATION = 3000;
 export function show(opts) {
-    var _a, _b;
-    var id = genId();
-    var item = {
-        id: id,
+    const id = genId();
+    const item = {
+        id,
         title: opts.title,
         message: opts.message,
-        variant: (_a = opts.variant) !== null && _a !== void 0 ? _a : 'info',
-        duration: (_b = opts.duration) !== null && _b !== void 0 ? _b : DEFAULT_DURATION
+        variant: opts.variant ?? 'info',
+        duration: opts.duration ?? DEFAULT_DURATION
     };
-    toasts.update(function (list) { return __spreadArray([item], list, true).slice(0, 50); });
+    toasts.update((list) => [item, ...list].slice(0, 50));
     if (typeof window !== 'undefined' && item.duration > 0) {
-        window.setTimeout(function () { return dismiss(id); }, item.duration);
+        window.setTimeout(() => dismiss(id), item.duration);
     }
     return id;
 }
 export function dismiss(id) {
-    toasts.update(function (list) { return list.filter(function (t) { return t.id !== id; }); });
+    toasts.update((list) => list.filter((t) => t.id !== id));
 }
 export function clear() {
     toasts.set([]);
 }
-export var toast = {
-    show: show,
-    success: function (message, title, duration) {
-        if (title === void 0) { title = 'Success'; }
-        return show({ message: message, title: title, variant: 'success', duration: duration });
+export const toast = {
+    show,
+    success(message, title = 'Success', duration) {
+        return show({ message, title, variant: 'success', duration });
     },
-    error: function (message, title, duration) {
-        if (title === void 0) { title = 'Error'; }
-        return show({ message: message, title: title, variant: 'error', duration: duration });
+    error(message, title = 'Error', duration) {
+        return show({ message, title, variant: 'error', duration });
     },
-    warning: function (message, title, duration) {
-        if (title === void 0) { title = 'Warning'; }
-        return show({ message: message, title: title, variant: 'warning', duration: duration });
+    warning(message, title = 'Warning', duration) {
+        return show({ message, title, variant: 'warning', duration });
     },
-    info: function (message, title, duration) {
-        if (title === void 0) { title = 'Info'; }
-        return show({ message: message, title: title, variant: 'info', duration: duration });
+    info(message, title = 'Info', duration) {
+        return show({ message, title, variant: 'info', duration });
     },
-    dismiss: dismiss,
-    clear: clear
+    dismiss,
+    clear
 };
-export var variantColor = {
+export const variantColor = {
     success: CCLVividColor.MELON_GREEN,
     error: CCLVividColor.STRAWBERRY_PINK,
     warning: CCLVividColor.PINEAPPLE_YELLOW,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cclkit4svelte",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "author": "reiji1020 <sk@reiji1020.info>",
   "license": "MIT",
   "type": "module",
@@ -21,6 +21,7 @@
   },
   "scripts": {
     "preinstall": "node -e \"if (!/pnpm/.test(process.env.npm_execpath || '')) { console.error('Use pnpm to install dependencies.'); process.exit(1); }\"",
+    "prepare": "svelte-kit sync",
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
@@ -85,7 +86,7 @@
     "vite": "^5.4.20"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.0.0"
   },
   "volta": {
     "node": "20.11.1",