feat(svelte): updated Breadcrumbs components

Author: nolimits4web

src/svelte/components/breadcrumbs-collapsed.svelte

@@ -1,21 +1,16 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
-  import { classNames, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames } from '../shared/utils.js';
 
-  let className = undefined;
-  export { className as class };
+  let {
+    class: className,
+    children,
+    ...restProps
+  } = $props();
 
-  $: classes = classNames(className, 'breadcrumbs-collapsed');
-
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  function onClick() {
-    emit('click');
-  }
+  const classes = $derived(classNames(className, 'breadcrumbs-collapsed'));
 </script>
 
-<div class={classes} {...restProps($$restProps)} on:click={onClick}>
-  <span />
-  <slot />
+<div class={classes} {...restProps}>
+  <span></span>
+  {@render children?.()}
 </div>

src/svelte/components/breadcrumbs-item.svelte

@@ -1,15 +1,16 @@
 <script>
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
 
-  export let active = false;
+  let {
+    class: className,
+    active = false,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  $: classes = classNames(className, 'breadcrumbs-item', active && 'breadcrumbs-item-active');
+  const classes = $derived(classNames(className, 'breadcrumbs-item', active && 'breadcrumbs-item-active'));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

src/svelte/components/breadcrumbs-separator.svelte

@@ -1,11 +1,15 @@
 <script>
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
 
-  let className = undefined;
-  export { className as class };
+  let {
+    class: className,
+    children,
+    ...restProps
+  } = $props();
 
-  $: classes = classNames(className, 'breadcrumbs-separator');
+  const classes = $derived(classNames(className, 'breadcrumbs-separator'));
 </script>
 
-<div class={classes} {...restProps($$restProps)} />
+<div class={classes} {...restProps}>
+  {@render children?.()}
+</div>

src/svelte/components/breadcrumbs.svelte

@@ -1,13 +1,15 @@
 <script>
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
 
-  let className = undefined;
-  export { className as class };
+  let {
+    class: className,
+    children,
+    ...restProps
+  } = $props();
 
-  $: classes = classNames(className, 'breadcrumbs');
+  const classes = $derived(classNames(className, 'breadcrumbs'));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>