banhaten 0.1.0 → 0.1.2

package/registry/components/expanded/Slideout.tsx

@@ -1,4 +1,11 @@
 import type { ReactNode } from "react";
+import {
+  CheckIcon as LucideCheckIcon,
+  ChevronDownIcon as LucideChevronDownIcon,
+  PaperclipIcon as LucidePaperclipIcon,
+  UploadCloudIcon as LucideUploadCloudIcon,
+  XIcon,
+} from "lucide-react";
 import "./slideout.css";
 
 export type SlideoutSize = "small" | "medium" | "large";
@@ -474,41 +481,23 @@ function Divider() {
 }
 
 function CloseIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 20 20" width="20">
-      <path d="m5.25 5.25 9.5 9.5m0-9.5-9.5 9.5" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
-    </svg>
-  );
+  return <XIcon aria-hidden="true" height="20" strokeWidth={2.2} width="20" />;
 }
 
 function CheckIcon({ className = "" }: { className?: string }) {
   return (
-    <svg aria-hidden="true" className={className} fill="none" height="14" viewBox="0 0 14 14" width="14">
-      <path d="m3 7.1 2.4 2.4L10.6 4.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
-    </svg>
+    <LucideCheckIcon aria-hidden="true" className={className} height="14" strokeWidth={2.6} width="14" />
   );
 }
 
 function ChevronDownIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 20 20" width="20">
-      <path d="m5.5 7.5 4.5 4.5 4.5-4.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.7" />
-    </svg>
-  );
+  return <LucideChevronDownIcon aria-hidden="true" height="20" strokeWidth={2} width="20" />;
 }
 
 function PaperclipIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 20 20" width="20">
-      <path d="m7.4 10.9 4.5-4.5a2.6 2.6 0 1 1 3.7 3.7l-6.2 6.2a4 4 0 0 1-5.7-5.7l6.3-6.3" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" />
-    </svg>
-  );
+  return <LucidePaperclipIcon aria-hidden="true" height="20" strokeWidth={1.8} width="20" />;
 }
 
 function UploadCloudIcon() {
-  return (
-    <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 20 20" width="20">
-      <path d="M7 13.5H5.8a3.3 3.3 0 0 1-.6-6.5 4.6 4.6 0 0 1 8.6-1.8 3.7 3.7 0 0 1 .6 7.3H13M10 8v7m0-7-2.4 2.4M10 8l2.4 2.4" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
-    </svg>
-  );
+  return <LucideUploadCloudIcon aria-hidden="true" height="20" strokeWidth={1.8} width="20" />;
 }

package/registry/components/expanded/Steps.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { CheckIcon } from "lucide-react";
 import "./steps.css";
 
 export type StepIndicator = "icon" | "number";
@@ -135,7 +136,7 @@ export function HorizontalStepItem({
   showTrailingLine = true,
 }: HorizontalStepItemProps) {
   const rtl = dir === "rtl";
-  const linePlacement = getHorizontalLinePlacement(alignment, rtl, showLeadingLine, showTrailingLine);
+  const linePlacement = getHorizontalLinePlacement(alignment, showLeadingLine, showTrailingLine);
   const text = (
     <div className="ds-horizontal-step-item__text">
       {label && <div className="ds-horizontal-step-item__label">{label}</div>}
@@ -195,7 +196,7 @@ export function VerticalStepItem({
       {showLine && <span className="ds-step-line ds-step-line--vertical" />}
     </div>
   );
-  const markerFirst = (alignment === "leading" && !rtl) || (alignment === "trailing" && rtl);
+  const markerFirst = alignment === "leading";
   const renderedActions = actions ?? children;
   const renderedSlot = slotContent;
 
@@ -241,16 +242,13 @@ function StepMarker({ indicator, number }: { indicator: StepIndicator; number: R
 
   return (
     <span className="ds-step-marker ds-step-marker--icon">
-      <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
-        <path d="m10.6 15.3-3.3-3.3 1.4-1.4 1.9 1.9 4.7-4.7 1.4 1.4-6.1 6.1Z" />
-      </svg>
+      <CheckIcon aria-hidden="true" focusable="false" strokeWidth={3} />
     </span>
   );
 }
 
 function getHorizontalLinePlacement(
   alignment: StepAlignment,
-  rtl: boolean,
   showLeadingLine: boolean,
   showTrailingLine: boolean,
 ) {
@@ -259,8 +257,8 @@ function getHorizontalLinePlacement(
   }
 
   if (alignment === "leading") {
-    return rtl ? { before: showTrailingLine, after: false } : { before: false, after: showTrailingLine };
+    return { before: false, after: showTrailingLine };
   }
 
-  return rtl ? { before: false, after: showLeadingLine } : { before: showLeadingLine, after: false };
+  return { before: showLeadingLine, after: false };
 }

package/registry/components/expanded/Table.tsx

@@ -1,4 +1,14 @@
 import { useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import {
+  ArrowUpDownIcon,
+  CheckIcon as LucideCheckIcon,
+  EditIcon as LucideEditIcon,
+  EllipsisIcon,
+  EyeIcon,
+  FileIcon as LucideFileIcon,
+  MinusIcon,
+  Trash2Icon,
+} from "lucide-react";
 import { Pagination, type PaginationPage, type PaginationProps } from "@/components/ui/pagination";
 import { Spinner } from "@/components/ui/spinner";
 import {
@@ -940,69 +950,37 @@ function renderActionIcon(icon: TableAction["icon"]) {
 }
 
 function CheckIcon() {
-  return (
-    <svg viewBox="0 0 16 16">
-      <path d="m3.5 8 3 3 6-6.4" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
-    </svg>
-  );
+  return <LucideCheckIcon strokeWidth={2.6} />;
 }
 
 function IndeterminateIcon() {
-  return (
-    <svg viewBox="0 0 16 16">
-      <path d="M4 8h8" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
-    </svg>
-  );
+  return <MinusIcon strokeWidth={2.6} />;
 }
 
 function SortIcon({ direction }: { direction?: TableSortDirection }) {
   return (
-    <svg aria-hidden="true" data-direction={direction ?? "none"} viewBox="0 0 16 16">
-      <path d="m5 6 3-3 3 3M11 10l-3 3-3-3" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
-    </svg>
+    <ArrowUpDownIcon aria-hidden="true" data-direction={direction ?? "none"} strokeWidth={1.9} />
   );
 }
 
 function MoreIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20">
-      <path d="M5 10h.1M10 10h.1M15 10h.1" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="2.4" />
-    </svg>
-  );
+  return <EllipsisIcon aria-hidden="true" strokeWidth={2.25} />;
 }
 
 function ViewIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20">
-      <path d="M2.5 10s2.7-5 7.5-5 7.5 5 7.5 5-2.7 5-7.5 5-7.5-5-7.5-5Z" fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.5" />
-      <circle cx="10" cy="10" r="2.2" fill="none" stroke="currentColor" strokeWidth="1.5" />
-    </svg>
-  );
+  return <EyeIcon aria-hidden="true" strokeWidth={1.9} />;
 }
 
 function EditIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20">
-      <path d="m4 14.6-.5 2 2-.5L15 6.6 13.5 5 4 14.6Z" fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.5" />
-      <path d="m12.4 6.1 1.5 1.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" />
-    </svg>
-  );
+  return <LucideEditIcon aria-hidden="true" strokeWidth={1.9} />;
 }
 
 function DeleteIcon() {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20">
-      <path d="M4 6h12M8 6V4h4v2m-6 0 .7 10h6.6L14 6" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
-    </svg>
-  );
+  return <Trash2Icon aria-hidden="true" strokeWidth={1.9} />;
 }
 
 function FileIcon() {
-  return (
-    <svg viewBox="0 0 20 20">
-      <path d="M6 3h5.3L15 6.7V17H6V3Z" fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.5" />
-    </svg>
-  );
+  return <LucideFileIcon strokeWidth={1.9} />;
 }
 
 function BrandIcon() {

package/registry/components/expanded/Timeline.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { CheckIcon as LucideCheckIcon } from "lucide-react";
 import "./timeline.css";
 
 export type TimelineOrientation = "vertical" | "horizontal";
@@ -164,25 +165,9 @@ export function TimelineItem({
       dir={dir}
       role="listitem"
     >
-      {orientation === "vertical" && rtl ? (
-        <>
-          {body}
-          {indicator}
-          {leadingDate}
-        </>
-      ) : orientation === "vertical" ? (
-        <>
-          {leadingDate}
-          {indicator}
-          {body}
-        </>
-      ) : (
-        <>
-          {leadingDate}
-          {indicator}
-          {body}
-        </>
-      )}
+      {leadingDate}
+      {indicator}
+      {body}
     </div>
   );
 }
@@ -227,9 +212,5 @@ export function Timeline({
 }
 
 function CheckIcon() {
-  return (
-    <svg aria-hidden="true" className="ds-timeline__check" fill="none" viewBox="0 0 18 18">
-      <path d="m6.98 11.5 5.1-5.1 1.06 1.06-6.16 6.16-3.3-3.3 1.06-1.06 2.24 2.24Z" fill="currentColor" />
-    </svg>
-  );
+  return <LucideCheckIcon aria-hidden="true" className="ds-timeline__check" strokeWidth={3} />;
 }

package/registry/components/expanded/activityFeed.css

@@ -39,17 +39,13 @@
   box-sizing: border-box;
 }
 
-.ds-activity-feed button,
-.ds-activity-feed a {
-  font: inherit;
-}
-
 .ds-activity-feed a {
   text-decoration: none;
 }
 
 .ds-activity-feed--rtl {
   font-family: var(--bh-font-family);
+  margin-inline-end: auto;
 }
 
 .ds-activity-feed-item {
@@ -107,7 +103,7 @@
 }
 
 .ds-activity-feed-item--rtl .ds-activity-feed-item__content {
-  align-items: flex-end;
+  align-items: flex-start;
 }
 
 .ds-activity-feed-item__container {
@@ -126,7 +122,7 @@
 }
 
 .ds-activity-feed-item--rtl .ds-activity-feed-item__topline {
-  justify-content: flex-end;
+  justify-content: flex-start;
 }
 
 .ds-activity-feed-item__text {
@@ -144,7 +140,7 @@
 }
 
 .ds-activity-feed-item--rtl .ds-activity-feed-item__text {
-  justify-content: flex-end;
+  justify-content: flex-start;
   text-align: right;
 }
 
@@ -204,7 +200,7 @@
 }
 
 .ds-activity-feed-item--rtl .ds-activity-feed-item__caption {
-  justify-content: flex-end;
+  justify-content: flex-start;
   text-align: right;
 }
 
@@ -220,6 +216,11 @@
   line-height: var(--bh-text-body-sm-regular-line-height);
 }
 
+.ds-activity-feed-item--rtl .ds-activity-feed-item__slot {
+  place-items: center start;
+  text-align: right;
+}
+
 .ds-activity-feed-item__timestamp {
   width: 100%;
   min-width: 0;
@@ -240,51 +241,6 @@
   padding-top: var(--activity-feed-space-md);
 }
 
-.ds-activity-feed-item__button {
-  position: relative;
-  min-width: 0;
-  height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
-  border: var(--bh-space-xxxs-1) solid transparent;
-  border-radius: var(--activity-feed-control-radius);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 var(--activity-feed-space-xl);
-  box-shadow: var(--shadow-button-raised);
-  cursor: pointer;
-  font-size: var(--bh-text-body-md-font-size);
-  font-weight: var(--bh-font-weight-medium);
-  line-height: var(--bh-text-body-md-line-height);
-  white-space: nowrap;
-}
-
-.ds-activity-feed-item__button--primary {
-  border-color: var(--activity-feed-interactive-brand);
-  background: var(--activity-feed-interactive-brand);
-  box-shadow: var(--activity-feed-shadow-color-button);
-  color: var(--activity-feed-content-on-brand);
-}
-
-.ds-activity-feed-item__button--secondary {
-  border-color: var(--activity-feed-border-default);
-  background: var(--activity-feed-interactive-secondary);
-  color: var(--activity-feed-content-default);
-}
-
-.ds-activity-feed-item__button:hover {
-  filter: brightness(var(--bh-activity-feed-completed-brightness));
-}
-
-.ds-activity-feed-item__button:disabled {
-  cursor: not-allowed;
-  opacity: var(--bh-opacity-muted);
-}
-
-.ds-activity-feed-item__button:focus-visible {
-  outline: var(--bh-space-xxs-2) solid var(--activity-feed-content-link);
-  outline-offset: var(--bh-space-xxs-2);
-}
-
 .ds-activity-feed-item__bottom-space {
   width: 100%;
   height: calc(var(--bh-space-4xl-20) + var(--bh-space-xxs-2));

package/registry/components/expanded/banner.css

@@ -2,14 +2,10 @@
   --banner-bg-brand: var(--bh-bg-brand-default);
   --banner-bg-brand-soft: var(--bh-bg-brand-soft);
   --banner-bg-muted: var(--bh-bg-muted);
-  --banner-bg-white: var(--bh-bg-always-white);
   --banner-border-subtle: var(--bh-border-subtle);
-  --banner-border-input: var(--bh-border-input);
   --banner-content-default: var(--bh-content-default);
-  --banner-content-muted: var(--bh-content-muted);
   --banner-content-inverse: var(--bh-content-inverse);
   --banner-content-link: var(--bh-content-link);
-  --banner-radius-control: var(--bh-control-default);
   --banner-radius-floating: var(--bh-radius-xl-10);
   --banner-space-xxs: var(--bh-space-xxs-2);
   --banner-space-xs: var(--bh-space-xs-4);
@@ -20,10 +16,8 @@
   --banner-height-slim: var(--bh-space-8xl-48);
   --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-control-height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
   --banner-input-width: var(--bh-input-width);
   --banner-shadow-floating: var(--shadow-component-default);
-  --banner-shadow-control: var(--shadow-button-raised);
 
   box-sizing: border-box;
   position: relative;
@@ -74,8 +68,6 @@
 .ds-banner--brand {
   --banner-bg: var(--banner-bg-brand);
   --banner-fg: var(--banner-content-inverse);
-  --banner-action-bg: var(--banner-bg-white);
-  --banner-action-fg: var(--banner-content-default);
   --banner-link-fg: var(--banner-content-inverse);
   --banner-icon-fg: var(--banner-content-inverse);
 }
@@ -83,8 +75,6 @@
 .ds-banner--grey {
   --banner-bg: var(--banner-bg-muted);
   --banner-fg: var(--banner-content-default);
-  --banner-action-bg: var(--banner-bg-white);
-  --banner-action-fg: var(--banner-content-default);
   --banner-link-fg: var(--banner-content-link);
   --banner-icon-fg: var(--bh-content-subtle);
   border-color: var(--banner-border-subtle);
@@ -93,8 +83,6 @@
 .ds-banner--brand-light {
   --banner-bg: var(--banner-bg-brand-soft);
   --banner-fg: var(--banner-content-default);
-  --banner-action-bg: var(--banner-bg-brand);
-  --banner-action-fg: var(--banner-content-inverse);
   --banner-link-fg: var(--banner-content-link);
   --banner-icon-fg: var(--banner-content-link);
 }
@@ -167,10 +155,7 @@
 .ds-banner__message,
 .ds-banner__title,
 .ds-banner__separator,
-.ds-banner__description,
-.ds-banner__link,
-.ds-banner__action,
-.ds-banner__input {
+.ds-banner__description {
   letter-spacing: var(--bh-text-body-md-medium-letter-spacing);
   white-space: nowrap;
   word-break: break-word;
@@ -201,51 +186,23 @@
   font-weight: var(--bh-font-weight-regular);
 }
 
-.ds-banner__link,
 .ds-banner__action,
 .ds-banner__close {
-  appearance: none;
-  margin: 0;
-  border: 0;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: var(--bh-text-body-md-medium-font-size);
-  font-weight: var(--bh-text-body-md-medium-font-weight);
-  line-height: var(--bh-text-body-md-medium-line-height);
+  flex: 0 0 auto;
 }
 
 .ds-banner__link {
-  padding: 0;
-  background: transparent;
-  color: var(--banner-link-fg);
-}
-
-.ds-banner--single-action-inline .ds-banner__link,
-.ds-banner__action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  height: var(--banner-control-height);
-  padding: var(--banner-space-md) var(--banner-space-xl);
-  border-radius: var(--banner-radius-control);
-  background: var(--banner-action-bg);
-  color: var(--banner-action-fg);
-  box-shadow: var(--banner-shadow-control);
+  flex: 0 0 auto;
 }
 
-.ds-banner--single-action-inline .ds-banner__link {
-  padding-inline: var(--banner-space-xl);
+.ds-banner--slim .ds-banner__link {
+  background: transparent;
+  color: var(--banner-link-fg);
+  box-shadow: none;
 }
 
 .ds-banner__close {
-  width: var(--banner-space-3xl);
-  height: var(--banner-space-3xl);
-  padding: 0;
-  border-radius: var(--bh-radius-full);
-  background: transparent;
   color: var(--banner-icon-fg);
-  box-shadow: none;
 }
 
 .ds-banner__close-icon {
@@ -262,32 +219,8 @@
 }
 
 .ds-banner__input {
+  flex: 0 1 var(--banner-input-width);
   width: var(--banner-input-width);
-  height: var(--banner-control-height);
-  min-width: 0;
-  border: var(--bh-space-xxxs-1) solid var(--banner-border-input);
-  border-radius: var(--banner-radius-control);
-  background: var(--banner-bg-white);
-  color: var(--banner-content-default);
-  padding: 0 var(--banner-space-lg);
-  font-family: inherit;
-  font-size: var(--bh-text-body-md-regular-font-size);
-  font-weight: var(--bh-text-body-md-regular-font-weight);
-  line-height: var(--bh-text-body-md-regular-line-height);
-  box-shadow: var(--shadow-input);
-}
-
-.ds-banner__input::placeholder {
-  color: var(--banner-content-muted);
-  opacity: var(--bh-opacity-100);
-}
-
-.ds-banner__link:focus-visible,
-.ds-banner__action:focus-visible,
-.ds-banner__close:focus-visible,
-.ds-banner__input:focus-visible {
-  outline: var(--banner-space-xxs) solid var(--banner-content-link);
-  outline-offset: var(--banner-space-xxs);
 }
 
 .ds-banner--rtl {

package/registry/components/expanded/breadcrumbs.css

@@ -64,7 +64,7 @@
 
 .ds-breadcrumbs a:focus-visible {
   border-radius: var(--bh-radius-sm-4);
-  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
+  outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
   outline-offset: var(--bh-space-xxs-2);
 }
 

package/registry/components/expanded/commandBar.css

@@ -11,7 +11,6 @@
   --command-control-default: var(--bh-control-default);
   --command-input-default: var(--bh-interactive-input-default);
   --command-interactive-hover: var(--bh-interactive-ghost-hover);
-  --command-interactive-secondary: var(--bh-interactive-secondary-default);
   --command-interactive-soft: var(--bh-interactive-soft-default);
   --command-radius-3xl: var(--bh-radius-3xl-16);
   --command-radius-full: var(--bh-radius-full);
@@ -38,8 +37,9 @@
   --command-item-height: calc(var(--bh-space-8xl-48) + var(--bh-space-md-8));
   --command-icon-size: var(--bh-space-6xl-32);
   --command-close-size: var(--bh-space-5xl-24);
-  --command-shortcut-min-width: calc(var(--bh-space-5xl-24) + var(--bh-space-xs-4));
-  --command-tag-height: calc(var(--bh-space-6xl-32) + var(--bh-space-xs-4));
+  --command-shortcut-height: var(--bh-space-5xl-24);
+  --command-shortcut-icon-size: var(--bh-space-3xl-16);
+  --command-shortcut-min-width: var(--bh-space-7xl-40);
   --command-empty-mobile-padding: calc(var(--bh-space-13xl-160) + var(--bh-space-5xl-24));
   --command-shadow-surface: var(--shadow-component-default);
 
@@ -181,6 +181,7 @@
 }
 
 .ds-command-bar__shortcut {
+  height: var(--command-shortcut-height);
   min-width: var(--command-shortcut-min-width);
   border: var(--bh-space-xxxs-1) solid var(--command-border-default);
   border-radius: var(--command-radius-md);
@@ -188,14 +189,26 @@
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
+  gap: var(--bh-space-xxs-2);
   background: var(--command-interactive-soft);
   color: var(--command-content-subtle);
-  font-family: inherit;
-  font-size: var(--bh-text-body-md-regular-font-size);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-sm-medium-font-size);
   font-style: normal;
-  font-weight: var(--bh-text-body-md-regular-font-weight);
-  line-height: var(--bh-text-body-md-regular-line-height);
-  padding: var(--bh-space-xxs-2) var(--command-space-sm);
+  font-weight: var(--bh-text-body-sm-medium-font-weight);
+  line-height: 1;
+  padding: 0 var(--command-space-sm);
+}
+
+.ds-command-bar__shortcut-icon {
+  width: var(--command-shortcut-icon-size);
+  height: var(--command-shortcut-icon-size);
+  stroke-width: 1.8;
+}
+
+.ds-command-bar__shortcut-key {
+  display: block;
+  line-height: 1;
 }
 
 .ds-command-bar__close {
@@ -215,9 +228,8 @@
 
 .ds-command-bar__close:focus-visible,
 .ds-command-bar__search:focus-visible,
-.ds-command-bar__item:focus-visible,
-.ds-command-bar__tag:focus-visible {
-  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
+.ds-command-bar__item:focus-visible {
+  outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
   outline-offset: var(--bh-space-xxs-2);
 }
 
@@ -386,22 +398,7 @@
 }
 
 .ds-command-bar__tag {
-  appearance: none;
-  height: var(--command-tag-height);
-  border: var(--bh-space-xxxs-1) solid var(--command-border-default);
-  border-radius: var(--command-control-default);
-  display: inline-flex;
   flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  background: var(--command-interactive-secondary);
-  color: var(--command-content-default);
-  cursor: pointer;
-  font-size: var(--bh-text-body-md-medium-font-size);
-  font-weight: var(--bh-text-body-md-medium-font-weight);
-  line-height: var(--bh-text-body-md-medium-line-height);
-  padding-inline: var(--command-space-xl);
-  text-align: center;
   white-space: nowrap;
 }
 

package/registry/components/expanded/divider.css

@@ -70,6 +70,6 @@
 }
 
 .ds-content-divider__button:focus-visible {
-  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
+  outline: var(--bh-focus-ring-width) solid var(--bh-border-focus);
   outline-offset: var(--bh-space-xxs-2);
 }