@casinogate/ui 1.4.0 → 1.5.0

package/dist/assets/css/theme.css

@@ -55,6 +55,7 @@
   --color-fg-white: var(--cg-ui-palette-neutral-0);
   --color-fg-error: var(--cg-ui-palette-system-error-100);
   --color-fg-success: var(--cg-ui-palette-system-success-100);
+  --color-fg-warning: var(--cg-ui-palette-system-warning-100);
 
   /* Stroke */
   --color-stroke-default: var(--cg-ui-palette-neutral-40);
@@ -120,6 +121,7 @@
   --shadow-switch-thumb: var(--cg-ui-shadow-switch-thumb);
   --shadow-segment-thumb: var(--cg-ui-shadow-segment-item);
   --shadow-popover: var(--cg-ui-shadow-popover);
+  --shadow-select: var(--cg-ui-shadow-select);
 
   /* Font sizes, Line heights */
   --text-heading: var(--cg-ui-fz-heading);
@@ -200,6 +202,7 @@
   --cg-ui-shadow-switch-thumb: 0px 1px 1px 0px hsla(0, 0%, 0%, 0.25);
   --cg-ui-shadow-segment-item: 0px 0px 4px 0px hsla(0, 0%, 0%, 0.1);
   --cg-ui-shadow-popover: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  --cg-ui-shadow-select: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.25);
 
   /* Font sizes, Line heights */
   --cg-ui-fz-base: 16;
@@ -221,6 +224,41 @@
 
   --cg-ui-fz-caption-2: calc(12 / var(--cg-ui-fz-base) * 1rem);
   --cg-ui-lh-caption-2: calc(16 / var(--cg-ui-fz-base) * 1rem);
+
+  /* Z-index */
+  --cg-ui-z-index-base: 0;
+  --cg-ui-z-index-content: 1;
+
+  /* Sticky/Fixed elements */
+  --cg-ui-z-index-sticky: 10;
+  --cg-ui-z-index-fixed: 20;
+
+  /* Interactive overlays (low priority) */
+  --cg-ui-z-index-dropdown: 50;
+  --cg-ui-z-index-select: 50;
+
+  /* Interactive overlays (medium priority) */
+  --cg-ui-z-index-popover: 100;
+  --cg-ui-z-index-collapsible: 100;
+
+  /* Tooltips */
+  --cg-ui-z-index-tooltip: 200;
+
+  /* Navigation (if floating/overlay) */
+  --cg-ui-z-index-navigation: 250;
+
+  /* Modals & Dialogs */
+  --cg-ui-z-index-modal: 300;
+  --cg-ui-z-index-dialog: 300;
+  --cg-ui-z-index-backdrop: 300;
+
+  /* Notifications & Toasts */
+  --cg-ui-z-index-toast: 400;
+  --cg-ui-z-index-notification: 400;
+
+  /* Critical UI (highest priority) */
+  --cg-ui-z-index-critical: 500;
+  --cg-ui-z-index-loading: 500;
 }
 
 .dark,

package/dist/components/badge/badge.stories.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" module>
+  import { Icon } from '../icons/index.js';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+  import type { ComponentProps } from 'svelte';
+  import { Badge } from './index.js';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['variant', 'rounded', 'color', 'size', 'disabled'],
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Badge',
+    component: Badge.Root,
+    tags: ['autodocs'],
+    parameters,
+  });
+
+  type Args = ComponentProps<typeof Badge.Root>;
+
+  const args: Args = {
+    rounded: 'full',
+    variant: 'fill',
+    color: 'neutral',
+    size: 'xs',
+    disabled: false,
+  };
+</script>
+
+<Story name="Basic" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <Badge.Root {...args}>Badge</Badge.Root>
+  {/snippet}
+</Story>
+
+<Story name="Variants" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <div class="cgui:flex cgui:gap-2 cgui:flex-col cgui:items-center">
+      <div class="cgui:flex cgui:gap-2 cgui:flex-wrap cgui:w-full">
+        <Badge.Root {...args} variant="fill">Badge</Badge.Root>
+        <Badge.Root {...args} variant="fill" color="destructive">Destructive</Badge.Root>
+        <Badge.Root {...args} variant="fill" color="warning">Warning</Badge.Root>
+        <Badge.Root {...args} variant="fill" color="success">Success</Badge.Root>
+        <Badge.Root {...args} variant="fill" color="info">Info</Badge.Root>
+      </div>
+
+      <div class="cgui:flex cgui:gap-2 cgui:flex-wrap cgui:w-full">
+        <Badge.Root {...args} variant="outline">Badge</Badge.Root>
+        <Badge.Root {...args} variant="outline" color="destructive">Destructive</Badge.Root>
+        <Badge.Root {...args} variant="outline" color="warning">Warning</Badge.Root>
+        <Badge.Root {...args} variant="outline" color="success">Success</Badge.Root>
+        <Badge.Root {...args} variant="outline" color="info">Info</Badge.Root>
+      </div>
+
+      <div class="cgui:flex cgui:gap-2 cgui:flex-wrap cgui:w-full">
+        <Badge.Root {...args} variant="soft">Badge</Badge.Root>
+        <Badge.Root {...args} variant="soft" color="destructive">Destructive</Badge.Root>
+        <Badge.Root {...args} variant="soft" color="warning">Warning</Badge.Root>
+        <Badge.Root {...args} variant="soft" color="success">Success</Badge.Root>
+        <Badge.Root {...args} variant="soft" color="info">Info</Badge.Root>
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Link" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <Badge.Root {...args} variant="fill" color="neutral" href="https://www.google.com">GOOGLE</Badge.Root>
+  {/snippet}
+</Story>
+
+<Story name="With Icon" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <Badge.Root {...args}>
+      GOOGLE
+      <Icon.Info />
+    </Badge.Root>
+  {/snippet}
+</Story>

package/dist/components/badge/badge.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import { Badge } from './index.js';
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Badge: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Badge = InstanceType<typeof Badge>;
+export default Badge;

package/dist/components/badge/badge.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { cn } from '../../internal/utils/common.js';
+  import { badgeVariants } from './styles.js';
+  import type { BadgeProps } from './types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    href,
+    children,
+    as = 'span',
+    variant = 'fill',
+    color = 'neutral',
+    rounded = 'full',
+    size = 'xs',
+    disabled = false,
+    ...restProps
+  }: BadgeProps = $props();
+</script>
+
+<svelte:element
+  this={href ? 'a' : as}
+  bind:this={ref}
+  class={cn(badgeVariants({ variant, color, rounded, size, disabled }), className)}
+  {href}
+  data-slot="badge"
+  {...restProps}
+>
+  {@render children?.()}
+</svelte:element>

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

@@ -0,0 +1,4 @@
+import type { BadgeProps } from './types.js';
+declare const Badge: import("svelte").Component<BadgeProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/badge/exports.d.ts

@@ -0,0 +1 @@
+export { default as Root } from './badge.svelte';

package/dist/components/badge/exports.js

@@ -0,0 +1 @@
+export { default as Root } from './badge.svelte';

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

@@ -0,0 +1,2 @@
+export * as Badge from './exports.js';
+export type { BadgeProps } from './types.js';

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export * as Badge from './exports.js';

package/dist/components/badge/styles.d.ts

@@ -0,0 +1,99 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        fill: never[];
+        outline: string[];
+        soft: string[];
+    };
+    color: {
+        neutral: never[];
+        destructive: never[];
+        warning: never[];
+        success: never[];
+        info: never[];
+    };
+    rounded: {
+        none: never[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+    size: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        fill: never[];
+        outline: string[];
+        soft: string[];
+    };
+    color: {
+        neutral: never[];
+        destructive: never[];
+        warning: never[];
+        success: never[];
+        info: never[];
+    };
+    rounded: {
+        none: never[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+    size: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        fill: never[];
+        outline: string[];
+        soft: string[];
+    };
+    color: {
+        neutral: never[];
+        destructive: never[];
+        warning: never[];
+        success: never[];
+        info: never[];
+    };
+    rounded: {
+        none: never[];
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+    };
+    size: {
+        xs: string[];
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+    };
+    disabled: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/dist/components/badge/styles.js

@@ -0,0 +1,126 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const badgeVariants = tv({
+    base: [
+        'cgui:inline-flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:text-center cgui:overflow-hidden cgui:shrink-0 cgui:w-fit cgui:whitespace-nowrap',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:select-none cgui:font-normal cgui:text-caption-2',
+        'cgui:[&>svg]:pointer-events-none',
+    ],
+    variants: {
+        variant: {
+            fill: [],
+            outline: ['cgui:border'],
+            soft: ['cgui:border'],
+        },
+        color: {
+            neutral: [],
+            destructive: [],
+            warning: [],
+            success: [],
+            info: [],
+        },
+        rounded: {
+            none: [],
+            xs: ['cgui:rounded-xs'],
+            sm: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+            xl: ['cgui:rounded-xl'],
+            full: ['cgui:rounded-full'],
+        },
+        size: {
+            xs: ['cgui:text-caption-2', 'cgui:px-1.5 cgui:py-0.5', 'cgui:[&>svg]:size-5'],
+            sm: ['cgui:text-caption', 'cgui:px-2 cgui:py-0.5', 'cgui:[&>svg]:size-5.5'],
+            md: ['cgui:text-body-2', 'cgui:px-2.5 cgui:py-0.5', 'cgui:[&>svg]:size-6'],
+            lg: ['cgui:text-body', 'cgui:px-3 cgui:py-1', 'cgui:[&>svg]:size-6.5'],
+            xl: ['cgui:text-heading-2', 'cgui:px-3.5 cgui:py-1', 'cgui:[&>svg]:size-7'],
+        },
+        disabled: {
+            true: ['cgui:opacity-50 cgui:cursor-not-allowed'],
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'fill',
+            color: 'neutral',
+            class: ['cgui:bg-surface-light cgui:text-fg-darkest'],
+        },
+        {
+            variant: 'soft',
+            color: 'neutral',
+            class: ['cgui:bg-surface-light/50 cgui:border-stroke-default cgui:text-fg-darkest'],
+        },
+        {
+            variant: 'outline',
+            color: 'neutral',
+            class: ['cgui:bg-transparent cgui:border-stroke-default cgui:text-fg-darkest'],
+        },
+        {
+            variant: 'fill',
+            color: 'destructive',
+            class: ['cgui:bg-state-error  cgui:text-fg-white'],
+        },
+        {
+            variant: 'soft',
+            color: 'destructive',
+            class: ['cgui:bg-state-error-light cgui:border-stroke-error cgui:text-fg-error'],
+        },
+        {
+            variant: 'outline',
+            color: 'destructive',
+            class: ['cgui:bg-transparent cgui:border-stroke-error cgui:text-fg-error'],
+        },
+        {
+            variant: 'fill',
+            color: 'warning',
+            class: ['cgui:bg-state-warning cgui:text-fg-white'],
+        },
+        {
+            variant: 'soft',
+            color: 'warning',
+            class: ['cgui:bg-state-warning-light cgui:border-stroke-warning cgui:text-fg-warning'],
+        },
+        {
+            variant: 'outline',
+            color: 'warning',
+            class: ['cgui:bg-transparent cgui:border-stroke-warning cgui:text-fg-warning'],
+        },
+        {
+            variant: 'fill',
+            color: 'success',
+            class: ['cgui:bg-state-success cgui:text-fg-white'],
+        },
+        {
+            variant: 'soft',
+            color: 'success',
+            class: ['cgui:bg-state-success-light cgui:border-stroke-success cgui:text-fg-success'],
+        },
+        {
+            variant: 'outline',
+            color: 'success',
+            class: ['cgui:bg-transparent cgui:border-stroke-success cgui:text-fg-success'],
+        },
+        {
+            variant: 'fill',
+            color: 'info',
+            class: ['cgui:bg-state-info cgui:text-fg-white'],
+        },
+        {
+            variant: 'soft',
+            color: 'info',
+            class: ['cgui:bg-state-info-light cgui:border-stroke-info cgui:text-fg-info'],
+        },
+        {
+            variant: 'outline',
+            color: 'info',
+            class: ['cgui:bg-transparent cgui:border-stroke-info cgui:text-fg-info'],
+        },
+    ],
+    defaultVariants: {
+        variant: 'fill',
+        color: 'neutral',
+        rounded: 'full',
+        size: 'xs',
+        disabled: false,
+    },
+});

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

@@ -0,0 +1,8 @@
+import type { PrimitiveAnchorAttributes } from '../../internal/types/html-attributes.js';
+import type { WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+import type { BadgeVariants } from './styles.js';
+type BadgePropsWithoutHTML = WithElementRef<WithChildren<{
+    as?: keyof HTMLElementTagNameMap;
+}>> & BadgeVariants;
+export type BadgeProps = BadgePropsWithoutHTML & Without<PrimitiveAnchorAttributes, BadgePropsWithoutHTML>;
+export {};

package/dist/components/badge/types.js

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

package/dist/components/breadcrumb/breadcrumb.stories.svelte

@@ -0,0 +1,60 @@
+<script lang="ts" module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+  import type { ComponentProps } from 'svelte';
+  import BreadcrumbRoot from './components/breadcrumb.root.svelte';
+  import { Breadcrumb, BreadcrumbPrimitive } from './index.js';
+
+  const parameters: Parameters = {
+    controls: {
+      include: [],
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Breadcrumb',
+    component: BreadcrumbRoot,
+    tags: ['autodocs'],
+    parameters,
+  });
+
+  type Args = ComponentProps<typeof BreadcrumbRoot>;
+
+  const args: Args = {};
+</script>
+
+<Story name="Primitive" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <BreadcrumbPrimitive.Root {...args}>
+      <BreadcrumbPrimitive.List>
+        <BreadcrumbPrimitive.Item>
+          <BreadcrumbPrimitive.Link href="#">Home</BreadcrumbPrimitive.Link>
+        </BreadcrumbPrimitive.Item>
+        <BreadcrumbPrimitive.Separator />
+        <BreadcrumbPrimitive.Item>
+          <BreadcrumbPrimitive.Link href="#">Home 2</BreadcrumbPrimitive.Link>
+        </BreadcrumbPrimitive.Item>
+        <BreadcrumbPrimitive.Separator />
+        <BreadcrumbPrimitive.Item>
+          <BreadcrumbPrimitive.Link href="#">Home 3</BreadcrumbPrimitive.Link>
+        </BreadcrumbPrimitive.Item>
+        <BreadcrumbPrimitive.Separator />
+        <BreadcrumbPrimitive.Item>
+          <BreadcrumbPrimitive.Page>Home 4</BreadcrumbPrimitive.Page>
+        </BreadcrumbPrimitive.Item>
+      </BreadcrumbPrimitive.List>
+    </BreadcrumbPrimitive.Root>
+  {/snippet}
+</Story>
+
+<Story name="Preset" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <Breadcrumb.Root {...args} path="Home/Home 2/Home 3/Home 4" />
+  {/snippet}
+</Story>
+
+<Story name="Preset With Array Path" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <Breadcrumb.Root {...args} path={['Home', 'Home 2', 'Home 3', 'Home 4']} />
+  {/snippet}
+</Story>

package/dist/components/breadcrumb/breadcrumb.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import { Breadcrumb } from './index.js';
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Breadcrumb = InstanceType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import Item from './components/breadcrumb.item.svelte';
+  import Link from './components/breadcrumb.link.svelte';
+  import List from './components/breadcrumb.list.svelte';
+  import Page from './components/breadcrumb.page.svelte';
+  import Root from './components/breadcrumb.root.svelte';
+  import Separator from './components/breadcrumb.separator.svelte';
+  import type { BreadcrumbProps } from './types.js';
+
+  let { children, ref = $bindable(null), path, ...restProps }: BreadcrumbProps = $props();
+
+  const items = $derived(Array.isArray(path) ? path : path.split('/').filter(Boolean));
+</script>
+
+<Root bind:ref {...restProps}>
+  <List>
+    {#each items as item, idx}
+      {@const isLast = idx === items.length - 1}
+
+      {#if isLast}
+        <Item>
+          <Page>{item}</Page>
+        </Item>
+      {:else}
+        <Item>
+          <Link href={item}>{item}</Link>
+        </Item>
+        <Separator />
+      {/if}
+    {/each}
+  </List>
+</Root>

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

@@ -0,0 +1,4 @@
+import type { BreadcrumbProps } from './types.js';
+declare const Breadcrumb: import("svelte").Component<BreadcrumbProps, {}, "ref">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/breadcrumb/components/breadcrumb.item.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { BreadcrumbStylesContext } from '../styles.js';
+  import type { BreadcrumbItemProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: BreadcrumbItemProps = $props();
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="breadcrumb-item"
+  class={cn(BreadcrumbStylesContext.get().current.item(), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</li>

package/dist/components/breadcrumb/components/breadcrumb.item.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BreadcrumbItemProps } from '../types.js';
+declare const Breadcrumb: import("svelte").Component<BreadcrumbItemProps, {}, "ref">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/breadcrumb/components/breadcrumb.link.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { BreadcrumbStylesContext } from '../styles.js';
+  import type { BreadcrumbLinkProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    href = undefined,
+    child,
+    children,
+    ...restProps
+  }: BreadcrumbLinkProps = $props();
+
+  const attrs = $derived({
+    'data-slot': 'breadcrumb-link',
+    class: cn(BreadcrumbStylesContext.get().current.link(), className),
+    href,
+    ...restProps,
+  });
+</script>
+
+{#if child}
+  {@render child({ props: attrs })}
+{:else}
+  <a bind:this={ref} {...attrs}>
+    {@render children?.()}
+  </a>
+{/if}

package/dist/components/breadcrumb/components/breadcrumb.link.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BreadcrumbLinkProps } from '../types.js';
+declare const Breadcrumb: import("svelte").Component<BreadcrumbLinkProps, {}, "ref">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/breadcrumb/components/breadcrumb.list.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { BreadcrumbStylesContext } from '../styles.js';
+  import type { BreadcrumbListProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: BreadcrumbListProps = $props();
+</script>
+
+<ol
+  bind:this={ref}
+  data-slot="breadcrumb-list"
+  class={cn(BreadcrumbStylesContext.get().current.list(), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</ol>

package/dist/components/breadcrumb/components/breadcrumb.list.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BreadcrumbListProps } from '../types.js';
+declare const Breadcrumb: import("svelte").Component<BreadcrumbListProps, {}, "ref">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;