component: Breadcrumb

src/lib/components/accordion/AccordionHeader.svelte

@@ -50,8 +50,8 @@
 
   const headerCtx = headerContext.set(writable());
 
-  $: headerCtx.update(($headerCtx) => ({
-    ...$headerCtx,
+  $: headerCtx.update(($ctx) => ({
+    ...$ctx,
   }));
 </script>
 

src/lib/components/accordion/AccordionItem.svelte

@@ -59,8 +59,8 @@
 
   const itemCtx = itemContext.set(writable());
 
-  $: itemCtx.update(($itemCtx) => ({
-    ...$itemCtx,
+  $: itemCtx.update(($ctx) => ({
+    ...$ctx,
     disabled,
   }));
 

src/lib/components/accordion/AccordionRoot.svelte

@@ -61,8 +61,8 @@
 
   const rootCtx = rootContext.set(writable());
 
-  $: rootCtx.update(($rootCtx) => ({
-    ...$rootCtx,
+  $: rootCtx.update(($ctx) => ({
+    ...$ctx,
     disabled,
   }));
 </script>

src/lib/components/alert-dialog/AlertDialogContent.svelte

@@ -55,8 +55,8 @@
         lg: ['lg:max-w-2xl'],
       },
       variant: {
+        danger: ['border-red-500 bg-red-50'],
         default: ['border-border bg-background'],
-        destructive: ['border-red-500 bg-red-50'],
       },
     },
   });
@@ -98,8 +98,8 @@
 
   const contentCtx = contentContext.set(writable());
 
-  contentCtx.update(($contentCtx) => ({
-    ...$contentCtx,
+  contentCtx.update(($ctx) => ({
+    ...$ctx,
   }));
 
   const rootCtx = rootContext.get();

src/lib/components/alert-dialog/AlertDialogDescription.svelte

@@ -29,8 +29,8 @@
     base: ['text-sm'],
     variants: {
       variant: {
+        danger: ['text-red-500'],
         default: ['text-muted-foreground'],
-        destructive: ['text-red-500'],
       },
     },
   });

src/lib/components/alert-dialog/AlertDialogPortal.svelte

@@ -49,8 +49,8 @@
 
   const portalCtx = portalContext.set(writable());
 
-  $: portalCtx.update(($portalCtx) => ({
-    ...$portalCtx,
+  $: portalCtx.update(($ctx) => ({
+    ...$ctx,
   }));
 </script>
 

src/lib/components/alert-dialog/AlertDialogRoot.svelte

@@ -59,8 +59,8 @@
         lg: [''],
       },
       variant: {
+        danger: [''],
         default: [''],
-        destructive: [''],
       },
     },
   });
@@ -87,8 +87,8 @@
 
   const rootCtx = rootContext.set(writable());
 
-  $: rootCtx.update(($rootCtx) => ({
-    ...$rootCtx,
+  $: rootCtx.update(($ctx) => ({
+    ...$ctx,
     breakpoint,
     variant,
   }));

src/lib/components/alert-dialog/AlertDialogTitle.svelte

@@ -34,8 +34,8 @@
     base: ['text-lg font-semibold'],
     variants: {
       variant: {
+        danger: ['text-red-500'],
         default: ['text-foreground'],
-        destructive: ['text-red-500'],
       },
     },
   });

src/lib/components/alert/AlertDescription.svelte

@@ -28,8 +28,8 @@
     base: ['text-sm'],
     variants: {
       variant: {
+        danger: ['text-red-500'],
         default: ['text-foreground'],
-        destructive: ['text-red-500'],
       },
     },
   });

src/lib/components/alert/AlertRoot.svelte

@@ -43,8 +43,8 @@
     },
     variants: {
       variant: {
+        danger: ['border-red-500 bg-red-50'],
         default: ['border-border bg-background'],
-        destructive: ['border-red-500 bg-red-50'],
       },
     },
   });
@@ -61,8 +61,8 @@
 
   const rootCtx = rootContext.set(writable());
 
-  $: rootCtx.update(($rootCtx) => ({
-    ...$rootCtx,
+  $: rootCtx.update(($ctx) => ({
+    ...$ctx,
     variant,
   }));
 </script>

src/lib/components/alert/AlertTitle.svelte

@@ -33,8 +33,8 @@
     base: ['mb-2 font-medium leading-none tracking-tight'],
     variants: {
       variant: {
+        danger: ['text-red-500'],
         default: ['text-foreground'],
-        destructive: ['text-red-500'],
       },
     },
   });

src/lib/components/breadcrumb/BreadcrumbEllipsis.svelte

@@ -3,7 +3,9 @@
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
-  import type { EmptyObject } from '$lib/utils/types.js';
+  import type { AnyObject, EmptyObject } from '$lib/utils/types.js';
+
+  import { itemContext } from './context.js';
 
   /**
    * The attributes of the ellipsis.
@@ -25,7 +27,9 @@
    * The slots of the ellipsis.
    */
   export type Slots = {
-    default: EmptyObject;
+    default: {
+      builder: AnyObject;
+    };
   };
 
   /**
@@ -45,24 +49,60 @@
   export let el: Props['el'] = undefined;
 
   $: attributes = $$restProps as Attributes;
+
+  $: builder = {
+    role: 'presentation',
+    'aria-hidden': true,
+  };
+
+  const itemCtx = itemContext.get();
+
+  if (!itemCtx) {
+    throw new Error('Breadcrumb.Ellipsis must be used within a Breadcrumb.Item component.');
+  }
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+An ellipsis of a breadcrumb item component.
+
+Must be used within a `Breadcrumb.Item` component.
+
+### Attributes
+
+Accepts the attributes of a `span` element.
+
+### Events
+
+None.
+
+### Props
+
+- `asChild` - Whether to delegate rendering the element to your own custom element.
+- `el` - Bind to the underlying DOM element of the component.
+
+### Slots
+
+- `default` - The default slot.
+  - `builder` - The builder object, provided when `asChild=true`.
+-->
+
 {#if asChild}
-  <slot />
+  <slot builder="{builder}" />
 {:else}
   <span
     {...attributes}
+    {...builder}
     class="{ellipsisStyles({
       class: attributes.class,
     })}"
-    role="presentation"
-    aria-hidden="true"
     bind:this="{el}"
   >
-    <slot>
+    <slot builder="{builder}">
       <EllipsisIcon class="size-4" />
 
       <span class="sr-only">More</span>

src/lib/components/breadcrumb/BreadcrumbItem.svelte

@@ -1,8 +1,11 @@
 <script context="module" lang="ts">
   import type { SvelteHTMLElements } from 'svelte/elements';
+  import { writable } from 'svelte/store';
   import { tv } from 'tailwind-variants';
 
-  import type { EmptyObject } from '$lib/utils/types.js';
+  import type { AnyObject, EmptyObject } from '$lib/utils/types.js';
+
+  import { itemContext, listContext } from './context.js';
 
   /**
    * The attributes of the item.
@@ -24,7 +27,9 @@
    * The slots of the item.
    */
   export type Slots = {
-    default: EmptyObject;
+    default: {
+      builder: AnyObject;
+    };
   };
 
   /**
@@ -44,21 +49,62 @@
   export let el: Props['el'] = undefined;
 
   $: attributes = $$restProps as Attributes;
+
+  $: builder = {};
+
+  const listCtx = listContext.get();
+
+  if (!listCtx) {
+    throw new Error('Breadcrumb.Item must be used within a Breadcrumb.List component.');
+  }
+
+  const itemCtx = itemContext.set(writable());
+
+  itemCtx.update(($ctx) => ({
+    ...$ctx,
+  }));
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+An item of the breadcrumb component.
+
+Must be used within a `Breadcrumb.List` component.
+
+### Attributes
+
+Accepts the attributes of a `li` element.
+
+### Events
+
+None.
+
+### Props
+
+- `asChild` - Whether to delegate rendering the element to your own custom element.
+- `el` - Bind to the underlying DOM element of the component.
+
+### Slots
+
+- `default` - The default slot.
+  - `builder` - The builder object, provided when `asChild=true`.
+-->
+
 {#if asChild}
-  <slot />
+  <slot builder="{builder}" />
 {:else}
   <li
     {...attributes}
+    {...builder}
     class="{itemStyles({
       class: attributes.class,
     })}"
     bind:this="{el}"
   >
-    <slot />
+    <slot builder="{builder}" />
   </li>
 {/if}