cclkit4svelte 2.0.6 → 3.0.0

package/dist/Dialog.svelte

@@ -0,0 +1,224 @@
+<script lang="ts">
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+  import { CCLVividColor } from './const/config';
+  type VividVar = (typeof CCLVividColor)[keyof typeof CCLVividColor];
+
+  const isBrowser = typeof window !== 'undefined';
+
+  const dispatch = createEventDispatcher<{ close: void }>();
+
+  /**
+   * ダイアログの表示状態
+   */
+  export let open: boolean = false;
+
+  /**
+   * タイトル（スロット優先）。
+   */
+  export let title: string = '';
+
+  /**
+   * ESCキーで閉じるか
+   */
+  export let closeOnEsc: boolean = true;
+
+  /**
+   * オーバーレイ（外側クリック）で閉じるか
+   */
+  export let closeOnOutside: boolean = true;
+
+  /**
+   * アクセント色（境界線やタイトルに使用）
+   */
+  export let borderColor: VividVar = CCLVividColor.STRAWBERRY_PINK;
+
+  // ヘッダー背景は borderColor と共通化
+  let panelEl: HTMLElement | null = null;
+  let previouslyFocused: Element | null = null;
+  const titleId = `ccl-dialog-title-${Math.random().toString(36).substring(2, 9)}`;
+
+  function close() {
+    dispatch('close');
+  }
+
+  function onKeydown(e: KeyboardEvent) {
+    if (!open) return;
+    if (e.key === 'Escape' && closeOnEsc) {
+      e.stopPropagation();
+      close();
+    }
+    if (e.key === 'Tab') {
+      // 簡易フォーカストラップ
+      const focusable = panelEl?.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+      );
+      if (!focusable || focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+      if (e.shiftKey) {
+        if (active === first || !panelEl?.contains(active)) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (active === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
+  }
+
+  function moveFocusIn() {
+    // 表示時にパネル内へフォーカス移動
+    previouslyFocused = document.activeElement;
+    const focusable = panelEl?.querySelector<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    (focusable ?? panelEl)?.focus();
+  }
+
+  function restoreFocus() {
+    if (previouslyFocused instanceof HTMLElement) {
+      previouslyFocused.focus({ preventScroll: true });
+    }
+  }
+
+  function lockScroll() {
+    const original = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = 'hidden';
+    return () => {
+      document.documentElement.style.overflow = original;
+    };
+  }
+
+  let unlockScroll: (() => void) | null = null;
+
+  onMount(() => {
+    const handle = (e: KeyboardEvent) => onKeydown(e);
+    window.addEventListener('keydown', handle, true);
+    return () => window.removeEventListener('keydown', handle, true);
+  });
+
+  $: if (isBrowser) {
+    if (open) {
+      // 表示されたときに実施
+      setTimeout(moveFocusIn, 0);
+      if (!unlockScroll) unlockScroll = lockScroll();
+    } else {
+      // 非表示に切り替わったとき
+      if (unlockScroll) {
+        unlockScroll();
+        unlockScroll = null;
+      }
+      restoreFocus();
+    }
+  }
+
+  onDestroy(() => {
+    if (unlockScroll) unlockScroll();
+  });
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div
+    class="ccl-dialog-backdrop"
+    role="presentation"
+    on:click={() => {
+      if (closeOnOutside) close();
+    }}
+  >
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <div
+      bind:this={panelEl}
+      class="ccl-dialog-panel"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      style="--border-color: var({borderColor});"
+      on:click|stopPropagation
+      tabindex="-1"
+    >
+      <header class="ccl-dialog-header">
+        <h2 id={titleId} class="ccl-dialog-title">
+          <slot name="title">{title}</slot>
+        </h2>
+        <button class="ccl-dialog-close" aria-label="Close dialog" on:click={close}> × </button>
+      </header>
+      <section class="ccl-dialog-body">
+        <slot />
+      </section>
+      <footer class="ccl-dialog-footer">
+        <slot name="footer" />
+      </footer>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .ccl-dialog-backdrop {
+    position: fixed;
+    inset: 0;
+    background: var(--wrap-grey);
+    display: grid;
+    place-items: center;
+    z-index: 1000;
+  }
+
+  .ccl-dialog-panel {
+    background: #fff;
+    border: 4px solid var(--border-color);
+    border-radius: 12px;
+    max-width: 640px;
+    width: calc(100% - 2rem);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+    color: var(--wrap-grey);
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    max-height: 85vh;
+    outline: none;
+  }
+
+  .ccl-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    border-bottom: 3px solid var(--border-color);
+    background: var(--border-color);
+    color: #fff;
+  }
+
+  .ccl-dialog-title {
+    margin: 0;
+    color: #fff;
+    font-size: 1.1rem;
+  }
+
+  .ccl-dialog-close {
+    background: var(--border-color);
+    border: 2px solid var(--border-color);
+    color: #fff;
+    border-radius: 8px;
+    width: 2.25rem;
+    height: 2.25rem;
+    cursor: pointer;
+    font-size: 1.5rem;
+    font-weight: 900;
+    line-height: 1;
+  }
+
+  .ccl-dialog-body {
+    padding: 1rem;
+    overflow: auto;
+  }
+
+  .ccl-dialog-footer {
+    padding: 0.75rem 1rem;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+  }
+</style>

package/dist/Dialog.svelte.d.ts

@@ -0,0 +1,50 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /**
+       * ダイアログの表示状態
+       */ open?: boolean;
+    /**
+       * タイトル（スロット優先）。
+       */ title?: string;
+    /**
+       * ESCキーで閉じるか
+       */ closeOnEsc?: boolean;
+    /**
+       * オーバーレイ（外側クリック）で閉じるか
+       */ closeOnOutside?: boolean;
+    /**
+       * アクセント色（境界線やタイトルに使用）
+       */ borderColor?: any;
+}, {
+    title: {};
+    default: {};
+    footer: {};
+}>, {
+    click: PointerEvent;
+    close: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    title: {};
+    default: {};
+    footer: {};
+}, {}, string>;
+type Dialog = InstanceType<typeof Dialog>;
+export default Dialog;

package/dist/Drawer.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  /** 開閉状態（制御用） */
+  export let open: boolean = false;
+  /** どの方向から表示するか */
+  export let side: 'left' | 'right' | 'top' | 'bottom' = 'right';
+  /** パネルサイズ（left/right は幅、top/bottom は高さ） */
+  export let size: string = '320px';
+  /** 背景のバックドロップを表示するか */
+  export let backdrop: boolean = true;
+  /** ESC キーで閉じるか */
+  export let closeOnEsc: boolean = true;
+  /** バックドロップクリックで閉じるか */
+  export let closeOnBackdropClick: boolean = true;
+  /** アクセシビリティ用ラベル（タイトルが無い場合など） */
+  export let ariaLabel: string | undefined;
+  /** 追加クラス（外部からパネルへ付与） */
+  export let panelClass: string = '';
+  /** 追加スタイル（外部からパネルへ付与） */
+  export let panelStyle: string = '';
+
+  let panelEl: HTMLDivElement | null = null;
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!open) return;
+    if (closeOnEsc && e.key === 'Escape') {
+      e.stopPropagation();
+      dispatch('close');
+    }
+  }
+
+  function onBackdropClick() {
+    if (!open) return;
+    if (closeOnBackdropClick) dispatch('close');
+  }
+
+  function lockScroll(lock: boolean) {
+    try {
+      document.body.style.overflow = lock ? 'hidden' : '';
+    } catch {}
+  }
+
+  $: lockScroll(open && backdrop);
+
+  onMount(() => {
+    window.addEventListener('keydown', handleKeydown, { capture: true });
+  });
+  onDestroy(() => {
+    window.removeEventListener('keydown', handleKeydown, { capture: true } as any);
+    lockScroll(false);
+  });
+</script>
+
+{#if backdrop}
+  <div
+    class="drawer-backdrop {open ? 'open' : ''}"
+    data-testid="drawer-backdrop"
+    aria-hidden="true"
+    on:click={onBackdropClick}
+  />
+{/if}
+
+<div
+  bind:this={panelEl}
+  {...$$restProps}
+  class={`drawer ${open ? 'open' : ''} from-${side} ${panelClass}`}
+  role="dialog"
+  aria-modal="true"
+  aria-hidden={!open}
+  aria-label={ariaLabel}
+  style={`--drawer-size: ${size}; ${panelStyle}`}
+>
+  <slot />
+</div>
+
+<style>
+  .drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: 9998;
+  }
+  .drawer-backdrop.open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .drawer {
+    position: fixed;
+    z-index: 9999;
+    background: #fff;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    transition: transform 0.22s ease;
+    overflow: hidden; /* prevent inner spill */
+    visibility: hidden; /* hide when closed to avoid visual leak */
+    pointer-events: none; /* ignore interactions when closed */
+    /* default size for each side is set via vars */
+  }
+
+  .drawer.open {
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  /* from-right */
+  .drawer.from-right {
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: var(--drawer-size);
+    transform: translateX(100%);
+  }
+  .drawer.from-right.open {
+    transform: translateX(0);
+  }
+
+  /* from-left */
+  .drawer.from-left {
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: var(--drawer-size);
+    transform: translateX(-100%);
+  }
+  .drawer.from-left.open {
+    transform: translateX(0);
+  }
+
+  /* from-top */
+  .drawer.from-top {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: var(--drawer-size);
+    transform: translateY(-100%);
+  }
+  .drawer.from-top.open {
+    transform: translateY(0);
+  }
+
+  /* from-bottom */
+  .drawer.from-bottom {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: var(--drawer-size);
+    transform: translateY(100%);
+  }
+  .drawer.from-bottom.open {
+    transform: translateY(0);
+  }
+</style>

package/dist/Drawer.svelte.d.ts

@@ -0,0 +1,40 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    open?: boolean | undefined;
+    side?: "left" | "right" | "top" | "bottom" | undefined;
+    size?: string | undefined;
+    backdrop?: boolean | undefined;
+    closeOnEsc?: boolean | undefined;
+    closeOnBackdropClick?: boolean | undefined;
+    ariaLabel: string | undefined;
+    panelClass?: string | undefined;
+    panelStyle?: string | undefined;
+}, {
+    default: {};
+}>, {
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Drawer = InstanceType<typeof Drawer>;
+export default Drawer;

package/dist/Footer.svelte

@@ -1,24 +1,40 @@
-<script>import { getYear } from "./scripts/date";
-export let bgColor = "--strawberry-pink";
-const year = getYear();
+<script lang="ts">
+  import type { ColorVar } from './const/config';
+  import { getYear } from './scripts/date';
+  import { vividFor } from './const/colorMap';
+
+  /**
+   * フッター背景色（CCLVividColor/CCLPastelColor の CSS 変数名）
+   * @default --strawberry-pink
+   */
+  export let bgColor: ColorVar = '--strawberry-pink';
+  $: footerFg = vividFor(bgColor as string);
+
+  /**
+   * アクセス当日の年を４桁で算出、フッターの中に配置する
+   */
+  const year = getYear();
 </script>
 
 <!--汎用フッター-->
-<footer class="footerWrapper" style="--bgColor: var({bgColor});">
-	<span class="copy">Copyright © 2015-{year} CANDY CHUPS Lab. All Rights Reserved.</span>
+<footer
+  class="footerWrapper"
+  style="--bgColor: var({bgColor}); {footerFg ? `--footer-fg: var(${footerFg});` : ''}"
+>
+  <span class="copy">Copyright © 2015-{year} CANDY CHUPS Lab. All Rights Reserved.</span>
 </footer>
 
 <style>
-	.footerWrapper {
-		display: flex;
-		height: 30px;
-		justify-content: center;
-		align-items: center;
-		background: var(--bgColor);
-	}
+  .footerWrapper {
+    display: flex;
+    height: 30px;
+    justify-content: center;
+    align-items: center;
+    background: var(--bgColor);
+  }
 
-	.copy {
-		color: #fff;
-		font-size: 9px;
-	}
+  .copy {
+    color: var(--footer-fg, #fff);
+    font-size: 9px;
+  }
 </style>

package/dist/Footer.svelte.d.ts

@@ -1,22 +1,24 @@
-import { SvelteComponent } from "svelte";
 import type { ColorVar } from './const/config';
-declare const __propDef: {
-    props: {
-        /**
-             * フッター背景色（CCLVividColor/CCLPastelColor の CSS 変数名）
-             * @default --strawberry-pink
-             */ bgColor?: ColorVar;
+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 FooterProps = typeof __propDef.props;
-export type FooterEvents = typeof __propDef.events;
-export type FooterSlots = typeof __propDef.slots;
-export default class Footer extends SvelteComponent<FooterProps, FooterEvents, FooterSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Footer: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * フッター背景色（CCLVividColor/CCLPastelColor の CSS 変数名）
+       * @default --strawberry-pink
+       */ bgColor?: ColorVar;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Footer = InstanceType<typeof Footer>;
+export default Footer;

package/dist/FormGroup.svelte

@@ -1,53 +1,77 @@
-<script>export let label = "";
-export let helpText = "";
-export let errorMessage = "";
-export let forId = "";
+<script lang="ts">
+  /**
+   * フォーム要素のラベルテキスト
+   * @default ''
+   * @type string
+   */
+  export let label: string = '';
+
+  /**
+   * ユーザーへの補足説明やヒント
+   * @default ''
+   * @type string
+   */
+  export let helpText: string = '';
+
+  /**
+   * バリデーションエラーが発生した場合に表示するメッセージ
+   * @default ''
+   * @type string
+   */
+  export let errorMessage: string = '';
+
+  /**
+   * ラベルと入力要素を関連付けるためのID
+   * @default ''
+   * @type string
+   */
+  export let forId: string = '';
 </script>
 
 <div class="formGroupWrapper">
-	{#if label}
-		<label for={forId} class="formLabel">{label}</label>
-	{/if}
+  {#if label}
+    <label for={forId} class="formLabel">{label}</label>
+  {/if}
 
-	<div class="formControl">
-		<slot />
-	</div>
+  <div class="formControl">
+    <slot />
+  </div>
 
-	{#if helpText && !errorMessage}
-		<p class="helpText">{helpText}</p>
-	{/if}
+  {#if helpText && !errorMessage}
+    <p class="helpText">{helpText}</p>
+  {/if}
 
-	{#if errorMessage}
-		<p class="errorMessage">{errorMessage}</p>
-	{/if}
+  {#if errorMessage}
+    <p class="errorMessage">{errorMessage}</p>
+  {/if}
 </div>
 
 <style>
-	.formGroupWrapper {
-		margin-bottom: 16px;
-	}
-
-	.formLabel {
-		display: block;
-		font-size: 14px;
-		font-weight: bold;
-		margin-bottom: 4px;
-		color: #333;
-	}
-
-	.formControl {
-		/* スロットコンテンツのスタイルを調整するために必要に応じて追加 */
-	}
-
-	.helpText {
-		font-size: 12px;
-		color: #666;
-		margin-top: 4px;
-	}
-
-	.errorMessage {
-		font-size: 12px;
-		color: #d9534f; /* Bootstrap danger color */
-		margin-top: 4px;
-	}
+  .formGroupWrapper {
+    margin-bottom: 16px;
+  }
+
+  .formLabel {
+    display: block;
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 4px;
+    color: #333;
+  }
+
+  .formControl {
+    /* スロットコンテンツのスタイルを調整するために必要に応じて追加 */
+  }
+
+  .helpText {
+    font-size: 12px;
+    color: #666;
+    margin-top: 4px;
+  }
+
+  .errorMessage {
+    font-size: 12px;
+    color: #d9534f; /* Bootstrap danger color */
+    margin-top: 4px;
+  }
 </style>