cclkit4svelte 2.0.2 → 2.0.4

package/dist/Alert.svelte

@@ -46,51 +46,51 @@ function dismissAlert() {
 </script>
 
 <div
-    class="alert-wrapper"
-    class:dismissible={dismissible}
-    class:outline={outline}
-    style="background-color: var({computedBgColor}); color: {textColor}; border-color: var({computedBorderColor});"
+	class="alert-wrapper"
+	class:dismissible
+	class:outline
+	style="background-color: var({computedBgColor}); color: {textColor}; border-color: var({computedBorderColor});"
 >
-    <span class="alert-message">{message}</span>
-    {#if dismissible}
-        <button class="dismiss-button" on:click={dismissAlert} aria-label="Dismiss alert">
-            &times;
-        </button>
-    {/if}
+	<span class="alert-message">{message}</span>
+	{#if dismissible}
+		<button class="dismiss-button" on:click={dismissAlert} aria-label="Dismiss alert">
+			&times;
+		</button>
+	{/if}
 </div>
 
 <style>
-    .alert-wrapper {
-        padding: 12px 20px;
-        border-radius: 8px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 16px;
-        font-weight: 500;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        margin-bottom: 10px; /* Add some spacing when multiple alerts are shown */
-        border: 2px solid; /* Use solid border, color set by style attribute */
-    }
+	.alert-wrapper {
+		padding: 12px 20px;
+		border-radius: 8px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 16px;
+		font-weight: 500;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		margin-bottom: 10px; /* Add some spacing when multiple alerts are shown */
+		border: 2px solid; /* Use solid border, color set by style attribute */
+	}
 
-    .alert-message {
-        flex-grow: 1;
-    }
+	.alert-message {
+		flex-grow: 1;
+	}
 
-    .dismiss-button {
-        background: none;
-        border: none;
-        color: inherit; /* Inherit text color from parent */
-        font-size: 20px;
-        cursor: pointer;
-        margin-left: 15px;
-        padding: 0;
-        line-height: 1;
-        opacity: 0.7;
-        transition: opacity 0.2s ease-in-out;
-    }
+	.dismiss-button {
+		background: none;
+		border: none;
+		color: inherit; /* Inherit text color from parent */
+		font-size: 20px;
+		cursor: pointer;
+		margin-left: 15px;
+		padding: 0;
+		line-height: 1;
+		opacity: 0.7;
+		transition: opacity 0.2s ease-in-out;
+	}
 
-    .dismiss-button:hover {
-        opacity: 1;
-    }
-</style>
+	.dismiss-button:hover {
+		opacity: 1;
+	}
+</style>

package/dist/Button.svelte

@@ -39,4 +39,4 @@ let buttonColor = getButtonColor(bgColor);
 		font-size: 18px;
 		line-height: normal;
 	}
-</style>
+</style>

package/dist/Card.svelte

@@ -86,4 +86,4 @@ $: bodyColor = getBodyColor(borderColor);
 		text-overflow: ellipsis;
 		overflow: hidden;
 	}
-</style>
+</style>

package/dist/Carousel.svelte

@@ -1,3 +1,5 @@
+<script context="module"></script>
+
 <script>import "./const/variables.css";
 export let src;
 export let csWidth;
@@ -12,7 +14,10 @@ const prevSlide = () => {
 };
 </script>
 
-<div class="carouselWrapper" style="--carousel-width: {csWidth}; --translate-x: calc(-{currentIndex} * 100%)">
+<div
+	class="carouselWrapper"
+	style="--carousel-width: {csWidth}; --translate-x: calc(-{currentIndex} * 100%)"
+>
 	<div class="slides">
 		{#each src as item, index}
 			<img class="slide" src={item.src} alt={item.alt} />
@@ -68,4 +73,4 @@ const prevSlide = () => {
 		justify-content: center;
 		box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 	}
-</style>
+</style>

package/dist/Carousel.svelte.d.ts

@@ -1,4 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+export interface Imgsrc {
+    src: string;
+    alt: string;
+}
 import './const/variables.css';
 declare const __propDef: {
     props: {

package/dist/ChangeHistory.svelte

@@ -0,0 +1,157 @@
+<script>import "./const/variables.css";
+import { CCLVividColor, CCLPastelColor } from "./const/config";
+export let historyItems = [];
+export let height = void 0;
+export let defaultColor = CCLVividColor.SODA_BLUE;
+const vividToPastelMap = {
+  [CCLVividColor.STRAWBERRY_PINK]: CCLPastelColor.PEACH_PINK,
+  [CCLVividColor.PINEAPPLE_YELLOW]: CCLPastelColor.LEMON_YELLOW,
+  [CCLVividColor.SODA_BLUE]: CCLPastelColor.SUGAR_BLUE,
+  [CCLVividColor.MELON_GREEN]: CCLPastelColor.MATCHA_GREEN,
+  [CCLVividColor.GRAPE_PURPLE]: CCLPastelColor.AKEBI_PURPLE,
+  [CCLVividColor.WRAP_GREY]: CCLPastelColor.CLOUD_GREY
+};
+$: defaultPastelColor = vividToPastelMap[defaultColor] || CCLPastelColor.SUGAR_BLUE;
+</script>
+
+<div class="change-history-container" style={height ? `height: ${height};` : ''}>
+	<ul class="timeline">
+		{#each historyItems as item (item.date + item.title)}
+			<li
+				class="timeline-item"
+				style:--marker-color="var({item.color || defaultColor})"
+				style:--tag-color="var({item.color || defaultColor})"
+				style:--tag-bg-color="var({vividToPastelMap[item.color || defaultColor] || defaultPastelColor})"
+			>
+				<div class="timeline-marker"></div>
+				<div class="timeline-content">
+					<div class="header">
+						<time class="date" datetime={item.date}>{item.date}</time>
+						{#if item.tag}
+							<span class="tag">{item.tag}</span>
+						{/if}
+						{#if item.version}
+							<span class="version">{item.version}</span>
+						{/if}
+					</div>
+					<h3 class="title">{item.title}</h3>
+					{#if item.details && item.details.length > 0}
+						<ul class="details">
+							{#each item.details as detail}
+								<li>{detail}</li>
+							{/each}
+						</ul>
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ul>
+</div>
+
+<style>
+	.change-history-container {
+		font-family: sans-serif;
+		max-width: 800px;
+		margin: 0 auto;
+		padding: 20px;
+		overflow-y: auto;
+	}
+
+	.timeline {
+		list-style-type: none;
+		padding-left: 20px;
+		position: relative;
+	}
+
+	/* タイムラインの縦線 */
+	.timeline::before {
+		content: '';
+		position: absolute;
+		top: 5px;
+		left: 5px;
+		height: calc(100% - 5px);
+		width: 2px;
+		background-color: #dee2e6;
+	}
+
+	.timeline-item {
+		position: relative;
+		margin-bottom: 30px;
+		padding-left: 35px;
+	}
+
+	.timeline-item:last-child {
+		margin-bottom: 0;
+	}
+
+	.timeline-marker {
+		position: absolute;
+		top: 5px;
+		left: -2px;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+		background-color: var(--marker-color);
+		border: 3px solid #fff;
+		z-index: 1;
+	}
+
+	.timeline-content {
+		background-color: #ffffff;
+		padding: 15px 20px;
+		border-radius: 6px;
+		border: 1px solid #dee2e6;
+	}
+
+	.header {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		margin-bottom: 8px;
+	}
+
+	.date {
+		font-weight: bold;
+		color: #343a40;
+	}
+
+	.tag {
+		background-color: var(--tag-bg-color);
+		color: var(--tag-color);
+		padding: 3px 10px;
+		border-radius: 12px;
+		font-size: 0.85em;
+		font-weight: 600;
+	}
+
+	.version {
+		background-color: #f1f3f5; /* ニュートラルなグレー */
+		color: #495057;
+		padding: 3px 10px;
+		border-radius: 12px;
+		font-size: 0.85em;
+		font-weight: 600;
+	}
+
+	.title {
+		margin: 0 0 12px 0;
+		font-size: 1.15em;
+		font-weight: 600;
+		color: #212529;
+	}
+
+	.details {
+		list-style-type: disc;
+		padding-left: 20px;
+		margin: 0;
+		color: #495057;
+		line-height: 1.6;
+	}
+
+	.details li {
+		margin-bottom: 5px;
+	}
+	.details li:last-child {
+		margin-bottom: 0;
+	}
+</style>

package/dist/ChangeHistory.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import './const/variables.css';
+declare const __propDef: {
+    props: {
+        /**
+             * 表示する更新履歴の配列
+             * @type {HistoryItem[]}
+             */ historyItems?: HistoryItem[];
+        /**
+             * コンポーネントの高さ。'400px'や'50vh'のようにCSSの値を指定します。
+             * @type {string | undefined}
+             */ height?: string | undefined;
+        /**
+             * アイテムに色が指定されていない場合のデフォルトカラー。`CCLVividColor`の値を指定します。
+             * @type {string}
+             */ defaultColor?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChangeHistoryProps = typeof __propDef.props;
+export type ChangeHistoryEvents = typeof __propDef.events;
+export type ChangeHistorySlots = typeof __propDef.slots;
+export default class ChangeHistory extends SvelteComponentTyped<ChangeHistoryProps, ChangeHistoryEvents, ChangeHistorySlots> {
+}
+export {};

package/dist/Checkbox.svelte

@@ -6,7 +6,7 @@ export let color = CCLVividColor.SODA_BLUE;
 export let disabled = false;
 export let onChange = () => {
 };
-let checkMarkColor = "white";
+const checkMarkColor = "white";
 function handleChange(event) {
   if (disabled) {
     return;
@@ -17,9 +17,19 @@ function handleChange(event) {
 }
 </script>
 
-<label class="checkboxWrapper" class:disabled={disabled}>
-	<input type="checkbox" bind:checked on:change={handleChange} {disabled} aria-label={label} name={label} />
-	<span class="customCheckbox" style="--bg-color: var({color}); --check-mark-color: {checkMarkColor};">
+<label class="checkboxWrapper" class:disabled>
+	<input
+		type="checkbox"
+		bind:checked
+		on:change={handleChange}
+		{disabled}
+		aria-label={label}
+		name={label}
+	/>
+	<span
+		class="customCheckbox"
+		style="--bg-color: var({color}); --check-mark-color: {checkMarkColor};"
+	>
 		{#if checked}
 			<svg
 				class="checkMark"

package/dist/DatePicker.svelte

@@ -6,18 +6,20 @@ export let selectedDate = null;
 export let placeholder = "\u65E5\u4ED8\u3092\u9078\u629E";
 export let id = "date-picker-" + Math.random().toString(36).substring(2, 9);
 export let borderColor = "--strawberry-pink";
-export let disableBlurClose = false;
 let showCalendar = false;
 let currentMonth = selectedDate ? DateTime.fromJSDate(selectedDate) : DateTime.local();
 $: formattedDate = selectedDate ? DateTime.fromJSDate(selectedDate).toFormat("yyyy/MM/dd") : "";
-function toggleCalendar() {
-  showCalendar = !showCalendar;
+function openCalendar() {
+  showCalendar = true;
+}
+function closeCalendar() {
+  showCalendar = false;
 }
 function selectDay(day) {
   const newDate = currentMonth.set({ day }).toJSDate();
   selectedDate = newDate;
   dispatch("change", newDate);
-  showCalendar = false;
+  closeCalendar();
 }
 function prevMonth() {
   currentMonth = currentMonth.minus({ months: 1 });
@@ -29,27 +31,59 @@ function getDaysInMonth(date) {
   const startOfMonth = date.startOf("month");
   const endOfMonth = date.endOf("month");
   const days = [];
-  const startDayOfWeek = startOfMonth.weekday === 7 ? 0 : startOfMonth.weekday;
+  const startDayOfWeek = startOfMonth.weekday % 7;
   for (let i = 0; i < startDayOfWeek; i++) {
     days.push(null);
   }
   for (let i = 1; i <= endOfMonth.day; i++) {
     days.push(i);
   }
-  const remainingDays = 42 - days.length;
-  for (let i = 0; i < remainingDays; i++) {
+  while (days.length < 42) {
     days.push(null);
   }
   return days;
 }
+function clickOutside(node) {
+  const handleClick = (event) => {
+    if (node && !node.contains(event.target) && !event.defaultPrevented) {
+      node.dispatchEvent(new CustomEvent("click_outside"));
+    }
+  };
+  document.addEventListener("click", handleClick, true);
+  return {
+    destroy() {
+      document.removeEventListener("click", handleClick, true);
+    }
+  };
+}
 $: daysInMonth = getDaysInMonth(currentMonth);
 </script>
 
-<div class="datePickerWrapper" style="--selected-color: var({borderColor});">
-	<input type="text" {id} value={formattedDate} placeholder={placeholder} on:focus={toggleCalendar} on:blur={() => { if (!disableBlurClose) toggleCalendar(); }} readonly style="border-color: var({borderColor});" />
+<!--
+  - `use:clickOutside` でアクションを適用
+  - `on:click_outside` で外側クリック時の動作を定義
+-->
+<div
+		class="datePickerWrapper"
+		style="--selected-color: var({borderColor});"
+		use:clickOutside
+		on:click_outside={closeCalendar}
+>
+	<input
+			type="text"
+			{id}
+			value={formattedDate}
+			{placeholder}
+			on:focus={openCalendar}
+			readonly
+			style="border-color: var({borderColor});"
+	/>
 
 	{#if showCalendar}
-		<div class="calendarOverlay" on:mousedown|preventDefault={() => {}}>
+		<!--
+      - カレンダー内のクリックが外側クリックと誤認されないようにイベントの伝播を止める
+    -->
+		<div class="calendarOverlay" on:click|stopPropagation>
 			<div class="calendarHeader">
 				<button on:click={prevMonth} aria-label="前月へ">&lt;</button>
 				<span>{currentMonth.toFormat('yyyy年MM月')}</span>
@@ -67,10 +101,13 @@ $: daysInMonth = getDaysInMonth(currentMonth);
 			<div class="daysGrid">
 				{#each daysInMonth as day}
 					<button
-						class:currentMonthDay={day !== null}
-						class:selected={selectedDate && day === DateTime.fromJSDate(selectedDate).day && currentMonth.month === DateTime.fromJSDate(selectedDate).month && currentMonth.year === DateTime.fromJSDate(selectedDate).year}
-						on:click={() => day && selectDay(day)}
-						disabled={day === null}
+							class:currentMonthDay={day !== null}
+							class:selected={selectedDate &&
+							day === DateTime.fromJSDate(selectedDate).day &&
+							currentMonth.month === DateTime.fromJSDate(selectedDate).month &&
+							currentMonth.year === DateTime.fromJSDate(selectedDate).year}
+							on:click={() => day && selectDay(day)}
+							disabled={day === null}
 					>
 						{day !== null ? day : ''}
 					</button>
@@ -81,6 +118,7 @@ $: daysInMonth = getDaysInMonth(currentMonth);
 </div>
 
 <style>
+	/* スタイルは変更なし */
 	.datePickerWrapper {
 		position: relative;
 		display: inline-block;
@@ -91,6 +129,11 @@ $: daysInMonth = getDaysInMonth(currentMonth);
 		border: 1px solid #ccc;
 		border-radius: 4px;
 		width: 120px;
+		cursor: pointer; /* クリックできることを示す */
+	}
+
+	.datePickerWrapper input:focus {
+		outline: none;
 	}
 
 	.calendarOverlay {
@@ -159,4 +202,4 @@ $: daysInMonth = getDaysInMonth(currentMonth);
 		color: #ccc;
 		cursor: default;
 	}
-</style>
+</style>

package/dist/DatePicker.svelte.d.ts

@@ -22,14 +22,9 @@ declare const __propDef: {
              * @default --strawberry-pink
              * @type string
              */ borderColor?: string;
-        /**
-             * blurイベントでカレンダーを閉じないようにするか
-             * テスト用途で利用
-             * @default false
-             * @type boolean
-             */ disableBlurClose?: boolean;
     };
     events: {
+        click: MouseEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/Footer.svelte

@@ -22,4 +22,4 @@ const year = getYear();
 		color: #fff;
 		font-size: 9px;
 	}
-</style>
+</style>

package/dist/Header.svelte

@@ -10,7 +10,7 @@ export let height;
 			href="https://candychupslab.netlify.app/"
 			target="_blank"
 			rel="noopener noreferrer"
-			style="display: inline-block; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;"
+			style="display: flex; height: 100%; width: 100%; align-items: center; justify-content: center;"
 		>
 			<svg viewBox="0 0 665 63" xmlns="http://www.w3.org/2000/svg">
 				<title>CANDY CHUPS Lab.</title>
@@ -106,4 +106,3 @@ export let height;
 		fill: #fff;
 	}
 </style>
-

package/dist/ProgressBar.svelte

@@ -13,40 +13,40 @@ $: finalBackgroundColor = backgroundColor.startsWith("--") ? `var(${backgroundCo
 </script>
 
 <div
-  class="progress-bar-container"
-  class:sticky={isSticky}
-  class:rounded={isRounded}
-  style="background-color: {finalBackgroundColor}; width: {containerWidth}; height: {height};"
-  role="progressbar"
-  aria-valuenow={value}
-  aria-valuemin="0"
-  aria-valuemax={maxValue}
+	class="progress-bar-container"
+	class:sticky={isSticky}
+	class:rounded={isRounded}
+	style="background-color: {finalBackgroundColor}; width: {containerWidth}; height: {height};"
+	role="progressbar"
+	aria-valuenow={value}
+	aria-valuemin="0"
+	aria-valuemax={maxValue}
 >
-  <div class="progress-bar" style="width: {progress}%; background-color: {finalBarColor};"></div>
+	<div class="progress-bar" style="width: {progress}%; background-color: {finalBarColor};"></div>
 </div>
 
 <style>
-  .progress-bar-container {
-    overflow: hidden;
-    position: relative;
-  }
+	.progress-bar-container {
+		overflow: hidden;
+		position: relative;
+	}
 
-  .progress-bar-container.sticky {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 9999;
-  }
+	.progress-bar-container.sticky {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 9999;
+	}
 
-  .progress-bar-container.rounded {
-    border-radius: 10px;
-  }
+	.progress-bar-container.rounded {
+		border-radius: 10px;
+	}
 
-  .progress-bar {
-    height: 100%;
-  }
+	.progress-bar {
+		height: 100%;
+	}
 
-  .progress-bar-container.rounded .progress-bar {
-    border-radius: 10px;
-  }
+	.progress-bar-container.rounded .progress-bar {
+		border-radius: 10px;
+	}
 </style>

package/dist/RadioButton.svelte

@@ -8,7 +8,7 @@ export let disabled = false;
 let circleColor = "white";
 </script>
 
-<label class="radioWrapper" class:disabled={disabled}>
+<label class="radioWrapper" class:disabled>
 	<input type="radio" bind:group {value} {disabled} aria-label={label} />
 	<span class="customRadio" style="--bg-color: var({color});">
 		{#if group === value}

package/dist/ServiceCard.svelte

@@ -0,0 +1,91 @@
+<script>export let serviceName;
+export let description;
+export let imageUrl;
+export let altText;
+export let linkUrl = void 0;
+export let borderColor = "var(--peach-pink)";
+const colorMap = {
+  "var(--peach-pink)": "var(--strawberry-pink)",
+  "var(--lemon-yellow)": "var(--pineapple-yellow)",
+  "var(--sugar-blue)": "var(--soda-blue)",
+  "var(--matcha-green)": "var(--melon-green)",
+  "var(--akebi-purple)": "var(--grape-purple)",
+  "var(--cloud-grey)": "var(--wrap-grey)"
+};
+let borderColorHover;
+$: {
+  borderColorHover = colorMap[borderColor] || borderColor;
+}
+const Tag = linkUrl ? "a" : "div";
+</script>
+
+<svelte:element
+	this={Tag}
+	href={linkUrl}
+	class="service-card"
+	target={linkUrl ? '_blank' : undefined}
+	rel={linkUrl ? 'noopener noreferrer' : undefined}
+	style="--card-border-color: {borderColor}; --card-border-color-hover: {borderColorHover};"
+>
+	<div class="image-container">
+		<img src={imageUrl} alt={altText} class="service-image" />
+	</div>
+	<div class="text-container">
+		<h3 class="service-name">{serviceName}</h3>
+		<p class="service-description">{description}</p>
+	</div>
+</svelte:element>
+
+<style>
+	.service-card {
+		display: flex;
+		align-items: center;
+		background-color: white;
+		border: 1px solid var(--card-border-color);
+		border-radius: 8px;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		padding: 16px;
+		margin: 16px;
+		max-width: 500px;
+		text-decoration: none;
+		color: inherit;
+		transition: all 0.2s ease-in-out;
+	}
+
+	.service-card:hover {
+		transform: translateY(-4px);
+		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+		border-color: var(--card-border-color-hover);
+	}
+
+	.image-container {
+		flex-shrink: 0;
+		width: 120px;
+		height: 120px;
+		margin-right: 16px;
+	}
+
+	.service-image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: 4px;
+	}
+
+	.text-container {
+		flex-grow: 1;
+	}
+
+	.service-name {
+		font-size: 1.25rem;
+		font-weight: bold;
+		color: var(--wrap-grey);
+		margin: 0 0 8px 0;
+	}
+
+	.service-description {
+		font-size: 1rem;
+		color: black;
+		margin: 0;
+	}
+</style>

package/dist/ServiceCard.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        serviceName: string;
+        description: string;
+        imageUrl: string;
+        altText: string;
+        linkUrl?: string | undefined;
+        borderColor?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ServiceCardProps = typeof __propDef.props;
+export type ServiceCardEvents = typeof __propDef.events;
+export type ServiceCardSlots = typeof __propDef.slots;
+export default class ServiceCard extends SvelteComponentTyped<ServiceCardProps, ServiceCardEvents, ServiceCardSlots> {
+}
+export {};

package/dist/Spinner.svelte

@@ -5,27 +5,27 @@ export let borderWidth = "4px";
 </script>
 
 <div
-  class="spinner"
-  style="width: {size}; height: {size}; border-width: {borderWidth}; --spinner-color: var({color});"
-  role="status"
+	class="spinner"
+	style="width: {size}; height: {size}; border-width: {borderWidth}; --spinner-color: var({color});"
+	role="status"
 ></div>
 
 <style>
-  .spinner {
-    display: inline-block;
-    border-radius: 50%;
-    border-style: solid;
-    border-color: #f3f3f3;
-    border-top-color: var(--spinner-color);
-    animation: spin 1s linear infinite;
-  }
+	.spinner {
+		display: inline-block;
+		border-radius: 50%;
+		border-style: solid;
+		border-color: #f3f3f3;
+		border-top-color: var(--spinner-color);
+		animation: spin 1s linear infinite;
+	}
 
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
 </style>

package/dist/Thumbnail.svelte

@@ -21,4 +21,4 @@ export let altText;
 		border-radius: 320px;
 		border: 5px solid var(--borderColor);
 	}
-</style>
+</style>

package/dist/Toggle.svelte

@@ -15,7 +15,7 @@ function handleChange(event) {
 }
 </script>
 
-<label class="switchWrapper" class:disabled={disabled}>
+<label class="switchWrapper" class:disabled>
 	<input type="checkbox" {checked} on:change={handleChange} {disabled} />
 	<span class="slider" style="--bg-color: var({color});" />
 </label>

package/dist/Tooltip.svelte

@@ -6,125 +6,134 @@ export let backgroundColor = CCLVividColor.WRAP_GREY;
 const tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
 </script>
 
-<div class="tooltip-trigger" data-testid="tooltip-trigger" tabindex="0" aria-describedby={!disabled ? tooltipId : undefined}>
-  <slot />
-  <span
-    {...{id: tooltipId}}
-    style:--tooltip-background-color={backgroundColor.startsWith('--') ? `var(${backgroundColor})` : backgroundColor}
-    class="tooltip-content"
-    data-testid="tooltip-content"
-    class:disabled
-    class:top={position === 'top'}
-    class:bottom={position === 'bottom'}
-    class:left={position === 'left'}
-    class:right={position === 'right'}
-    role="tooltip"
-  >
-    {text}
-  </span>
+<div
+	class="tooltip-trigger"
+	data-testid="tooltip-trigger"
+	tabindex="0"
+	aria-describedby={!disabled ? tooltipId : undefined}
+>
+	<slot />
+	<span
+		{...{ id: tooltipId }}
+		style:--tooltip-background-color={backgroundColor.startsWith('--')
+			? `var(${backgroundColor})`
+			: backgroundColor}
+		class="tooltip-content"
+		data-testid="tooltip-content"
+		class:disabled
+		class:top={position === 'top'}
+		class:bottom={position === 'bottom'}
+		class:left={position === 'left'}
+		class:right={position === 'right'}
+		role="tooltip"
+	>
+		{text}
+	</span>
 </div>
 
 <style>
-  .tooltip-trigger {
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-  }
+	.tooltip-trigger {
+		position: relative;
+		display: inline-block;
+		cursor: pointer;
+	}
 
-  .tooltip-content {
-    position: absolute;
-    z-index: 10;
-    background-color: var(--tooltip-background-color);
-    color: white;
-    padding: 0.5em 1em;
-    border-radius: 4px;
-    font-size: 0.875rem;
-    line-height: 1.4;
-    white-space: nowrap;
-    /* デフォルトは非表示 */
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.2s, visibility 0.2s;
-  }
+	.tooltip-content {
+		position: absolute;
+		z-index: 10;
+		background-color: var(--tooltip-background-color);
+		color: white;
+		padding: 0.5em 1em;
+		border-radius: 4px;
+		font-size: 0.875rem;
+		line-height: 1.4;
+		white-space: nowrap;
+		/* デフォルトは非表示 */
+		visibility: hidden;
+		opacity: 0;
+		transition:
+			opacity 0.2s,
+			visibility 0.2s;
+	}
 
-  /* disabledの場合は完全に非表示 */
-  .tooltip-content.disabled {
-    display: none;
-  }
+	/* disabledの場合は完全に非表示 */
+	.tooltip-content.disabled {
+		display: none;
+	}
 
-  /* ホバーまたはフォーカスで表示 */
-  .tooltip-trigger:hover .tooltip-content,
-  .tooltip-trigger:focus .tooltip-content {
-    visibility: visible;
-    opacity: 1;
-  }
+	/* ホバーまたはフォーカスで表示 */
+	.tooltip-trigger:hover .tooltip-content,
+	.tooltip-trigger:focus .tooltip-content {
+		visibility: visible;
+		opacity: 1;
+	}
 
-  /* 吹き出しの矢印 */
-  .tooltip-content::after {
-    content: '';
-    position: absolute;
-    border-style: solid;
-  }
+	/* 吹き出しの矢印 */
+	.tooltip-content::after {
+		content: '';
+		position: absolute;
+		border-style: solid;
+	}
 
-  /* --- ポジションごとのスタイル --- */
+	/* --- ポジションごとのスタイル --- */
 
-  /* 上に表示 */
-  .tooltip-content.top {
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    margin-bottom: 8px;
-  }
-  .tooltip-content.top::after {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 5px;
-    border-color: var(--tooltip-background-color) transparent transparent transparent;
-  }
+	/* 上に表示 */
+	.tooltip-content.top {
+		bottom: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		margin-bottom: 8px;
+	}
+	.tooltip-content.top::after {
+		top: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		border-width: 5px;
+		border-color: var(--tooltip-background-color) transparent transparent transparent;
+	}
 
-  /* 下に表示 */
-  .tooltip-content.bottom {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    margin-top: 8px;
-  }
-  .tooltip-content.bottom::after {
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 5px;
-    border-color: transparent transparent var(--tooltip-background-color) transparent;
-  }
+	/* 下に表示 */
+	.tooltip-content.bottom {
+		top: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		margin-top: 8px;
+	}
+	.tooltip-content.bottom::after {
+		bottom: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		border-width: 5px;
+		border-color: transparent transparent var(--tooltip-background-color) transparent;
+	}
 
-  /* 左に表示 */
-  .tooltip-content.left {
-    right: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    margin-right: 8px;
-  }
-  .tooltip-content.left::after {
-    left: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    border-width: 5px;
-    border-color: transparent transparent transparent var(--tooltip-background-color);
-  }
+	/* 左に表示 */
+	.tooltip-content.left {
+		right: 100%;
+		top: 50%;
+		transform: translateY(-50%);
+		margin-right: 8px;
+	}
+	.tooltip-content.left::after {
+		left: 100%;
+		top: 50%;
+		transform: translateY(-50%);
+		border-width: 5px;
+		border-color: transparent transparent transparent var(--tooltip-background-color);
+	}
 
-  /* 右に表示 */
-  .tooltip-content.right {
-    left: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    margin-left: 8px;
-  }
-  .tooltip-content.right::after {
-    right: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    border-width: 5px;
-    border-color: transparent var(--tooltip-background-color) transparent transparent;
-  }
+	/* 右に表示 */
+	.tooltip-content.right {
+		left: 100%;
+		top: 50%;
+		transform: translateY(-50%);
+		margin-left: 8px;
+	}
+	.tooltip-content.right::after {
+		right: 100%;
+		top: 50%;
+		transform: translateY(-50%);
+		border-width: 5px;
+		border-color: transparent var(--tooltip-background-color) transparent transparent;
+	}
 </style>

package/dist/index.d.ts

@@ -20,3 +20,5 @@ export { default as Alert } from './Alert.svelte';
 export { default as Select } from './Select.svelte';
 export { default as ToolTip } from './Tooltip.svelte';
 export { default as Input } from './Input.svelte';
+export { default as ChangeHistory } from './ChangeHistory.svelte';
+export { default as ServiceCard } from './ServiceCard.svelte';

package/dist/index.js

@@ -21,3 +21,5 @@ export { default as Alert } from './Alert.svelte';
 export { default as Select } from './Select.svelte';
 export { default as ToolTip } from './Tooltip.svelte';
 export { default as Input } from './Input.svelte';
+export { default as ChangeHistory } from './ChangeHistory.svelte';
+export { default as ServiceCard } from './ServiceCard.svelte';

package/dist/scripts/date.js

@@ -1,5 +1,4 @@
-import { DateTime } from 'luxon';
 var getYear = function () {
-    return DateTime.now().year;
+    return new Date().getFullYear();
 };
 export { getYear };

package/package.json

@@ -1,85 +1,85 @@
 {
-  "name": "cclkit4svelte",
-  "version": "2.0.2",
-  "author": "reiji1020 <sk@reiji1020.info>",
-  "license": "MIT",
-  "type": "module",
-  "main": "./dist/index.js",
-  "files": [
-    "dist"
-  ],
-  "repository": "https://github.com/reiji1020/ccl-component-kit4svelte.git",
-  "bugs": {
-    "url": "https://github.com/reiji1020/ccl-component-kit4svelte/issues"
-  },
-  "homepage": "https://github.com/reiji1020/ccl-component-kit4svelte#readme",
-  "description": "Component kit for CANDY CHUPS Lab.",
-  "scripts": {
-    "preinstall": "npx only-allow pnpm",
-    "dev": "vite dev",
-    "build": "vite build",
-    "preview": "vite preview",
-    "package": "svelte-package",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
-    "format": "prettier --write .",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build -o ./public/storybook",
-    "chromatic": "chromatic",
-    "test-sb": "test-storybook --coverage"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    }
-  },
-  "dependencies": {
-    "luxon": "^3.5.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@semantic-release/changelog": "^6.0.3",
-    "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-coverage": "^1.0.4",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-interactions": "^8.5.8",
-    "@storybook/addon-links": "^8.5.8",
-    "@storybook/addon-mdx-gfm": "^8.5.8",
-    "@storybook/addon-viewport": "^8.5.8",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/svelte": "^8.5.8",
-    "@storybook/sveltekit": "^8.5.8",
-    "@storybook/test": "^8.5.8",
-    "@storybook/test-runner": "^0.17.0",
-    "@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/package": "^2.3.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/luxon": "^3.4.2",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "chromatic": "^11.10.4",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-svelte": "^2.44.0",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "semantic-release": "^23.1.1",
-    "storybook": "^8.5.8",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.8.6",
-    "svelte2tsx": "^0.6.27",
-    "tslib": "^2.7.0",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.0"
-  },
-  "volta": {
-    "node": "20.11.1",
-    "npm": "10.5.0"
-  }
+	"name": "cclkit4svelte",
+	"version": "2.0.4",
+	"author": "reiji1020 <sk@reiji1020.info>",
+	"license": "MIT",
+	"type": "module",
+	"main": "./dist/index.js",
+	"files": [
+		"dist"
+	],
+	"repository": "https://github.com/reiji1020/ccl-component-kit4svelte.git",
+	"bugs": {
+		"url": "https://github.com/reiji1020/ccl-component-kit4svelte/issues"
+	},
+	"homepage": "https://github.com/reiji1020/ccl-component-kit4svelte#readme",
+	"description": "Component kit for CANDY CHUPS Lab.",
+	"scripts": {
+		"preinstall": "npx only-allow pnpm",
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"package": "svelte-package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build -o ./public/storybook",
+		"chromatic": "chromatic",
+		"test-sb": "test-storybook --coverage"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"dependencies": {
+		"luxon": "^3.5.0"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^1.9.0",
+		"@semantic-release/changelog": "^6.0.3",
+		"@semantic-release/git": "^10.0.1",
+		"@storybook/addon-coverage": "^1.0.4",
+		"@storybook/addon-essentials": "^8.5.8",
+		"@storybook/addon-interactions": "^8.5.8",
+		"@storybook/addon-links": "^8.5.8",
+		"@storybook/addon-mdx-gfm": "^8.5.8",
+		"@storybook/addon-viewport": "^8.5.8",
+		"@storybook/blocks": "^8.5.8",
+		"@storybook/svelte": "^8.5.8",
+		"@storybook/sveltekit": "^8.5.8",
+		"@storybook/test": "^8.5.8",
+		"@storybook/test-runner": "^0.17.0",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.3.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/luxon": "^3.4.2",
+		"@typescript-eslint/eslint-plugin": "^6.21.0",
+		"@typescript-eslint/parser": "^6.21.0",
+		"chromatic": "^11.10.4",
+		"eslint": "^8.57.1",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-storybook": "^0.8.0",
+		"eslint-plugin-svelte": "^2.44.0",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.7",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"semantic-release": "^23.1.1",
+		"storybook": "^8.5.8",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.8.6",
+		"svelte2tsx": "^0.6.27",
+		"tslib": "^2.7.0",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.0"
+	},
+	"volta": {
+		"node": "20.11.1",
+		"npm": "10.5.0"
+	}
 }