cclkit4svelte 2.0.5 → 2.0.7

package/dist/Alert.svelte.d.ts

@@ -1,38 +1,40 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * The message to display in the alert.
-             * @type {string}
-             */ message: string;
-        /**
-             * The type of the alert, which determines its styling.
-             * @type {'success' | 'error' | 'warning' | 'info'}
-             * @default 'info'
-             */ type?: "success" | "error" | "warning" | "info";
-        /**
-             * Whether the alert can be dismissed by the user.
-             * @type {boolean}
-             * @default false
-             */ dismissible?: boolean;
-        /**
-             * Whether the alert should have an outline style.
-             * @type {boolean}
-             * @default false
-             */ outline?: 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: {
-        dismiss: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type AlertProps = typeof __propDef.props;
-export type AlertEvents = typeof __propDef.events;
-export type AlertSlots = typeof __propDef.slots;
-export default class Alert extends SvelteComponent<AlertProps, AlertEvents, AlertSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Alert: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * The message to display in the alert.
+       * @type {string}
+       */ message: string;
+    /**
+       * The type of the alert, which determines its styling.
+       * @type {'success' | 'error' | 'warning' | 'info'}
+       * @default 'info'
+       */ type?: "success" | "error" | "warning" | "info";
+    /**
+       * Whether the alert can be dismissed by the user.
+       * @type {boolean}
+       * @default false
+       */ dismissible?: boolean;
+    /**
+       * Whether the alert should have an outline style.
+       * @type {boolean}
+       * @default false
+       */ outline?: boolean;
+}, {
+    dismiss: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Alert = InstanceType<typeof Alert>;
+export default Alert;

package/dist/Badge.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+  import type { ColorVar } from './const/config';
+  import { vividFor } from './const/colorMap';
+
+  /** 色（CSS変数）。例: CCLVividColor.SODA_BLUE */
+  export let color: ColorVar = CCLVividColor.SODA_BLUE;
+  /** 表示バリエーション */
+  export let variant: 'solid' | 'outline' = 'solid';
+  /** サイズ */
+  export let size: 'sm' | 'md' | 'lg' = 'md';
+  /** アクセシビリティ用ラベル（任意: 可視テキストがない場合などに使用） */
+  export let ariaLabel: string | undefined;
+  /** 表示テキスト（slot優先） */
+  export let label: string | undefined;
+
+  $: vividForText = vividFor(color as string);
+  $: styleInline =
+    `--badge-color: var(${color});` + (vividForText ? ` --badge-fg: var(${vividForText});` : '');
+</script>
+
+<span
+  class="ccl-badge"
+  data-variant={variant}
+  data-size={size}
+  aria-label={ariaLabel}
+  style={styleInline}
+>
+  {#if label}{label}{:else}<slot />{/if}
+</span>
+
+<style>
+  .ccl-badge {
+    --badge-color: var(--soda-blue);
+    --badge-height-sm: 20px;
+    --badge-height-md: 24px;
+    --badge-height-lg: 28px;
+    --badge-pad-x-sm: 8px;
+    --badge-pad-x-md: 10px;
+    --badge-pad-x-lg: 12px;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    border-radius: 9999px;
+    font-weight: 600;
+    line-height: 1;
+    user-select: none;
+    white-space: nowrap;
+    border: 1px solid transparent;
+  }
+
+  /* size */
+  .ccl-badge[data-size='sm'] {
+    height: var(--badge-height-sm);
+    padding: 0 var(--badge-pad-x-sm);
+    font-size: 12px;
+  }
+  .ccl-badge[data-size='md'] {
+    height: var(--badge-height-md);
+    padding: 0 var(--badge-pad-x-md);
+    font-size: 12px;
+  }
+  .ccl-badge[data-size='lg'] {
+    height: var(--badge-height-lg);
+    padding: 0 var(--badge-pad-x-lg);
+    font-size: 13px;
+  }
+
+  /* variant */
+  .ccl-badge[data-variant='solid'] {
+    background: var(--badge-color);
+    color: var(--badge-fg, #fff);
+    border-color: var(--badge-color);
+  }
+  .ccl-badge[data-variant='outline'] {
+    background: #fff;
+    color: var(--badge-fg, var(--badge-color));
+    border-color: var(--badge-color);
+  }
+
+  /* no extra sr-only node; use aria-label when needed */
+</style>

package/dist/Badge.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { ColorVar } from './const/config';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /** 色（CSS変数）。例: CCLVividColor.SODA_BLUE */ color?: ColorVar;
+    /** 表示バリエーション */ variant?: "solid" | "outline";
+    /** サイズ */ size?: "sm" | "md" | "lg";
+    /** アクセシビリティ用ラベル（任意: 可視テキストがない場合などに使用） */ ariaLabel: string | undefined;
+    /** 表示テキスト（slot優先） */ label: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Badge = InstanceType<typeof Badge>;
+export default Badge;

package/dist/BookCard.svelte

@@ -1,96 +1,135 @@
-<script>import Button from "./Button.svelte";
-export let title;
-export let coverImageUrl;
-export let altText;
-export let description;
-export let linkUrl = void 0;
-export let linkText = "\u8A73\u3057\u304F\u898B\u308B";
-export let borderColor = "--strawberry-pink";
-function handleLinkClick() {
-  if (linkUrl) {
-    window.open(linkUrl, "_blank", "noopener noreferrer");
+<script lang="ts">
+  import Button from './Button.svelte';
+
+  /**
+   * 書籍のタイトル
+   * @type string
+   */
+  export let title: string;
+
+  /**
+   * 表紙画像のURL
+   * @type string
+   */
+  export let coverImageUrl: string;
+
+  /**
+   * 表紙画像のaltテキスト
+   * @type string
+   */
+  export let altText: string;
+
+  /**
+   * 書籍の短い説明文
+   * @type string
+   */
+  export let description: string;
+
+  /**
+   * 外部リンクのURL
+   * @type string | undefined
+   */
+  export let linkUrl: string | undefined = undefined;
+
+  /**
+   * リンクボタンのテキスト
+   * @default 詳しく見る
+   * @type string
+   */
+  export let linkText: string = '詳しく見る';
+
+  /**
+   * 枠線の色
+   * @default --strawberry-pink
+   * @type string
+   */
+  export let borderColor: string = '--strawberry-pink';
+
+  function handleLinkClick() {
+    if (linkUrl) {
+      window.open(linkUrl, '_blank', 'noopener noreferrer');
+    }
   }
-}
 </script>
 
 <div class="BookCardWrapper" style="--border-color: var({borderColor})">
-	<div class="BookCardImageWrapper">
-		<img class="BookCardImage" src={coverImageUrl} alt={altText} />
-	</div>
-	<div class="BookCardInfo">
-		<div class="BookCardTextWrapper">
-			<h2 class="BookCardTitle">{title}</h2>
-			<p class="BookCardDescription">{description}</p>
-		</div>
-		{#if linkUrl}
-			<div class="BookCardLinkWrapper">
-				<Button label={linkText} bgColor={borderColor} onClick={handleLinkClick} />
-			</div>
-		{/if}
-	</div>
+  <div class="BookCardImageWrapper">
+    <img class="BookCardImage" src={coverImageUrl} alt={altText} />
+  </div>
+  <div class="BookCardInfo">
+    <div class="BookCardTextWrapper">
+      <h2 class="BookCardTitle">{title}</h2>
+      <p class="BookCardDescription">{description}</p>
+    </div>
+    {#if linkUrl}
+      <div class="BookCardLinkWrapper">
+        <Button label={linkText} bgColor={borderColor} onClick={handleLinkClick} />
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style>
-	.BookCardWrapper {
-		width: 300px;
-		display: flex;
-		flex-direction: column;
-		border-radius: 25px;
-		border: 5px solid var(--border-color);
-		box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
-		background-color: #fff;
-		transition:
-			transform 0.2s ease-in-out,
-			box-shadow 0.2s ease-in-out;
-	}
-
-	.BookCardWrapper:hover {
-		transform: translateY(-4px);
-		box-shadow: 0 14px 14px rgba(0, 0, 0, 0.2);
-	}
-
-	.BookCardImageWrapper {
-		width: 100%;
-		height: 400px;
-		overflow: hidden;
-		border-top-left-radius: 20px;
-		border-top-right-radius: 20px;
-	}
-
-	.BookCardImage {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-
-	.BookCardInfo {
-		padding: 20px;
-		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
-	}
-
-	.BookCardTextWrapper {
-		flex-grow: 1;
-	}
-
-	.BookCardTitle {
-		color: var(--wrap-grey);
-		font-size: 1.2rem;
-		font-weight: bold;
-		margin: 0 0 10px 0;
-	}
-
-	.BookCardDescription {
-		color: var(--wrap-grey);
-		font-size: 0.9rem;
-		margin: 0;
-		overflow-wrap: break-word;
-	}
-
-	.BookCardLinkWrapper {
-		margin-top: 20px;
-		display: flex;
-		justify-content: center;
-	}
+  .BookCardWrapper {
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 25px;
+    border: 5px solid var(--border-color);
+    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
+    background-color: #fff;
+    transition:
+      transform 0.2s ease-in-out,
+      box-shadow 0.2s ease-in-out;
+  }
+
+  .BookCardWrapper:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 14px 14px rgba(0, 0, 0, 0.2);
+  }
+
+  .BookCardImageWrapper {
+    width: 100%;
+    height: 400px;
+    overflow: hidden;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+  }
+
+  .BookCardImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .BookCardInfo {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .BookCardTextWrapper {
+    flex-grow: 1;
+  }
+
+  .BookCardTitle {
+    color: var(--wrap-grey);
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin: 0 0 10px 0;
+  }
+
+  .BookCardDescription {
+    color: var(--wrap-grey);
+    font-size: 0.9rem;
+    margin: 0;
+    overflow-wrap: break-word;
+  }
+
+  .BookCardLinkWrapper {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
 </style>

package/dist/BookCard.svelte.d.ts

@@ -1,47 +1,49 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-             * 書籍のタイトル
-             * @type string
-             */ title: string;
-        /**
-             * 表紙画像のURL
-             * @type string
-             */ coverImageUrl: string;
-        /**
-             * 表紙画像のaltテキスト
-             * @type string
-             */ altText: string;
-        /**
-             * 書籍の短い説明文
-             * @type string
-             */ description: string;
-        /**
-             * 外部リンクのURL
-             * @type string | undefined
-             */ linkUrl?: string | undefined;
-        /**
-             * リンクボタンのテキスト
-             * @default 詳しく見る
-             * @type string
-             */ linkText?: string;
-        /**
-             * 枠線の色
-             * @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 BookCardProps = typeof __propDef.props;
-export type BookCardEvents = typeof __propDef.events;
-export type BookCardSlots = typeof __propDef.slots;
-export default class BookCard extends SvelteComponent<BookCardProps, BookCardEvents, BookCardSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const BookCard: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * 書籍のタイトル
+       * @type string
+       */ title: string;
+    /**
+       * 表紙画像のURL
+       * @type string
+       */ coverImageUrl: string;
+    /**
+       * 表紙画像のaltテキスト
+       * @type string
+       */ altText: string;
+    /**
+       * 書籍の短い説明文
+       * @type string
+       */ description: string;
+    /**
+       * 外部リンクのURL
+       * @type string | undefined
+       */ linkUrl?: string | undefined;
+    /**
+       * リンクボタンのテキスト
+       * @default 詳しく見る
+       * @type string
+       */ linkText?: string;
+    /**
+       * 枠線の色
+       * @default --strawberry-pink
+       * @type string
+       */ borderColor?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BookCard = InstanceType<typeof BookCard>;
+export default BookCard;

package/dist/Breadcrumb.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+  import type { ColorVar } from './const/config';
+  import { vividFor, isPastel } from './const/colorMap';
+  import type { BreadcrumbItem } from './types/breadcrumb';
+
+  /** パンくずリストの項目 */
+  export let items: BreadcrumbItem[] = [];
+  /** セパレータ文字（slotが優先） */
+  export let separator: string = '/';
+  /** navのaria-label */
+  export let ariaLabel: string = 'Breadcrumb';
+  /** 最後の要素もリンクにするか（デフォルトは現在地として非リンク） */
+  export let lastItemClickable: boolean = false;
+  /** アクティブ要素（最後の要素）のテキスト色。既定はストロベリーピンク */
+  export let activeColor: ColorVar = CCLVividColor.STRAWBERRY_PINK;
+  $: activeTextVar = isPastel(activeColor) ? vividFor(activeColor)! : activeColor;
+</script>
+
+<nav class="ccl-breadcrumb" aria-label={ariaLabel}>
+  <ol>
+    {#each items as item, i (i)}
+      <li>
+        {#if i < items.length - 1 || lastItemClickable}
+          {#if item.href}
+            <a
+              href={item.href}
+              style={i === items.length - 1 ? `color: var(${activeTextVar});` : undefined}
+              >{item.label}</a
+            >
+          {:else}
+            <span style={i === items.length - 1 ? `color: var(${activeTextVar});` : undefined}
+              >{item.label}</span
+            >
+          {/if}
+        {:else}
+          <span aria-current="page" style={`color: var(${activeTextVar});`}>{item.label}</span>
+        {/if}
+        {#if i < items.length - 1}
+          <span class="sep" aria-hidden="true">
+            <slot name="separator">{separator}</slot>
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+  <slot />
+</nav>
+
+<style>
+  .ccl-breadcrumb {
+    --bc-color: var(--wrap-grey);
+    --bc-sep-color: var(--cloud-grey);
+    --bc-gap: 8px;
+    --bc-font-size: 13px;
+  }
+
+  .ccl-breadcrumb ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--bc-gap);
+    color: var(--bc-color);
+    font-size: var(--bc-font-size);
+  }
+
+  .ccl-breadcrumb li {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .ccl-breadcrumb a {
+    color: var(--bc-color);
+    text-decoration: none;
+  }
+  .ccl-breadcrumb a:hover {
+    text-decoration: underline;
+  }
+
+  .ccl-breadcrumb .sep {
+    margin: 0 var(--bc-gap);
+    color: var(--bc-sep-color);
+  }
+
+  .ccl-breadcrumb [aria-current='page'] {
+    font-weight: 600;
+  }
+</style>

package/dist/Breadcrumb.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { ColorVar } from './const/config';
+import type { BreadcrumbItem } from './types/breadcrumb';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /** パンくずリストの項目 */ items?: BreadcrumbItem[];
+    /** セパレータ文字（slotが優先） */ separator?: string;
+    /** navのaria-label */ ariaLabel?: string;
+    /** 最後の要素もリンクにするか（デフォルトは現在地として非リンク） */ lastItemClickable?: boolean;
+    /** アクティブ要素（最後の要素）のテキスト色。既定はストロベリーピンク */ activeColor?: ColorVar;
+}, {
+    separator: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    separator: {};
+    default: {};
+}, {}, string>;
+type Breadcrumb = InstanceType<typeof Breadcrumb>;
+export default Breadcrumb;