cclkit4svelte 2.0.6 → 2.0.7

package/dist/ServiceCard.svelte.d.ts

@@ -1,27 +1,29 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        serviceName: string;
-        description: string;
-        imageUrl: string;
-        altText: string;
-        linkUrl?: string | undefined;
-        /**
-             * 枠線の色
-             * @default --strawberry-pink
-             * @type string
-             */ borderColor?: 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 ServiceCardProps = typeof __propDef.props;
-export type ServiceCardEvents = typeof __propDef.events;
-export type ServiceCardSlots = typeof __propDef.slots;
-export default class ServiceCard extends SvelteComponent<ServiceCardProps, ServiceCardEvents, ServiceCardSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ServiceCard: $$__sveltets_2_IsomorphicComponent<{
+    serviceName: string;
+    description: string;
+    imageUrl: string;
+    altText: string;
+    linkUrl?: string | undefined;
+    /**
+       * 枠線の色
+       * @default --strawberry-pink
+       * @type string
+       */ borderColor?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ServiceCard = InstanceType<typeof ServiceCard>;
+export default ServiceCard;

package/dist/Skeleton.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  /** ローディング用の視覚プレースホルダ（非アクセシブル） */
+  export let variant: 'text' | 'rect' | 'circle' = 'text';
+  /** 幅（例: '100%', '240px'） */
+  export let width: string | undefined;
+  /** 高さ（例: '16px', '1rem'）。text時は行高として使用 */
+  export let height: string | undefined;
+  /** 角丸（rect/text） */
+  export let radius: string = '6px';
+  /** text時の行数 */
+  export let lines: number = 1;
+  // 固定カラースキーム
+  const computedBase = '#eeeeee';
+  const computedHighlight = '#ffffff';
+  $: styleInline =
+    `--skel-base: ${computedBase}; --skel-highlight: ${computedHighlight};` +
+    (width ? ` width: ${width};` : '') +
+    (height ? ` height: ${height};` : '');
+
+  const arr = Array.from({ length: Math.max(1, lines) });
+</script>
+
+{#if variant === 'text'}
+  <div class="ccl-skeleton-text" style={styleInline} aria-hidden="true" role="presentation">
+    {#each arr as _, i}
+      <span class="line" data-last={i === arr.length - 1}></span>
+    {/each}
+  </div>
+{:else if variant === 'circle'}
+  <div
+    class="ccl-skeleton ccl-skeleton-circle"
+    style={styleInline}
+    aria-hidden="true"
+    role="presentation"
+  ></div>
+{:else}
+  <div
+    class="ccl-skeleton ccl-skeleton-rect"
+    style={`border-radius: ${radius}; ${styleInline}`}
+    aria-hidden="true"
+    role="presentation"
+  ></div>
+{/if}
+
+<style>
+  .ccl-skeleton,
+  .ccl-skeleton-text .line {
+    --skel-base: #eeeeee;
+    --skel-highlight: #ffffff;
+    background: var(--skel-base);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .ccl-skeleton,
+  .ccl-skeleton-text .line {
+    background-image: linear-gradient(
+      90deg,
+      var(--skel-base) 0px,
+      var(--skel-highlight) 60px,
+      var(--skel-base) 120px
+    );
+    background-size: 200% 100%;
+    animation: skel-shimmer 1.2s ease-in-out infinite;
+  }
+
+  @keyframes skel-shimmer {
+    0% {
+      background-position: -120px 0;
+    }
+    100% {
+      background-position: 200px 0;
+    }
+  }
+
+  .ccl-skeleton-text {
+    display: grid;
+    gap: 8px;
+  }
+  .ccl-skeleton-text .line {
+    height: var(--line-height, 1em);
+    border-radius: 6px;
+  }
+  .ccl-skeleton-text .line[data-last='true'] {
+    width: 70%;
+  }
+
+  .ccl-skeleton-rect {
+    display: block;
+  }
+  .ccl-skeleton-circle {
+    display: inline-block;
+    border-radius: 9999px;
+    aspect-ratio: 1 / 1;
+  }
+</style>

package/dist/Skeleton.svelte.d.ts

@@ -0,0 +1,24 @@
+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 Skeleton: $$__sveltets_2_IsomorphicComponent<{
+    /** ローディング用の視覚プレースホルダ（非アクセシブル） */ variant?: "text" | "rect" | "circle";
+    /** 幅（例: '100%', '240px'） */ width: string | undefined;
+    /** 高さ（例: '16px', '1rem'）。text時は行高として使用 */ height: string | undefined;
+    /** 角丸（rect/text） */ radius?: string;
+    /** text時の行数 */ lines?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Skeleton = InstanceType<typeof Skeleton>;
+export default Skeleton;

package/dist/SlideMenu.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+  import Drawer from './Drawer.svelte';
+  import { CCLVividColor } from './const/config';
+  import type { ColorVar } from './const/config';
+  import { vividFor } from './const/colorMap';
+  import { createEventDispatcher, tick } from 'svelte';
+
+  import type { MenuItem } from './types/slide-menu';
+
+  /** 開閉状態（制御） */
+  export let open: boolean = false;
+  /** スライド方向 */
+  export let side: 'left' | 'right' | 'top' | 'bottom' = 'left';
+  /** パネルサイズ */
+  export let size: string = '320px';
+  /** メニュータイトル */
+  export let title: string = 'メニュー';
+  /** ナビの aria-label（見出し連携がない場合の代替） */
+  export let ariaLabel: string = 'メインメニュー';
+  /** リンク一覧 */
+  export let items: MenuItem[] = [];
+  /** 現在選択中の項目 id（強調表示） */
+  export let currentId: string | undefined;
+  /** アクセントカラー（選択中の強調） */
+  export let accentColor: ColorVar = CCLVividColor.SODA_BLUE;
+  /** 項目選択時に自動で閉じる */
+  export let closeOnSelect: boolean = true;
+
+  // Drawer の挙動
+  export let backdrop: boolean = true;
+  export let closeOnEsc: boolean = true;
+  export let closeOnBackdropClick: boolean = true;
+
+  // 色（パステル時の前景補正）
+  $: accentFg = vividFor(accentColor as string);
+  $: styleInline =
+    `--sm-accent: var(${accentColor});` + (accentFg ? ` --sm-accent-fg: var(${accentFg});` : '');
+  const dispatch = createEventDispatcher<{
+    select: { id: string; item: MenuItem; event: Event };
+    close: void;
+  }>();
+
+  let firstLink: HTMLAnchorElement | HTMLButtonElement | null = null;
+  const titleId = 'slide-menu-title';
+
+  // action: indexが0の要素を firstLink にセット
+  function firstLinkAction(node: HTMLElement, index: number) {
+    if (index === 0) firstLink = node as any;
+    return {
+      destroy() {
+        if (firstLink === node) firstLink = null;
+      }
+    };
+  }
+
+  $: (async () => {
+    if (open) {
+      await tick();
+      // 初期フォーカス: 最初のリンクへ
+      try {
+        firstLink?.focus();
+      } catch {}
+    }
+  })();
+
+  function handleSelect(item: MenuItem, event: Event) {
+    const detail = { id: item.id, item, event };
+    dispatch('select', detail);
+    if (closeOnSelect) dispatch('close');
+  }
+</script>
+
+<Drawer
+  {open}
+  {side}
+  {size}
+  {backdrop}
+  {closeOnEsc}
+  {closeOnBackdropClick}
+  ariaLabel={title}
+  on:close={() => dispatch('close')}
+  panelStyle={styleInline}
+  aria-labelledby={titleId}
+>
+  <div class="sm-header">
+    <h2 id={titleId} class="sm-title">{title}</h2>
+  </div>
+  <nav class="sm-nav" role="navigation" aria-label={ariaLabel}>
+    <ul class="sm-list" role="list">
+      {#each items as it, i}
+        <li>
+          {#if it.href}
+            <a
+              use:firstLinkAction={i}
+              class="sm-link {it.id === currentId ? 'active' : ''}"
+              href={it.href}
+              on:click|preventDefault={(e) => handleSelect(it, e)}
+              aria-current={it.id === currentId ? 'page' : undefined}>{it.label}</a
+            >
+          {:else}
+            <button
+              use:firstLinkAction={i}
+              type="button"
+              class="sm-link {it.id === currentId ? 'active' : ''}"
+              on:click={(e) => handleSelect(it, e)}
+              aria-current={it.id === currentId ? 'page' : undefined}>{it.label}</button
+            >
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  </nav>
+  <slot name="footer" />
+</Drawer>
+
+<style>
+  .sm-header {
+    padding: 16px;
+    border-bottom: 1px solid #eee;
+  }
+  .sm-title {
+    margin: 0;
+    font-size: 16px;
+  }
+  .sm-nav {
+    padding: 8px 8px 16px 8px;
+  }
+  .sm-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .sm-link {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 10px 12px;
+    border-radius: 8px;
+    color: var(--wrap-grey);
+    text-decoration: none;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+  }
+  .sm-link.active {
+    background: var(--sm-accent);
+    color: var(--sm-accent-fg, #fff);
+  }
+  .sm-link:focus-visible {
+    outline: 2px solid var(--sm-accent);
+    outline-offset: 2px;
+  }
+</style>

package/dist/SlideMenu.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { ColorVar } from './const/config';
+import type { MenuItem } from './types/slide-menu';
+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 SlideMenu: $$__sveltets_2_IsomorphicComponent<{
+    /** 開閉状態（制御） */ open?: boolean;
+    /** スライド方向 */ side?: "left" | "right" | "top" | "bottom";
+    /** パネルサイズ */ size?: string;
+    /** メニュータイトル */ title?: string;
+    /** ナビの aria-label（見出し連携がない場合の代替） */ ariaLabel?: string;
+    /** リンク一覧 */ items?: MenuItem[];
+    /** 現在選択中の項目 id（強調表示） */ currentId: string | undefined;
+    /** アクセントカラー（選択中の強調） */ accentColor?: ColorVar;
+    /** 項目選択時に自動で閉じる */ closeOnSelect?: boolean;
+    backdrop?: boolean;
+    closeOnEsc?: boolean;
+    closeOnBackdropClick?: boolean;
+}, {
+    select: CustomEvent<{
+        id: string;
+        item: MenuItem;
+        event: Event;
+    }>;
+    close: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    footer: {};
+}, {}, string>;
+type SlideMenu = InstanceType<typeof SlideMenu>;
+export default SlideMenu;

package/dist/Spinner.svelte

@@ -1,31 +1,33 @@
-<script>import { CCLVividColor } from "./const/config";
-export let size = "40px";
-export let color = CCLVividColor.STRAWBERRY_PINK;
-export let borderWidth = "4px";
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+
+  export let size: string = '40px';
+  export let color: string = CCLVividColor.STRAWBERRY_PINK;
+  export let borderWidth: string = '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/Spinner.svelte.d.ts

@@ -1,20 +1,22 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        size?: string;
-        color?: string;
-        borderWidth?: 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 SpinnerProps = typeof __propDef.props;
-export type SpinnerEvents = typeof __propDef.events;
-export type SpinnerSlots = typeof __propDef.slots;
-export default class Spinner extends SvelteComponent<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Spinner: $$__sveltets_2_IsomorphicComponent<{
+    size?: string;
+    color?: string;
+    borderWidth?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Spinner = InstanceType<typeof Spinner>;
+export default Spinner;

package/dist/TabPanel.svelte

@@ -1,28 +1,49 @@
-<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 lang="ts">
+  import { getContext, onMount } from 'svelte';
+
+  /**
+   * タブのボタンに表示されるテキスト
+   * @type string
+   */
+  export let label: string;
+
+  /**
+   * このタブがアクティブな時のインジケーターの色
+   * @default --strawberry-pink
+   * @type string
+   */
+  export let color: string = '--strawberry-pink';
+
+  /**
+   * このタブを無効化するかどうか
+   * @default false
+   * @type boolean
+   */
+  export let disabled: boolean = 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>
+  <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 */
-	}
+  .tab-panel-content {
+    /* Add any panel-specific styling here if needed */
+  }
 </style>

package/dist/TabPanel.svelte.d.ts

@@ -1,33 +1,42 @@
-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;
+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: {
-        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> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const TabPanel: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /**
+       * タブのボタンに表示されるテキスト
+       * @type string
+       */ label: string;
+    /**
+       * このタブがアクティブな時のインジケーターの色
+       * @default --strawberry-pink
+       * @type string
+       */ color?: string;
+    /**
+       * このタブを無効化するかどうか
+       * @default false
+       * @type boolean
+       */ disabled?: boolean;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type TabPanel = InstanceType<typeof TabPanel>;
+export default TabPanel;