@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.5

package/src/components/alert-dialog.tsx

@@ -1,12 +1,9 @@
-"use client";
-
-import type { VariantProps } from "#/lib/utils";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
+import { Button } from "#/components/button";
+import type { ButtonProps } from "#/components/button";
 import { cn } from "#/lib/utils";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-
-import { buttonVariants } from "#/variants/button";
 
 /* -----------------------------------------------------------------------------
  * Component: AlertDialog
@@ -48,60 +45,30 @@ function AlertDialogTrigger({ ...props }: AlertDialogTriggerProps): JSX.Element
  * @since 0.3.16-canary.0
  */
 interface AlertDialogContentProps extends ComponentProps<typeof AlertDialogPrimitive.Content> {
-  classNames?: {
-    content?: string;
-    overlay?: string;
-    wrapper?: string;
-  };
+  size?: "default" | "sm";
 }
 
 /**
  * @since 0.3.16-canary.0
  */
-function AlertDialogContent({
-  children,
-  className,
-  classNames,
-  ...props
-}: AlertDialogContentProps): JSX.Element {
+function AlertDialogContent({ className, size = "default", ...props }: AlertDialogContentProps): JSX.Element {
   return (
-    <AlertDialogPrimitive.Portal>
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal">
       <AlertDialogPrimitive.Overlay
-        className={cn(
-          "fixed inset-0 z-50",
-          "bg-black/50",
-          "ease-ui data-open:animate-in data-open:fade-in-0",
-          "data-closed:animate-out data-closed:fade-out-0",
-          "motion-reduce:animate-none motion-reduce:transition-none",
-          classNames?.overlay,
-        )}
+        className={
+          "fixed inset-0 z-50 bg-black/10 ease-gentle supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0"
+        }
         data-slot="alert-dialog-overlay"
       />
       <AlertDialogPrimitive.Content
         className={cn(
-          "fixed inset-0 z-50 grid grid-rows-[1fr_auto_1fr] justify-items-center overflow-auto p-8",
-          "sm:grid-rows-[1fr_auto_3fr] sm:p-4",
-          "ease-ui data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-          "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          "motion-reduce:animate-none motion-reduce:transition-none",
-          classNames?.wrapper,
+          "group/alert-dialog-content fixed start-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-6 overflow-y-auto rounded-xl bg-popover p-6 text-popover-foreground ring-1 ring-foreground/10 ease-ui outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg rtl:translate-x-1/2 data-open:animate-in data-open:animation-duration-overlay-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-overlay-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
         )}
-        data-slot="alert-dialog-content-wrapper"
+        data-size={size}
+        data-slot="alert-dialog-content"
         {...props}
-      >
-        <div
-          className={cn(
-            "relative row-start-2 flex w-full max-w-lg flex-col",
-            "rounded-2xl border",
-            "bg-popover text-popover-foreground shadow-lg",
-            classNames?.content,
-            className,
-          )}
-          data-slot="alert-dialog-content"
-        >
-          {children}
-        </div>
-      </AlertDialogPrimitive.Content>
+      />
     </AlertDialogPrimitive.Portal>
   );
 }
@@ -122,8 +89,7 @@ function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): JSX
   return (
     <div
       className={cn(
-        "flex shrink-0 flex-col gap-1.5 px-6 pt-6 pb-4 text-center",
-        "sm:text-left",
+        "grid shrink-0 grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
         className,
       )}
       data-slot="alert-dialog-header"
@@ -133,10 +99,39 @@ function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): JSX
 }
 
 /* -----------------------------------------------------------------------------
- * Component: DialogBody
+ * Component: AlertDialogMedia
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertDialogMediaProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertDialogMedia({ className, ...props }: AlertDialogMediaProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className,
+      )}
+      data-slot="alert-dialog-media"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogBody
  * -------------------------------------------------------------------------- */
 
 /**
+ * Optional scrollable region for long content. When used, the Header and Footer
+ * stay pinned (shrink-0) and only this body scrolls; without it, the whole
+ * Content scrolls via its own max-height. A codefast enhancement over radix-vega.
+ *
  * @since 0.3.16-canary.0
  */
 type AlertDialogBodyProps = ComponentProps<"div">;
@@ -146,8 +141,8 @@ type AlertDialogBodyProps = ComponentProps<"div">;
  */
 function AlertDialogBody({ className, ...props }: AlertDialogBodyProps): JSX.Element {
   return (
-    <main
-      className={cn("overflow-auto", "px-6 py-2", className)}
+    <div
+      className={cn("-mx-6 min-h-0 flex-1 overflow-y-auto px-6", className)}
       data-slot="alert-dialog-body"
       {...props}
     />
@@ -170,8 +165,7 @@ function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): JSX
   return (
     <div
       className={cn(
-        "flex shrink-0 flex-col-reverse gap-2 px-6 pt-4 pb-6",
-        "sm:flex-row sm:justify-end",
+        "flex shrink-0 flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
         className,
       )}
       data-slot="alert-dialog-footer"
@@ -195,7 +189,10 @@ type AlertDialogTitleProps = ComponentProps<typeof AlertDialogPrimitive.Title>;
 function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps): JSX.Element {
   return (
     <AlertDialogPrimitive.Title
-      className={cn("text-lg leading-none font-semibold tracking-tight", className)}
+      className={cn(
+        "font-heading text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
       data-slot="alert-dialog-title"
       {...props}
     />
@@ -217,7 +214,10 @@ type AlertDialogDescriptionProps = ComponentProps<typeof AlertDialogPrimitive.De
 function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): JSX.Element {
   return (
     <AlertDialogPrimitive.Description
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
       data-slot="alert-dialog-description"
       {...props}
     />
@@ -231,26 +231,17 @@ function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionP
 /**
  * @since 0.3.16-canary.0
  */
-interface AlertDialogActionProps extends ComponentProps<typeof AlertDialogPrimitive.Action> {
-  size?: VariantProps<typeof buttonVariants>["size"];
-  variant?: VariantProps<typeof buttonVariants>["variant"];
-}
+interface AlertDialogActionProps
+  extends ComponentProps<typeof AlertDialogPrimitive.Action>, Pick<ButtonProps, "size" | "variant"> {}
 
 /**
  * @since 0.3.16-canary.0
  */
-function AlertDialogAction({
-  className,
-  size,
-  variant,
-  ...props
-}: AlertDialogActionProps): JSX.Element {
+function AlertDialogAction({ size = "default", variant = "default", ...props }: AlertDialogActionProps): JSX.Element {
   return (
-    <AlertDialogPrimitive.Action
-      className={buttonVariants({ className, size, variant })}
-      data-slot="alert-dialog-action"
-      {...props}
-    />
+    <Button asChild size={size} variant={variant}>
+      <AlertDialogPrimitive.Action data-slot="alert-dialog-action" {...props} />
+    </Button>
   );
 }
 
@@ -261,26 +252,17 @@ function AlertDialogAction({
 /**
  * @since 0.3.16-canary.0
  */
-interface AlertDialogCancelProps extends ComponentProps<typeof AlertDialogPrimitive.Cancel> {
-  size?: VariantProps<typeof buttonVariants>["size"];
-  variant?: VariantProps<typeof buttonVariants>["variant"];
-}
+interface AlertDialogCancelProps
+  extends ComponentProps<typeof AlertDialogPrimitive.Cancel>, Pick<ButtonProps, "size" | "variant"> {}
 
 /**
  * @since 0.3.16-canary.0
  */
-function AlertDialogCancel({
-  className,
-  size,
-  variant,
-  ...props
-}: AlertDialogCancelProps): JSX.Element {
+function AlertDialogCancel({ size = "default", variant = "outline", ...props }: AlertDialogCancelProps): JSX.Element {
   return (
-    <AlertDialogPrimitive.Cancel
-      className={buttonVariants({ className, size, variant })}
-      data-slot="alert-dialog-cancel"
-      {...props}
-    />
+    <Button asChild size={size} variant={variant}>
+      <AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" {...props} />
+    </Button>
   );
 }
 
@@ -297,6 +279,7 @@ export {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
+  AlertDialogMedia,
   AlertDialogTitle,
   AlertDialogTrigger,
 };
@@ -308,6 +291,7 @@ export type {
   AlertDialogDescriptionProps,
   AlertDialogFooterProps,
   AlertDialogHeaderProps,
+  AlertDialogMediaProps,
   AlertDialogProps,
   AlertDialogTitleProps,
   AlertDialogTriggerProps,

package/src/components/alert.tsx

@@ -1,8 +1,7 @@
-import type { AlertVariants } from "#/variants/alert";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-
+import type { AlertVariants } from "#/variants/alert";
 import { alertVariants } from "#/variants/alert";
 
 /* -----------------------------------------------------------------------------
@@ -18,14 +17,7 @@ interface AlertProps extends ComponentProps<"div">, AlertVariants {}
  * @since 0.3.16-canary.0
  */
 function Alert({ className, variant, ...props }: AlertProps): JSX.Element {
-  return (
-    <div
-      className={alertVariants({ className, variant })}
-      data-slot="alert"
-      role="alert"
-      {...props}
-    />
-  );
+  return <div className={alertVariants({ className, variant })} data-slot="alert" role="alert" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -40,15 +32,16 @@ type AlertTitleProps = ComponentProps<"div">;
 /**
  * @since 0.3.16-canary.0
  */
-function AlertTitle({ children, className, ...props }: AlertTitleProps): JSX.Element {
+function AlertTitle({ className, ...props }: AlertTitleProps): JSX.Element {
   return (
     <div
-      className={cn("col-start-2 min-h-4", "line-clamp-1 font-medium tracking-tight", className)}
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className,
+      )}
       data-slot="alert-title"
       {...props}
-    >
-      {children}
-    </div>
+    />
   );
 }
 
@@ -68,8 +61,7 @@ function AlertDescription({ className, ...props }: AlertDescriptionProps): JSX.E
   return (
     <div
       className={cn(
-        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground",
-        "[&_p]:leading-relaxed",
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
         className,
       )}
       data-slot="alert-description"
@@ -78,9 +70,25 @@ function AlertDescription({ className, ...props }: AlertDescriptionProps): JSX.E
   );
 }
 
+/* -----------------------------------------------------------------------------
+ * Component: AlertAction
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AlertActionProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AlertAction({ className, ...props }: AlertActionProps): JSX.Element {
+  return <div className={cn("absolute end-3 top-2.5", className)} data-slot="alert-action" {...props} />;
+}
+
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Alert, AlertDescription, AlertTitle };
-export type { AlertDescriptionProps, AlertProps, AlertTitleProps };
+export { Alert, AlertAction, AlertDescription, AlertTitle };
+export type { AlertActionProps, AlertDescriptionProps, AlertProps, AlertTitleProps };

package/src/components/aspect-ratio.tsx

@@ -1,9 +1,6 @@
-"use client";
-
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-
 /* -----------------------------------------------------------------------------
  * Component: AspectRatio
  * -------------------------------------------------------------------------- */

package/src/components/avatar.tsx

@@ -1,9 +1,7 @@
-"use client";
-
+import { Avatar as AvatarPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
 /* -----------------------------------------------------------------------------
  * Component: Avatar
@@ -12,15 +10,21 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 /**
  * @since 0.3.16-canary.0
  */
-type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root>;
+type AvatarProps = ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg";
+};
 
 /**
  * @since 0.3.16-canary.0
  */
-function Avatar({ className, ...props }: AvatarProps): JSX.Element {
+function Avatar({ className, size = "default", ...props }: AvatarProps): JSX.Element {
   return (
     <AvatarPrimitive.Root
-      className={cn("relative flex size-8 shrink-0 overflow-hidden", "rounded-full", className)}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className,
+      )}
+      data-size={size}
       data-slot="avatar"
       {...props}
     />
@@ -42,7 +46,7 @@ type AvatarImageProps = ComponentProps<typeof AvatarPrimitive.Image>;
 function AvatarImage({ className, ...props }: AvatarImageProps): JSX.Element {
   return (
     <AvatarPrimitive.Image
-      className={cn("aspect-square size-full", className)}
+      className={cn("aspect-square size-full rounded-full object-cover", className)}
       data-slot="avatar-image"
       {...props}
     />
@@ -65,9 +69,7 @@ function AvatarFallback({ className, ...props }: AvatarFallbackProps): JSX.Eleme
   return (
     <AvatarPrimitive.Fallback
       className={cn(
-        "flex size-full items-center justify-center",
-        "rounded-full",
-        "bg-muted",
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
         className,
       )}
       data-slot="avatar-fallback"
@@ -76,9 +78,94 @@ function AvatarFallback({ className, ...props }: AvatarFallbackProps): JSX.Eleme
   );
 }
 
+/* -----------------------------------------------------------------------------
+ * Component: AvatarBadge
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarBadgeProps = ComponentProps<"span">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AvatarBadge({ className, ...props }: AvatarBadgeProps): JSX.Element {
+  return (
+    <span
+      className={cn(
+        "absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className,
+      )}
+      data-slot="avatar-badge"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarGroupProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AvatarGroup({ className, ...props }: AvatarGroupProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className,
+      )}
+      data-slot="avatar-group"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarGroupCount
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type AvatarGroupCountProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className,
+      )}
+      data-slot="avatar-group-count"
+      {...props}
+    />
+  );
+}
+
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Avatar, AvatarFallback, AvatarImage };
-export type { AvatarFallbackProps, AvatarImageProps, AvatarProps };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };
+export type {
+  AvatarBadgeProps,
+  AvatarFallbackProps,
+  AvatarGroupCountProps,
+  AvatarGroupProps,
+  AvatarImageProps,
+  AvatarProps,
+};

package/src/components/badge.tsx

@@ -1,10 +1,7 @@
-"use client";
-
-import type { BadgeVariants } from "#/variants/badge";
+import { Slot } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
-import { Slot } from "@radix-ui/react-slot";
-
+import type { BadgeVariants } from "#/variants/badge";
 import { badgeVariants } from "#/variants/badge";
 
 /* -----------------------------------------------------------------------------
@@ -21,11 +18,11 @@ interface BadgeProps extends ComponentProps<"span">, BadgeVariants {
 /**
  * @since 0.3.16-canary.0
  */
-function Badge({ asChild, className, variant, ...props }: BadgeProps): JSX.Element {
-  const Component = asChild ? Slot : "span";
+function Badge({ asChild = false, className, variant = "default", ...props }: BadgeProps): JSX.Element {
+  const Component = asChild ? Slot.Root : "span";
 
   return (
-    <Component className={badgeVariants({ className, variant })} data-slot="badge" {...props} />
+    <Component className={badgeVariants({ className, variant })} data-slot="badge" data-variant={variant} {...props} />
   );
 }
 

package/src/components/breadcrumb.tsx

@@ -1,10 +1,8 @@
-"use client";
-
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { Slot } from "radix-ui";
 import type { ComponentProps, JSX, ReactNode } from "react";
 
 import { cn } from "#/lib/utils";
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRightIcon, EllipsisIcon } from "lucide-react";
 
 /* -----------------------------------------------------------------------------
  * Component: Breadcrumb
@@ -40,8 +38,7 @@ function BreadcrumbList({ className, ...props }: BreadcrumbListProps): JSX.Eleme
   return (
     <ol
       className={cn(
-        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground",
-        "sm:gap-2",
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
         className,
       )}
       data-slot="breadcrumb-list"
@@ -63,13 +60,7 @@ type BreadcrumbItemProps = ComponentProps<"li">;
  * @since 0.3.16-canary.0
  */
 function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps): JSX.Element {
-  return (
-    <li
-      className={cn("inline-flex items-center gap-1.5", className)}
-      data-slot="breadcrumb-item"
-      {...props}
-    />
-  );
+  return <li className={cn("inline-flex items-center gap-1.5", className)} data-slot="breadcrumb-item" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -87,15 +78,11 @@ interface BreadcrumbLinkProps extends ComponentProps<"a"> {
  * @since 0.3.16-canary.0
  */
 function BreadcrumbLink({ asChild, className, ...props }: BreadcrumbLinkProps): JSX.Element {
-  const Component = asChild ? Slot : "a";
+  const Component = asChild ? Slot.Root : "a";
 
   return (
     <Component
-      className={cn(
-        "transition-colors motion-reduce:transition-none",
-        "hover:text-foreground",
-        className,
-      )}
+      className={cn("transition-colors hover:text-foreground", className)}
       data-slot="breadcrumb-link"
       {...props}
     />
@@ -121,6 +108,7 @@ function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps): JSX.Eleme
       aria-disabled="true"
       className={cn("font-normal text-foreground", className)}
       data-slot="breadcrumb-page"
+      role="link"
       {...props}
     />
   );
@@ -138,10 +126,16 @@ type BreadcrumbSeparatorProps = ComponentProps<"li">;
 /**
  * @since 0.3.16-canary.0
  */
-function BreadcrumbSeparator({ children, ...props }: BreadcrumbSeparatorProps): JSX.Element {
+function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): JSX.Element {
   return (
-    <li aria-hidden="true" data-slot="breadcrumb-separator" role="presentation" {...props}>
-      {children ?? <ChevronRightIcon className="size-3.5" />}
+    <li
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      {...props}
+    >
+      {children ?? <ChevronRightIcon className="rtl:rotate-180" />}
     </li>
   );
 }
@@ -162,12 +156,12 @@ function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): J
   return (
     <span
       aria-hidden="true"
-      className={cn("flex size-4 items-center justify-center", className)}
+      className={cn("flex size-5 items-center justify-center [&>svg]:size-4", className)}
       data-slot="breadcrumb-ellipsis"
       role="presentation"
       {...props}
     >
-      <EllipsisIcon className="size-4" />
+      <MoreHorizontalIcon />
       <span className="sr-only">More</span>
     </span>
   );