cclkit4svelte 3.0.0 → 4.0.0

package/README.md

@@ -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/PrismaticAmbientGlow.svelte

@@ -0,0 +1,115 @@
+<script context="module" lang="ts">
+  export type PrismaticAmbientGlowTone =
+    | '--peach-pink'
+    | '--sugar-blue'
+    | '--lemon-yellow'
+    | '--akebi-purple';
+
+  export type PrismaticAmbientGlowSize = 'small' | 'medium' | 'large';
+  export type PrismaticAmbientGlowOpacity = 'subtle' | 'standard' | 'strong';
+  export type PrismaticAmbientGlowBlur = 'soft' | 'medium' | 'diffuse';
+  export type PrismaticAmbientGlowPosition =
+    | 'top-left'
+    | 'top-right'
+    | 'center'
+    | 'bottom-left'
+    | 'bottom-right';
+
+  export type PrismaticAmbientGlowProps = {
+    tone?: PrismaticAmbientGlowTone;
+    size?: PrismaticAmbientGlowSize;
+    opacity?: PrismaticAmbientGlowOpacity;
+    blur?: PrismaticAmbientGlowBlur;
+    position?: PrismaticAmbientGlowPosition;
+  };
+</script>
+
+<script lang="ts">
+  import { CCLPastelColor } from './const/config';
+
+  const sizes: Record<PrismaticAmbientGlowSize, string> = {
+    small: '220px',
+    medium: '380px',
+    large: '620px'
+  };
+
+  const opacities: Record<PrismaticAmbientGlowOpacity, string> = {
+    subtle: '0.28',
+    standard: '0.48',
+    strong: '0.68'
+  };
+
+  const blurs: Record<PrismaticAmbientGlowBlur, string> = {
+    soft: '44px',
+    medium: '76px',
+    diffuse: '112px'
+  };
+
+  export let tone: PrismaticAmbientGlowTone = CCLPastelColor.PEACH_PINK;
+  export let size: PrismaticAmbientGlowSize = 'medium';
+  export let opacity: PrismaticAmbientGlowOpacity = 'standard';
+  export let blur: PrismaticAmbientGlowBlur = 'medium';
+  export let position: PrismaticAmbientGlowPosition = 'center';
+
+  $: glowSize = sizes[size];
+  $: glowOpacity = opacities[opacity];
+  $: glowBlur = blurs[blur];
+</script>
+
+<!-- The containing block should use position: relative and isolation: isolate. -->
+<span
+  class="ambient-glow {position}"
+  aria-hidden="true"
+  data-testid="prismatic-ambient-glow"
+  data-tone={tone}
+  data-size={size}
+  data-opacity={opacity}
+  data-blur={blur}
+  data-position={position}
+  style="--glow-color: var({tone}); --glow-size: {glowSize}; --glow-opacity: {glowOpacity}; --glow-blur: {glowBlur};"
+></span>
+
+<style>
+  .ambient-glow {
+    position: absolute;
+    z-index: -1;
+    display: block;
+    width: var(--glow-size);
+    height: var(--glow-size);
+    border-radius: 50%;
+    background: var(--glow-color);
+    filter: blur(var(--glow-blur));
+    opacity: var(--glow-opacity);
+    pointer-events: none;
+  }
+
+  .top-left {
+    top: 0;
+    left: 0;
+    transform: translate(-35%, -35%);
+  }
+
+  .top-right {
+    top: 0;
+    right: 0;
+    transform: translate(35%, -35%);
+  }
+
+  .center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: translate(-35%, 35%);
+  }
+
+  .bottom-right {
+    right: 0;
+    bottom: 0;
+    transform: translate(35%, 35%);
+  }
+</style>

package/dist/PrismaticAmbientGlow.svelte.d.ts

@@ -0,0 +1,36 @@
+export type PrismaticAmbientGlowTone = '--peach-pink' | '--sugar-blue' | '--lemon-yellow' | '--akebi-purple';
+export type PrismaticAmbientGlowSize = 'small' | 'medium' | 'large';
+export type PrismaticAmbientGlowOpacity = 'subtle' | 'standard' | 'strong';
+export type PrismaticAmbientGlowBlur = 'soft' | 'medium' | 'diffuse';
+export type PrismaticAmbientGlowPosition = 'top-left' | 'top-right' | 'center' | 'bottom-left' | 'bottom-right';
+export type PrismaticAmbientGlowProps = {
+    tone?: PrismaticAmbientGlowTone;
+    size?: PrismaticAmbientGlowSize;
+    opacity?: PrismaticAmbientGlowOpacity;
+    blur?: PrismaticAmbientGlowBlur;
+    position?: PrismaticAmbientGlowPosition;
+};
+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 PrismaticAmbientGlow: $$__sveltets_2_IsomorphicComponent<{
+    tone?: PrismaticAmbientGlowTone;
+    size?: PrismaticAmbientGlowSize;
+    opacity?: PrismaticAmbientGlowOpacity;
+    blur?: PrismaticAmbientGlowBlur;
+    position?: PrismaticAmbientGlowPosition;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PrismaticAmbientGlow = InstanceType<typeof PrismaticAmbientGlow>;
+export default PrismaticAmbientGlow;

package/dist/PrismaticBookCard.svelte

@@ -0,0 +1,175 @@
+<script context="module" lang="ts">
+  export type PrismaticBookCardTone =
+    | '--strawberry-pink'
+    | '--pineapple-yellow'
+    | '--soda-blue'
+    | '--melon-green'
+    | '--grape-purple'
+    | '--wrap-grey';
+
+  export type PrismaticBookCardProps = {
+    href?: string;
+    linkLabel?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+    tone?: PrismaticBookCardTone;
+  };
+</script>
+
+<script lang="ts">
+  import { CCLPastelColor, CCLVividColor } from './const/config';
+  import type { ColorVar } from './const/config';
+
+  export let href: string | undefined = undefined;
+  export let linkLabel: string = 'READ MORE';
+  export let imageUrl: string | undefined = undefined;
+  export let imageAlt: string = '';
+  export let tone: PrismaticBookCardTone = CCLVividColor.STRAWBERRY_PINK;
+
+  const gradientEndColors: Record<string, ColorVar> = {
+    [CCLVividColor.STRAWBERRY_PINK]: CCLPastelColor.LEMON_YELLOW,
+    [CCLVividColor.PINEAPPLE_YELLOW]: CCLPastelColor.PEACH_PINK,
+    [CCLVividColor.SODA_BLUE]: CCLPastelColor.AKEBI_PURPLE,
+    [CCLVividColor.MELON_GREEN]: CCLPastelColor.SUGAR_BLUE,
+    [CCLVividColor.GRAPE_PURPLE]: CCLPastelColor.LEMON_YELLOW,
+    [CCLVividColor.WRAP_GREY]: CCLPastelColor.SUGAR_BLUE
+  };
+  const linkElement = 'a';
+
+  $: gradientStart = `var(${tone})`;
+  $: gradientEnd = `var(${gradientEndColors[tone] ?? CCLPastelColor.LEMON_YELLOW})`;
+  $: accentColor = `var(${tone})`;
+</script>
+
+<article
+  class="prismatic-book-card"
+  style="--gradient-start: {gradientStart}; --gradient-end: {gradientEnd}; --accent-color: {accentColor};"
+>
+  <div class="cover-slot" aria-label={imageUrl ? undefined : imageAlt || undefined}>
+    {#if imageUrl}
+      <img class="cover-image" src={imageUrl} alt={imageAlt} />
+    {:else}
+      <slot name="image">
+        <span class="cover-fallback" aria-hidden="true"></span>
+      </slot>
+    {/if}
+  </div>
+
+  {#if href}
+    <svelte:element
+      this={linkElement}
+      class="link"
+      {href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <span>{linkLabel}</span>
+      <svg class="link-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+        <path d="M5 3.5L9.5 8L5 12.5" />
+        <path d="M9 8H2.5" />
+      </svg>
+    </svelte:element>
+  {:else}
+    <span class="link-label">
+      <span>{linkLabel}</span>
+      <svg class="link-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+        <path d="M5 3.5L9.5 8L5 12.5" />
+        <path d="M9 8H2.5" />
+      </svg>
+    </span>
+  {/if}
+</article>
+
+<style>
+  .prismatic-book-card {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+    width: min(100%, 300px);
+    height: 500px;
+    box-sizing: border-box;
+    padding: 24px;
+    border: 1.5px solid color-mix(in srgb, var(--gradient-end) 60%, transparent);
+    border-radius: 34px;
+    background: color-mix(in srgb, var(--color-surface-glass) 82%, transparent);
+    font-family: Inter, sans-serif;
+    letter-spacing: 0;
+  }
+
+  .cover-slot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 360px;
+    overflow: hidden;
+    border-radius: 18px;
+    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
+  }
+
+  .cover-image,
+  .cover-fallback {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .cover-image,
+  .cover-slot :global(img),
+  .cover-slot :global(video) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .link,
+  .link-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    width: fit-content;
+    max-width: 100%;
+    color: var(--accent-color);
+    font-size: 13px;
+    font-weight: 700;
+    line-height: normal;
+    text-decoration: none;
+    overflow-wrap: anywhere;
+  }
+
+  .link-icon {
+    display: block;
+    flex: 0 0 16px;
+    width: 16px;
+    height: 16px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.8;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .link:hover {
+    text-decoration: underline;
+  }
+
+  .link:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 42%, Canvas);
+    outline-offset: 4px;
+  }
+
+  @media (max-width: 320px) {
+    .prismatic-book-card {
+      height: auto;
+      min-height: 500px;
+    }
+
+    .cover-slot {
+      height: auto;
+      aspect-ratio: 7 / 10;
+    }
+  }
+</style>

package/dist/PrismaticBookCard.svelte.d.ts

@@ -0,0 +1,34 @@
+export type PrismaticBookCardTone = '--strawberry-pink' | '--pineapple-yellow' | '--soda-blue' | '--melon-green' | '--grape-purple' | '--wrap-grey';
+export type PrismaticBookCardProps = {
+    href?: string;
+    linkLabel?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+    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> {
+    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 PrismaticBookCard: $$__sveltets_2_IsomorphicComponent<{
+    href?: string | undefined;
+    linkLabel?: string;
+    imageUrl?: string | undefined;
+    imageAlt?: string;
+    tone?: PrismaticBookCardTone;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    image: {};
+}, {}, string>;
+type PrismaticBookCard = InstanceType<typeof PrismaticBookCard>;
+export default PrismaticBookCard;