banhaten 0.2.0 → 0.4.0

package/registry/components/card.tsx

@@ -58,7 +58,7 @@ const cardVariants = cva(
         orientation: "horizontal",
         breakpoint: "desktop",
         class:
-          "min-h-[var(--bh-card-horizontal-min-height)] w-[min(100%,var(--bh-card-horizontal-width))]",
+          "min-h-[var(--bh-card-horizontal-min-height)] w-[min(100%,var(--bh-card-horizontal-width))] flex-wrap",
       },
       {
         orientation: "horizontal",
@@ -109,6 +109,20 @@ type CardActionsProps = React.ComponentProps<"div"> & {
 }
 
 type CardFooterProps = React.ComponentProps<"div">
+type CardSurfaceProps = React.ComponentPropsWithoutRef<"article">
+
+const CardSurface = React.forwardRef<HTMLElement, CardSurfaceProps>(
+  function CardSurface({ className, ...props }, ref) {
+    return (
+      <article
+        data-slot="card-surface"
+        ref={ref}
+        className={cn(cardVariants(), className)}
+        {...props}
+      />
+    )
+  }
+)
 
 const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
   actions,
@@ -362,7 +376,7 @@ function CardBody({
       className={cn(
         "flex min-w-0 flex-col",
         horizontal
-          ? "flex-1 gap-[var(--bh-space-5xl-24)] p-[var(--bh-card-horizontal-padding)]"
+          ? "min-w-[min(100%,var(--bh-card-vertical-width))] flex-[1_1_var(--bh-card-vertical-width)] gap-[var(--bh-space-5xl-24)] p-[var(--bh-card-horizontal-padding)]"
           : "w-full gap-[var(--bh-space-5xl-24)] p-[var(--bh-card-content-padding)]"
       )}
     >
@@ -566,7 +580,7 @@ function getCardMediaClassName(
   breakpoint: CardBreakpoint
 ) {
   if (orientation === "horizontal" && breakpoint === "desktop") {
-    return "h-auto w-[var(--bh-card-horizontal-media-width)]"
+    return "min-h-[var(--bh-card-media-height)] w-[min(100%,var(--bh-card-horizontal-media-width))] shrink flex-[1_1_var(--bh-card-horizontal-media-width)]"
   }
 
   return "h-[var(--bh-card-media-height)] w-full"
@@ -611,6 +625,7 @@ export {
   CardActions,
   CardFooter,
   CardMedia,
+  CardSurface,
   cardVariants,
   type CardActionsProps,
   type CardBreakpoint,
@@ -618,5 +633,6 @@ export {
   type CardMediaProps,
   type CardOrientation,
   type CardProps,
+  type CardSurfaceProps,
   type CardType,
 }

package/registry/components/carousel.tsx

@@ -17,16 +17,22 @@ type CarouselPlugin = UseCarouselParameters[1]
 type CarouselOrientation = "horizontal" | "vertical"
 
 type CarouselMessages = {
+  carouselLabel: string
+  carouselRoleDescription: string
   nextSlide: string
   previousSlide: string
 }
 
 const defaultCarouselMessages: CarouselMessages = {
+  carouselLabel: "Carousel",
+  carouselRoleDescription: "carousel",
   nextSlide: "Next slide",
   previousSlide: "Previous slide",
 }
 
 const arabicCarouselMessages: CarouselMessages = {
+  carouselLabel: "\u0639\u0627\u0631\u0636 \u0627\u0644\u0634\u0631\u0627\u0626\u062d",
+  carouselRoleDescription: "\u0639\u0627\u0631\u0636 \u0634\u0631\u0627\u0626\u062d",
   nextSlide: "\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629",
   previousSlide: "\u0627\u0644\u0634\u0631\u064a\u062d\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629",
 }
@@ -58,6 +64,9 @@ const CarouselContext = React.createContext<CarouselContextValue | null>(null)
 const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
   function Carousel(
     {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-roledescription": ariaRoleDescription,
       children,
       className,
       dir,
@@ -138,6 +147,11 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
           dir={direction}
           ref={setRootRef}
           role="region"
+          aria-label={ariaLabelledBy ? undefined : (ariaLabel ?? messages.carouselLabel)}
+          aria-labelledby={ariaLabelledBy}
+          aria-roledescription={
+            ariaRoleDescription ?? messages.carouselRoleDescription
+          }
           className={cn("relative", className)}
           {...props}
         >

package/registry/components/command.tsx

@@ -63,10 +63,27 @@ const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
 
 const CommandList = React.forwardRef<HTMLDivElement, CommandListProps>(
   function CommandList({ className, ...props }, ref) {
+    const listRef = React.useRef<HTMLDivElement | null>(null)
+    React.useLayoutEffect(() => {
+      listRef.current
+        ?.querySelector<HTMLElement>("[cmdk-list-sizer]")
+        ?.setAttribute("role", "presentation")
+    })
+
+    const setListRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        listRef.current = node
+
+        if (typeof ref === "function") ref(node)
+        else if (ref) ref.current = node
+      },
+      [ref]
+    )
+
     return (
       <CommandPrimitive.List
         data-slot="command-list"
-        ref={ref}
+        ref={setListRef}
         className={cn(
           "max-h-[calc(var(--bh-space-19xl-384)+var(--bh-space-8xl-48))] overflow-y-auto overflow-x-hidden p-[var(--bh-space-md-8)]",
           className
@@ -79,10 +96,25 @@ const CommandList = React.forwardRef<HTMLDivElement, CommandListProps>(
 
 const CommandEmpty = React.forwardRef<HTMLDivElement, CommandEmptyProps>(
   function CommandEmpty({ className, ...props }, ref) {
+    const emptyRef = React.useRef<HTMLDivElement | null>(null)
+    React.useLayoutEffect(() => {
+      emptyRef.current?.setAttribute("role", "option")
+      emptyRef.current?.setAttribute("aria-disabled", "true")
+      emptyRef.current?.setAttribute("aria-selected", "false")
+    })
+    const setEmptyRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        emptyRef.current = node
+        if (typeof ref === "function") ref(node)
+        else if (ref) ref.current = node
+      },
+      [ref]
+    )
+
     return (
       <CommandPrimitive.Empty
         data-slot="command-empty"
-        ref={ref}
+        ref={setEmptyRef}
         className={cn(
           "py-[var(--bh-space-8xl-48)] text-center text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
           className
@@ -130,9 +162,11 @@ const CommandSeparator = React.forwardRef<
   CommandSeparatorProps
 >(function CommandSeparator({ className, ...props }, ref) {
   return (
-    <CommandPrimitive.Separator
+    <div
       data-slot="command-separator"
       ref={ref}
+      role="presentation"
+      aria-hidden="true"
       className={cn("-mx-[var(--bh-space-md-8)] my-[var(--bh-space-md-8)] h-[var(--bh-border-width-default)] bg-[var(--bh-border-subtle)]", className)}
       {...props}
     />

package/registry/components/date-picker.tsx

@@ -159,7 +159,15 @@ type DateRangePickerProps = Omit<
 }
 
 const defaultTimeValue = getCurrentTimeValue()
-const defaultDayLabels = ["S", "M", "T", "W", "T", "F", "S"]
+const defaultDayLabels = [
+  { full: "Sunday", short: "S" },
+  { full: "Monday", short: "M" },
+  { full: "Tuesday", short: "T" },
+  { full: "Wednesday", short: "W" },
+  { full: "Thursday", short: "T" },
+  { full: "Friday", short: "F" },
+  { full: "Saturday", short: "S" },
+] as const
 
 const calendarSurface = cva(
   [
@@ -216,7 +224,7 @@ const monthButton = cva(
     "flex size-[var(--bh-date-nav-button-size)] shrink-0 items-center justify-center rounded-[var(--bh-control-default)]",
     "bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,box-shadow,color]",
     "hover:bg-[var(--bh-interactive-soft-hover)] focus-visible:shadow-[var(--shadow-button-focus)] disabled:opacity-[var(--bh-opacity-0)]",
-    "[&_svg]:size-[var(--bh-date-nav-icon-size)]",
+    "[&_[data-slot=date-picker-nav-icon]>svg]:size-[var(--bh-date-nav-icon-size)]",
   ]
 )
 
@@ -262,7 +270,7 @@ const dayCellButton = cva(
         event:
           "rounded-[var(--bh-control-default)] text-[var(--bh-content-brand-default)] after:absolute after:bottom-[var(--bh-date-event-dot-offset-bottom)] after:left-1/2 after:size-[var(--bh-date-event-dot-size)] after:-translate-x-1/2 after:rounded-[var(--bh-radius-full)] after:bg-[var(--bh-content-brand-default)] rtl:after:translate-x-1/2",
         selected:
-          "rounded-[var(--bh-control-default)] bg-[var(--bh-bg-brand-default)] text-[var(--bh-content-on-color)] hover:bg-[var(--bh-bg-brand-default)]",
+          "rounded-[var(--bh-control-default)] bg-[var(--bh-bg-brand-bold)] text-[var(--bh-content-on-brand)] hover:bg-[var(--bh-bg-brand-bold)] hover:shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-focus)]",
         range:
           "rounded-none bg-[var(--bh-bg-brand-subtle)] text-[var(--bh-content-brand-strong)] hover:bg-[var(--bh-bg-brand-subtle)]",
       },
@@ -756,7 +764,7 @@ function DatePickerTrigger({
       <span
         aria-hidden="true"
         data-slot="date-picker-trigger-icon"
-        className="flex size-[var(--bh-date-trigger-icon-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)] group-disabled/date-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-date-trigger-icon-size)]"
+        className="flex size-[var(--bh-date-trigger-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)] group-disabled/date-trigger:text-[var(--bh-content-disabled)] [&_svg:not([class*='size-'])]:size-[var(--bh-date-trigger-icon-size)]"
       >
         {icon ?? <CalendarDaysIcon strokeWidth="var(--bh-icon-stroke-180)" />}
       </span>
@@ -816,6 +824,7 @@ function CalendarMonth({
 }) {
   const cells = React.useMemo(() => getCalendarCells(displayMonth), [displayMonth])
   const gridRef = React.useRef<HTMLDivElement>(null)
+  const titleId = React.useId()
   const pendingFocusDateRef = React.useRef<Date | undefined>(undefined)
   const monthTitle = title ?? formatMonthTitle(displayMonth)
   const hasMonthToggle = mode === "single"
@@ -864,13 +873,20 @@ function CalendarMonth({
           className={monthButton()}
           onClick={() => onDisplayMonthChange(addMonths(displayMonth, -1))}
         >
-          <ChevronLeftIcon aria-hidden="true" data-rtl-flip="true" />
+          <span
+            aria-hidden="true"
+            data-slot="date-picker-nav-icon"
+            className="inline-flex size-[var(--bh-date-nav-icon-slot-size)] items-center justify-center"
+          >
+            <ChevronLeftIcon data-rtl-flip="true" />
+          </span>
         </button>
 
         {hasMonthToggle ? (
           <button
             aria-expanded={view === "month-year"}
             data-slot="calendar-title"
+            id={titleId}
             type="button"
             className={calendarTitleButton({
               active: view === "month-year",
@@ -888,6 +904,7 @@ function CalendarMonth({
         ) : (
           <div
             data-slot="calendar-title"
+            id={titleId}
             className={calendarTitleButton({ framed: false })}
           >
             <span className="min-w-0 truncate">{monthTitle}</span>
@@ -901,46 +918,67 @@ function CalendarMonth({
           className={monthButton()}
           onClick={() => onDisplayMonthChange(addMonths(displayMonth, 1))}
         >
-          <ChevronRightIcon aria-hidden="true" data-rtl-flip="true" />
+          <span
+            aria-hidden="true"
+            data-slot="date-picker-nav-icon"
+            className="inline-flex size-[var(--bh-date-nav-icon-slot-size)] items-center justify-center"
+          >
+            <ChevronRightIcon data-rtl-flip="true" />
+          </span>
         </button>
       </div>
 
       {view === "days" ? (
         <>
           <div
-            aria-hidden="true"
-            data-slot="calendar-weekdays"
-            className="grid w-full grid-cols-7"
-          >
-            {defaultDayLabels.map((day, index) => (
-              <div
-                className="flex h-[var(--bh-date-day-cell-height)] min-w-0 items-center justify-center rounded-[var(--bh-radius-lg-8)] text-center text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
-                key={`${day}-${index}`}
-              >
-                {day}
-              </div>
-            ))}
-          </div>
-
-          <div
+            aria-colcount={7}
+            aria-labelledby={titleId}
+            aria-rowcount={Math.ceil(cells.length / 7) + 1}
             data-slot="calendar-grid"
             role="grid"
             ref={gridRef}
-            className="grid w-full grid-cols-7"
+            className="grid w-full gap-[var(--bh-space-md-8)]"
           >
-            {cells.map((cell) => (
-              <CalendarDayCell
-                cell={cell}
-                displayMonth={displayMonth}
-                eventDates={eventDates}
-                key={cell.date.toISOString()}
-                mode={mode}
-                onKeyboardNavigateDate={handleKeyboardNavigateDate}
-                onSelectDate={onSelectDate}
-                range={range}
-                selectedDate={selectedDate}
-              />
-            ))}
+            <div
+              data-slot="calendar-weekdays"
+              role="row"
+              className="grid w-full grid-cols-7"
+            >
+              {defaultDayLabels.map((day) => (
+                <div
+                  aria-label={day.full}
+                  className="flex h-[var(--bh-date-day-cell-height)] min-w-0 items-center justify-center rounded-[var(--bh-radius-lg-8)] text-center text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+                  key={day.full}
+                  role="columnheader"
+                >
+                  {day.short}
+                </div>
+              ))}
+            </div>
+
+            <div role="rowgroup" className="grid w-full">
+              {chunkCalendarRows(cells).map((row, rowIndex) => (
+                <div
+                  className="grid w-full grid-cols-7"
+                  key={row[0]?.date.toISOString() ?? rowIndex}
+                  role="row"
+                >
+                  {row.map((cell) => (
+                    <CalendarDayCell
+                      cell={cell}
+                      displayMonth={displayMonth}
+                      eventDates={eventDates}
+                      key={cell.date.toISOString()}
+                      mode={mode}
+                      onKeyboardNavigateDate={handleKeyboardNavigateDate}
+                      onSelectDate={onSelectDate}
+                      range={range}
+                      selectedDate={selectedDate}
+                    />
+                  ))}
+                </div>
+              ))}
+            </div>
           </div>
 
           {showTime ? (
@@ -955,6 +993,16 @@ function CalendarMonth({
   )
 }
 
+function chunkCalendarRows(cells: CalendarCell[]) {
+  const rows: CalendarCell[][] = []
+
+  for (let index = 0; index < cells.length; index += 7) {
+    rows.push(cells.slice(index, index + 7))
+  }
+
+  return rows
+}
+
 function CalendarDayCell({
   cell,
   displayMonth,

package/registry/components/expanded/ActivityFeed.tsx

@@ -149,7 +149,6 @@ export function ActivityFeedItem({
   type = "caption",
 }: ActivityFeedItemProps) {
   const actionItems = actions === false || !hasActionButtons ? [] : (actions ?? []).slice(0, hasTwoActionButtons ? 2 : 1);
-  const rtl = dir === "rtl";
 
   const textParts = [
     label && <strong key="label">{label}</strong>,
@@ -162,10 +161,9 @@ export function ActivityFeedItem({
       className={classes(
         "ds-activity-feed-item",
         `ds-activity-feed-item--${type}`,
-        rtl ? "ds-activity-feed-item--rtl" : "ds-activity-feed-item--ltr",
         className,
       )}
-      dir={rtl ? "rtl" : "ltr"}
+      dir={dir}
     >
       <Indicator avatarAlt={avatarAlt} avatarSrc={avatarSrc} showLine={showLine} />
 
@@ -210,13 +208,11 @@ export function ActivityFeed({
   dir,
   items = [],
 }: ActivityFeedProps) {
-  const rtl = dir === "rtl";
-
   return (
     <section
       aria-label={ariaLabel}
-      className={classes("ds-activity-feed", rtl ? "ds-activity-feed--rtl" : "ds-activity-feed--ltr", className)}
-      dir={rtl ? "rtl" : "ltr"}
+      className={classes("ds-activity-feed", className)}
+      dir={dir}
     >
       {items.map((item, index) => (
         <ActivityFeedItem

package/registry/components/expanded/ActivityHeatmap.tsx

@@ -0,0 +1,64 @@
+import type { ComponentPropsWithoutRef } from "react";
+import "./activityHeatmap.css";
+
+export type ActivityHeatmapLevel = 0 | 1 | 2 | 3 | 4;
+
+export type ActivityHeatmapItem = {
+  id?: string;
+  label?: string;
+  level: ActivityHeatmapLevel;
+};
+
+export type ActivityHeatmapProps = Omit<
+  ComponentPropsWithoutRef<"div">,
+  "children" | "dir"
+> & {
+  ariaLabel?: string;
+  dir?: "ltr" | "rtl";
+  items?: readonly ActivityHeatmapItem[];
+};
+
+function classes(...names: Array<string | false | undefined>) {
+  return names.filter(Boolean).join(" ");
+}
+
+function normalizeLevel(level: ActivityHeatmapLevel): ActivityHeatmapLevel {
+  return Math.max(0, Math.min(4, Math.round(level))) as ActivityHeatmapLevel;
+}
+
+export function ActivityHeatmap({
+  ariaLabel = "Activity heatmap",
+  className,
+  dir,
+  items = [],
+  tabIndex = 0,
+  ...props
+}: ActivityHeatmapProps) {
+  return (
+    <div
+      {...props}
+      aria-label={ariaLabel}
+      className={classes("ds-activity-heatmap", className)}
+      data-slot="activity-heatmap"
+      dir={dir}
+      role="img"
+      tabIndex={tabIndex}
+    >
+      <span
+        aria-hidden="true"
+        className="ds-activity-heatmap__grid"
+        data-slot="activity-heatmap-grid"
+      >
+        {items.map((item, index) => (
+          <span
+            className="ds-activity-heatmap__cell"
+            data-level={normalizeLevel(item.level)}
+            data-slot="activity-heatmap-cell"
+            key={item.id ?? index}
+            title={item.label}
+          />
+        ))}
+      </span>
+    </div>
+  );
+}

package/registry/components/expanded/Banner.tsx

@@ -101,7 +101,6 @@ export function Banner({
         `ds-banner--${size}`,
         `ds-banner--${color}`,
         `ds-banner--${content}`,
-        dir === "rtl" && "ds-banner--rtl",
         className,
       )}
       dir={dir}

package/registry/components/expanded/Breadcrumbs.tsx

@@ -19,6 +19,7 @@ export type BreadcrumbItem = {
 
 export type BreadcrumbsProps = {
   "aria-label"?: string;
+  className?: string;
   dir?: "ltr" | "rtl" | "auto";
   iconOnly?: boolean;
   items: BreadcrumbItem[];
@@ -49,6 +50,7 @@ function visibleItems(
 
 export function Breadcrumbs({
   "aria-label": ariaLabel,
+  className,
   dir,
   iconOnly = false,
   items,
@@ -67,6 +69,7 @@ export function Breadcrumbs({
         `ds-breadcrumbs--${surfaceStyle}`,
         `ds-breadcrumbs--${separator}`,
         iconOnly && "ds-breadcrumbs--icon-only",
+        className,
       )}
       dir={dir}
     >

package/registry/components/expanded/CatalogComponentsShowcase.tsx

@@ -32,7 +32,6 @@ const rtlBreadcrumbItems: BreadcrumbItem[] = [
   { label: "\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a", current: true },
 ];
 
-const breadcrumbAriaLabel = "Catalog breadcrumbs";
 const rtlBreadcrumbAriaLabel = "\u0627\u0644\u0645\u0633\u0627\u0631";
 
 const uploadFiles: FileUploadFile[] = [
@@ -109,9 +108,9 @@ export function CatalogComponentsShowcase() {
     <div className="catalog-showcase">
       <ShowcaseCard title="Breadcrumbs" description="Default, raised, icon-only, separator, and RTL variants.">
         <div className="catalog-showcase__stack">
-          <Breadcrumbs aria-label={breadcrumbAriaLabel} items={breadcrumbItems} overflowLabel="More" />
-          <Breadcrumbs aria-label={breadcrumbAriaLabel} items={breadcrumbItems} overflowLabel="More" separator="chevron" style="raised" />
-          <Breadcrumbs aria-label={breadcrumbAriaLabel} iconOnly items={breadcrumbItems} overflowLabel="More" separator="chevron" style="raised" />
+          <Breadcrumbs aria-label="Default catalog breadcrumbs" items={breadcrumbItems} overflowLabel="More" />
+          <Breadcrumbs aria-label="Raised catalog breadcrumbs" items={breadcrumbItems} overflowLabel="More" separator="chevron" style="raised" />
+          <Breadcrumbs aria-label="Icon-only catalog breadcrumbs" iconOnly items={breadcrumbItems} overflowLabel="More" separator="chevron" style="raised" />
           <Breadcrumbs
             aria-label={rtlBreadcrumbAriaLabel}
             dir="rtl"

package/registry/components/expanded/CatalogDivider.tsx

@@ -1,3 +1,4 @@
+import { Button } from "@/components/ui/button";
 import "./divider.css";
 
 export type DividerBorderStyle = "solid" | "dotted";
@@ -36,9 +37,9 @@ export function CatalogContentDivider({
     <div className={`ds-content-divider ds-content-divider--${borderStyle}`} dir={dir}>
       <span aria-hidden="true" className="ds-content-divider__rule" />
       {actionLabel && onAction ? (
-        <button className="ds-content-divider__button" disabled={disabled} onClick={onAction} type="button">
+        <Button className="ds-content-divider__button" disabled={disabled} onClick={onAction} size="sm" type="button" variant="soft">
           {actionLabel}
-        </button>
+        </Button>
       ) : label ? (
         <span className="ds-content-divider__label">{label}</span>
       ) : null}

package/registry/components/expanded/FileUpload.tsx

@@ -154,9 +154,9 @@ export function FileUpload({
               <p className="ds-file-upload__title">
                 {resolvedPrompt}{" "}
                 {resolvedBrowseLabel && (
-                  <button className="ds-file-upload__browse" disabled={disabled} onClick={browse} type="button">
+                  <Button className="ds-file-upload__browse" disabled={disabled} onClick={browse} size="xs" type="button" variant="link">
                     {resolvedBrowseLabel}
-                  </button>
+                  </Button>
                 )}
               </p>
             )}
@@ -267,9 +267,9 @@ function FileUploadRow({
           )}
 
           {!isSmall && file.status === "error" && (
-            <button className="ds-file-upload-row__retry" onClick={() => onRetry?.(file.id)} type="button">
+            <Button className="ds-file-upload-row__retry" onClick={() => onRetry?.(file.id)} size="xs" type="button" variant="link">
               {retryLabel}
-            </button>
+            </Button>
           )}
         </div>
       </div>
@@ -404,12 +404,14 @@ function StatusIcon({
 }) {
   return (
     <span
+      aria-hidden={standalone ? undefined : "true"}
+      aria-label={standalone ? getStatusLabel(status) : undefined}
       className={cx(
         "ds-file-upload-row__status",
         standalone && "ds-file-upload-row__status--standalone",
         `ds-file-upload-row__status--${status}`
       )}
-      aria-label={getStatusLabel(status)}
+      role={standalone ? "img" : undefined}
     >
       {status === "uploaded" && <CheckboxCircleFillIcon />}
       {status === "uploading" && <Loader2LineIcon />}

package/registry/components/expanded/OnboardingStepListItem.tsx

@@ -21,7 +21,6 @@ export function OnboardingStepListItem({
   showTrailingLine = true,
   state = "finished",
 }: OnboardingStepListItemProps) {
-  const rtl = dir === "rtl";
   const isFinished = state === "finished";
   const isActive = state === "active";
   const isInactive = state === "inactive";
@@ -31,7 +30,6 @@ export function OnboardingStepListItem({
       className={[
         "ds-onboarding-step",
         `ds-onboarding-step--${state}`,
-        rtl ? "ds-onboarding-step--rtl" : "ds-onboarding-step--ltr",
         className,
       ]
         .filter(Boolean)
@@ -52,10 +50,11 @@ export function OnboardingStepListItem({
 
 function CheckCircleIcon() {
   return (
-    <CircleCheckIcon
-      aria-hidden="true"
-      className="ds-onboarding-step__check"
-      strokeWidth="var(--bh-icon-stroke-225)"
-    />
+    <span className="ds-onboarding-step__check-slot" aria-hidden="true">
+      <CircleCheckIcon
+        className="ds-onboarding-step__check"
+        strokeWidth="var(--bh-icon-stroke-225)"
+      />
+    </span>
   );
 }