@winkintel/bootstrap-svelte 0.0.1

package/dist/Accordion/accordion.svelte.js

@@ -0,0 +1,139 @@
+import { Context } from '../common/index.js';
+import { SvelteSet } from 'svelte/reactivity';
+/**
+ * Manages the state for the Accordion root component.
+ * Handles the tracking of expanded accordion items and provides methods to toggle them.
+ * Supports both single and multiple expanded items based on the `isMultiple` prop.
+ */
+export class AccordionRootState {
+    props;
+    #expandedItemIds;
+    isMultiple = $derived.by(() => this.props.isMultiple);
+    constructor(props) {
+        this.props = props;
+        this.#expandedItemIds = new SvelteSet();
+        this.isItemExpanded = this.isItemExpanded.bind(this);
+        this.toggleItem = this.toggleItem.bind(this);
+    }
+    isItemExpanded(itemId) {
+        return this.#expandedItemIds.has(itemId);
+    }
+    toggleItem(itemId) {
+        if (this.isItemExpanded(itemId)) {
+            this.#expandedItemIds.delete(itemId);
+        }
+        else {
+            if (!this.isMultiple) {
+                this.#expandedItemIds.clear();
+            }
+            this.#expandedItemIds.add(itemId);
+        }
+    }
+}
+/**
+ * Manages the state for an individual Accordion item.
+ * Tracks expansion state and provides methods to toggle the item.
+ * Initializes its expanded state based on the `isExpanded` prop.
+ * Maintains the relationship between the item and its ARIA controls.
+ */
+export class AccordionItemState {
+    props;
+    root;
+    ariaControls = $state(undefined);
+    isExpanded = $derived.by(() => this.root.isItemExpanded(this.props.id || ''));
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        this.toggle = this.toggle.bind(this);
+        if (this.props.isExpanded) {
+            this.root.toggleItem(this.props.id || '');
+        }
+    }
+    toggle() {
+        this.root.toggleItem(this.props.id || '');
+    }
+}
+/**
+ * Manages the state for an Accordion button component.
+ * Provides interaction logic for the clickable header that toggles the accordion item.
+ * Derives its expanded state from the parent accordion item state.
+ */
+export class AccordionButtonState {
+    props;
+    root;
+    item;
+    isExpanded = $derived.by(() => this.root.isItemExpanded(this.item.props.id || ''));
+    constructor(props, root, item) {
+        this.props = props;
+        this.root = root;
+        this.item = item;
+        this.onclick = this.onclick.bind(this);
+    }
+    onclick() {
+        this.root.toggleItem(this.item.props.id || '');
+    }
+}
+/**
+ * Manages the state for an Accordion collapse component.
+ * Represents the collapsible content section of an accordion item.
+ * Tracks expansion state and sets up proper ARIA relationships with the button.
+ */
+export class AccordionCollapseState {
+    props;
+    root;
+    item;
+    isExpanded = $derived.by(() => this.root.isItemExpanded(this.item.props.id || ''));
+    constructor(props, root, item) {
+        this.props = props;
+        this.root = root;
+        this.item = item;
+        if (!this.props.id) {
+            console.warn('props.id is required for the Accordion.Collapse to set accessibility correctly');
+        }
+        this.item.ariaControls = this.props.id || undefined;
+    }
+}
+const AccordionRootContext = new Context('accordion-root');
+const AccordionItemContext = new Context('accordion-item');
+/**
+ * Creates and provides the Accordion root state through context.
+ * This function should be called in the root Accordion component.
+ * @param props - The properties for the Accordion root component
+ * @returns The created AccordionRootState instance
+ */
+export function initAccordionRootState(props) {
+    const rootState = new AccordionRootState(props);
+    return AccordionRootContext.set(rootState);
+}
+/**
+ * Creates and provides an Accordion item state through context.
+ * This function should be called in each Accordion item component.
+ * @param props - The properties for the Accordion item component
+ * @returns The created AccordionItemState instance
+ */
+export function initAccordionItemState(props) {
+    const rootState = AccordionRootContext.get();
+    return AccordionItemContext.set(new AccordionItemState(props, rootState));
+}
+/**
+ * Creates state for an Accordion button component.
+ * This function should be called in each button component that toggles an Accordion item.
+ * @param props - The properties for the Accordion button component
+ * @returns The created AccordionButtonState instance
+ */
+export function initAccordionButtonState(props) {
+    const rootState = AccordionRootContext.get();
+    const itemState = AccordionItemContext.get();
+    return new AccordionButtonState(props, rootState, itemState);
+}
+/**
+ * Creates state for an Accordion collapse component.
+ * This function should be called in each collapsible content section of an Accordion item.
+ * @param props - The properties for the Accordion collapse component
+ * @returns The created AccordionCollapseState instance
+ */
+export function initAccordionCollapseState(props) {
+    const rootState = AccordionRootContext.get();
+    const itemState = AccordionItemContext.get();
+    return new AccordionCollapseState(props, rootState, itemState);
+}

package/dist/Accordion/composition.d.ts

@@ -0,0 +1,7 @@
+export { default as Body } from './accordion-body.svelte';
+export { default as Button } from './accordion-button.svelte';
+export { default as Collapse } from './accordion-collapse.svelte';
+export { default as Header } from './accordion-header.svelte';
+export { default as Item } from './accordion-item.svelte';
+export { default as Root } from './accordion.svelte';
+export type { AccordionBodyProps as BodyProps, AccordionButtonProps as ButtonProps, AccordionCollapseProps as CollapseProps, AccordionHeaderProps as HeaderProps, AccordionItemProps as ItemProps, AccordionRootProps as RootProps } from './types.js';

package/dist/Accordion/composition.js

@@ -0,0 +1,6 @@
+export { default as Body } from './accordion-body.svelte';
+export { default as Button } from './accordion-button.svelte';
+export { default as Collapse } from './accordion-collapse.svelte';
+export { default as Header } from './accordion-header.svelte';
+export { default as Item } from './accordion-item.svelte';
+export { default as Root } from './accordion.svelte';

package/dist/Accordion/index.d.ts

@@ -0,0 +1 @@
+export * as Accordion from './composition.js';

package/dist/Accordion/index.js

@@ -0,0 +1 @@
+export * as Accordion from './composition.js';

package/dist/Accordion/types.d.ts

@@ -0,0 +1,15 @@
+import type { CollapseRootProps } from '../Collapse/types.js';
+import type { ButtonElement, DivElement, HeadingElement } from '../common/types.js';
+export type AccordionRootProps = DivElement & {
+    isMultiple?: boolean;
+    isFlush?: boolean;
+};
+export type AccordionBodyProps = DivElement & {};
+export type AccordionButtonProps = ButtonElement & {
+    type?: HTMLButtonElement['type'];
+};
+export type AccordionCollapseProps = CollapseRootProps & {};
+export type AccordionHeaderProps = HeadingElement & {};
+export type AccordionItemProps = DivElement & {
+    isExpanded?: boolean;
+};

package/dist/Accordion/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Alert/alert.svelte

@@ -0,0 +1,73 @@
+<!--
+@component
+## Alert
+Bootstrap-styled alert component for displaying messages.
+
+@example
+```svelte
+// Default alert
+<Alert>
+    This is a default alert message.
+</Alert>
+// Success alert
+<Alert colorVariant="success">
+    This is a success alert message.
+</Alert>
+// Warning alert
+<Alert colorVariant="warning">
+    This is a warning alert message.
+</Alert>
+// Dismissible alert
+<Alert isDismissible={true}>
+    This is a dismissible alert message.
+    <CloseButton />
+</Alert>
+// Animated alert
+<Alert isAnimated={true}>
+    This is an animated alert message.
+</Alert>
+// Open alert
+<Alert isOpen={true}>
+    This alert is open.
+</Alert>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the alert.
+- `elementRef` (HTMLDivElement): Optional. Reference to the alert DOM element.
+- `colorVariant` ('primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'): Optional. Sets the color variant of the alert.
+- `isDismissible` (boolean): Optional. If true, adds a close button to the alert.
+- `isAnimated` (boolean): Optional. If true, applies fade transition to the alert.
+- `isOpen` (boolean): Optional. Controls the visibility of the alert.
+- `onClose` (function): Optional. Callback function when the alert is closed.
+- `onClosed` (function): Optional. Callback function when the alert has finished closing.
+-->
+<script lang="ts">import CloseButton from '../CloseButton/close-button.svelte';
+import { uniqueClsx } from '../common/css.js';
+import { noop } from '../common/noop.js';
+import { fade } from 'svelte/transition';
+let { children, class: classValues = 'alert-primary', colorVariant, elementRef = $bindable(null), isDismissible = false, isAnimated = true, isOpen = $bindable(true), onClose = noop, onClosed = noop, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('alert', colorVariant && `alert-${colorVariant}`, {
+    'alert-dismissible': isDismissible,
+    fade: isAnimated,
+    show: isOpen
+}, classValues));
+const handleClick = (_event) => {
+    isOpen = false;
+};
+</script>
+
+{#if isOpen}
+    <div
+        bind:this={elementRef}
+        class={classes}
+        onoutrostart={onClose}
+        onoutroend={onClosed}
+        role="alert"
+        transition:fade={{ duration: isAnimated ? 150 : 0 }}
+        {...restOfProps}>
+        {@render children?.()}
+        {#if isDismissible}
+            <CloseButton onclick={handleClick}></CloseButton>
+        {/if}
+    </div>
+{/if}

package/dist/Alert/alert.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { AlertRootProps } from './types.js';
+/**
+ * ## Alert
+ * Bootstrap-styled alert component for displaying messages.
+ *
+ * @example
+ * ```svelte
+ * // Default alert
+ * <Alert>
+ * This is a default alert message.
+ * </Alert>
+ * // Success alert
+ * <Alert colorVariant="success">
+ * This is a success alert message.
+ * </Alert>
+ * // Warning alert
+ * <Alert colorVariant="warning">
+ * This is a warning alert message.
+ * </Alert>
+ * // Dismissible alert
+ * <Alert isDismissible={true}>
+ * This is a dismissible alert message.
+ * <CloseButton />
+ * </Alert>
+ * // Animated alert
+ * <Alert isAnimated={true}>
+ * This is an animated alert message.
+ * </Alert>
+ * // Open alert
+ * <Alert isOpen={true}>
+ * This alert is open.
+ * </Alert>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the alert.
+ * - `elementRef` (HTMLDivElement): Optional. Reference to the alert DOM element.
+ * - `colorVariant` ('primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'): Optional. Sets the color variant of the alert.
+ * - `isDismissible` (boolean): Optional. If true, adds a close button to the alert.
+ * - `isAnimated` (boolean): Optional. If true, applies fade transition to the alert.
+ * - `isOpen` (boolean): Optional. Controls the visibility of the alert.
+ * - `onClose` (function): Optional. Callback function when the alert is closed.
+ * - `onClosed` (function): Optional. Callback function when the alert has finished closing.
+ */
+declare const Alert: import("svelte").Component<AlertRootProps, {}, "elementRef" | "isOpen">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Alert } from './alert.svelte';
+export * from './types.js';

package/dist/Alert/index.js

@@ -0,0 +1,2 @@
+export { default as Alert } from './alert.svelte';
+export * from './types.js';

package/dist/Alert/types.d.ts

@@ -0,0 +1,11 @@
+import type { BaseColorVariant, DivElement } from '../common/types.js';
+export type AlertColorVariant = BaseColorVariant;
+export type AlertDismissEvent = CustomEvent<void>;
+export type AlertRootProps = DivElement & {
+    colorVariant?: AlertColorVariant;
+    isDismissible?: boolean;
+    isAnimated?: boolean;
+    isOpen?: boolean;
+    onClose?: EventListener;
+    onClosed?: EventListener;
+};

package/dist/Alert/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Badge/badge.svelte

@@ -0,0 +1,42 @@
+<!--
+@component
+## Badge
+A small count and labeling component that can be used to add context or notifications.
+
+@example
+```svelte
+<Badge>New</Badge>
+```
+
+#### Basic badge
+```svelte
+<Badge>Primary</Badge>
+<Badge class="text-bg-secondary">Secondary</Badge>
+```
+
+#### Pill badges
+```svelte
+<Badge isPill={true}>Rounded badge</Badge>
+```
+
+#### Positioned badges
+```svelte
+<Badge position="top-right">99+</Badge>
+```
+
+### Props
+- `class` (string): Optional. CSS classes for styling the badge (default: 'text-bg-primary')
+- `elementRef` (HTMLElement): Optional. Reference to the badge DOM element
+- `isPill` (boolean): Optional. Makes the badge more rounded with pill styling
+- `position` (string): Optional. Position of the badge when used as a notification ('top-right', 'top-left', etc.)
+- `colorVariant` (string): Optional. The badge variant style
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { transformBadgePosition } from './types.js';
+let { children, class: classValues = 'text-bg-primary', colorVariant, elementRef = $bindable(null), isPill = false, position, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('badge', colorVariant, { 'rounded-pill': isPill }, position && transformBadgePosition(position), classValues));
+</script>
+
+<span bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</span>

package/dist/Badge/badge.svelte.d.ts

@@ -0,0 +1,36 @@
+import { type BadgeRootProps } from './types.js';
+/**
+ * ## Badge
+ * A small count and labeling component that can be used to add context or notifications.
+ *
+ * @example
+ * ```svelte
+ * <Badge>New</Badge>
+ * ```
+ *
+ * #### Basic badge
+ * ```svelte
+ * <Badge>Primary</Badge>
+ * <Badge class="text-bg-secondary">Secondary</Badge>
+ * ```
+ *
+ * #### Pill badges
+ * ```svelte
+ * <Badge isPill={true}>Rounded badge</Badge>
+ * ```
+ *
+ * #### Positioned badges
+ * ```svelte
+ * <Badge position="top-right">99+</Badge>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. CSS classes for styling the badge (default: 'text-bg-primary')
+ * - `elementRef` (HTMLElement): Optional. Reference to the badge DOM element
+ * - `isPill` (boolean): Optional. Makes the badge more rounded with pill styling
+ * - `position` (string): Optional. Position of the badge when used as a notification ('top-right', 'top-left', etc.)
+ * - `colorVariant` (string): Optional. The badge variant style
+ */
+declare const Badge: import("svelte").Component<BadgeRootProps, {}, "elementRef">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export * from './types.js';

package/dist/Badge/index.js

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export * from './types.js';

package/dist/Badge/types.d.ts

@@ -0,0 +1,28 @@
+import type { BackgroundSubtleColorVariant, SpanElement, TextBackgroundColorVariant } from '../common/types.js';
+/**
+ * Available visual variants for badges, supporting both standard and subtle color schemes.
+ */
+export type BadgeColorVariant = TextBackgroundColorVariant | BackgroundSubtleColorVariant;
+/**
+ * Defines the possible positioning options for badges when used as positioned elements.
+ * Follows a "vertical-horizontal" naming pattern to indicate placement.
+ */
+export type BadgePosition = 'top-start' | 'top-middle' | 'top-end' | 'middle-start' | 'middle-middle' | 'middle-end' | 'bottom-start' | 'bottom-middle' | 'bottom-end';
+/**
+ * Props for the Badge component root element.
+ * Extends standard span element properties with Badge-specific options.
+ */
+export type BadgeRootProps = SpanElement & {
+    colorVariant?: BadgeColorVariant;
+    isPill?: boolean;
+    position?: BadgePosition;
+};
+/**
+ * Transforms a logical badge position value into the corresponding Bootstrap CSS classes.
+ * Returns a string with position-absolute class combined with the specific positioning
+ * and translation classes required for proper badge placement.
+ *
+ * @param position - The logical position descriptor for the badge
+ * @returns - Bootstrap CSS classes that implement the requested position
+ */
+export declare const transformBadgePosition: (position: BadgePosition) => string;

package/dist/Badge/types.js

@@ -0,0 +1,24 @@
+/**
+ * Transforms a logical badge position value into the corresponding Bootstrap CSS classes.
+ * Returns a string with position-absolute class combined with the specific positioning
+ * and translation classes required for proper badge placement.
+ *
+ * @param position - The logical position descriptor for the badge
+ * @returns - Bootstrap CSS classes that implement the requested position
+ */
+export const transformBadgePosition = (position) => {
+    // Map logical position names to their corresponding Bootstrap utility classes
+    const positionTypeToClassMap = {
+        'top-start': 'top-0 start-0',
+        'top-middle': 'top-0 start-50',
+        'top-end': 'top-0 start-100',
+        'middle-start': 'top-50 start-0',
+        'middle-middle': 'top-50 start-50',
+        'middle-end': 'top-50 start-100',
+        'bottom-start': 'top-100 start-0',
+        'bottom-middle': 'top-100 start-50',
+        'bottom-end': 'top-100 start-100'
+    };
+    const positionClass = positionTypeToClassMap[position];
+    return `position-absolute ${positionClass} translate-middle`;
+};

package/dist/Breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,66 @@
+<!--
+@component
+## Breadcrumb.Item
+Breadcrumb item component for use within a Breadcrumb.Root.
+
+@example
+```svelte
+<Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+```
+
+@example
+```svelte
+<Breadcrumb.Item href="/library">Library</Breadcrumb.Item>
+```
+
+@example
+```svelte
+<Breadcrumb.Item isActive={true}>Current Page</Breadcrumb.Item>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+- `href` (string): Optional. URL for the breadcrumb item. Defaults to "#!".
+- `id` (string): Optional. Unique ID for the breadcrumb item element.
+- `isActive` (boolean): Optional. Whether the breadcrumb item is active (current page). Defaults to false.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { BreadcrumbItemState, initBreadcrumbItemState } from './breadcrumb.svelte.js';
+// Generate a unique ID for the component, in case one is not provided
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), href = '#!', id = `breadcrumb-item-${uid}`, isActive = false, ...restOfProps } = $props();
+const itemState = initBreadcrumbItemState({
+    get id() {
+        return id;
+    },
+    get isActive() {
+        return isActive;
+    }
+});
+let previousIsActive;
+let classes = $derived(uniqueClsx('breadcrumb-item', {
+    active: itemState.isActive
+}, classValues));
+$effect(() => {
+    // Update the state when the isActive prop changes
+    if (id && previousIsActive !== undefined && previousIsActive !== isActive) {
+        const isItemActive = itemState.root.isBreadcrumbItemActive(id);
+        if (isActive && !isItemActive) {
+            itemState.root.setBreadcrumbItemActive(id);
+        }
+        else if (!isActive && isItemActive) {
+            itemState.root.setBreadcrumbItemActive('');
+        }
+    }
+    previousIsActive = isActive;
+});
+</script>
+
+<li aria-current={isActive ? 'page' : undefined} bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {#if isActive}
+        {@render children?.()}
+    {:else}
+        <a {href}>{@render children?.()}</a>
+    {/if}
+</li>

package/dist/Breadcrumb/breadcrumb-item.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Breadcrumb } from './index.js';
+/**
+ * ## Breadcrumb.Item
+ * Breadcrumb item component for use within a Breadcrumb.Root.
+ *
+ * @example
+ * ```svelte
+ * <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Breadcrumb.Item href="/library">Library</Breadcrumb.Item>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Breadcrumb.Item isActive={true}>Current Page</Breadcrumb.Item>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ * - `href` (string): Optional. URL for the breadcrumb item. Defaults to "#!".
+ * - `id` (string): Optional. Unique ID for the breadcrumb item element.
+ * - `isActive` (boolean): Optional. Whether the breadcrumb item is active (current page). Defaults to false.
+ */
+declare const BreadcrumbItem: import("svelte").Component<Breadcrumb.ItemProps, {}, "elementRef">;
+type BreadcrumbItem = ReturnType<typeof BreadcrumbItem>;
+export default BreadcrumbItem;

package/dist/Breadcrumb/breadcrumb.svelte

@@ -0,0 +1,57 @@
+<!--
+@component
+## Breadcrumb.Root
+Root breadcrumb component that contains breadcrumb items.
+
+@example
+```svelte
+<Breadcrumb.Root>
+    <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+    <Breadcrumb.Item href="/library">Library</Breadcrumb.Item>
+    <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
+</Breadcrumb.Root>
+```
+
+@example
+```svelte
+<Breadcrumb.Root divider="›">
+    <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+    <Breadcrumb.Item href="/library">Library</Breadcrumb.Item>
+    <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
+</Breadcrumb.Root>
+```
+
+### Props
+- `ariaLabel` (string): Optional. ARIA label for the breadcrumb navigation. Defaults to "breadcrumb".
+- `class` (string): Optional. Additional CSS classes.
+- `divider` (string): Optional. Custom divider character or string.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+- `id` (string): Optional. Unique ID for the breadcrumb element.
+- `style` (string): Optional. Additional inline styles.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { BreadcrumbRootState, initBreadcrumbRootState } from './breadcrumb.svelte.js';
+// Generate a unique ID for the component, in case one is not provided
+const uid = $props.id();
+let { ariaLabel = 'breadcrumb', children, class: classValues, divider, elementRef = $bindable(null), id = `breadcrumb-${uid}`, style, ...restOfProps } = $props();
+const _rootState = initBreadcrumbRootState({
+    get id() {
+        return id;
+    }
+});
+let classes = $derived(uniqueClsx('breadcrumb', classValues));
+let styles = $derived.by(() => {
+    if (divider === undefined && style === undefined) {
+        return undefined;
+    }
+    return divider !== undefined
+        ? `--bs-breadcrumb-divider: ${divider.startsWith('url') ? divider : `'${divider}';${style || ''}`}`
+        : style || undefined;
+});
+</script>
+
+<nav aria-label={ariaLabel} style={styles}>
+    <ol bind:this={elementRef} class={classes} {id} {...restOfProps}>
+        {@render children?.()}
+    </ol>
+</nav>

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

@@ -0,0 +1,34 @@
+import type { Breadcrumb } from './index.js';
+/**
+ * ## Breadcrumb.Root
+ * Root breadcrumb component that contains breadcrumb items.
+ *
+ * @example
+ * ```svelte
+ * <Breadcrumb.Root>
+ * <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+ * <Breadcrumb.Item href="/library">Library</Breadcrumb.Item>
+ * <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
+ * </Breadcrumb.Root>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Breadcrumb.Root divider="›">
+ * <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+ * <Breadcrumb.Item href="/library">Library</Breadcrumb.Item>
+ * <Breadcrumb.Item isActive={true}>Data</Breadcrumb.Item>
+ * </Breadcrumb.Root>
+ * ```
+ *
+ * ### Props
+ * - `ariaLabel` (string): Optional. ARIA label for the breadcrumb navigation. Defaults to "breadcrumb".
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `divider` (string): Optional. Custom divider character or string.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ * - `id` (string): Optional. Unique ID for the breadcrumb element.
+ * - `style` (string): Optional. Additional inline styles.
+ */
+declare const Breadcrumb: import("svelte").Component<Breadcrumb.RootProps, {}, "elementRef">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;