cclkit4svelte 2.0.6 → 3.0.0

package/dist/Textarea.svelte.d.ts

@@ -1,57 +1,59 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * ラベルのテキスト
-             * @default ''
-             * @type string
-             */ label?: string;
-        /**
-             * 入力値
-             * @default ''
-             * @type string
-             */ value?: string;
-        /**
-             * プレースホルダーのテキスト
-             * @default ''
-             * @type string
-             */ placeholder?: string;
-        /**
-             * 枠線の色
-             * @default --strawberry-pink
-             * @type string
-             */ borderColor?: string;
-        /**
-             * 非活性状態にするか
-             * @default false
-             * @type boolean
-             */ disabled?: boolean;
-        /**
-             * コンポーネントのID
-             * @default 'ccl-textarea'
-             * @type string
-             */ id?: string;
-        /**
-             * 行数
-             * @default 5
-             * @type number
-             */ rows?: number;
-        /**
-             * 列数
-             * @default 20
-             * @type number
-             */ cols?: number;
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [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 SvelteComponent<TextareaProps, TextareaEvents, TextareaSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Textarea: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * ラベルのテキスト
+       * @default ''
+       * @type string
+       */ label?: string;
+    /**
+       * 入力値
+       * @default ''
+       * @type string
+       */ value?: string;
+    /**
+       * プレースホルダーのテキスト
+       * @default ''
+       * @type string
+       */ placeholder?: string;
+    /**
+       * 枠線の色
+       * @default --strawberry-pink
+       * @type string
+       */ borderColor?: string;
+    /**
+       * 非活性状態にするか
+       * @default false
+       * @type boolean
+       */ disabled?: boolean;
+    /**
+       * コンポーネントのID
+       * @default 'ccl-textarea'
+       * @type string
+       */ id?: string;
+    /**
+       * 行数
+       * @default 5
+       * @type number
+       */ rows?: number;
+    /**
+       * 列数
+       * @default 20
+       * @type number
+       */ cols?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Textarea = InstanceType<typeof Textarea>;
+export default Textarea;

package/dist/Thumbnail.svelte

@@ -1,23 +1,41 @@
-<script>export let imageSize;
-export let borderColor;
-export let src;
-export let altText;
+<script lang="ts">
+  /**
+   * サムネイル画像の大きさ
+   * @type string
+   */
+  export let imageSize: string;
+  /**
+   * 枠線の色
+   * @default --strawberry-pink
+   * @type string
+   */
+  export let borderColor: string;
+  /**
+   * 画像ソース
+   * @type string
+   */
+  export let src: string;
+  /**
+   * alt属性に指定する値
+   * @type string
+   */
+  export let altText: string;
 </script>
 
 <div class="ThumbnailWrapper" style="--imageSize: {imageSize}; --borderColor: var({borderColor})">
-	<img {src} alt={altText} class="Thumbnail" />
+  <img {src} alt={altText} class="Thumbnail" />
 </div>
 
 <style>
-	.ThumbnailWrapper {
-		height: var(--imageSize);
-		width: var(--imageSize);
-	}
+  .ThumbnailWrapper {
+    height: var(--imageSize);
+    width: var(--imageSize);
+  }
 
-	.Thumbnail {
-		height: var(--imageSize);
-		width: var(--imageSize);
-		border-radius: 320px;
-		border: 5px solid var(--borderColor);
-	}
+  .Thumbnail {
+    height: var(--imageSize);
+    width: var(--imageSize);
+    border-radius: 320px;
+    border: 5px solid var(--borderColor);
+  }
 </style>

package/dist/Thumbnail.svelte.d.ts

@@ -1,34 +1,36 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * サムネイル画像の大きさ
-             * @type string
-             */ imageSize: string;
-        /**
-             * 枠線の色
-             * @default --strawberry-pink
-             * @type string
-             */ borderColor: string;
-        /**
-             * 画像ソース
-             * @type string
-             */ src: string;
-        /**
-             * alt属性に指定する値
-             * @type string
-             */ altText: 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [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 SvelteComponent<ThumbnailProps, ThumbnailEvents, ThumbnailSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Thumbnail: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * サムネイル画像の大きさ
+       * @type string
+       */ imageSize: string;
+    /**
+       * 枠線の色
+       * @default --strawberry-pink
+       * @type string
+       */ borderColor: string;
+    /**
+       * 画像ソース
+       * @type string
+       */ src: string;
+    /**
+       * alt属性に指定する値
+       * @type string
+       */ altText: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Thumbnail = InstanceType<typeof Thumbnail>;
+export default Thumbnail;

package/dist/Toaster.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import {
+    toasts,
+    dismiss,
+    variantColor,
+    show as showToast,
+    type ToastItem,
+    type ToastVariant
+  } from './toast';
+  import { vividFor } from './const/colorMap';
+  import { fly, fade } from 'svelte/transition';
+
+  export let position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';
+  export let maxVisible = 5;
+  // 閉じるボタンの表示可否
+  export let dismissible: boolean = true;
+  // message は必須（即時表示の本文）: デフォルトを与えない
+  export let message: string;
+  // variant は任意（既定: 'info'）
+  export let variant: ToastVariant = 'info';
+  // duration は任意（既定: undefined）
+  export let duration: number;
+
+  $: list = $toasts.slice(0, maxVisible);
+
+  function colorVars(item: ToastItem) {
+    const bgVar = variantColor[item.variant];
+    const fgVar = vividFor(bgVar) ?? undefined;
+    return `--toast-bg: var(${bgVar}); ${fgVar ? `--toast-fg: var(${fgVar});` : ''}`;
+  }
+
+  const defaultTitles: Record<ToastVariant, string> = {
+    success: 'Success',
+    error: 'Error',
+    warning: 'Warning',
+    info: 'Info'
+  };
+
+  function titleFor(item: ToastItem): string | undefined {
+    // If an explicit title is provided (including empty string), respect it.
+    // Otherwise, use the variant-based default.
+    return item.title ?? defaultTitles[item.variant];
+  }
+
+  // 内部デフォルトを利用するため、特別な設定は不要
+
+  let lastSig = '';
+  // Direct props pathway (message/variant/duration)
+  $: if (message) {
+    const sig = `${message}|${variant ?? 'info'}|${duration ?? ''}`;
+    if (sig !== lastSig) {
+      showToast({ message, variant, duration });
+      lastSig = sig;
+    }
+  }
+</script>
+
+<div class="toaster" data-pos={position} aria-live="polite" aria-atomic="false">
+  {#each list as t (t.id)}
+    <div
+      class="toast"
+      data-variant={t.variant}
+      role="status"
+      style={colorVars(t)}
+      in:fly={{ x: position.endsWith('right') ? 24 : -24, duration: 150 }}
+      out:fade={{ duration: 150 }}
+    >
+      <div class="toast-body">
+        {#if titleFor(t)}<div class="toast-title">{titleFor(t)}</div>{/if}
+        <div class="toast-message">{t.message}</div>
+      </div>
+      {#if dismissible}
+        <button
+          type="button"
+          class="toast-close"
+          aria-label="Close notification"
+          on:click={() => dismiss(t.id)}>×</button
+        >
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .toaster {
+    position: fixed;
+    z-index: 10050;
+    pointer-events: none;
+  }
+  .toaster[data-pos='top-right'] {
+    top: 12px;
+    right: 12px;
+  }
+  .toaster[data-pos='top-left'] {
+    top: 12px;
+    left: 12px;
+  }
+  .toaster[data-pos='bottom-right'] {
+    bottom: 12px;
+    right: 12px;
+  }
+  .toaster[data-pos='bottom-left'] {
+    bottom: 12px;
+    left: 12px;
+  }
+
+  .toast {
+    min-width: 260px;
+    max-width: min(360px, calc(100vw - 24px));
+    background: var(--toast-bg);
+    color: var(--toast-fg, #fff);
+    border-radius: 10px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 10px 10px 10px 12px;
+    margin: 8px 0;
+    pointer-events: auto;
+  }
+  .toast-title {
+    font-weight: 700;
+    margin-bottom: 2px;
+  }
+  .toast-message {
+    font-size: 14px;
+  }
+  .toast-close {
+    border: none;
+    background: transparent;
+    color: inherit;
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0 4px;
+    align-self: start;
+    margin-left: auto;
+  }
+  .toast-close:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+</style>

package/dist/Toaster.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type ToastVariant } from './toast';
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Toaster: $$__sveltets_2_IsomorphicComponent<{
+    position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    maxVisible?: number;
+    dismissible?: boolean;
+    message: string;
+    variant?: ToastVariant;
+    duration: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toaster = InstanceType<typeof Toaster>;
+export default Toaster;

package/dist/Toggle.svelte

@@ -1,75 +1,99 @@
-<script>import { CCLVividColor } from "./const/config";
-export let checked = false;
-export let color = CCLVividColor.SODA_BLUE;
-export let disabled = false;
-export let onChange = () => {
-};
-function handleChange(event) {
-  if (disabled) {
-    return;
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+
+  /**
+   * トグルスイッチの状態
+   * @default false
+   * @type boolean
+   */
+  export let checked: boolean = false;
+
+  /**
+   * トグルスイッチの色
+   * @default CCLVividColor.SODA_BLUE
+   * @type string
+   */
+  export let color: string = CCLVividColor.SODA_BLUE;
+
+  /**
+   * 非活性状態
+   * @default false
+   * @type boolean
+   */
+  export let disabled: boolean = false;
+
+  /**
+   * 状態が変更されたときのイベントハンドラ
+   * @type {() => void}
+   */
+  export let onChange: () => void = () => {};
+
+  function handleChange(event: Event) {
+    if (disabled) {
+      return;
+    }
+    const target = event.target as HTMLInputElement;
+    checked = target.checked;
+    onChange();
   }
-  const target = event.target;
-  checked = target.checked;
-  onChange();
-}
 </script>
 
 <label class="switchWrapper" class:disabled>
-	<input type="checkbox" {checked} on:change={handleChange} {disabled} />
-	<span class="slider" style="--bg-color: var({color});" />
+  <input type="checkbox" {checked} on:change={handleChange} {disabled} />
+  <span class="slider" style={`--bg-color: var(${color});`}></span>
 </label>
 
 <style>
-	.switchWrapper {
-		position: relative;
-		display: inline-block;
-		width: 50px;
-		height: 28px;
-		cursor: pointer;
-	}
-	.switchWrapper.disabled {
-		cursor: not-allowed;
-		opacity: 0.6;
-	}
+  .switchWrapper {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 28px;
+    cursor: pointer;
+  }
+  .switchWrapper.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
 
-	.switchWrapper input {
-		opacity: 0;
-		width: 0;
-		height: 0;
-	}
+  .switchWrapper input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
 
-	.slider {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: #ccc;
-		transition: 0.4s;
-		border-radius: 28px;
-	}
+  .slider {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+    border-radius: 28px;
+  }
 
-	.slider:before {
-		position: absolute;
-		content: '';
-		height: 20px;
-		width: 20px;
-		left: 4px;
-		bottom: 4px;
-		background-color: white;
-		transition: 0.4s;
-		border-radius: 50%;
-	}
+  .slider:before {
+    position: absolute;
+    content: '';
+    height: 20px;
+    width: 20px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: 0.4s;
+    border-radius: 50%;
+  }
 
-	input:checked + .slider {
-		background-color: var(--bg-color);
-	}
+  input:checked + .slider {
+    background-color: var(--bg-color);
+  }
 
-	input:focus + .slider {
-		box-shadow: 0 0 1px var(--bg-color);
-	}
+  input:focus + .slider {
+    box-shadow: 0 0 1px var(--bg-color);
+  }
 
-	input:checked + .slider:before {
-		transform: translateX(22px);
-	}
+  input:checked + .slider:before {
+    transform: translateX(22px);
+  }
 </style>

package/dist/Toggle.svelte.d.ts

@@ -1,36 +1,38 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * トグルスイッチの状態
-             * @default false
-             * @type boolean
-             */ checked?: boolean;
-        /**
-             * トグルスイッチの色
-             * @default CCLVividColor.SODA_BLUE
-             * @type string
-             */ color?: string;
-        /**
-             * 非活性状態
-             * @default false
-             * @type boolean
-             */ disabled?: boolean;
-        /**
-             * 状態が変更されたときのイベントハンドラ
-             * @type {() => void}
-             */ onChange?: () => void;
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ToggleProps = typeof __propDef.props;
-export type ToggleEvents = typeof __propDef.events;
-export type ToggleSlots = typeof __propDef.slots;
-export default class Toggle extends SvelteComponent<ToggleProps, ToggleEvents, ToggleSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Toggle: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * トグルスイッチの状態
+       * @default false
+       * @type boolean
+       */ checked?: boolean;
+    /**
+       * トグルスイッチの色
+       * @default CCLVividColor.SODA_BLUE
+       * @type string
+       */ color?: string;
+    /**
+       * 非活性状態
+       * @default false
+       * @type boolean
+       */ disabled?: boolean;
+    /**
+       * 状態が変更されたときのイベントハンドラ
+       * @type {() => void}
+       */ onChange?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toggle = InstanceType<typeof Toggle>;
+export default Toggle;