cclkit4svelte 2.0.4 → 2.0.6

package/dist/DatePicker.svelte

@@ -1,6 +1,5 @@
 <script>import { createEventDispatcher } from "svelte";
 import { DateTime } from "luxon";
-import "./const/variables.css";
 const dispatch = createEventDispatcher();
 export let selectedDate = null;
 export let placeholder = "\u65E5\u4ED8\u3092\u9078\u629E";
@@ -64,19 +63,19 @@ $: daysInMonth = getDaysInMonth(currentMonth);
   - `on:click_outside` で外側クリック時の動作を定義
 -->
 <div
-		class="datePickerWrapper"
-		style="--selected-color: var({borderColor});"
-		use:clickOutside
-		on:click_outside={closeCalendar}
+	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});"
+		type="text"
+		{id}
+		value={formattedDate}
+		{placeholder}
+		on:focus={openCalendar}
+		readonly
+		style="border-color: var({borderColor});"
 	/>
 
 	{#if showCalendar}
@@ -101,13 +100,13 @@ $: daysInMonth = getDaysInMonth(currentMonth);
 			<div class="daysGrid">
 				{#each daysInMonth as day}
 					<button
-							class:currentMonthDay={day !== null}
-							class:selected={selectedDate &&
+						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}
+						on:click={() => day && selectDay(day)}
+						disabled={day === null}
 					>
 						{day !== null ? day : ''}
 					</button>
@@ -202,4 +201,4 @@ $: daysInMonth = getDaysInMonth(currentMonth);
 		color: #ccc;
 		cursor: default;
 	}
-</style>
+</style>

package/dist/DatePicker.svelte.d.ts

@@ -1,5 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -30,10 +29,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type DatePickerProps = typeof __propDef.props;
 export type DatePickerEvents = typeof __propDef.events;
 export type DatePickerSlots = typeof __propDef.slots;
-export default class DatePicker extends SvelteComponentTyped<DatePickerProps, DatePickerEvents, DatePickerSlots> {
+export default class DatePicker extends SvelteComponent<DatePickerProps, DatePickerEvents, DatePickerSlots> {
 }
 export {};

package/dist/Footer.svelte

@@ -1,6 +1,5 @@
-<script>import "./const/variables.css";
-import { getYear } from "./scripts/date";
-export let bgColor;
+<script>import { getYear } from "./scripts/date";
+export let bgColor = "--strawberry-pink";
 const year = getYear();
 </script>
 

package/dist/Footer.svelte.d.ts

@@ -1,22 +1,22 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
+import type { ColorVar } from './const/config';
 declare const __propDef: {
     props: {
         /**
-             * フッター背景色
-             * CCLVividColorの中から指定する
+             * フッター背景色（CCLVividColor/CCLPastelColor の CSS 変数名）
              * @default --strawberry-pink
-             * @type string
-             */ bgColor: string;
+             */ bgColor?: ColorVar;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type FooterProps = typeof __propDef.props;
 export type FooterEvents = typeof __propDef.events;
 export type FooterSlots = typeof __propDef.slots;
-export default class Footer extends SvelteComponentTyped<FooterProps, FooterEvents, FooterSlots> {
+export default class Footer extends SvelteComponent<FooterProps, FooterEvents, FooterSlots> {
 }
 export {};

package/dist/FormGroup.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -28,10 +28,12 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type FormGroupProps = typeof __propDef.props;
 export type FormGroupEvents = typeof __propDef.events;
 export type FormGroupSlots = typeof __propDef.slots;
-export default class FormGroup extends SvelteComponentTyped<FormGroupProps, FormGroupEvents, FormGroupSlots> {
+export default class FormGroup extends SvelteComponent<FormGroupProps, FormGroupEvents, FormGroupSlots> {
 }
 export {};

package/dist/Header.svelte

@@ -1,6 +1,5 @@
-<script>import "./const/variables.css";
-export let bgColor;
-export let height;
+<script>export let bgColor = "--strawberry-pink";
+export let height = "--hd-normal";
 </script>
 
 <!--汎用ヘッダー-->

package/dist/Header.svelte.d.ts

@@ -1,28 +1,26 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
+import type { ColorVar } from './const/config';
 declare const __propDef: {
     props: {
         /**
-             * ヘッダー背景色
-             * CCLVividColorの中から指定する
+             * ヘッダー背景色（CCLVividColor の CSS 変数名）
              * @default --strawberry-pink
-             * @type string
-             */ bgColor: string;
+             */ bgColor?: ColorVar;
         /**
-             * ヘッダー高さ
-             * HeaderHeightの中から指定する
-             * @default --hd-nomal
-             * @type string
-             */ height: string;
+             * ヘッダー高さ（HeaderHeight の CSS 変数名）
+             * @default --hd-normal
+             */ height?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type HeaderProps = typeof __propDef.props;
 export type HeaderEvents = typeof __propDef.events;
 export type HeaderSlots = typeof __propDef.slots;
-export default class Header extends SvelteComponentTyped<HeaderProps, HeaderEvents, HeaderSlots> {
+export default class Header extends SvelteComponent<HeaderProps, HeaderEvents, HeaderSlots> {
 }
 export {};

package/dist/Input.svelte

@@ -1,5 +1,4 @@
-<script>import "./const/variables.css";
-import { CCLVividColor } from "./const/config";
+<script>import { CCLVividColor } from "./const/config";
 export let type = "text";
 export let label = "";
 export let value = "";

package/dist/Input.svelte.d.ts

@@ -1,5 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -52,10 +51,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;
 export type InputSlots = typeof __propDef.slots;
-export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
+export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
 }
 export {};

package/dist/ProgressBar.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import { ProgressBarHeight } from './const/config';
 declare const __propDef: {
     props: {
@@ -15,10 +15,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ProgressBarProps = typeof __propDef.props;
 export type ProgressBarEvents = typeof __propDef.events;
 export type ProgressBarSlots = typeof __propDef.slots;
-export default class ProgressBar extends SvelteComponentTyped<ProgressBarProps, ProgressBarEvents, ProgressBarSlots> {
+export default class ProgressBar extends SvelteComponent<ProgressBarProps, ProgressBarEvents, ProgressBarSlots> {
 }
 export {};

package/dist/RadioButton.svelte

@@ -1,5 +1,4 @@
-<script>import "./const/variables.css";
-import { CCLVividColor } from "./const/config";
+<script>import { CCLVividColor } from "./const/config";
 export let value;
 export let group;
 export let label = "";

package/dist/RadioButton.svelte.d.ts

@@ -1,5 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -30,10 +29,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type RadioButtonProps = typeof __propDef.props;
 export type RadioButtonEvents = typeof __propDef.events;
 export type RadioButtonSlots = typeof __propDef.slots;
-export default class RadioButton extends SvelteComponentTyped<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
+export default class RadioButton extends SvelteComponent<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
 }
 export {};

package/dist/Select.svelte

@@ -1,5 +1,4 @@
-<script>import "./const/variables.css";
-import { CCLVividColor } from "./const/config";
+<script>import { CCLVividColor } from "./const/config";
 export let label = "";
 export let options = [];
 export let value = "";

package/dist/Select.svelte.d.ts

@@ -1,5 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -39,10 +38,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;
 export type SelectSlots = typeof __propDef.slots;
-export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
 }
 export {};

package/dist/ServiceCard.svelte

@@ -3,19 +3,7 @@ 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;
-}
+export let borderColor = "--strawberry-pink";
 const Tag = linkUrl ? "a" : "div";
 </script>
 
@@ -25,7 +13,7 @@ const Tag = linkUrl ? "a" : "div";
 	class="service-card"
 	target={linkUrl ? '_blank' : undefined}
 	rel={linkUrl ? 'noopener noreferrer' : undefined}
-	style="--card-border-color: {borderColor}; --card-border-color-hover: {borderColorHover};"
+	style="--card-border-color: var({borderColor});"
 >
 	<div class="image-container">
 		<img src={imageUrl} alt={altText} class="service-image" />
@@ -55,7 +43,6 @@ const Tag = linkUrl ? "a" : "div";
 	.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 {

package/dist/ServiceCard.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         serviceName: string;
@@ -6,16 +6,22 @@ declare const __propDef: {
         imageUrl: string;
         altText: string;
         linkUrl?: string | undefined;
-        borderColor?: string;
+        /**
+             * 枠線の色
+             * @default --strawberry-pink
+             * @type string
+             */ borderColor?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 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 default class ServiceCard extends SvelteComponent<ServiceCardProps, ServiceCardEvents, ServiceCardSlots> {
 }
 export {};

package/dist/Spinner.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         size?: string;
@@ -9,10 +9,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type SpinnerProps = typeof __propDef.props;
 export type SpinnerEvents = typeof __propDef.events;
 export type SpinnerSlots = typeof __propDef.slots;
-export default class Spinner extends SvelteComponentTyped<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+export default class Spinner extends SvelteComponent<SpinnerProps, SpinnerEvents, SpinnerSlots> {
 }
 export {};

package/dist/TabPanel.svelte

@@ -0,0 +1,28 @@
+<script>import { getContext, onMount } from "svelte";
+export let label;
+export let color = "--strawberry-pink";
+export let disabled = false;
+import { TABS_CONTEXT_KEY } from "./scripts/tabsContext";
+const { addTab, activeTabLabel } = getContext(TABS_CONTEXT_KEY);
+onMount(() => {
+  addTab({ label, color, disabled });
+});
+$: isActive = $activeTabLabel === label;
+</script>
+
+{#if isActive}
+	<div
+		role="tabpanel"
+		id={`tab-panel-${label}`}
+		aria-labelledby={`tab-button-${label}`}
+		class="tab-panel-content"
+	>
+		<slot />
+	</div>
+{/if}
+
+<style>
+	.tab-panel-content {
+		/* Add any panel-specific styling here if needed */
+	}
+</style>

package/dist/TabPanel.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * タブのボタンに表示されるテキスト
+             * @type string
+             */ label: string;
+        /**
+             * このタブがアクティブな時のインジケーターの色
+             * @default --strawberry-pink
+             * @type string
+             */ color?: string;
+        /**
+             * このタブを無効化するかどうか
+             * @default false
+             * @type boolean
+             */ disabled?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TabPanelProps = typeof __propDef.props;
+export type TabPanelEvents = typeof __propDef.events;
+export type TabPanelSlots = typeof __propDef.slots;
+export default class TabPanel extends SvelteComponent<TabPanelProps, TabPanelEvents, TabPanelSlots> {
+}
+export {};

package/dist/Table.svelte

@@ -1,5 +1,4 @@
 <script>import { CCLPastelColor, CCLVividColor } from "./const/config";
-import "./const/variables.css";
 export let tableColor;
 let bodyColor;
 export let dataHeader;

package/dist/Table.svelte.d.ts

@@ -1,5 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -23,10 +22,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TableProps = typeof __propDef.props;
 export type TableEvents = typeof __propDef.events;
 export type TableSlots = typeof __propDef.slots;
-export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
 }
 export {};

package/dist/Tabs.svelte

@@ -0,0 +1,85 @@
+<script>import { setContext } from "svelte";
+import { writable } from "svelte/store";
+import { TABS_CONTEXT_KEY } from "./scripts/tabsContext";
+const tabData = writable([]);
+const activeTabLabel = writable("");
+setContext(TABS_CONTEXT_KEY, {
+  addTab: (tab) => {
+    tabData.update((currentTabs) => {
+      const newTabs = [...currentTabs, tab];
+      if (newTabs.length === 1) {
+        activeTabLabel.set(tab.label);
+      }
+      return newTabs;
+    });
+  },
+  activeTabLabel
+});
+let activeColor = "--strawberry-pink";
+$: {
+  const activeTab = $tabData.find((t) => t.label === $activeTabLabel);
+  activeColor = activeTab ? activeTab.color : "--strawberry-pink";
+}
+</script>
+
+<div class="tabs-container">
+	<div role="tablist" class="tab-list">
+		{#each $tabData as tab}
+			<button
+				role="tab"
+				class="tab-button"
+				class:active={tab.label === $activeTabLabel}
+				aria-selected={tab.label === $activeTabLabel}
+				aria-controls={`tab-panel-${tab.label}`}
+				id={`tab-button-${tab.label}`}
+				on:click={() => activeTabLabel.set(tab.label)}
+				style="--active-color: var({tab.color});"
+				disabled={tab.disabled}
+			>
+				{tab.label}
+			</button>
+		{/each}
+	</div>
+
+	<div class="tab-content">
+		<slot />
+	</div>
+</div>
+
+<style>
+	.tab-list {
+		display: flex;
+		border-bottom: 2px solid #eee;
+	}
+
+	.tab-button {
+		padding: 12px 24px;
+		cursor: pointer;
+		border: none;
+		background: none;
+		font-size: 1rem;
+		color: var(--wrap-grey);
+		border-bottom: 3px solid transparent;
+		margin-bottom: -2px; /* Overlap the container's border */
+		transition: border-color 0.2s ease-in-out;
+	}
+
+	.tab-button.active {
+		border-bottom-color: var(--active-color);
+		font-weight: bold;
+		color: black;
+	}
+
+	.tab-button:hover:not(.active) {
+		color: black;
+	}
+
+	.tab-content {
+		padding: 24px 8px;
+	}
+
+	.tab-button:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+</style>

package/dist/Tabs.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

package/dist/Textarea.svelte

@@ -1,5 +1,4 @@
-<script>import "./const/variables.css";
-import { CCLVividColor } from "./const/config";
+<script>import { CCLVividColor } from "./const/config";
 export let label = "";
 export let value = "";
 export let placeholder = "";

package/dist/Textarea.svelte.d.ts

@@ -1,5 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -47,10 +46,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type TextareaProps = typeof __propDef.props;
 export type TextareaEvents = typeof __propDef.events;
 export type TextareaSlots = typeof __propDef.slots;
-export default class Textarea extends SvelteComponentTyped<TextareaProps, TextareaEvents, TextareaSlots> {
+export default class Textarea extends SvelteComponent<TextareaProps, TextareaEvents, TextareaSlots> {
 }
 export {};

package/dist/Thumbnail.svelte

@@ -1,5 +1,4 @@
-<script>import "./const/variables.css";
-export let imageSize;
+<script>export let imageSize;
 export let borderColor;
 export let src;
 export let altText;

package/dist/Thumbnail.svelte.d.ts

@@ -1,5 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-import './const/variables.css';
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -24,10 +23,12 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type ThumbnailProps = typeof __propDef.props;
 export type ThumbnailEvents = typeof __propDef.events;
 export type ThumbnailSlots = typeof __propDef.slots;
-export default class Thumbnail extends SvelteComponentTyped<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
+export default class Thumbnail extends SvelteComponent<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
 }
 export {};

package/dist/Toggle.svelte

@@ -1,5 +1,4 @@
-<script>import "./const/variables.css";
-import { CCLVividColor } from "./const/config";
+<script>import { CCLVividColor } from "./const/config";
 export let checked = false;
 export let color = CCLVividColor.SODA_BLUE;
 export let disabled = false;