cclkit4svelte 4.0.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)
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cclkit4svelte",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "author": "reiji1020 <sk@reiji1020.info>",
   "license": "MIT",
   "type": "module",