banhaten 0.2.0 → 0.3.0

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(
   [
@@ -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)]",
       },
@@ -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"
@@ -871,6 +880,7 @@ function CalendarMonth({
           <button
             aria-expanded={view === "month-year"}
             data-slot="calendar-title"
+            id={titleId}
             type="button"
             className={calendarTitleButton({
               active: view === "month-year",
@@ -888,6 +898,7 @@ function CalendarMonth({
         ) : (
           <div
             data-slot="calendar-title"
+            id={titleId}
             className={calendarTitleButton({ framed: false })}
           >
             <span className="min-w-0 truncate">{monthTitle}</span>
@@ -908,39 +919,54 @@ function CalendarMonth({
       {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 +981,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)

package/registry/components/expanded/PageHeader.tsx

@@ -1,5 +1,7 @@
-import type { ReactNode } from "react";
+import type { ElementType, ReactNode } from "react";
 import { HomeIcon as LucideHomeIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Breadcrumbs as OwnedBreadcrumbs } from "./Breadcrumbs";
 import { Tabs, type TabsProps } from "../tabs";
 import "./pageHeader.css";
 
@@ -31,6 +33,7 @@ export type PageHeaderProps = {
   description?: string;
   dir?: "ltr" | "rtl";
   icon?: ReactNode | false;
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
   metaInfo?: string;
   tabs?: PageHeaderTabs | false;
   title?: string;
@@ -44,64 +47,43 @@ function HomeIcon() {
   return <LucideHomeIcon aria-hidden="true" className="ds-page-header__home-icon" strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
-function Breadcrumbs({ items, label }: { items: PageHeaderBreadcrumb[]; label?: string }) {
-  return (
-    <nav aria-label={label} className="ds-page-header__breadcrumbs">
-      <ol>
-        {items.map((item, index) => {
-          const isLast = index === items.length - 1;
-          const isCurrent = item.current === true;
-          const content = (
-            <>
-              {item.icon && <span className="ds-page-header__breadcrumb-icon">{item.icon}</span>}
-              <span className="ds-page-header__breadcrumb-label">{item.label}</span>
-            </>
-          );
-
-          return (
-            <li key={`${item.label}-${index}`}>
-              {item.href && !isCurrent ? (
-                <a href={item.href}>{content}</a>
-              ) : (
-                <span aria-current={isCurrent ? "page" : undefined} className={isCurrent ? "is-current" : undefined}>
-                  {content}
-                </span>
-              )}
-              {!isLast && (
-                <span aria-hidden="true" className="ds-page-header__breadcrumb-separator">
-                  /
-                </span>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-}
-
 function Action({ action }: { action: PageHeaderAction }) {
   const className = "ds-page-header__action";
   const label = <span>{action.label}</span>;
 
   if (action.href) {
     return (
-      <a aria-label={action.ariaLabel} className={className} href={action.href}>
-        {label}
-      </a>
+      <Button asChild className={className} variant="secondary">
+        <a
+          aria-disabled={action.disabled || undefined}
+          aria-label={action.ariaLabel}
+          href={action.disabled ? undefined : action.href}
+          onClick={(event) => {
+            if (action.disabled) {
+              event.preventDefault();
+              return;
+            }
+            action.onClick?.();
+          }}
+          tabIndex={action.disabled ? -1 : undefined}
+        >
+          {label}
+        </a>
+      </Button>
     );
   }
 
   return (
-    <button
+    <Button
       aria-label={action.ariaLabel}
       className={className}
       disabled={action.disabled}
       onClick={action.onClick}
       type="button"
+      variant="secondary"
     >
       {label}
-    </button>
+    </Button>
   );
 }
 
@@ -112,6 +94,7 @@ export function PageHeader({
   className,
   description,
   dir,
+  headingLevel = 1,
   icon,
   metaInfo,
   tabs = {},
@@ -120,10 +103,18 @@ export function PageHeader({
   const breadcrumbItems = breadcrumbs === false ? [] : breadcrumbs;
   const actionItems = actions === false ? [] : actions;
   const showIcon = icon !== false;
+  const Heading = `h${headingLevel}` as ElementType;
 
   return (
     <header className={classes("ds-page-header", className)} dir={dir}>
-      {breadcrumbItems.length > 0 && <Breadcrumbs items={breadcrumbItems} label={breadcrumbLabel} />}
+      {breadcrumbItems.length > 0 && (
+        <OwnedBreadcrumbs
+          aria-label={breadcrumbLabel ?? "Breadcrumb"}
+          className="ds-page-header__breadcrumbs"
+          dir={dir}
+          items={breadcrumbItems}
+        />
+      )}
 
       <div className="ds-page-header__section">
         <div className="ds-page-header__topline">
@@ -131,7 +122,7 @@ export function PageHeader({
             <div className="ds-page-header__heading-row">
               <div className="ds-page-header__heading-main">
                 {showIcon && <span className="ds-page-header__icon">{icon ?? <HomeIcon />}</span>}
-                {title && <h1>{title}</h1>}
+                {title && <Heading className="ds-page-header__title">{title}</Heading>}
               </div>
               {metaInfo && (
                 <span className="ds-page-header__meta">

package/registry/components/expanded/Slideout.tsx

@@ -1,5 +1,6 @@
-import type { ReactNode } from "react";
+import { useId, type ReactNode } from "react";
 import { XIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import "./slideout.css";
 
 export type SlideoutSize = "small" | "medium" | "large";
@@ -48,7 +49,7 @@ export function Slideout({
   size = "small",
   title,
 }: SlideoutProps) {
-  const rtl = dir === "rtl";
+  const titleId = useId();
   const hasFooterActions = Boolean(primaryActionLabel || (secondaryAction && secondaryActionLabel));
 
   return (
@@ -57,39 +58,43 @@ export function Slideout({
         "ds-slideout",
         `ds-slideout--${size}`,
         `ds-slideout--${breakpoint}`,
-        rtl && "ds-slideout--rtl",
         className,
       )}
       dir={dir}
     >
-      <section aria-label={title} className="ds-slideout__panel" role="dialog">
+      <section
+        aria-labelledby={title ? titleId : undefined}
+        className="ds-slideout__panel"
+        data-slot="slideout-panel"
+        role={title ? "region" : undefined}
+      >
         <header className="ds-slideout__header">
           <div className="ds-slideout__heading-wrap">
-            <h2 className="ds-slideout__title">{title}</h2>
+            {title ? <h2 className="ds-slideout__title" id={titleId}>{title}</h2> : null}
             {headerAction && actionLabel && (
-              <button className="ds-slideout__text-button" type="button" onClick={onAction}>
+              <Button className="ds-slideout__text-button" size="sm" type="button" variant="link" onClick={onAction}>
                 {actionLabel}
-              </button>
+              </Button>
             )}
           </div>
           {closeLabel && (
-            <button aria-label={closeLabel} className="ds-slideout__close" type="button" onClick={onClose}>
+            <Button aria-label={closeLabel} className="ds-slideout__close" size="icon-sm" type="button" variant="ghost" onClick={onClose}>
               <CloseIcon />
-            </button>
+            </Button>
           )}
         </header>
         <div className="ds-slideout__body">{children}</div>
         {footer && hasFooterActions && (
           <footer className="ds-slideout__footer">
             {primaryActionLabel && (
-              <button className="ds-slideout__button ds-slideout__button--primary" type="button" onClick={onPrimaryAction}>
+              <Button className="ds-slideout__button ds-slideout__button--primary" size="sm" type="button" onClick={onPrimaryAction}>
                 {primaryActionLabel}
-              </button>
+              </Button>
             )}
             {secondaryAction && secondaryActionLabel && (
-              <button className="ds-slideout__button ds-slideout__button--secondary" type="button" onClick={onSecondaryAction}>
+              <Button className="ds-slideout__button ds-slideout__button--secondary" size="sm" type="button" variant="secondary" onClick={onSecondaryAction}>
                 {secondaryActionLabel}
-              </button>
+              </Button>
             )}
           </footer>
         )}