@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/avatar/cmp.avatar.svelte.d.ts

@@ -0,0 +1,34 @@
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarStatus = 'online' | 'busy' | 'offline';
+type Props = {
+    /** Image URL. If omitted or fails to load, falls back to initials, then to a generic icon. */
+    src?: string | null;
+    /** Person's display name — used for the initials fallback and the `aria-label`. */
+    name?: string;
+    /** Size preset. @default 'md' */
+    size?: AvatarSize;
+    /** Optional status dot rendered in the bottom-right corner. */
+    status?: AvatarStatus | null;
+};
+/**
+ * A circular avatar with three render modes (priority order): image → initials (derived from `name`)
+ * → generic person icon. If `src` fails to load, automatically falls back to initials/icon. Optional
+ * status dot in the bottom-right corner. Built on top of the kit `Image` component, which handles
+ * the load / error / stub state machine.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--avatar--size` | Diameter (overrides size preset) | per `size` preset (20 / 24 / 32 / 40 / 56 px) |
+ * | `--sc-kit--avatar--background` | Fallback container background (initials / icon mode) | `--sc-kit--color--bg--active` |
+ * | `--sc-kit--avatar--color` | Fallback foreground (generic icon tint) | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--avatar--initials--background` | Initials chip background | `--sc-kit--color--accent--soft` |
+ * | `--sc-kit--avatar--initials--color` | Initials chip text color | `--sc-kit--color--accent` |
+ * | `--sc-kit--avatar--dot--border-color` | Status-dot outline (separates dot from page bg) | `--sc-kit--color--bg--app` |
+ * | `--sc-kit--avatar--dot--color-online` | Online dot color | `--sc-kit--color--success` |
+ * | `--sc-kit--avatar--dot--color-busy` | Busy dot color | `--sc-kit--color--danger` |
+ * | `--sc-kit--avatar--dot--color-offline` | Offline dot color | `--sc-kit--color--text--muted` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/avatar/index.d.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './cmp.avatar.svelte';

package/dist/ui/avatar/index.js

@@ -0,0 +1 @@
+export { default as Avatar } from './cmp.avatar.svelte';

package/dist/ui/badge/cmp.badge.svelte

@@ -1,85 +1,94 @@
-<script lang="ts">const { color = undefined, rounded = false, children } = $props();
+<script lang="ts">const { variant = 'neutral', size = 'md', style = 'soft', children } = $props();
 export {};
 </script>
 
-<div
-  class="badge"
-  class:badge--default={color === 'default'}
-  class:badge--gray={color === 'gray'}
-  class:badge--green={color === 'green'}
-  class:badge--red={color === 'red'}
-  class:badge--orange={color === 'orange'}
-  class:badge--blue={color === 'blue'}
-  class:badge--rounded={rounded}>
-  <div class="badge__content">
-    {@render children()}
-  </div>
-</div>
+<span class="badge badge--{size} badge--{variant}-{style}">
+  {@render children()}
+</span>
 
 <!--
 @component
-Displays a small color-coded label for statuses, categories, or counts.
+Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--badge--color` | Text color | `gray-800` / `white` |
-| `--sc-kit--badge--background-color` | Background color | `white` / `gray-800` |
-| `--sc-kit--badge--font-size` | Content font size | `0.625em` |
-| `--sc-kit--badge--border-radius` | Corner radius | `0.25em` |
-| `--sc-kit--badge--width` | Badge width | `5em` |
-| `--sc-kit--badge--height` | Badge height | `1.5em` |
-| `--sc-kit--badge--content-padding` | Content padding | `0` |
-| `--sc-kit--badge--line-break` | Line break behavior | `auto` |
+| `--sc-kit--badge--color` | Text color | per variant + style |
+| `--sc-kit--badge--background` | Background color | per variant + style |
+| `--sc-kit--badge--padding-block` | Vertical padding | per size |
+| `--sc-kit--badge--padding-inline` | Horizontal padding | `0.875rem 0.75rem` |
+| `--sc-kit--badge--border-radius` | Corner radius | `var(--sc-kit--radius--pill)` |
+| `--sc-kit--badge--font-size` | Content font size | per size |
+| `--sc-kit--badge--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
+| `--sc-kit--badge--gap` | Gap between children | `6px` |
 -->
 
 <style>.badge {
-  --_badge--color: var(--sc-kit--badge--color, light-dark(#2e2e2e, #ffffff));
-  --_badge--background-color: var(--sc-kit--badge--background-color, light-dark(#ffffff, #2e2e2e));
-  --_badge--font-size: var(--sc-kit--badge--font-size, 0.625em);
-  --_badge--border-radius: var(--sc-kit--badge--border-radius, 0.25em);
-  --_badge--width: var(--sc-kit--badge--width, 5em);
-  --_badge--height: var(--sc-kit--badge--height, 1.5em);
-  --_badge--content-padding: var(--sc-kit--badge--content-padding, 0rem);
-  --_badge--line-break: var(--sc-kit--badge--line-break, auto);
+  --_badge--padding-inline: var(--sc-kit--badge--padding-inline, 0.875rem 0.75rem);
+  --_badge--border-radius: var(--sc-kit--badge--border-radius, var(--sc-kit--radius--pill));
+  --_badge--font-weight: var(--sc-kit--badge--font-weight, var(--sc-kit--font-weight--medium));
+  --_badge--gap: var(--sc-kit--badge--gap, 0.375rem);
   display: inline-flex;
-  justify-content: center;
   align-items: center;
-  color: var(--_badge--color);
-  background: var(--_badge--background-color);
-  width: var(--_badge--width);
-  height: var(--_badge--height);
+  gap: var(--_badge--gap);
+  padding-block: var(--_badge--padding-block);
+  padding-inline: var(--_badge--padding-inline);
   border-radius: var(--_badge--border-radius);
-  line-break: var(--_badge--line-break);
-}
-.badge__content {
+  color: var(--_badge--color);
+  background: var(--_badge--background);
   font-size: var(--_badge--font-size);
-  padding: var(--_badge--content-padding);
+  font-weight: var(--_badge--font-weight);
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.badge--sm {
+  --_badge--padding-block: var(--sc-kit--badge--padding-block, 0.25rem);
+  --_badge--font-size: var(--sc-kit--badge--font-size, 0.625rem);
+}
+.badge--md {
+  --_badge--padding-block: var(--sc-kit--badge--padding-block, 0.375rem);
+  --_badge--font-size: var(--sc-kit--badge--font-size, var(--sc-kit--font-size--xs));
+}
+.badge--neutral-soft {
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--secondary));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--bg--active));
+}
+.badge--accent-soft {
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--accent));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--accent--soft));
+}
+.badge--success-soft {
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--success));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--success--soft));
 }
-.badge--default {
-  --_badge--color: light-dark(#2e2e2e, #ffffff);
-  --_badge--background-color: light-dark(#ffffff, #2e2e2e);
+.badge--warning-soft {
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--warning));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--warning--soft));
 }
-.badge--gray {
-  --_badge--color: light-dark(#6b7280, #f2f2f3);
-  --_badge--background-color: light-dark(#f2f2f3, #374151);
+.badge--danger-soft {
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--danger));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--danger--soft));
 }
-.badge--green {
-  --_badge--color: #0cce6b;
-  --_badge--background-color: #ecfef4;
+.badge--neutral-solid {
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--bg--panel));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--text--secondary));
 }
-.badge--red {
-  --_badge--color: #e71d36;
-  --_badge--background-color: #fef1f3;
+.badge--accent-solid {
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--on-accent));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--accent));
 }
-.badge--orange {
-  --_badge--color: #ffa62b;
-  --_badge--background-color: #fffbeb;
+.badge--success-solid {
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--on-accent));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--success));
 }
-.badge--blue {
-  --_badge--color: light-dark(#144ab0, #5a8dec);
-  --_badge--background-color: #f9fafb;
+.badge--warning-solid {
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--primary));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--warning));
 }
-.badge--rounded {
-  --_badge--border-radius: calc(var(--_badge--height) / 2);
+.badge--danger-solid {
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--on-accent));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--danger));
 }</style>

package/dist/ui/badge/cmp.badge.svelte.d.ts

@@ -1,25 +1,28 @@
-import type { BadgeColor } from './types';
+import type { BadgeVariant } from './types';
 import type { Snippet } from 'svelte';
 type Props = {
-    /** @default undefined */
-    color?: BadgeColor | null;
-    rounded?: boolean;
+    /** Color variant @default 'neutral' */
+    variant?: BadgeVariant;
+    /** @default 'md' */
+    size?: 'sm' | 'md';
+    /** Filled chip vs soft-tinted fill @default 'soft' */
+    style?: 'soft' | 'solid';
     children: Snippet;
 };
 /**
- * Displays a small color-coded label for statuses, categories, or counts.
+ * Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--badge--color` | Text color | `gray-800` / `white` |
- * | `--sc-kit--badge--background-color` | Background color | `white` / `gray-800` |
- * | `--sc-kit--badge--font-size` | Content font size | `0.625em` |
- * | `--sc-kit--badge--border-radius` | Corner radius | `0.25em` |
- * | `--sc-kit--badge--width` | Badge width | `5em` |
- * | `--sc-kit--badge--height` | Badge height | `1.5em` |
- * | `--sc-kit--badge--content-padding` | Content padding | `0` |
- * | `--sc-kit--badge--line-break` | Line break behavior | `auto` |
+ * | `--sc-kit--badge--color` | Text color | per variant + style |
+ * | `--sc-kit--badge--background` | Background color | per variant + style |
+ * | `--sc-kit--badge--padding-block` | Vertical padding | per size |
+ * | `--sc-kit--badge--padding-inline` | Horizontal padding | `0.875rem 0.75rem` |
+ * | `--sc-kit--badge--border-radius` | Corner radius | `var(--sc-kit--radius--pill)` |
+ * | `--sc-kit--badge--font-size` | Content font size | per size |
+ * | `--sc-kit--badge--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
+ * | `--sc-kit--badge--gap` | Gap between children | `6px` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/badge/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Badge } from './cmp.badge.svelte';
-export type { BadgeColor } from './types';
+export type { BadgeVariant } from './types';

package/dist/ui/badge/types.d.ts

@@ -1 +1 @@
-export type BadgeColor = 'default' | 'blue' | 'green' | 'gray' | 'orange' | 'red';
+export type BadgeVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';

package/dist/ui/banner/banner-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class BannerLocalization {
+    get dismiss(): string;
+}

package/dist/ui/banner/banner-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    dismiss: {
+        en: 'Dismiss',
+        no: 'Lukk'
+    }
+};
+export class BannerLocalization {
+    get dismiss() {
+        return loc.dismiss[AppLocale.current];
+    }
+}

package/dist/ui/banner/cmp.banner.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">import { Icon, IconSlot } from '../icon';
+import { BannerLocalization } from './banner-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_12_regular.svg?raw';
+let { variant = 'info', title, dismissible = false, icon, action, children, on } = $props();
+const localization = new BannerLocalization();
+let visible = $state(true);
+const dismiss = () => {
+    visible = false;
+    on?.dismiss?.();
+};
+</script>
+
+{#if visible}
+  <div class="banner banner--{variant}" role={variant === 'danger' ? 'alert' : 'status'}>
+    {#if icon}
+      <span class="banner__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+    {/if}
+    <div class="banner__body">
+      {#if title}<div class="banner__title">{title}</div>{/if}
+      {#if children}<div class="banner__description">{@render children()}</div>{/if}
+    </div>
+    {#if action}<div class="banner__action">{@render action()}</div>{/if}
+    {#if dismissible}
+      <button class="banner__close" type="button" aria-label={localization.dismiss} onclick={dismiss}>
+        <Icon src={IconDismiss} />
+      </button>
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+An attention-grabbing rectangular notice with a colored bg + border per `variant`. Combines an
+optional leading icon, an optional title, body content, an optional inline `action` snippet, and an
+optional dismiss button. Title color stays neutral (`text--primary`) and body color is `text--secondary` —
+the variant color tints the border, the dismiss/close glyph, the icon, and the soft bg.
+
+Sets `role="alert"` for `variant='danger'` (assertive announcement); other variants use `role="status"`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--banner--padding-block` | Vertical padding | `--sc-kit--space--3` |
+| `--sc-kit--banner--padding-inline` | Horizontal padding | `--sc-kit--space--4` |
+| `--sc-kit--banner--gap` | Gap between icon / body / action / close | `--sc-kit--space--3` |
+| `--sc-kit--banner--border-radius` | Corner radius | `--sc-kit--radius--md` |
+| `--sc-kit--banner--background` | Background color | per `variant` (soft / softer) |
+| `--sc-kit--banner--border-color` | Border color | per `variant` |
+| `--sc-kit--banner--accent-color` | Icon + dismiss glyph color | per `variant` |
+| `--sc-kit--banner--title--color` | Title text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--banner--description--color` | Body text color | `--sc-kit--color--text--secondary` |
+-->
+
+<style>.banner {
+  --_banner--padding-block: var(--sc-kit--banner--padding-block, var(--sc-kit--space--3));
+  --_banner--padding-inline: var(--sc-kit--banner--padding-inline, var(--sc-kit--space--4));
+  --_banner--gap: var(--sc-kit--banner--gap, var(--sc-kit--space--3));
+  --_banner--border-radius: var(--sc-kit--banner--border-radius, var(--sc-kit--radius--md));
+  --_banner--title-color: var(--sc-kit--banner--title--color, var(--sc-kit--color--text--primary));
+  --_banner--description-color: var(--sc-kit--banner--description--color, var(--sc-kit--color--text--secondary));
+  --_banner--background-default: var(--sc-kit--color--accent--softer);
+  --_banner--border-default: var(--sc-kit--color--accent--soft);
+  --_banner--accent-default: var(--sc-kit--color--accent);
+  --_banner--background: var(--sc-kit--banner--background, var(--_banner--background-default));
+  --_banner--border-color: var(--sc-kit--banner--border-color, var(--_banner--border-default));
+  --_banner--accent-color: var(--sc-kit--banner--accent-color, var(--_banner--accent-default));
+  display: flex;
+  align-items: flex-start;
+  gap: var(--_banner--gap);
+  padding: var(--_banner--padding-block) var(--_banner--padding-inline);
+  border-radius: var(--_banner--border-radius);
+  border: 1px solid var(--_banner--border-color);
+  background: var(--_banner--background);
+  color: var(--_banner--accent-color);
+}
+.banner--info {
+  --_banner--background-default: var(--sc-kit--color--accent--softer);
+  --_banner--border-default: var(--sc-kit--color--accent--soft);
+  --_banner--accent-default: var(--sc-kit--color--accent);
+}
+.banner--success {
+  --_banner--background-default: var(--sc-kit--color--success--soft);
+  --_banner--border-default: var(--sc-kit--color--success);
+  --_banner--accent-default: var(--sc-kit--color--success);
+}
+.banner--warning {
+  --_banner--background-default: var(--sc-kit--color--warning--soft);
+  --_banner--border-default: var(--sc-kit--color--warning);
+  --_banner--accent-default: var(--sc-kit--color--warning);
+}
+.banner--danger {
+  --_banner--background-default: var(--sc-kit--color--danger--soft);
+  --_banner--border-default: var(--sc-kit--color--danger);
+  --_banner--accent-default: var(--sc-kit--color--danger);
+}
+.banner__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+  margin-top: 0.125rem;
+  --sc-kit--icon--color: currentColor;
+}
+.banner__body {
+  flex: 1;
+  min-width: 0;
+}
+.banner__title {
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  line-height: var(--sc-kit--leading--tight);
+  color: var(--_banner--title-color);
+}
+.banner__description {
+  margin-top: 0.125rem;
+  font-size: var(--sc-kit--font-size--sm);
+  line-height: var(--sc-kit--leading--normal);
+  color: var(--_banner--description-color);
+}
+.banner__action {
+  flex-shrink: 0;
+  align-self: center;
+}
+.banner__close {
+  appearance: none;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 0;
+  border-radius: var(--sc-kit--radius--sm);
+  background: transparent;
+  color: currentColor;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.7;
+  cursor: pointer;
+  --sc-kit--icon--color: currentColor;
+  --sc-kit--icon--size: 0.75rem;
+}
+.banner__close:hover {
+  opacity: 1;
+}
+.banner__close:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}</style>

package/dist/ui/banner/cmp.banner.svelte.d.ts

@@ -0,0 +1,44 @@
+import { type IconProp } from '../icon';
+import type { Snippet } from 'svelte';
+type BannerVariant = 'info' | 'success' | 'warning' | 'danger';
+type Props = {
+    /** @default 'info' */
+    variant?: BannerVariant;
+    /** Bold title rendered above the body. */
+    title?: string;
+    /** Show a close button. Hides the banner locally when clicked and fires `on.dismiss`. @default false */
+    dismissible?: boolean;
+    /** Leading icon — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
+    icon?: IconProp;
+    /** Optional inline action area (e.g. "Try again", "View"). */
+    action?: Snippet;
+    /** Body content. */
+    children?: Snippet;
+    on?: {
+        dismiss?: () => void;
+    };
+};
+/**
+ * An attention-grabbing rectangular notice with a colored bg + border per `variant`. Combines an
+ * optional leading icon, an optional title, body content, an optional inline `action` snippet, and an
+ * optional dismiss button. Title color stays neutral (`text--primary`) and body color is `text--secondary` —
+ * the variant color tints the border, the dismiss/close glyph, the icon, and the soft bg.
+ *
+ * Sets `role="alert"` for `variant='danger'` (assertive announcement); other variants use `role="status"`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--banner--padding-block` | Vertical padding | `--sc-kit--space--3` |
+ * | `--sc-kit--banner--padding-inline` | Horizontal padding | `--sc-kit--space--4` |
+ * | `--sc-kit--banner--gap` | Gap between icon / body / action / close | `--sc-kit--space--3` |
+ * | `--sc-kit--banner--border-radius` | Corner radius | `--sc-kit--radius--md` |
+ * | `--sc-kit--banner--background` | Background color | per `variant` (soft / softer) |
+ * | `--sc-kit--banner--border-color` | Border color | per `variant` |
+ * | `--sc-kit--banner--accent-color` | Icon + dismiss glyph color | per `variant` |
+ * | `--sc-kit--banner--title--color` | Title text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--banner--description--color` | Body text color | `--sc-kit--color--text--secondary` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/banner/index.d.ts

@@ -0,0 +1 @@
+export { default as Banner } from './cmp.banner.svelte';

package/dist/ui/banner/index.js

@@ -0,0 +1 @@
+export { default as Banner } from './cmp.banner.svelte';

package/dist/ui/breadcrumb/breadcrumb-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class BreadcrumbLocalization {
+    get navLabel(): string;
+}

package/dist/ui/breadcrumb/breadcrumb-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    navLabel: {
+        en: 'Breadcrumb',
+        no: 'Brødsmuler'
+    }
+};
+export class BreadcrumbLocalization {
+    get navLabel() {
+        return loc.navLabel[AppLocale.current];
+    }
+}

package/dist/ui/breadcrumb/cmp.breadcrumb.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">import { BreadcrumbLocalization } from './breadcrumb-localization';
+let { items, separator = '/' } = $props();
+const localization = new BreadcrumbLocalization();
+</script>
+
+<div class="breadcrumb" role="navigation" aria-label={localization.navLabel}>
+  {#each items as item, i (item.label + i)}
+    {#if i > 0}<span class="breadcrumb__separator" aria-hidden="true">{separator}</span>{/if}
+    {#if i === items.length - 1}
+      <span class="breadcrumb__current" aria-current="page">{item.label}</span>
+    {:else if item.href}
+      <a class="breadcrumb__link" href={item.href} onclick={(e) => item.on?.click?.(e)}>{item.label}</a>
+    {:else if item.on?.click}
+      <button type="button" class="breadcrumb__link" onclick={(e) => item.on?.click?.(e)}>{item.label}</button>
+    {:else}
+      <span class="breadcrumb__current">{item.label}</span>
+    {/if}
+  {/each}
+</div>
+
+<!--
+@component
+A horizontal trail of crumbs ending at the current page. Each non-last item renders as:
+- `<a href>` when `item.href` is set (works for plain navigation; `item.on.click` still fires first
+  and can `preventDefault()` for SPA routing),
+- `<button>` styled like an anchor when only `item.on.click` is set (callback-only mode),
+- plain text `<span>` when neither is set.
+
+The last item is always plain text with `aria-current="page"`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--breadcrumb--gap` | Gap between crumbs and separators | `--sc-kit--space--2` |
+| `--sc-kit--breadcrumb--font-size` | Font size | `--sc-kit--font-size--md` |
+| `--sc-kit--breadcrumb--color` | Separator color | `--sc-kit--color--text--muted` |
+| `--sc-kit--breadcrumb--link--color` | Anchor color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--breadcrumb--link--color--hover` | Anchor color on hover | `--sc-kit--color--accent` |
+| `--sc-kit--breadcrumb--current--color` | Current crumb color | `--sc-kit--color--text--primary` |
+-->
+
+<style>.breadcrumb {
+  --_breadcrumb--gap: var(--sc-kit--breadcrumb--gap, var(--sc-kit--space--2));
+  --_breadcrumb--font-size: var(--sc-kit--breadcrumb--font-size, var(--sc-kit--font-size--md));
+  --_breadcrumb--color: var(--sc-kit--breadcrumb--color, var(--sc-kit--color--text--muted));
+  --_breadcrumb--link-color: var(--sc-kit--breadcrumb--link--color, var(--sc-kit--color--text--secondary));
+  --_breadcrumb--link-color-hover: var(--sc-kit--breadcrumb--link--color--hover, var(--sc-kit--color--accent));
+  --_breadcrumb--current-color: var(--sc-kit--breadcrumb--current--color, var(--sc-kit--color--text--primary));
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--_breadcrumb--gap);
+  font-size: var(--_breadcrumb--font-size);
+  line-height: var(--sc-kit--leading--tight);
+  color: var(--_breadcrumb--color);
+}
+.breadcrumb__link {
+  color: var(--_breadcrumb--link-color);
+  text-decoration: none;
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.breadcrumb__link:hover {
+  color: var(--_breadcrumb--link-color-hover);
+  text-decoration: underline;
+}
+.breadcrumb__link:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+  border-radius: var(--sc-kit--radius--sm);
+}
+.breadcrumb__current {
+  color: var(--_breadcrumb--current-color);
+  font-weight: var(--sc-kit--font-weight--medium);
+}
+.breadcrumb__separator {
+  color: var(--_breadcrumb--color);
+  user-select: none;
+}</style>

package/dist/ui/breadcrumb/cmp.breadcrumb.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { BreadcrumbItem } from './types';
+type Props = {
+    items: BreadcrumbItem[];
+    /** Separator character between crumbs. @default '/' */
+    separator?: string;
+};
+/**
+ * A horizontal trail of crumbs ending at the current page. Each non-last item renders as:
+ * - `<a href>` when `item.href` is set (works for plain navigation; `item.on.click` still fires first
+ * and can `preventDefault()` for SPA routing),
+ * - `<button>` styled like an anchor when only `item.on.click` is set (callback-only mode),
+ * - plain text `<span>` when neither is set.
+ *
+ * The last item is always plain text with `aria-current="page"`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--breadcrumb--gap` | Gap between crumbs and separators | `--sc-kit--space--2` |
+ * | `--sc-kit--breadcrumb--font-size` | Font size | `--sc-kit--font-size--md` |
+ * | `--sc-kit--breadcrumb--color` | Separator color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--breadcrumb--link--color` | Anchor color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--breadcrumb--link--color--hover` | Anchor color on hover | `--sc-kit--color--accent` |
+ * | `--sc-kit--breadcrumb--current--color` | Current crumb color | `--sc-kit--color--text--primary` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

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

package/dist/ui/breadcrumb/index.js

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

package/dist/ui/breadcrumb/types.d.ts

@@ -0,0 +1,14 @@
+export type BreadcrumbItem = {
+    label: string;
+    /** Optional URL. When set on a non-last item, the crumb renders as an `<a href>`. */
+    href?: string | null;
+    /**
+     * Optional click handler. When set on a non-last item WITHOUT an `href`, the crumb renders as a
+     * `<button>` styled like an anchor. When both `href` and `on.click` are set, the anchor's click
+     * event fires the callback before the browser navigates — the consumer can `preventDefault()`
+     * for SPA routing.
+     */
+    on?: {
+        click?: (event: MouseEvent) => void;
+    };
+};