@ttdk-design-system/library-svelte 0.0.0-stage → 1.0.0

package/dist/web/banner/manifest.json

@@ -0,0 +1,240 @@
+{
+  "name": "@ttdk-design-system/banner",
+  "component": "Banner",
+  "folder": "banner",
+  "description": "Komponen Banner untuk header halaman portal, pengumuman penting, atau judul kategori katalog data dengan desain visual bersih dan elegan.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "banner.css",
+      "importPath": "web/banner/banner.css"
+    }
+  ],
+  "props": {
+    "title": {
+      "name": "title",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Judul utama banner yang ditampilkan dengan tipografi tegas (misal: \"Katalog Dataset Publik\").",
+      "example": null,
+      "param": null
+    },
+    "description": {
+      "name": "description",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Deskripsi atau pesan teks penjelasan tambahan di bawah judul.",
+      "example": null,
+      "param": null
+    },
+    "variant": {
+      "name": "variant",
+      "type": "| 'primary'\n    | 'success'\n    | 'info'\n    | 'warning'\n    | 'danger'",
+      "optional": true,
+      "default": "primary",
+      "description": "Varian warna semantik tema banner: - `'primary'`: Brand Teal utama (#16B3AC). - `'success'`: Hijau konfirmasi keberhasilan. - `'info'`: Biru informasi. - `'warning'`: Kuning / amber peringatan. - `'danger'`: Merah kesalahan / bahaya.",
+      "example": null,
+      "param": null
+    },
+    "appearance": {
+      "name": "appearance",
+      "type": "'gradient' | 'subtle' | 'solid' | 'outline' | 'flat'",
+      "optional": true,
+      "default": "gradient",
+      "description": "Gaya tampilan visual latar belakang banner. - `'gradient'`: Latar belakang gradasi halus elegan (standar sesuai desain katalog). - `'subtle'`: Latar belakang warna lembut transparan. - `'solid'`: Latar belakang warna pekat penuh dengan teks kontras tinggi. - `'outline'`: Garis tepi minimalis tanpa latar belakang gradasi. - `'flat'`: Latar polos solid netral.",
+      "example": null,
+      "param": null
+    },
+    "size": {
+      "name": "size",
+      "type": "'sm' | 'md' | 'lg' | 'xl'",
+      "optional": true,
+      "default": "md",
+      "description": "Skala ukuran tinggi dan padding ruang dalam banner. - `'sm'`: Kompak (padding 10px 16px, judul 14px). - `'md'`: Standar (padding 14px 20px, judul 16px). - `'lg'`: Besar / Page Header (padding 18px 24px, judul 18px). - `'xl'`: Ekstra Besar / Hero Banner (padding 24px 32px, judul 22px).",
+      "example": null,
+      "param": null
+    },
+    "rounded": {
+      "name": "rounded",
+      "type": "'none' | 'sm' | 'md' | 'lg' | 'full'",
+      "optional": true,
+      "default": "md",
+      "description": "Bentuk sudut kelengkungan container banner. - `'none'`: Sudut siku 0px. - `'sm'`: Sudut 4px. - `'md'`: Sudut 8px (standar). - `'lg'`: Sudut 12px. - `'full'`: Sudut kapsul 9999px.",
+      "example": null,
+      "param": null
+    },
+    "icon": {
+      "name": "icon",
+      "type": "boolean | any",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan ikon indikator status semantik (boolean) atau elemen ikon kustom.",
+      "example": null,
+      "param": null
+    },
+    "customIcon": {
+      "name": "customIcon",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Elemen ikon SVG kustom untuk menggantikan ikon bawaan banner.",
+      "example": null,
+      "param": null
+    },
+    "iconColor": {
+      "name": "iconColor",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Warna kustom untuk ikon banner secara langsung.",
+      "example": null,
+      "param": null
+    },
+    "iconSize": {
+      "name": "iconSize",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Ukuran kustom untuk ikon banner secara langsung.",
+      "example": null,
+      "param": null
+    },
+    "iconStyle": {
+      "name": "iconStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk ikon banner (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "iconClass": {
+      "name": "iconClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk ikon banner.",
+      "example": null,
+      "param": null
+    },
+    "titleStyle": {
+      "name": "titleStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk judul banner (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "titleClass": {
+      "name": "titleClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk judul banner.",
+      "example": null,
+      "param": null
+    },
+    "descStyle": {
+      "name": "descStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk deskripsi banner (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "descClass": {
+      "name": "descClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk deskripsi banner.",
+      "example": null,
+      "param": null
+    },
+    "closable": {
+      "name": "closable",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menampilkan tombol silang (x) untuk menutup atau menyembunyikan banner.",
+      "example": null,
+      "param": null
+    },
+    "closableStyle": {
+      "name": "closableStyle",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom untuk tombol tutup banner (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "closableClass": {
+      "name": "closableClass",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom untuk tombol tutup banner.",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Inline CSS style object native.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten kustom tambahan / isi banner (children slot).",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "onClose": {
+      "name": "onClose",
+      "type": "(event?: any) => void",
+      "optional": true,
+      "default": null,
+      "description": "Event callback saat tombol tutup diklik.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {},
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/dist/web/breadcrumb/AI_GUIDE.md

@@ -0,0 +1,120 @@
+# <Breadcrumb /> — TTDK Component Reference
+
+Komponen Breadcrumb untuk menampilkan hierarki navigasi lokasi halaman saat ini dengan dukungan penyingkatan (collapse ellipsis).
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/web/breadcrumb/breadcrumb.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Breadcrumb from "@ttdk-design-system/library-react/web/breadcrumb";
+
+// Vue 3
+import Breadcrumb from "@ttdk-design-system/library-vue/web/breadcrumb";
+
+// Svelte
+import Breadcrumb from "@ttdk-design-system/library-svelte/web/breadcrumb";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `items` | `BreadcrumbItem[]` | `-` | Daftar item navigasi breadcrumb dari tingkat teratas hingga halaman saat ini. |
+| `separator?` | `BreadcrumbSeparator` | `arrow` | Jenis karakter atau ikon pemisah antar item: - `'arrow'`: Ikon panah kanan `→`. |
+| `customSeparator?` | `string` | `-` | Karakter atau string teks khusus untuk pemisah antarelemen. |
+| `size?` | `'sm' | 'md' | 'lg'` | `md` | Skala ukuran tampilan breadcrumb: - `'sm'`: Kompak (12px, gap 6px). - `'md'`: Standar (14px, gap 8px). - `'lg'`: Besar (16px, gap 12px). |
+| `maxLabelLength?` | `number` | `20` | Batas maksimum panjang karakter label sebelum dipotong (truncate). |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active). |
+| `style?` | `any` | `-` | Inline CSS style object native. |
+| `textLinkStyle?` | `UiProps` | `-` | Style kustom untuk teks tautan breadcrumb / item non-aktif (UiProps). |
+| `textLinkClass?` | `string` | `-` | Class CSS kustom untuk teks tautan breadcrumb / item non-aktif (Tailwind / class kustom). |
+| `textActiveStyle?` | `UiProps` | `-` | Style kustom untuk teks item aktif / halaman saat ini (UiProps). |
+| `textActiveClass?` | `string` | `-` | Class CSS kustom untuk teks item aktif / halaman saat ini (Tailwind / class kustom). |
+| `separatorStyle?` | `UiProps` | `-` | Style kustom untuk karakter atau ikon pemisah (UiProps). |
+| `separatorClass?` | `string` | `-` | Class CSS kustom untuk karakter atau ikon pemisah (Tailwind / class kustom). |
+| `onItemClick?` | `(item: BreadcrumbItem, index: number, event: any) => void` | `-` | Handler event klik yang dipanggil saat suatu item breadcrumb diklik. |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `children?` | `any` | `-` | Slot konten tambahan di ujung kanan breadcrumb. |
+
+### Sub-interface: `BreadcrumbItem`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `label` | `string` | `-` | Label teks yang ditampilkan pada breadcrumb item. |
+| `href?` | `string` | `-` | URL tautan navigasi tujuan (href / path). |
+| `icon?` | `any` | `-` | Ikon atau emoji opsional di samping label teks. |
+| `current?` | `boolean` | `-` | Menandai item ini secara eksplisit sebagai halaman saat ini (current page). |
+| `disabled?` | `boolean` | `false` | Menonaktifkan interaksi klik pada item ini. |
+| `isEllipsis?` | `boolean` | `-` | Menandai item sebagai representasi ellipsis penyingkat item yang tersembunyi. |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import Breadcrumb from "@ttdk-design-system/library-react/web/breadcrumb";
+import "@ttdk-design-system/library-react/web/breadcrumb/breadcrumb.css";
+
+export function Example() {
+  const items = [
+    { label: "Beranda", href: "/" },
+    { label: "Dataset", href: "/dataset" },
+    { label: "Fasilitas Kesehatan", href: "/dataset/faskes" },
+    { label: "Detail Puskesmas", current: true }
+  ];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Breadcrumb items={items} separator="slash" />
+      <Breadcrumb items={items} separator="chevron" size="sm" />
+      <Breadcrumb items={items} maxItems={3} />
+    </div>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import Breadcrumb from "@ttdk-design-system/library-vue/web/breadcrumb";
+import "@ttdk-design-system/library-vue/web/breadcrumb/breadcrumb.css";
+
+const items = [
+  { label: "Beranda", href: "/" },
+  { label: "Dataset", href: "/dataset" },
+  { label: "Fasilitas Kesehatan", href: "/dataset/faskes" },
+  { label: "Detail Puskesmas", current: true }
+];
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <Breadcrumb :items="items" separator="slash" />
+    <Breadcrumb :items="items" separator="chevron" size="sm" />
+    <Breadcrumb :items="items" :max-items="3" />
+  </div>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import Breadcrumb from "@ttdk-design-system/library-svelte/web/breadcrumb";
+  import "@ttdk-design-system/library-svelte/web/breadcrumb/breadcrumb.css";
+
+  const items = [
+    { label: "Beranda", href: "/" },
+    { label: "Dataset", href: "/dataset" },
+    { label: "Fasilitas Kesehatan", href: "/dataset/faskes" },
+    { label: "Detail Puskesmas", current: true }
+  ];
+</script>
+
+<div style="display: flex; flex-direction: column; gap: 16px;">
+  <Breadcrumb {items} separator="slash" />
+  <Breadcrumb {items} separator="chevron" size="sm" />
+  <Breadcrumb {items} maxItems={3} />
+</div>
+```

package/dist/web/breadcrumb/breadcrumb.css

@@ -0,0 +1 @@
+.ttdk-breadcrumb{box-sizing:border-box;font-family:var(--ttdk-font-sans);align-items:center;max-width:100%;line-height:1.5;display:flex}.ttdk-breadcrumb[data-size=sm]{font-size:var(--custom-text-size,12px)}.ttdk-breadcrumb[data-size=sm] .ttdk-breadcrumb-list,.ttdk-breadcrumb[data-size=sm] .ttdk-breadcrumb-item{gap:var(--custom-gap,6px)}.ttdk-breadcrumb[data-size=sm] .ttdk-separator-icon{width:12px;height:12px}.ttdk-breadcrumb[data-size=sm] .ttdk-breadcrumb-icon{font-size:13px}.ttdk-breadcrumb[data-size=md]{font-size:var(--custom-text-size,14px)}.ttdk-breadcrumb[data-size=md] .ttdk-breadcrumb-list,.ttdk-breadcrumb[data-size=md] .ttdk-breadcrumb-item{gap:var(--custom-gap,8px)}.ttdk-breadcrumb[data-size=md] .ttdk-separator-icon{width:14px;height:14px}.ttdk-breadcrumb[data-size=md] .ttdk-breadcrumb-icon{font-size:15px}.ttdk-breadcrumb[data-size=lg]{font-size:var(--custom-text-size,16px)}.ttdk-breadcrumb[data-size=lg] .ttdk-breadcrumb-list,.ttdk-breadcrumb[data-size=lg] .ttdk-breadcrumb-item{gap:var(--custom-gap,10px)}.ttdk-breadcrumb[data-size=lg] .ttdk-separator-icon{width:16px;height:16px}.ttdk-breadcrumb[data-size=lg] .ttdk-breadcrumb-icon{font-size:17px}.ttdk-breadcrumb[data-size=lg] .ttdk-breadcrumb-ellipsis{height:24px;padding:0 8px;font-size:15px}.ttdk-breadcrumb-list{flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;display:flex}.ttdk-breadcrumb-item{align-items:center;display:inline-flex}.ttdk-breadcrumb-link{color:var(--custom-link-color,var(--ttdk-ui-color,var(--ttdk-text-icon-secondary)));cursor:pointer;font-family:inherit;font-weight:400;font-size:inherit;line-height:inherit;background:0 0;border:none;align-items:center;gap:4px;padding:0;text-decoration:none;transition:color .15s,opacity .15s;display:inline-flex}.ttdk-breadcrumb-link:hover:not(:disabled){color:var(--ttdk-text-icon-primary);text-underline-offset:2px;text-decoration:underline}.ttdk-breadcrumb-link:focus-visible{box-shadow:0 0 0 2px var(--ttdk-stroke-border-focus);border-radius:2px;outline:none}.ttdk-breadcrumb-link:disabled,.ttdk-breadcrumb-link[data-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.ttdk-breadcrumb-btn{user-select:none}.ttdk-breadcrumb-current{color:var(--custom-current-color,var(--ttdk-ui-color,var(--ttdk-text-icon-primary)));user-select:text;align-items:center;gap:4px;font-weight:600;display:inline-flex}.ttdk-breadcrumb-current[data-disabled=true]{opacity:.45}.ttdk-breadcrumb-separator{color:var(--ttdk-stroke-divider);user-select:none;justify-content:center;align-items:center;font-weight:400;display:inline-flex}.ttdk-separator-char{line-height:1}.ttdk-separator-icon{fill:currentColor;display:block;transform:rotate(270deg)}.ttdk-breadcrumb-label{vertical-align:middle;display:inline-block}.ttdk-breadcrumb-ellipsis{color:var(--ttdk-text-icon-primary);letter-spacing:1.5px;user-select:none;justify-content:center;align-items:center;font-weight:600;line-height:1;display:inline-flex}.ttdk-breadcrumb-slot{margin-left:12px}.dark .ttdk-breadcrumb-link,html.dark .ttdk-breadcrumb-link,[data-mode=dark] .ttdk-breadcrumb-link,[data-theme=dark] .ttdk-breadcrumb-link{color:var(--ttdk-text-icon-secondary)}.dark .ttdk-breadcrumb-link:hover:not(:disabled),html.dark .ttdk-breadcrumb-link:hover:not(:disabled),[data-mode=dark] .ttdk-breadcrumb-link:hover:not(:disabled),[data-theme=dark] .ttdk-breadcrumb-link:hover:not(:disabled),.dark .ttdk-breadcrumb-current,html.dark .ttdk-breadcrumb-current,[data-mode=dark] .ttdk-breadcrumb-current,[data-theme=dark] .ttdk-breadcrumb-current{color:var(--ttdk-text-icon-primary)}.dark .ttdk-breadcrumb-separator,html.dark .ttdk-breadcrumb-separator,[data-mode=dark] .ttdk-breadcrumb-separator,[data-theme=dark] .ttdk-breadcrumb-separator{color:var(--ttdk-stroke-divider)}.dark .ttdk-breadcrumb-ellipsis,html.dark .ttdk-breadcrumb-ellipsis,[data-mode=dark] .ttdk-breadcrumb-ellipsis,[data-theme=dark] .ttdk-breadcrumb-ellipsis{color:var(--ttdk-text-icon-primary)}

package/dist/web/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,168 @@
+<script context="module"></script>
+
+<script>import { buildUiVars, UiProps } from "../../core/types";
+export let maxLabelLength = void 0;
+export let items;
+export let className = void 0;
+export let size = void 0;
+export let ui = void 0;
+export let textActiveClass = void 0;
+export let textActiveStyle = void 0;
+export let textLinkClass = void 0;
+export let textLinkStyle = void 0;
+export let onItemClick = void 0;
+export let separatorClass = void 0;
+export let separatorStyle = void 0;
+export let customSeparator = void 0;
+function stringifyStyles(stylesObj) {
+  let styles = "";
+  for (let key in stylesObj) {
+    const dashedKey = key.replace(/[A-Z]/g, function(match) {
+      return "-" + match.toLowerCase();
+    });
+    styles += dashedKey + ":" + stylesObj[key] + ";";
+  }
+  return styles;
+}
+function formatLabel(label) {
+  if (!label && label !== 0)
+    return "";
+  const str = String(label);
+  const max = maxLabelLength !== void 0 ? maxLabelLength : 20;
+  if (max > 0 && str.length > max) {
+    return `${str.slice(0, max)}...`;
+  }
+  return str;
+}
+function getVisibleItems() {
+  if (!items || items.length === 0)
+    return [];
+  const total = items.length;
+  if (total <= 3) {
+    return items;
+  }
+  const before = Math.max(1, Math.min(3, total - 2));
+  const startItems = items.slice(0, before);
+  const endItems = items.slice(total - 1);
+  const ellipsisItem = {
+    label: "...",
+    isEllipsis: true
+  };
+  return [...startItems, ellipsisItem, ...endItems];
+}
+</script>
+
+<nav
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    })}
+  aria-label="Breadcrumb"
+  class={`ttdk-breadcrumb ${className || ""}`.trim()}
+  data-size={size || "md"}
+>
+  <ol class="ttdk-breadcrumb-list">
+    {#each getVisibleItems() as item, index (index)}
+      <li class="ttdk-breadcrumb-item">
+        {#if item.isEllipsis}
+          <span class="ttdk-breadcrumb-ellipsis" aria-hidden="true"> ··· </span>
+        {/if}
+        {#if !item.isEllipsis && (item.current || index === getVisibleItems().length - 1)}
+          <span
+            style={stringifyStyles({
+              ...buildUiVars(textActiveStyle),
+            })}
+            aria-current="page"
+            class={`ttdk-breadcrumb-current ${textActiveClass || ""}`.trim()}
+            data-disabled={item.disabled ? "true" : "false"}
+          >
+            {#if item.icon}
+              <span class="ttdk-breadcrumb-icon">{item.icon}</span>
+            {/if}<span class="ttdk-breadcrumb-label" title={item.label}
+              >{formatLabel(item.label)}</span
+            ></span
+          >
+        {/if}
+        {#if !item.isEllipsis && !item.current && index !== getVisibleItems().length - 1}
+          {#if item.href}
+            <a
+              style={stringifyStyles({
+                ...buildUiVars(textLinkStyle),
+              })}
+              href={item.href}
+              class={`ttdk-breadcrumb-link ${textLinkClass || ""}`.trim()}
+              data-disabled={item.disabled ? "true" : "false"}
+              title={item.label}
+              on:click={(e) => {
+                if (item.disabled) {
+                  e.preventDefault();
+                  return;
+                }
+                if (onItemClick) {
+                  onItemClick(item, index, e);
+                }
+              }}
+            >
+              {#if item.icon}
+                <span class="ttdk-breadcrumb-icon">{item.icon}</span>
+              {/if}<span class="ttdk-breadcrumb-label"
+                >{formatLabel(item.label)}</span
+              ></a
+            >
+          {/if}
+
+          {#if !item.href}
+            <button
+              style={stringifyStyles({
+                ...buildUiVars(textLinkStyle),
+              })}
+              type="button"
+              class={`ttdk-breadcrumb-link ttdk-breadcrumb-btn ${
+                textLinkClass || ""
+              }`.trim()}
+              data-disabled={item.disabled ? "true" : "false"}
+              disabled={item.disabled}
+              title={item.label}
+              on:click={(e) => {
+                if (onItemClick) {
+                  onItemClick(item, index, e);
+                }
+              }}
+            >
+              {#if item.icon}
+                <span class="ttdk-breadcrumb-icon">{item.icon}</span>
+              {/if}<span class="ttdk-breadcrumb-label"
+                >{formatLabel(item.label)}</span
+              ></button
+            >
+          {/if}
+        {/if}
+        {#if index !== getVisibleItems().length - 1}
+          <span
+            style={stringifyStyles({
+              ...buildUiVars(separatorStyle),
+            })}
+            aria-hidden="true"
+            class={`ttdk-breadcrumb-separator ${separatorClass || ""}`.trim()}
+          >
+            {#if customSeparator}
+              <span class="ttdk-separator-char">{customSeparator}</span>
+            {/if}
+            {#if !customSeparator}
+              <svg
+                class="ttdk-separator-icon"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 640 640"
+                ><path
+                  d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"
+                /></svg
+              >
+            {/if}</span
+          >
+        {/if}
+      </li>
+    {/each}
+  </ol>
+  {#if $$slots.default}
+    <div class="ttdk-breadcrumb-slot"><slot /></div>
+  {/if}
+</nav>

package/dist/web/breadcrumb/breadcrumb.svelte.d.ts

@@ -0,0 +1,141 @@
+import { SvelteComponent } from "svelte";
+export interface BreadcrumbItem {
+    /**
+     * Label teks yang ditampilkan pada breadcrumb item.
+     */
+    label: string;
+    /**
+     * URL tautan navigasi tujuan (href / path).
+     */
+    href?: string;
+    /**
+     * Ikon atau emoji opsional di samping label teks.
+     */
+    icon?: any;
+    /**
+     * Menandai item ini secara eksplisit sebagai halaman saat ini (current page).
+     */
+    current?: boolean;
+    /**
+     * Menonaktifkan interaksi klik pada item ini.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Menandai item sebagai representasi ellipsis penyingkat item yang tersembunyi.
+     */
+    isEllipsis?: boolean;
+}
+export type BreadcrumbUiProps = UiProps;
+export type BreadcrumbSeparator = "chevron";
+export interface BreadcrumbProps {
+    /**
+     * Daftar item navigasi breadcrumb dari tingkat teratas hingga halaman saat ini.
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Jenis karakter atau ikon pemisah antar item:
+     * - `'arrow'`: Ikon panah kanan `→`.
+     *
+     * @default 'arrow'
+     */
+    separator?: BreadcrumbSeparator;
+    /**
+     * Karakter atau string teks khusus untuk pemisah antarelemen.
+     */
+    customSeparator?: string;
+    /**
+     * Skala ukuran tampilan breadcrumb:
+     * - `'sm'`: Kompak (12px, gap 6px).
+     * - `'md'`: Standar (14px, gap 8px).
+     * - `'lg'`: Besar (16px, gap 12px).
+     *
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Batas maksimum panjang karakter label sebelum dipotong (truncate).
+     * @default 20
+     */
+    maxLabelLength?: number;
+    /**
+     * Kustomisasi visual granular melalui style-like object (+ support pseudo-class: hover, active).
+     */
+    ui?: UiProps;
+    /**
+     * Inline CSS style object native.
+     */
+    style?: any;
+    /**
+     * Style kustom untuk teks tautan breadcrumb / item non-aktif (UiProps).
+     */
+    textLinkStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk teks tautan breadcrumb / item non-aktif (Tailwind / class kustom).
+     */
+    textLinkClass?: string;
+    /**
+     * Style kustom untuk teks item aktif / halaman saat ini (UiProps).
+     */
+    textActiveStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk teks item aktif / halaman saat ini (Tailwind / class kustom).
+     */
+    textActiveClass?: string;
+    /**
+     * Style kustom untuk karakter atau ikon pemisah (UiProps).
+     */
+    separatorStyle?: UiProps;
+    /**
+     * Class CSS kustom untuk karakter atau ikon pemisah (Tailwind / class kustom).
+     */
+    separatorClass?: string;
+    /**
+     * Handler event klik yang dipanggil saat suatu item breadcrumb diklik.
+     *
+     * @param item Data item yang diklik.
+     * @param index Indeks urutan item dalam array.
+     * @param event Objek synthetic DOM event.
+     */
+    onItemClick?: (item: BreadcrumbItem, index: number, event: any) => void;
+    /**
+     * Class CSS kustom.
+     */
+    className?: string;
+    /**
+     * Slot konten tambahan di ujung kanan breadcrumb.
+     */
+    children?: any;
+}
+import { UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        maxLabelLength?: BreadcrumbProps["maxLabelLength"];
+        items: BreadcrumbProps["items"];
+        className?: BreadcrumbProps["className"];
+        size?: BreadcrumbProps["size"];
+        ui?: BreadcrumbProps["ui"];
+        textActiveClass?: BreadcrumbProps["textActiveClass"];
+        textActiveStyle?: BreadcrumbProps["textActiveStyle"];
+        textLinkClass?: BreadcrumbProps["textLinkClass"];
+        textLinkStyle?: BreadcrumbProps["textLinkStyle"];
+        onItemClick?: BreadcrumbProps["onItemClick"];
+        separatorClass?: BreadcrumbProps["separatorClass"];
+        separatorStyle?: BreadcrumbProps["separatorStyle"];
+        customSeparator?: BreadcrumbProps["customSeparator"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type BreadcrumbProps_ = typeof __propDef.props;
+export type BreadcrumbEvents = typeof __propDef.events;
+export type BreadcrumbSlots = typeof __propDef.slots;
+export default class Breadcrumb extends SvelteComponent<BreadcrumbProps_, BreadcrumbEvents, BreadcrumbSlots> {
+}
+export {};

package/dist/web/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './breadcrumb.svelte';
+export { default as Breadcrumb } from './breadcrumb.svelte';

package/dist/web/breadcrumb/index.js

@@ -0,0 +1,2 @@
+export { default } from './breadcrumb.svelte';
+export { default as Breadcrumb } from './breadcrumb.svelte';