banhaten 0.4.0 → 0.6.0

package/registry/components/expanded/Breadcrumbs.tsx

@@ -9,6 +9,7 @@ import "./breadcrumbs.css";
 
 export type BreadcrumbSeparator = "slash" | "chevron";
 export type BreadcrumbStyle = "default" | "raised";
+export type BreadcrumbSize = "md" | "sm";
 
 export type BreadcrumbItem = {
   label: string;
@@ -26,6 +27,7 @@ export type BreadcrumbsProps = {
   maxItems?: number;
   overflowLabel?: string;
   separator?: BreadcrumbSeparator;
+  size?: BreadcrumbSize;
   style?: BreadcrumbStyle;
 };
 
@@ -57,6 +59,7 @@ export function Breadcrumbs({
   maxItems,
   overflowLabel,
   separator = "slash",
+  size = "md",
   style: surfaceStyle = "default",
 }: BreadcrumbsProps) {
   const renderedItems = visibleItems(items, maxItems, overflowLabel);
@@ -68,6 +71,7 @@ export function Breadcrumbs({
         "ds-breadcrumbs",
         `ds-breadcrumbs--${surfaceStyle}`,
         `ds-breadcrumbs--${separator}`,
+        size === "sm" && "ds-breadcrumbs--sm",
         iconOnly && "ds-breadcrumbs--icon-only",
         className,
       )}
@@ -82,7 +86,7 @@ export function Breadcrumbs({
               <span className="ds-breadcrumbs__icon" aria-hidden={item.icon ? "true" : undefined}>
                 {item.overflow ? <OverflowIcon /> : item.icon}
               </span>
-              <span className={cx("ds-breadcrumbs__label", iconOnly && "ds-breadcrumbs__label--hidden")}>
+              <span className={cx("ds-breadcrumbs__label", iconOnly && "ds-breadcrumbs__label--hidden")} dir="auto">
                 {item.label}
               </span>
             </>

package/registry/components/expanded/PageHeader.tsx

@@ -1,4 +1,4 @@
-import type { ElementType, ReactNode } from "react";
+import { isValidElement, type ElementType, type ReactNode } from "react";
 import { HomeIcon as LucideHomeIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Breadcrumbs as OwnedBreadcrumbs } from "./Breadcrumbs";
@@ -22,38 +22,68 @@ export type PageHeaderAction = {
 
 export type PageHeaderTabs = Pick<
   TabsProps,
-  "activeIndex" | "ariaLabel" | "defaultActiveIndex" | "items" | "onActiveIndexChange"
+  | "activeIndex"
+  | "ariaLabel"
+  | "defaultActiveIndex"
+  | "fullWidth"
+  | "items"
+  | "onActiveIndexChange"
 >;
 
+export type PageHeaderSize = "default" | "comfortable";
+
 export type PageHeaderProps = {
-  actions?: PageHeaderAction[] | false;
+  /** Action data rendered as secondary Buttons, or your own action nodes. */
+  actions?: PageHeaderAction[] | ReactNode | false;
   breadcrumbLabel?: string;
   breadcrumbs?: PageHeaderBreadcrumb[] | false;
+  /** Supporting content under the description, such as a status badge. */
+  children?: ReactNode;
   className?: string;
-  description?: string;
+  description?: ReactNode;
   dir?: "ltr" | "rtl";
   icon?: ReactNode | false;
   headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
   metaInfo?: string;
+  /**
+   * `comfortable` is the page heading inside an app shell whose header already
+   * carries the breadcrumbs: no block padding, 8px between title and
+   * description, 12px between actions, 40px action Buttons, and no icon or tabs
+   * unless you pass them.
+   */
+  size?: PageHeaderSize;
   tabs?: PageHeaderTabs | false;
-  title?: string;
+  /** Heading text; inline content such as a record name and its type is allowed. */
+  title?: ReactNode;
 };
 
 function classes(...names: Array<string | false | undefined>) {
   return names.filter(Boolean).join(" ");
 }
 
+/** Action data is an array of plain `{ label }` objects; anything else is rendered as nodes. */
+function isActionData(actions: PageHeaderProps["actions"]): actions is PageHeaderAction[] {
+  return Array.isArray(actions) && actions.every((action) => action !== null && typeof action === "object" && !isValidElement(action) && "label" in action);
+}
+
 function HomeIcon() {
   return <LucideHomeIcon aria-hidden="true" className="ds-page-header__home-icon" strokeWidth="var(--bh-icon-stroke-190)" />;
 }
 
-function Action({ action }: { action: PageHeaderAction }) {
-  const className = "ds-page-header__action";
-  const label = <span>{action.label}</span>;
+function Action({ action, density }: { action: PageHeaderAction; density: "default" | "comfortable" }) {
+  const label = (
+    <span
+      className="min-w-0 px-[var(--bh-button-label-padding-x)]"
+      data-slot="button-label"
+      dir="auto"
+    >
+      {action.label}
+    </span>
+  );
 
   if (action.href) {
     return (
-      <Button asChild className={className} variant="secondary">
+      <Button asChild density={density} variant="secondary">
         <a
           aria-disabled={action.disabled || undefined}
           aria-label={action.ariaLabel}
@@ -76,9 +106,9 @@ function Action({ action }: { action: PageHeaderAction }) {
   return (
     <Button
       aria-label={action.ariaLabel}
-      className={className}
       disabled={action.disabled}
       onClick={action.onClick}
+      density={density}
       type="button"
       variant="secondary"
     >
@@ -91,22 +121,32 @@ export function PageHeader({
   actions = [],
   breadcrumbLabel,
   breadcrumbs = [],
+  children,
   className,
   description,
   dir,
   headingLevel = 1,
   icon,
   metaInfo,
-  tabs = {},
+  size = "default",
+  tabs,
   title,
 }: PageHeaderProps) {
+  const comfortable = size === "comfortable";
   const breadcrumbItems = breadcrumbs === false ? [] : breadcrumbs;
-  const actionItems = actions === false ? [] : actions;
-  const showIcon = icon !== false;
+  const actionItems = isActionData(actions) ? actions : [];
+  const actionNodes = actions !== false && !isActionData(actions) ? actions : null;
+  // The comfortable heading has no icon or tabs unless they are passed.
+  const showIcon = icon !== false && !(comfortable && icon === undefined);
+  const tabsConfig = tabs ?? (comfortable ? false : {});
   const Heading = `h${headingLevel}` as ElementType;
 
   return (
-    <header className={classes("ds-page-header", className)} dir={dir}>
+    <header
+      className={classes("ds-page-header", comfortable && "ds-page-header--comfortable", className)}
+      data-size={size}
+      dir={dir}
+    >
       {breadcrumbItems.length > 0 && (
         <OwnedBreadcrumbs
           aria-label={breadcrumbLabel ?? "Breadcrumb"}
@@ -122,7 +162,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 && <Heading className="ds-page-header__title">{title}</Heading>}
+                {title && <Heading className="ds-page-header__title" dir="auto">{title}</Heading>}
               </div>
               {metaInfo && (
                 <span className="ds-page-header__meta">
@@ -131,30 +171,33 @@ export function PageHeader({
               )}
             </div>
             {description && (
-              <p className="ds-page-header__description">
+              <p className="ds-page-header__description" dir="auto">
                 {description}
               </p>
             )}
+            {children && <div className="ds-page-header__supporting">{children}</div>}
           </div>
 
           {actionItems.length > 0 && (
             <div className="ds-page-header__actions">
               {actionItems.map((action, index) => (
-                <Action action={action} key={`${action.label}-${index}`} />
+                <Action action={action} density={comfortable ? "comfortable" : "default"} key={`${action.label}-${index}`} />
               ))}
             </div>
           )}
+          {actionNodes && <div className="ds-page-header__actions">{actionNodes}</div>}
         </div>
 
-        {tabs !== false && (
+        {tabsConfig !== false && (
           <Tabs
-            ariaLabel={tabs.ariaLabel}
+            ariaLabel={tabsConfig.ariaLabel}
             className="ds-page-header__tabs"
-            fullWidth
-            items={tabs.items}
-            activeIndex={tabs.activeIndex}
-            defaultActiveIndex={tabs.defaultActiveIndex}
-            onActiveIndexChange={tabs.onActiveIndexChange}
+            fullWidth={tabsConfig.fullWidth ?? true}
+            items={tabsConfig.items}
+            activeIndex={tabsConfig.activeIndex}
+            defaultActiveIndex={tabsConfig.defaultActiveIndex}
+            onActiveIndexChange={tabsConfig.onActiveIndexChange}
+            rootClassName="ds-page-header__tabs-root"
             size="md"
             variant="underline"
             dir={dir}

package/registry/components/expanded/Table.tsx

@@ -29,7 +29,7 @@ import {
 import "./table.css";
 
 export type TableDirection = "ltr" | "rtl";
-export type TableSize = "sm" | "lg";
+export type TableSize = "sm" | "lg" | "comfortable";
 export type TableRowState = "default" | "selected" | "disabled";
 export type TableSortDirection = "asc" | "desc";
 export type TableSortValue = string | number | boolean | Date | null | undefined;
@@ -79,7 +79,7 @@ export type TableAction = {
 
 export type TableItem =
   | { type: "checkbox"; ariaLabel?: string; checked: boolean; disabled?: boolean; indeterminate?: boolean; onCheckedChange?: (checked: boolean) => void }
-  | { type: "text"; tone?: "default" | "subtle"; value: string; weight?: "regular" | "medium" }
+  | { type: "text"; caption?: string; tone?: "default" | "subtle"; value: string; weight?: "regular" | "medium" }
   | { type: "avatarText"; caption?: string; name: string; src?: string; status?: "top" | "bottom" }
   | { type: "rating"; max?: 5; value: number }
   | { type: "progress"; label?: string; tone?: "success" | "brand"; value: number }
@@ -89,9 +89,9 @@ export type TableItem =
   | { type: "avatarStack"; addLabel?: string; avatars: AvatarItem[]; canAdd?: boolean; count?: number; onAdd?: () => void }
   | { type: "tags"; items: string[]; maxVisible?: number }
   | { type: "file"; label?: string }
-  | { type: "brandLogoText"; label: string; logoSrc?: string }
-  | { type: "payment"; brand: string; label?: string }
-  | { type: "image"; label: string; src: string }
+  | { type: "brandLogoText"; caption?: string; label: string; logoSrc?: string }
+  | { type: "payment"; brand: string; caption?: string; label?: string }
+  | { type: "image"; caption?: string; label: string; src: string }
   | { type: "action"; icon: TableAction["icon"]; label: string; onAction?: () => void }
   | { type: "actionGroup"; actions: TableAction[] };
 
@@ -139,6 +139,7 @@ export type DataTablePagination = {
   ariaLabel?: string;
   defaultPage?: number;
   manual?: boolean;
+  messages?: PaginationProps["messages"];
   onPageChange?: (page: number) => void;
   page?: number;
   pageSize?: number;
@@ -293,11 +294,9 @@ export function Table<Row extends TableRowBase>({
                         label={`Select row ${row.id}`}
                         onChange={(checked) => toggleRow(row, checked)}
                       />
-                    ) : column.renderCell ? (
-                      column.renderCell(row)
-                    ) : column.item ? (
-                      renderTableItem(column.item(row), size)
-                    ) : null}
+                    ) : (
+                      renderTableCell(column, row, size === "comfortable" ? "lg" : size)
+                    )}
                   </td>
                 ))}
               </tr>
@@ -309,6 +308,22 @@ export function Table<Row extends TableRowBase>({
   );
 }
 
+function renderTableCell<Row extends TableRowBase>(
+  column: TableColumn<Row>,
+  row: Row,
+  size: TableSize,
+) {
+  if (column.renderCell) return column.renderCell(row);
+  if (column.item) return renderTableItem(column.item(row), size);
+  if ((column.kind ?? "data") !== "data") return null;
+  if (!Object.prototype.hasOwnProperty.call(row, column.id)) return null;
+
+  const value: unknown = Reflect.get(row, column.id);
+  if (typeof value !== "string" && typeof value !== "number") return null;
+
+  return renderTableItem({ type: "text", value: String(value) }, size);
+}
+
 const defaultDataTablePagination: DataTablePagination = {};
 
 const defaultDataTableLabels: DataTableLabels = {
@@ -389,6 +404,9 @@ export function DataTable<Row extends TableRowBase>({
   const displayedRows = paginationConfig?.manual ? processedRows : paginationConfig ? processedRows.slice(startIndex, startIndex + pageSize) : processedRows;
   const visibleFrom = totalRows === 0 ? 0 : startIndex + 1;
   const visibleTo = paginationConfig?.manual ? Math.min(currentPage * pageSize, totalRows) : Math.min(startIndex + displayedRows.length, totalRows);
+  const resultsSummary = paginationConfig
+    ? labels.resultsSummary({ from: visibleFrom, to: visibleTo, total: totalRows })
+    : null;
   const hasHeader = Boolean(title || description || actions.length > 0);
   const hasToolbar = Boolean(searchConfig || filters.length > 0 || selectedRowIds.length > 0 || bulkActions.length > 0);
   const activeBulkActions = selectedRowIds.length > 0 ? bulkActions : [];
@@ -503,20 +521,23 @@ export function DataTable<Row extends TableRowBase>({
 
       {paginationConfig && (
         <footer className="ds-data-table__footer">
-          <ToolbarText>{labels.resultsSummary({ from: visibleFrom, to: visibleTo, total: totalRows })}</ToolbarText>
+          <ToolbarText>{resultsSummary}</ToolbarText>
           <Pagination
             aria-label={
               paginationConfig.ariaLabel ??
+              paginationConfig.messages?.navigation ??
               (typeof title === "string" ? `${title} pagination` : "Table pagination")
             }
             dir={dir}
+            messages={paginationConfig.messages}
             nextDisabled={currentPage >= pageCount}
             onPageChange={setDataTablePage}
             page={currentPage}
             pages={paginationConfig.pages ?? getDataTablePaginationPages(currentPage, pageCount)}
             previousDisabled={currentPage <= 1}
+            caption={resultsSummary}
             showCaption={paginationConfig.showCaption ?? false}
-            summary={labels.resultsSummary({ from: visibleFrom, to: visibleTo, total: totalRows })}
+            summary={resultsSummary}
             type={paginationConfig.type ?? "numeric"}
             variant={paginationConfig.variant ?? "soft"}
           />
@@ -729,7 +750,9 @@ function getTableItemSortValue(item: TableItem): TableSortValue {
 
 function getTableItemText(item: TableItem) {
   const value = getTableItemSortValue(item);
-  return value === null || value === undefined ? "" : String(value);
+  const text = value === null || value === undefined ? "" : String(value);
+  const caption = "caption" in item ? item.caption : undefined;
+  return caption ? `${text} ${caption}` : text;
 }
 
 function getDataTablePaginationPages(currentPage: number, pageCount: number): PaginationPage[] {
@@ -784,15 +807,23 @@ function renderTableItem(item: TableItem, tableSize: TableSize) {
           onChange={item.onCheckedChange}
         />
       );
-    case "text":
-      return <span className={`ds-table-item-text ds-table-item-text--${item.tone ?? "default"} ds-table-item-text--${item.weight ?? "regular"}`}>{item.value}</span>;
+    case "text": {
+      const className = `ds-table-item-text ds-table-item-text--${item.tone ?? "default"} ds-table-item-text--${item.weight ?? "regular"}`;
+      if (!item.caption) return <span className={className}>{item.value}</span>;
+      return (
+        <span className={`${className} ds-table-text-stack`}>
+          <span dir="auto">{item.value}</span>
+          <span className="ds-table-caption" dir="auto">{item.caption}</span>
+        </span>
+      );
+    }
     case "avatarText":
       return (
         <span className="ds-table-avatar-text">
           <Avatar name={item.name} size={tableSize === "lg" ? "md" : "sm"} src={item.src} />
           <span>
-            <strong>{item.name}</strong>
-            {item.caption && <em>{item.caption}</em>}
+            <strong dir="auto">{item.name}</strong>
+            {item.caption && <em className="ds-table-caption" dir="auto">{item.caption}</em>}
           </span>
         </span>
       );
@@ -830,11 +861,11 @@ function renderTableItem(item: TableItem, tableSize: TableSize) {
     case "file":
       return item.label ? <IconLabel icon={<FileIcon />} label={item.label} /> : null;
     case "brandLogoText":
-      return <IconLabel icon={item.logoSrc ? <img alt="" src={item.logoSrc} /> : <BrandIcon />} label={item.label} />;
+      return <IconLabel caption={item.caption} icon={item.logoSrc ? <img alt="" src={item.logoSrc} /> : <BrandIcon />} label={item.label} />;
     case "payment":
-      return <IconLabel icon={<PaymentIcon />} label={item.label ?? item.brand} />;
+      return <IconLabel caption={item.caption} icon={<PaymentIcon />} label={item.label ?? item.brand} />;
     case "image":
-      return <IconLabel icon={<img alt="" src={item.src} />} label={item.label} />;
+      return <IconLabel caption={item.caption} icon={<img alt="" src={item.src} />} label={item.label} />;
     case "action":
       return <IconButton icon={item.icon} label={item.label} onClick={item.onAction} />;
     case "actionGroup":
@@ -989,11 +1020,18 @@ function Rating({ max, value }: { max: number; value: number }) {
   );
 }
 
-function IconLabel({ icon, label }: { icon: ReactNode; label: string }) {
+function IconLabel({ caption, icon, label }: { caption?: string; icon: ReactNode; label: string }) {
   return (
     <span className="ds-table-icon-label">
       <span aria-hidden="true">{icon}</span>
-      <span>{label}</span>
+      {caption ? (
+        <span className="ds-table-text-stack">
+          <span dir="auto">{label}</span>
+          <span className="ds-table-caption" dir="auto">{caption}</span>
+        </span>
+      ) : (
+        <span>{label}</span>
+      )}
     </span>
   );
 }

package/registry/components/expanded/activityFeed.css

@@ -19,8 +19,8 @@
   --activity-feed-space-md: var(--bh-space-md-8);
   --activity-feed-space-lg: var(--bh-space-lg-10);
   --activity-feed-space-xl: var(--bh-space-xl-12);
-  --activity-feed-shadow-component: var(--shadow-component-default);
-  --activity-feed-shadow-color-button: var(--shadow-button-raised);
+  --activity-feed-elevation-component: var(--elevation-component-default);
+  --activity-feed-elevation-color-button: var(--elevation-button-raised);
 
   box-sizing: border-box;
   position: relative;

package/registry/components/expanded/activityHeatmap.css

@@ -20,7 +20,7 @@
 }
 
 .ds-activity-heatmap:focus-visible {
-  box-shadow: var(--shadow-component-focus-ring);
+  box-shadow: var(--elevation-component-focus-ring);
 }
 
 .ds-activity-heatmap *,

package/registry/components/expanded/banner.css

@@ -17,7 +17,7 @@
   --banner-height-default: calc(var(--bh-space-8xl-48) + var(--bh-space-xl-12));
   --banner-height-title: calc(var(--bh-space-8xl-48) + var(--bh-space-xs-4));
   --banner-input-width: var(--bh-input-width);
-  --banner-shadow-floating: var(--shadow-xl);
+  --banner-elevation-floating: var(--elevation-05);
 
   box-sizing: border-box;
   position: relative;
@@ -92,7 +92,7 @@
 .ds-banner--floating.ds-banner--brand.ds-banner--single-action-inline,
 .ds-banner--floating.ds-banner--brand.ds-banner--input,
 .ds-banner--floating.ds-banner--brand.ds-banner--title-description {
-  box-shadow: var(--banner-shadow-floating);
+  box-shadow: var(--banner-elevation-floating);
 }
 
 .ds-banner__main,

package/registry/components/expanded/breadcrumbs.css

@@ -1,6 +1,7 @@
 .ds-breadcrumbs {
   --breadcrumbs-color: var(--bh-content-subtle);
-  --breadcrumbs-current: var(--bh-content-default);
+  --breadcrumbs-current: var(--bh-breadcrumbs-current-content);
+  --breadcrumbs-hover: var(--bh-content-default);
   --breadcrumbs-border: var(--bh-border-subtle);
   --breadcrumbs-surface: var(--bh-bg-raised);
   --breadcrumbs-radius: var(--bh-radius-lg-8);
@@ -19,6 +20,13 @@
   line-height: var(--bh-text-body-md-line-height);
 }
 
+.ds-breadcrumbs--sm {
+  font-size: var(--bh-text-body-sm-medium-font-size);
+  font-weight: var(--bh-text-body-sm-medium-font-weight);
+  letter-spacing: var(--bh-text-body-sm-medium-letter-spacing);
+  line-height: var(--bh-text-body-sm-medium-line-height);
+}
+
 .ds-breadcrumbs *,
 .ds-breadcrumbs *::before,
 .ds-breadcrumbs *::after {
@@ -59,7 +67,7 @@
 }
 
 .ds-breadcrumbs a:hover {
-  color: var(--breadcrumbs-current);
+  color: var(--breadcrumbs-hover);
 }
 
 .ds-breadcrumbs a:focus-visible {
@@ -123,6 +131,15 @@
   display: block;
 }
 
+.ds-breadcrumbs--sm .ds-breadcrumbs__separator,
+.ds-breadcrumbs--sm .ds-breadcrumbs__separator svg {
+  width: var(--bh-space-xl-12);
+}
+
+.ds-breadcrumbs--sm .ds-breadcrumbs__separator svg {
+  height: var(--bh-space-xl-12);
+}
+
 .ds-breadcrumbs:dir(rtl) .ds-breadcrumbs__separator svg {
   transform: scaleX(-1);
 }

package/registry/components/expanded/catalogComponentsShowcase.css

@@ -15,7 +15,7 @@
   border-radius: var(--bh-radius-lg-8);
   background: var(--bh-bg-raised);
   padding: var(--bh-space-4xl-20);
-  box-shadow: var(--shadow-component-default);
+  box-shadow: var(--elevation-component-default);
 }
 
 .catalog-showcase__card:nth-child(4),

package/registry/components/expanded/fileUpload.css

@@ -76,7 +76,7 @@
   color: var(--bh-content-default);
   box-shadow:
     inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-subtle),
-    var(--shadow-component-default);
+    var(--elevation-component-default);
 }
 
 .ds-file-upload__dropzone:hover .ds-file-upload__icon,
@@ -84,7 +84,7 @@
 .ds-file-upload__dropzone[aria-disabled="true"] .ds-file-upload__icon {
   box-shadow:
     inset 0px 0px 0px var(--bh-border-width-default) var(--bh-border-subtle),
-    var(--shadow-component-default);
+    var(--elevation-component-default);
 }
 
 .ds-file-upload__icon svg {
@@ -160,9 +160,9 @@
 
 .ds-file-upload-row {
   --ds-file-upload-row-border: var(--bh-border-subtle);
-  --ds-file-upload-row-shadow:
+  --ds-file-upload-row-elevation:
     inset 0px 0px 0px var(--bh-border-width-default) var(--ds-file-upload-row-border),
-    var(--shadow-component-default);
+    var(--elevation-component-default);
 
   min-height: calc(var(--bh-space-9xl-64) + var(--bh-space-xl-12));
   display: flex;
@@ -172,7 +172,7 @@
   border: 0;
   border-radius: var(--bh-radius-2xl-12);
   background: var(--bh-bg-raised);
-  box-shadow: var(--ds-file-upload-row-shadow);
+  box-shadow: var(--ds-file-upload-row-elevation);
   overflow: clip;
 }
 
@@ -193,9 +193,9 @@
 
 .ds-file-upload-row--error {
   --ds-file-upload-row-border: var(--bh-border-danger-strong);
-  --ds-file-upload-row-shadow:
+  --ds-file-upload-row-elevation:
     inset 0px 0px 0px var(--bh-border-width-default) var(--ds-file-upload-row-border),
-    var(--shadow-sm);
+    var(--elevation-02);
 }
 
 .ds-file-upload-row__content {

package/registry/components/expanded/onboardingStepListItem.css

@@ -18,7 +18,7 @@
   --onboarding-step-line-width: var(--bh-space-xxs-2);
   --onboarding-step-line-offset: calc(-1 * var(--bh-space-md-8));
   --onboarding-step-line-segment-height: calc(var(--bh-space-2xl-14) - var(--bh-space-xxxs-1));
-  --onboarding-step-shadow: var(--shadow-component-default);
+  --onboarding-step-elevation: var(--elevation-component-default);
 
   box-sizing: border-box;
   position: relative;
@@ -50,7 +50,7 @@
   border-color: var(--onboarding-step-border-default);
   color: var(--onboarding-step-content-brand);
   background: var(--onboarding-step-bg-raised);
-  box-shadow: var(--onboarding-step-shadow);
+  box-shadow: var(--onboarding-step-elevation);
 }
 
 .ds-onboarding-step--inactive {