cclkit4svelte 3.1.0 → 4.0.1

package/README.md

@@ -1,7 +1,7 @@
 # ccl-component-kit4svelte
 
 [![Release Storybook to GitHubPages](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/storybook-release.yaml/badge.svg?branch=main)](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/storybook-release.yaml)
-[![Publish Package to npmjs](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/publish-package.yaml/badge.svg?branch=main)](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/publish-package.yaml)
+[![Publish Package to npmjs](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/publish-package.yaml/badge.svg)](https://github.com/reiji1020/ccl-component-kit4svelte/actions/workflows/publish-package.yaml)
 
 ![library_card](static/library_card.png)
 
@@ -10,6 +10,11 @@ CANDY CHUPS Labのサイトで使うコンポーネントのキットです。
 
 このライブラリの開発を行うにはSvelteの導入が必要です。
 
+## Svelte互換性
+
+`cclkit4svelte` 4.x はSvelte 5専用です。Svelte 4はサポート対象外です。
+実装方針と段階的な移行ルールは[docs/SVELTE_5_MIGRATION.md](docs/SVELTE_5_MIGRATION.md)を参照してください。
+
 ## Figma
 
 [Figma](https://www.figma.com/file/RWLq3IaUeF0soEH666sXQC/Common-Component?type=design&node-id=0%3A1&mode=design&t=ESVNyUtQevAFIe3o-1)

package/dist/BookCard.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import Button from './Button.svelte';
+  import { CCLVividColor } from './const/config';
+  import type { ColorVar } from './const/config';
 
   /**
    * 書籍のタイトル
@@ -43,7 +45,10 @@
    * @default --strawberry-pink
    * @type string
    */
-  export let borderColor: string = '--strawberry-pink';
+  export let borderColor: string = CCLVividColor.STRAWBERRY_PINK;
+  let buttonColor: ColorVar;
+  // Preserve support for consumer-defined CSS custom properties at the public boundary.
+  $: buttonColor = borderColor as ColorVar;
 
   function handleLinkClick() {
     if (linkUrl) {
@@ -63,7 +68,7 @@
     </div>
     {#if linkUrl}
       <div class="BookCardLinkWrapper">
-        <Button label={linkText} bgColor={borderColor} onClick={handleLinkClick} />
+        <Button label={linkText} bgColor={buttonColor} onClick={handleLinkClick} />
       </div>
     {/if}
   </div>

package/dist/Carousel.svelte

@@ -44,12 +44,12 @@
 >
   <div class="slides">
     {#each src as item, index}
-      <img class="slide" src={item.src} alt={item.alt} />
+      <img class="slide" src={item.src} alt={item.alt} aria-hidden={index !== currentIndex} />
     {/each}
   </div>
   <div class="buttons">
-    <button on:click={prevSlide}>❮</button>
-    <button on:click={nextSlide}>❯</button>
+    <button type="button" aria-label="前のスライドへ" on:click={prevSlide}>❮</button>
+    <button type="button" aria-label="次のスライドへ" on:click={nextSlide}>❯</button>
   </div>
 </div>
 

package/dist/ChangeHistory.svelte

@@ -1,3 +1,17 @@
+<script context="module" lang="ts">
+  /**
+   * 更新履歴の表示項目
+   */
+  export interface HistoryItem {
+    date: string;
+    title: string;
+    tag?: string;
+    color?: string;
+    version?: string;
+    details?: string[];
+  }
+</script>
+
 <script lang="ts">
   import { CCLVividColor, CCLPastelColor } from './const/config';
 
@@ -10,15 +24,6 @@
    * @property {string} [version] - バージョン番号 (例: "v1.1.0")。省略可能
    * @property {string[]} [details] - 更新内容の詳細なリスト。省略可能
    */
-  export interface HistoryItem {
-    date: string;
-    title: string;
-    tag?: string;
-    color?: string;
-    version?: string;
-    details?: string[];
-  }
-
   /**
    * 表示する更新履歴の配列
    * @type {HistoryItem[]}

package/dist/ChangeHistory.svelte.d.ts

@@ -1,3 +1,14 @@
+/**
+ * 更新履歴の表示項目
+ */
+export interface HistoryItem {
+    date: string;
+    title: string;
+    tag?: string;
+    color?: string;
+    version?: string;
+    details?: 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;

package/dist/DatePicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
+  import type { Action } from 'svelte/action';
   import { DateTime } from 'luxon';
 
   const dispatch = createEventDispatcher();
@@ -89,7 +90,11 @@
    * Svelte Action to detect clicks outside an element.
    * @param {HTMLElement} node
    */
-  function clickOutside(node: HTMLElement) {
+  const clickOutside: Action<
+    HTMLElement,
+    undefined,
+    { 'on:click_outside': (event: CustomEvent<void>) => void }
+  > = (node) => {
     const handleClick = (event: MouseEvent) => {
       if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
         // 'click_outside' というカスタムイベントを発行
@@ -104,7 +109,7 @@
         document.removeEventListener('click', handleClick, true);
       }
     };
-  }
+  };
 
   $: daysInMonth = getDaysInMonth(currentMonth);
 </script>

package/dist/Dialog.svelte.d.ts

@@ -31,7 +31,7 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
        */ closeOnOutside?: boolean;
     /**
        * アクセント色（境界線やタイトルに使用）
-       */ borderColor?: any;
+       */ borderColor?: "--strawberry-pink" | "--pineapple-yellow" | "--soda-blue" | "--melon-green" | "--grape-purple" | "--wrap-grey";
 }, {
     title: {};
     default: {};

package/dist/Pagination.svelte

@@ -17,21 +17,26 @@
   const dispatch = createEventDispatcher<{ change: { page: number } }>();
 
   // normalize and clamp helpers
-  function getPageCount(): number {
-    const count = pageCount ?? (total && perPage ? Math.ceil(total / perPage) : 1);
+  function getPageCount(
+    pageCountValue: number | undefined,
+    totalValue: number | undefined,
+    perPageValue: number
+  ): number {
+    const count =
+      pageCountValue ?? (totalValue && perPageValue ? Math.ceil(totalValue / perPageValue) : 1);
     return Math.max(1, count || 1);
   }
 
-  function clampPage(p: number): number {
-    const max = getPageCount();
-    return Math.min(Math.max(1, Math.trunc(p || 1)), max);
+  function clampPage(p: number, totalPages: number): number {
+    return Math.min(Math.max(1, Math.trunc(p || 1)), totalPages);
   }
 
-  $: page = clampPage(page);
+  $: totalPages = getPageCount(pageCount, total, perPage);
+  $: page = clampPage(page, totalPages);
 
   function goTo(p: number) {
     if (disabled) return;
-    const next = clampPage(p);
+    const next = clampPage(p, totalPages);
     if (next !== page) {
       page = next;
       dispatch('change', { page });
@@ -44,37 +49,50 @@
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
   }
 
-  function usePagination(): Item[] {
-    const totalPages = getPageCount();
-
+  function usePagination(
+    currentPage: number,
+    totalPages: number,
+    currentBoundaryCount: number,
+    currentSiblingCount: number
+  ): Item[] {
     // total pages small enough to show all
-    const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3; // first + last + current
+    const totalNumbers = currentBoundaryCount * 2 + currentSiblingCount * 2 + 3; // first + last + current
     const totalBlocks = totalNumbers + 2; // with two ellipses
 
     if (totalPages <= totalBlocks) {
       return range(1, totalPages);
     }
 
-    const startPages = range(1, Math.min(boundaryCount, totalPages));
+    const startPages = range(1, Math.min(currentBoundaryCount, totalPages));
     const endPages = range(
-      Math.max(totalPages - boundaryCount + 1, boundaryCount + 1),
+      Math.max(totalPages - currentBoundaryCount + 1, currentBoundaryCount + 1),
       totalPages
     );
 
     const siblingsStart = Math.max(
-      Math.min(page - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
-      boundaryCount + 2
+      Math.min(
+        currentPage - currentSiblingCount,
+        totalPages - currentBoundaryCount - currentSiblingCount * 2 - 1
+      ),
+      currentBoundaryCount + 2
     );
     const siblingsEnd = Math.min(
-      Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
+      Math.max(
+        currentPage + currentSiblingCount,
+        currentBoundaryCount + currentSiblingCount * 2 + 2
+      ),
       endPages[0] - 2
     );
 
     const items: Item[] = [
       ...startPages,
-      siblingsStart > boundaryCount + 2 ? 'ellipsis' : (boundaryCount + 1) as unknown as Item,
+      siblingsStart > currentBoundaryCount + 2
+        ? 'ellipsis'
+        : ((currentBoundaryCount + 1) as unknown as Item),
       ...range(siblingsStart, siblingsEnd),
-      siblingsEnd < totalPages - boundaryCount - 1 ? 'ellipsis' : (totalPages - boundaryCount) as unknown as Item,
+      siblingsEnd < totalPages - currentBoundaryCount - 1
+        ? 'ellipsis'
+        : ((totalPages - currentBoundaryCount) as unknown as Item),
       ...endPages
     ];
 
@@ -92,11 +110,11 @@
     return normalized;
   }
 
-  $: items = usePagination();
+  $: items = usePagination(page, totalPages, boundaryCount, siblingCount);
 
   onMount(() => {
     // Ensure initial page is clamped and consumers can react if needed
-    const normalized = clampPage(page);
+    const normalized = clampPage(page, totalPages);
     if (normalized !== page) {
       page = normalized;
       dispatch('change', { page });
@@ -152,7 +170,7 @@
         <button
           class="ccl-pagination__control"
           on:click={() => goTo(page + 1)}
-          disabled={disabled || page === getPageCount()}
+          disabled={disabled || page === totalPages}
           aria-label="go to next page"
           type="button"
         >›</button>
@@ -162,8 +180,8 @@
       <li>
         <button
           class="ccl-pagination__control"
-          on:click={() => goTo(getPageCount())}
-          disabled={disabled || page === getPageCount()}
+          on:click={() => goTo(totalPages)}
+          disabled={disabled || page === totalPages}
           aria-label="go to last page"
           type="button"
         >»</button>

package/dist/PrismaticBookCard.svelte

@@ -7,11 +7,14 @@
     | '--grape-purple'
     | '--wrap-grey';
 
+  export type PrismaticBookCardSize = 'default' | 'large';
+
   export type PrismaticBookCardProps = {
     href?: string;
     linkLabel?: string;
     imageUrl?: string;
     imageAlt?: string;
+    size?: PrismaticBookCardSize;
     tone?: PrismaticBookCardTone;
   };
 </script>
@@ -24,6 +27,7 @@
   export let linkLabel: string = 'READ MORE';
   export let imageUrl: string | undefined = undefined;
   export let imageAlt: string = '';
+  export let size: PrismaticBookCardSize = 'default';
   export let tone: PrismaticBookCardTone = CCLVividColor.STRAWBERRY_PINK;
 
   const gradientEndColors: Record<string, ColorVar> = {
@@ -42,7 +46,7 @@
 </script>
 
 <article
-  class="prismatic-book-card"
+  class="prismatic-book-card size-{size}"
   style="--gradient-start: {gradientStart}; --gradient-end: {gradientEnd}; --accent-color: {accentColor};"
 >
   <div class="cover-slot" aria-label={imageUrl ? undefined : imageAlt || undefined}>
@@ -97,6 +101,13 @@
     letter-spacing: 0;
   }
 
+  .size-large {
+    gap: 24px;
+    width: min(100%, 370px);
+    height: 590px;
+    padding: 28px;
+  }
+
   .cover-slot {
     position: relative;
     display: flex;
@@ -109,6 +120,12 @@
     background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
   }
 
+  .size-large .cover-slot {
+    height: auto;
+    aspect-ratio: 156 / 221;
+    border-radius: 22px;
+  }
+
   .cover-image,
   .cover-fallback {
     display: block;
@@ -140,6 +157,11 @@
     overflow-wrap: anywhere;
   }
 
+  .size-large .link,
+  .size-large .link-label {
+    font-size: 14px;
+  }
+
   .link-icon {
     display: block;
     flex: 0 0 16px;
@@ -167,6 +189,10 @@
       min-height: 500px;
     }
 
+    .size-large {
+      min-height: 590px;
+    }
+
     .cover-slot {
       height: auto;
       aspect-ratio: 7 / 10;

package/dist/PrismaticBookCard.svelte.d.ts

@@ -1,9 +1,11 @@
 export type PrismaticBookCardTone = '--strawberry-pink' | '--pineapple-yellow' | '--soda-blue' | '--melon-green' | '--grape-purple' | '--wrap-grey';
+export type PrismaticBookCardSize = 'default' | 'large';
 export type PrismaticBookCardProps = {
     href?: string;
     linkLabel?: string;
     imageUrl?: string;
     imageAlt?: string;
+    size?: PrismaticBookCardSize;
     tone?: PrismaticBookCardTone;
 };
 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> {
@@ -24,6 +26,7 @@ declare const PrismaticBookCard: $$__sveltets_2_IsomorphicComponent<{
     linkLabel?: string;
     imageUrl?: string | undefined;
     imageAlt?: string;
+    size?: PrismaticBookCardSize;
     tone?: PrismaticBookCardTone;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/PrismaticSiteFooter.svelte

@@ -12,6 +12,8 @@
     href: string;
   };
 
+  export type PrismaticSiteFooterDensity = 'default' | 'compact' | 'studio';
+
   export type PrismaticSiteFooterProps = {
     brand?: string;
     brandHref?: string;
@@ -21,6 +23,9 @@
     links?: PrismaticSiteFooterLink[];
     copyright?: string;
     ariaLabel?: string;
+    density?: PrismaticSiteFooterDensity;
+    studioGradientStart?: PrismaticSiteFooterTone;
+    studioGradientLast?: PrismaticSiteFooterTone;
     tone?: PrismaticSiteFooterTone;
   };
 </script>
@@ -34,6 +39,20 @@
   ];
 
   const year = new Date().getFullYear();
+  const darkTextTones: PrismaticSiteFooterTone[] = [
+    CCLVividColor.STRAWBERRY_PINK,
+    CCLVividColor.PINEAPPLE_YELLOW,
+    CCLVividColor.SODA_BLUE,
+    CCLVividColor.MELON_GREEN
+  ];
+  const darkTextColor =
+    'color-mix(in srgb, var(--palette-grape-900) 70%, black)';
+
+  function getTextColor(tone: PrismaticSiteFooterTone | undefined): string {
+    return tone && darkTextTones.includes(tone)
+      ? darkTextColor
+      : 'var(--color-surface-glass)';
+  }
 
   export let brand: string = 'CANDY CHUPS Lab.';
   export let brandHref: string | undefined = undefined;
@@ -43,6 +62,9 @@
   export let links: PrismaticSiteFooterLink[] = defaultLinks;
   export let copyright: string = `Copyright © ${year} CANDY CHUPS Lab. All Rights Reserved.`;
   export let ariaLabel: string = 'フッターナビゲーション';
+  export let density: PrismaticSiteFooterDensity = 'default';
+  export let studioGradientStart: PrismaticSiteFooterTone | undefined = undefined;
+  export let studioGradientLast: PrismaticSiteFooterTone | undefined = undefined;
   export let tone: PrismaticSiteFooterTone = CCLVividColor.STRAWBERRY_PINK;
 
   function toCssUrl(value: string): string {
@@ -58,11 +80,21 @@
   }
 
   $: accentColor = `var(${tone})`;
+  $: studioGradientStartColor = studioGradientStart
+    ? `var(${studioGradientStart})`
+    : 'var(--palette-grape-900)';
+  $: startTextColor = getTextColor(studioGradientStart);
+  $: lastTone = studioGradientLast ?? tone;
+  $: studioGradientLastColor = `var(${lastTone})`;
+  $: lastTextColor = getTextColor(lastTone);
   $: logoImage = logoUrl ? toCssUrl(logoUrl) : 'none';
   $: logoLabel = logoAlt?.trim() || brand;
 </script>
 
-<footer class="prismatic-site-footer" style="--accent-color: {accentColor};">
+<footer
+  class="prismatic-site-footer density-{density}"
+  style="--accent-color: {accentColor}; --studio-gradient-start: {studioGradientStartColor}; --studio-gradient-last: {studioGradientLastColor}; --footer-start-text-color: {startTextColor}; --footer-last-text-color: {lastTextColor};"
+>
   <div class="footer-main">
     {#if brandHref}
       <a class="brand" href={brandHref}>
@@ -110,29 +142,45 @@
 
 <style>
   .prismatic-site-footer {
+    --footer-gap: 32px;
+    --footer-min-height: 180px;
+    --footer-padding: 40px 48px 32px;
+
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    gap: 32px;
+    gap: var(--footer-gap);
     width: min(100%, 1300px);
-    min-height: 180px;
+    min-height: var(--footer-min-height);
     box-sizing: border-box;
-    padding: 40px 48px 32px;
-    border: 1.5px solid color-mix(in srgb, var(--accent-color) 52%, transparent);
+    padding: var(--footer-padding);
+    border: 1.5px solid color-mix(in srgb, var(--accent-color) 64%, var(--palette-grape-900));
     border-radius: 34px;
     background: linear-gradient(
       112deg,
-      color-mix(in srgb, var(--accent-color) 78%, var(--color-surface-glass)) 0%,
-      color-mix(in srgb, var(--accent-color) 42%, var(--color-surface-glass)) 58%,
-      color-mix(in srgb, var(--accent-color) 18%, var(--color-surface-glass)) 100%
+      var(--studio-gradient-start) 0%,
+      color-mix(in srgb, var(--studio-gradient-start) 68%, var(--studio-gradient-last)) 54%,
+      var(--studio-gradient-last) 100%
     );
     box-shadow: 0 16px 20px color-mix(in srgb, var(--palette-grape-900) 18%, transparent);
-    color: var(--palette-grape-900);
+    color: var(--footer-start-text-color);
     font-family: Inter, sans-serif;
     line-height: normal;
     letter-spacing: 0;
   }
 
+  .density-compact {
+    --footer-gap: 20px;
+    --footer-min-height: 132px;
+    --footer-padding: 28px 36px 24px;
+  }
+
+  .density-studio {
+    --footer-gap: 40px;
+    --footer-min-height: 240px;
+    --footer-padding: 52px 56px 40px;
+  }
+
   .footer-main {
     display: flex;
     align-items: flex-start;
@@ -154,12 +202,13 @@
     display: block;
     width: min(300px, 48vw);
     height: var(--logo-height);
-    background: var(--color-surface-glass);
+    background: currentColor;
     -webkit-mask: var(--logo-image) left center / contain no-repeat;
     mask: var(--logo-image) left center / contain no-repeat;
   }
 
   nav {
+    color: var(--footer-last-text-color);
     min-width: 0;
   }
 
@@ -198,17 +247,34 @@
 
   @media (max-width: 640px) {
     .prismatic-site-footer {
-      gap: 28px;
-      min-height: 220px;
-      padding: 32px 28px 28px;
+      --footer-gap: 28px;
+      --footer-min-height: 220px;
+      --footer-padding: 32px 28px 28px;
+
       border-radius: 28px;
     }
 
+    .density-compact {
+      --footer-gap: 20px;
+      --footer-min-height: 132px;
+      --footer-padding: 28px 28px 24px;
+    }
+
+    .density-studio {
+      --footer-gap: 40px;
+      --footer-min-height: 240px;
+      --footer-padding: 52px 28px 40px;
+    }
+
     .footer-main {
       flex-direction: column;
       gap: 24px;
     }
 
+    nav {
+      color: var(--footer-start-text-color);
+    }
+
     ul {
       justify-content: flex-start;
     }

package/dist/PrismaticSiteFooter.svelte.d.ts

@@ -3,6 +3,7 @@ export type PrismaticSiteFooterLink = {
     label: string;
     href: string;
 };
+export type PrismaticSiteFooterDensity = 'default' | 'compact' | 'studio';
 export type PrismaticSiteFooterProps = {
     brand?: string;
     brandHref?: string;
@@ -12,6 +13,9 @@ export type PrismaticSiteFooterProps = {
     links?: PrismaticSiteFooterLink[];
     copyright?: string;
     ariaLabel?: string;
+    density?: PrismaticSiteFooterDensity;
+    studioGradientStart?: PrismaticSiteFooterTone;
+    studioGradientLast?: PrismaticSiteFooterTone;
     tone?: PrismaticSiteFooterTone;
 };
 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> {
@@ -36,6 +40,9 @@ declare const PrismaticSiteFooter: $$__sveltets_2_IsomorphicComponent<{
     links?: PrismaticSiteFooterLink[];
     copyright?: string;
     ariaLabel?: string;
+    density?: PrismaticSiteFooterDensity;
+    studioGradientStart?: PrismaticSiteFooterTone | undefined;
+    studioGradientLast?: PrismaticSiteFooterTone | undefined;
     tone?: PrismaticSiteFooterTone;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/PrismaticSiteHeader.svelte

@@ -13,12 +13,18 @@
     active?: boolean;
   };
 
+  export type PrismaticSiteHeaderLogoFit = 'contain' | 'cover';
+
   export type PrismaticSiteHeaderProps = {
     brand?: string;
     brandHref?: string;
     logoUrl?: string;
     logoAlt?: string;
     logoHeight?: string;
+    logoWidth?: string;
+    logoFit?: PrismaticSiteHeaderLogoFit;
+    padding?: string;
+    minHeight?: string;
     navigation?: PrismaticSiteHeaderItem[];
     ariaLabel?: string;
     tone?: PrismaticSiteHeaderTone;
@@ -41,6 +47,10 @@
   export let logoUrl: string | undefined = undefined;
   export let logoAlt: string | undefined = undefined;
   export let logoHeight: string = '40px';
+  export let logoWidth: string = 'min(260px, 40vw)';
+  export let logoFit: PrismaticSiteHeaderLogoFit = 'contain';
+  export let padding: string | undefined = undefined;
+  export let minHeight: string | undefined = undefined;
   export let navigation: PrismaticSiteHeaderItem[] = defaultNavigation;
   export let ariaLabel: string = 'メインナビゲーション';
   export let tone: PrismaticSiteHeaderTone = CCLVividColor.STRAWBERRY_PINK;
@@ -60,11 +70,18 @@
   }
 
   $: accentColor = `var(${tone})`;
+  $: headerPadding = padding ?? '24px 35px';
+  $: headerMobilePadding = padding ?? '22px 28px';
+  $: headerSmallPadding = padding ?? '20px 22px';
+  $: headerMinHeight = minHeight ?? '104px';
   $: logoImage = logoUrl ? toCssUrl(logoUrl) : 'none';
   $: logoLabel = logoAlt?.trim() || brand;
 </script>
 
-<header class="prismatic-site-header" style="--accent-color: {accentColor};">
+<header
+  class="prismatic-site-header"
+  style="--accent-color: {accentColor}; --header-padding: {headerPadding}; --header-mobile-padding: {headerMobilePadding}; --header-small-padding: {headerSmallPadding}; --header-min-height: {headerMinHeight};"
+>
   {#if brandHref}
     <svelte:element this={brandLinkElement} class="brand" href={brandHref}>
       {#if logoUrl}
@@ -73,10 +90,10 @@
           role="img"
           aria-label={logoLabel}
           data-logo-url={logoUrl}
-          style="--logo-height: {logoHeight}; --logo-image: {logoImage};"
+          style="--logo-height: {logoHeight}; --logo-width: {logoWidth}; --logo-fit: {logoFit}; --logo-image: {logoImage};"
         ></span>
       {:else}
-        {brand}
+        <slot name="logo">{brand}</slot>
       {/if}
     </svelte:element>
   {:else}
@@ -87,10 +104,10 @@
           role="img"
           aria-label={logoLabel}
           data-logo-url={logoUrl}
-          style="--logo-height: {logoHeight}; --logo-image: {logoImage};"
+          style="--logo-height: {logoHeight}; --logo-width: {logoWidth}; --logo-fit: {logoFit}; --logo-image: {logoImage};"
         ></span>
       {:else}
-        {brand}
+        <slot name="logo">{brand}</slot>
       {/if}
     </span>
   {/if}
@@ -119,9 +136,9 @@
     justify-content: space-between;
     gap: 32px;
     width: min(100%, 1300px);
-    min-height: 104px;
+    min-height: var(--header-min-height);
     box-sizing: border-box;
-    padding: 24px 35px;
+    padding: var(--header-padding);
     border: 1.5px solid color-mix(in srgb, var(--accent-color) 42%, transparent);
     border-radius: 34px;
     background: color-mix(in srgb, var(--color-surface-glass) 78%, transparent);
@@ -144,12 +161,12 @@
 
   .brand-logo {
     display: block;
-    width: min(260px, 40vw);
-    max-width: min(260px, 40vw);
+    width: var(--logo-width);
+    max-width: min(100%, 48vw);
     height: var(--logo-height);
     background: var(--accent-color);
-    -webkit-mask: var(--logo-image) left center / contain no-repeat;
-    mask: var(--logo-image) left center / contain no-repeat;
+    -webkit-mask: var(--logo-image) left center / var(--logo-fit) no-repeat;
+    mask: var(--logo-image) left center / var(--logo-fit) no-repeat;
   }
 
   nav {
@@ -209,8 +226,8 @@
       flex-direction: column;
       align-items: flex-start;
       gap: 12px;
-      min-height: 104px;
-      padding: 22px 28px;
+      min-height: var(--header-min-height);
+      padding: var(--header-mobile-padding);
     }
 
     nav {
@@ -228,7 +245,7 @@
 
   @media (max-width: 480px) {
     .prismatic-site-header {
-      padding: 20px 22px;
+      padding: var(--header-small-padding);
       border-radius: 28px;
     }
 

package/dist/PrismaticSiteHeader.svelte.d.ts

@@ -4,12 +4,17 @@ export type PrismaticSiteHeaderItem = {
     href: string;
     active?: boolean;
 };
+export type PrismaticSiteHeaderLogoFit = 'contain' | 'cover';
 export type PrismaticSiteHeaderProps = {
     brand?: string;
     brandHref?: string;
     logoUrl?: string;
     logoAlt?: string;
     logoHeight?: string;
+    logoWidth?: string;
+    logoFit?: PrismaticSiteHeaderLogoFit;
+    padding?: string;
+    minHeight?: string;
     navigation?: PrismaticSiteHeaderItem[];
     ariaLabel?: string;
     tone?: PrismaticSiteHeaderTone;
@@ -33,11 +38,17 @@ declare const PrismaticSiteHeader: $$__sveltets_2_IsomorphicComponent<{
     logoUrl?: string | undefined;
     logoAlt?: string | undefined;
     logoHeight?: string;
+    logoWidth?: string;
+    logoFit?: PrismaticSiteHeaderLogoFit;
+    padding?: string | undefined;
+    minHeight?: string | undefined;
     navigation?: PrismaticSiteHeaderItem[];
     ariaLabel?: string;
     tone?: PrismaticSiteHeaderTone;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {
+    logo: {};
+}, {}, string>;
 type PrismaticSiteHeader = InstanceType<typeof PrismaticSiteHeader>;
 export default PrismaticSiteHeader;

package/dist/PrismaticStoryCard.svelte

@@ -13,6 +13,7 @@
     label?: string;
     href?: string;
     linkLabel?: string;
+    showLink?: boolean;
     imageUrl?: string;
     imageAlt?: string;
     squareImage?: boolean;
@@ -34,6 +35,7 @@
   export let label: string | undefined = undefined;
   export let href: string | undefined = undefined;
   export let linkLabel: string = 'Read more';
+  export let showLink: boolean = true;
   export let imageUrl: string | undefined = undefined;
   export let imageAlt: string = '';
   export let squareImage: boolean = false;
@@ -101,7 +103,7 @@
 
     <h3 class="title">{title}</h3>
 
-    {#if href}
+    {#if href && showLink}
       <svelte:element
         this={linkElement}
         class="link"

package/dist/PrismaticStoryCard.svelte.d.ts

@@ -5,6 +5,7 @@ export type PrismaticStoryCardProps = {
     label?: string;
     href?: string;
     linkLabel?: string;
+    showLink?: boolean;
     imageUrl?: string;
     imageAlt?: string;
     squareImage?: boolean;
@@ -29,6 +30,7 @@ declare const PrismaticStoryCard: $$__sveltets_2_IsomorphicComponent<{
     label?: string | undefined;
     href?: string | undefined;
     linkLabel?: string;
+    showLink?: boolean;
     imageUrl?: string | undefined;
     imageAlt?: string;
     squareImage?: boolean;

package/dist/PrismaticWorkCard.svelte

@@ -9,6 +9,7 @@
 
   export type PrismaticWorkCardProps = {
     title?: string;
+    description?: string;
     href?: string;
     linkLabel?: string;
     imageUrl?: string;
@@ -22,6 +23,7 @@
   import type { ColorVar } from './const/config';
 
   export let title: string = 'CCL Component Kit';
+  export let description: string | undefined = undefined;
   export let href: string | undefined = undefined;
   export let linkLabel: string = 'VIEW PROJECT';
   export let imageUrl: string | undefined = undefined;
@@ -57,7 +59,13 @@
   </div>
 
   <div class="body">
-    <h3 class="title">{title}</h3>
+    <div class="copy">
+      <h3 class="title">{title}</h3>
+
+      {#if description}
+        <p class="description">{description}</p>
+      {/if}
+    </div>
 
     {#if href}
       <svelte:element
@@ -140,6 +148,14 @@
     min-width: 0;
   }
 
+  .copy {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-width: 100%;
+    min-width: 0;
+  }
+
   .title {
     margin: 0;
     max-width: 100%;
@@ -151,6 +167,17 @@
     word-break: normal;
   }
 
+  .description {
+    margin: 0;
+    max-width: 100%;
+    color: color-mix(in srgb, var(--palette-grape-900) 34%, var(--palette-wrap-800));
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.75;
+    overflow-wrap: anywhere;
+    word-break: normal;
+  }
+
   .link,
   .link-label {
     display: inline-flex;

package/dist/PrismaticWorkCard.svelte.d.ts

@@ -1,6 +1,7 @@
 export type PrismaticWorkCardTone = '--strawberry-pink' | '--pineapple-yellow' | '--soda-blue' | '--melon-green' | '--grape-purple' | '--wrap-grey';
 export type PrismaticWorkCardProps = {
     title?: string;
+    description?: string;
     href?: string;
     linkLabel?: string;
     imageUrl?: string;
@@ -22,6 +23,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const PrismaticWorkCard: $$__sveltets_2_IsomorphicComponent<{
     title?: string;
+    description?: string | undefined;
     href?: string | undefined;
     linkLabel?: string;
     imageUrl?: string | undefined;

package/dist/Select.svelte

@@ -1,10 +1,12 @@
-<script lang="ts">
-  import { CCLVividColor } from './const/config';
-
+<script context="module" lang="ts">
   /**
    * オプションの型定義
    */
   export type SelectOption = { value: string; label: string };
+</script>
+
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
 
   /**
    * ラベルのテキスト

package/dist/Select.svelte.d.ts

@@ -1,3 +1,10 @@
+/**
+ * オプションの型定義
+ */
+export type SelectOption = {
+    value: string;
+    label: 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;
@@ -20,10 +27,7 @@ declare const Select: $$__sveltets_2_IsomorphicComponent<{
     /**
        * 選択肢のリスト
        * @type SelectOption[]
-       */ options?: {
-        value: string;
-        label: string;
-    }[];
+       */ options?: SelectOption[];
     /**
        * 選択された値
        * @default ''

package/dist/TabPanel.svelte

@@ -22,7 +22,8 @@
   export let disabled: boolean = false;
 
   import { TABS_CONTEXT_KEY } from './scripts/tabsContext';
-  const { addTab, activeTabLabel } = getContext(TABS_CONTEXT_KEY);
+  import type { TabsContext } from './scripts/tabsContext';
+  const { addTab, activeTabLabel } = getContext<TabsContext>(TABS_CONTEXT_KEY);
 
   onMount(() => {
     addTab({ label, color, disabled });

package/dist/Tabs.svelte

@@ -3,11 +3,12 @@
   import { writable } from 'svelte/store';
 
   import { TABS_CONTEXT_KEY } from './scripts/tabsContext';
+  import type { TabData, TabsContext } from './scripts/tabsContext';
 
-  const tabData = writable([]);
+  const tabData = writable<TabData[]>([]);
   const activeTabLabel = writable('');
 
-  setContext(TABS_CONTEXT_KEY, {
+  setContext<TabsContext>(TABS_CONTEXT_KEY, {
     addTab: (tab) => {
       tabData.update((currentTabs) => {
         const newTabs = [...currentTabs, tab];

package/dist/const/colorMap.js

@@ -1,14 +1,13 @@
-var _a;
 import { CCLPastelColor, CCLVividColor } from './config';
 // Pastel -> Vivid CSS variable mapping
-export var pastelToVividMap = (_a = {},
-    _a[CCLPastelColor.PEACH_PINK] = CCLVividColor.STRAWBERRY_PINK,
-    _a[CCLPastelColor.LEMON_YELLOW] = CCLVividColor.PINEAPPLE_YELLOW,
-    _a[CCLPastelColor.SUGAR_BLUE] = CCLVividColor.SODA_BLUE,
-    _a[CCLPastelColor.MATCHA_GREEN] = CCLVividColor.MELON_GREEN,
-    _a[CCLPastelColor.AKEBI_PURPLE] = CCLVividColor.GRAPE_PURPLE,
-    _a[CCLPastelColor.CLOUD_GREY] = CCLVividColor.WRAP_GREY,
-    _a);
+export const pastelToVividMap = {
+    [CCLPastelColor.PEACH_PINK]: CCLVividColor.STRAWBERRY_PINK,
+    [CCLPastelColor.LEMON_YELLOW]: CCLVividColor.PINEAPPLE_YELLOW,
+    [CCLPastelColor.SUGAR_BLUE]: CCLVividColor.SODA_BLUE,
+    [CCLPastelColor.MATCHA_GREEN]: CCLVividColor.MELON_GREEN,
+    [CCLPastelColor.AKEBI_PURPLE]: CCLVividColor.GRAPE_PURPLE,
+    [CCLPastelColor.CLOUD_GREY]: CCLVividColor.WRAP_GREY
+};
 /** Returns the vivid counterpart for a given color var if it's pastel; otherwise undefined. */
 export function vividFor(colorVar) {
     if (!colorVar)

package/dist/const/config.js

@@ -1,15 +1,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var CCLVividColor = {
+const CCLVividColor = {
     STRAWBERRY_PINK: '--strawberry-pink',
     PINEAPPLE_YELLOW: '--pineapple-yellow',
     SODA_BLUE: '--soda-blue',
@@ -17,7 +6,7 @@ var CCLVividColor = {
     GRAPE_PURPLE: '--grape-purple',
     WRAP_GREY: '--wrap-grey'
 };
-var CCLPastelColorBase = {
+const CCLPastelColorBase = {
     PEACH_PINK: '--peach-pink',
     LEMON_YELLOW: '--lemon-yellow',
     SUGAR_BLUE: '--sugar-blue',
@@ -25,8 +14,10 @@ var CCLPastelColorBase = {
     AKEBI_PURPLE: '--akebi-purple',
     CLOUD_GREY: '--cloud-grey'
 };
-var CCLPastelColor = __assign({}, CCLPastelColorBase);
-var CCLPaletteColor = {
+const CCLPastelColor = {
+    ...CCLPastelColorBase
+};
+const CCLPaletteColor = {
     STRAWBERRY_50: '--palette-strawberry-50',
     STRAWBERRY_100: '--palette-strawberry-100',
     STRAWBERRY_200: '--palette-strawberry-200',
@@ -148,7 +139,7 @@ var CCLPaletteColor = {
     CLOUD_800: '--palette-cloud-800',
     CLOUD_900: '--palette-cloud-900'
 };
-var CCLSemanticColor = {
+const CCLSemanticColor = {
     SURFACE_GLASS: '--color-surface-glass',
     ACTION_PRIMARY_DEFAULT: '--color-action-primary-default',
     ACTION_PRIMARY_HOVER: '--color-action-primary-hover',
@@ -171,7 +162,7 @@ export var ProgressBarHeight;
     ProgressBarHeight["DEFAULT"] = "10px";
     ProgressBarHeight["WIDE"] = "20px";
 })(ProgressBarHeight || (ProgressBarHeight = {}));
-var HeaderHeight = {
+const HeaderHeight = {
     WIDE: '--hd-wide',
     NORMAL: '--hd-normal',
     NALLOW: '--hd-nallow'

package/dist/scripts/accordionContext.d.ts

@@ -1 +1 @@
-export declare const ACCORDION_CONTEXT_KEY: any;
+export declare const ACCORDION_CONTEXT_KEY: unique symbol;

package/dist/scripts/accordionContext.js

@@ -1 +1 @@
-export var ACCORDION_CONTEXT_KEY = Symbol('accordion-context');
+export const ACCORDION_CONTEXT_KEY = Symbol('accordion-context');

package/dist/scripts/date.js

@@ -1,4 +1,4 @@
-var getYear = function () {
+const getYear = () => {
     return new Date().getFullYear();
 };
 export { getYear };

package/dist/scripts/tabsContext.d.ts

@@ -1 +1,11 @@
-export declare const TABS_CONTEXT_KEY: any;
+import type { Writable } from 'svelte/store';
+export type TabData = {
+    label: string;
+    color: string;
+    disabled: boolean;
+};
+export type TabsContext = {
+    addTab: (tab: TabData) => void;
+    activeTabLabel: Writable<string>;
+};
+export declare const TABS_CONTEXT_KEY: unique symbol;

package/dist/scripts/tabsContext.js

@@ -1 +1 @@
-export var TABS_CONTEXT_KEY = Symbol('tabs-context');
+export const TABS_CONTEXT_KEY = Symbol('tabs-context');

package/dist/toast.js

@@ -1,64 +1,50 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { writable } from 'svelte/store';
 import { CCLVividColor } from './const/config';
-export var toasts = writable([]);
+export const toasts = writable([]);
 function genId() {
     return Math.random().toString(36).slice(2) + Date.now().toString(36);
 }
 // Default auto-dismiss duration held internally
-var DEFAULT_DURATION = 3000;
+const DEFAULT_DURATION = 3000;
 export function show(opts) {
-    var _a, _b;
-    var id = genId();
-    var item = {
-        id: id,
+    const id = genId();
+    const item = {
+        id,
         title: opts.title,
         message: opts.message,
-        variant: (_a = opts.variant) !== null && _a !== void 0 ? _a : 'info',
-        duration: (_b = opts.duration) !== null && _b !== void 0 ? _b : DEFAULT_DURATION
+        variant: opts.variant ?? 'info',
+        duration: opts.duration ?? DEFAULT_DURATION
     };
-    toasts.update(function (list) { return __spreadArray([item], list, true).slice(0, 50); });
+    toasts.update((list) => [item, ...list].slice(0, 50));
     if (typeof window !== 'undefined' && item.duration > 0) {
-        window.setTimeout(function () { return dismiss(id); }, item.duration);
+        window.setTimeout(() => dismiss(id), item.duration);
     }
     return id;
 }
 export function dismiss(id) {
-    toasts.update(function (list) { return list.filter(function (t) { return t.id !== id; }); });
+    toasts.update((list) => list.filter((t) => t.id !== id));
 }
 export function clear() {
     toasts.set([]);
 }
-export var toast = {
-    show: show,
-    success: function (message, title, duration) {
-        if (title === void 0) { title = 'Success'; }
-        return show({ message: message, title: title, variant: 'success', duration: duration });
+export const toast = {
+    show,
+    success(message, title = 'Success', duration) {
+        return show({ message, title, variant: 'success', duration });
     },
-    error: function (message, title, duration) {
-        if (title === void 0) { title = 'Error'; }
-        return show({ message: message, title: title, variant: 'error', duration: duration });
+    error(message, title = 'Error', duration) {
+        return show({ message, title, variant: 'error', duration });
     },
-    warning: function (message, title, duration) {
-        if (title === void 0) { title = 'Warning'; }
-        return show({ message: message, title: title, variant: 'warning', duration: duration });
+    warning(message, title = 'Warning', duration) {
+        return show({ message, title, variant: 'warning', duration });
     },
-    info: function (message, title, duration) {
-        if (title === void 0) { title = 'Info'; }
-        return show({ message: message, title: title, variant: 'info', duration: duration });
+    info(message, title = 'Info', duration) {
+        return show({ message, title, variant: 'info', duration });
     },
-    dismiss: dismiss,
-    clear: clear
+    dismiss,
+    clear
 };
-export var variantColor = {
+export const variantColor = {
     success: CCLVividColor.MELON_GREEN,
     error: CCLVividColor.STRAWBERRY_PINK,
     warning: CCLVividColor.PINEAPPLE_YELLOW,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cclkit4svelte",
-  "version": "3.1.0",
+  "version": "4.0.1",
   "author": "reiji1020 <sk@reiji1020.info>",
   "license": "MIT",
   "type": "module",
@@ -21,6 +21,7 @@
   },
   "scripts": {
     "preinstall": "node -e \"if (!/pnpm/.test(process.env.npm_execpath || '')) { console.error('Use pnpm to install dependencies.'); process.exit(1); }\"",
+    "prepare": "svelte-kit sync",
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
@@ -85,7 +86,7 @@
     "vite": "^5.4.20"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.0.0"
   },
   "volta": {
     "node": "20.11.1",