banhaten 0.4.0 → 0.6.0

package/registry/components/autocomplete.tsx

@@ -16,6 +16,7 @@ import { Tag, type TagSize } from "./tag"
 import { Popover, PopoverAnchor, PopoverContent } from "./popover"
 
 import { cn } from "@/lib/utils"
+import { useListboxNavigation } from "@/hooks/use-listbox-navigation"
 
 type AutocompleteSelectionMode = "single" | "multiple"
 type AutocompleteValue = string | string[] | undefined
@@ -153,7 +154,6 @@ const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
           getInitialInputValue(defaultValue, selectionMode, options)
       )
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
-    const [activeIndex, setActiveIndex] = React.useState(-1)
 
     const selectedValue = isValueControlled ? value : uncontrolledValue
     const selectedValues = normalizeSelectedValues(selectedValue, isMultiple)
@@ -182,28 +182,18 @@ const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
       !isDisabled &&
       (isOpenControlled ? Boolean(open) : uncontrolledOpen) &&
       (filteredOptions.length > 0 || hasRenderableContent(emptyText))
+    const listbox = useListboxNavigation({
+      idPrefix: listboxId,
+      isDisabled: (option) => Boolean(option.disabled),
+      open: menuOpen,
+      options: filteredOptions,
+    })
+    const activeIndex = listbox.activeIndex
     const activeOption = filteredOptions[activeIndex]
-    const activeOptionId =
-      menuOpen && activeOption ? getOptionId(listboxId, activeIndex) : undefined
     const resolvedTagSize =
       tagSize ?? (size === "md" ? ("xs" as const) : ("md" as const))
     const clearOnSelect = clearInputOnSelect ?? isMultiple
 
-    React.useEffect(() => {
-      if (!menuOpen) {
-        setActiveIndex(-1)
-        return
-      }
-
-      setActiveIndex((currentIndex) => {
-        if (currentIndex >= 0 && !filteredOptions[currentIndex]?.disabled) {
-          return currentIndex
-        }
-
-        return getFirstEnabledIndex(filteredOptions)
-      })
-    }, [filteredOptions, menuOpen])
-
     function setRootRef(node: HTMLDivElement | null) {
       rootRef.current = node
 
@@ -307,30 +297,26 @@ const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
       if (event.key === "ArrowDown") {
         event.preventDefault()
         setMenuOpen(true)
-        setActiveIndex((currentIndex) =>
-          getNextEnabledIndex(filteredOptions, currentIndex, 1)
-        )
+        listbox.move(1)
         return
       }
 
       if (event.key === "ArrowUp") {
         event.preventDefault()
         setMenuOpen(true)
-        setActiveIndex((currentIndex) =>
-          getNextEnabledIndex(filteredOptions, currentIndex, -1)
-        )
+        listbox.move(-1)
         return
       }
 
       if (event.key === "Home" && menuOpen) {
         event.preventDefault()
-        setActiveIndex(getFirstEnabledIndex(filteredOptions))
+        listbox.moveToEdge("first")
         return
       }
 
       if (event.key === "End" && menuOpen) {
         event.preventDefault()
-        setActiveIndex(getLastEnabledIndex(filteredOptions))
+        listbox.moveToEdge("last")
         return
       }
 
@@ -412,7 +398,7 @@ const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
         >
           <PopoverAnchor asChild>
             <Input
-            aria-activedescendant={activeOptionId}
+            aria-activedescendant={listbox.activeOptionId}
             aria-autocomplete="list"
             aria-controls={menuOpen ? listboxId : undefined}
             aria-describedby={shouldRenderHelper ? `${resolvedInputId}-helper` : undefined}
@@ -470,7 +456,7 @@ const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
                     aria-selected={selectedValues.includes(option.value)}
                     data-active={activeIndex === index ? "true" : undefined}
                     disabled={option.disabled}
-                    id={getOptionId(listboxId, index)}
+                    id={listbox.optionId(index)}
                     itemType={option.itemType}
                     key={option.value}
                     label={option.label}
@@ -486,7 +472,7 @@ const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps>(
                     onClick={() => selectOption(option)}
                     onMouseDown={(event) => event.preventDefault()}
                     onMouseEnter={() => {
-                      if (!option.disabled) setActiveIndex(index)
+                      if (!option.disabled) listbox.setActiveIndex(index)
                     }}
                   />
                 ))
@@ -598,45 +584,6 @@ function hasRenderableContent(content: React.ReactNode) {
   )
 }
 
-function getEnabledIndexes(options: AutocompleteOption[]) {
-  return options
-    .map((option, index) => (option.disabled ? -1 : index))
-    .filter((index) => index >= 0)
-}
-
-function getFirstEnabledIndex(options: AutocompleteOption[]) {
-  return getEnabledIndexes(options)[0] ?? -1
-}
-
-function getLastEnabledIndex(options: AutocompleteOption[]) {
-  const enabledIndexes = getEnabledIndexes(options)
-  return enabledIndexes[enabledIndexes.length - 1] ?? -1
-}
-
-function getNextEnabledIndex(
-  options: AutocompleteOption[],
-  currentIndex: number,
-  offset: 1 | -1
-) {
-  const enabledIndexes = getEnabledIndexes(options)
-  if (enabledIndexes.length === 0) return -1
-
-  const currentPosition = enabledIndexes.indexOf(currentIndex)
-  if (currentPosition === -1) {
-    return offset > 0
-      ? enabledIndexes[0]
-      : enabledIndexes[enabledIndexes.length - 1]
-  }
-
-  const nextPosition =
-    (currentPosition + offset + enabledIndexes.length) % enabledIndexes.length
-  return enabledIndexes[nextPosition]
-}
-
-function getOptionId(listboxId: string, index: number) {
-  return `${listboxId}-option-${index}`
-}
-
 function formatRemoveLabel(option: AutocompleteOption) {
   const optionText = getOptionText(option)
   return optionText ? `Remove ${optionText}` : "Remove option"

package/registry/components/avatar.tsx

@@ -74,7 +74,7 @@ const avatarIconVariants = cva(
 )
 
 const avatarStatusVariants = cva(
-  "absolute end-0 bottom-0 flex size-[var(--bh-avatar-status-size)] items-center justify-center rounded-[var(--bh-radius-full)] border-[var(--bh-avatar-status-ring)] border-[var(--bh-bg-default)] shadow-[var(--shadow-avatar-badge)]",
+  "absolute end-0 bottom-0 flex size-[var(--bh-avatar-status-size)] items-center justify-center rounded-[var(--bh-radius-full)] border-[var(--bh-avatar-status-ring)] border-[var(--bh-bg-default)] shadow-[var(--elevation-avatar-badge)]",
   {
     variants: {
       size: {
@@ -235,7 +235,7 @@ function AvatarBadge({
     <span
       data-slot="avatar-badge"
       className={cn(
-        "absolute end-0 bottom-0 flex size-[var(--bh-space-xl-12)] items-center justify-center rounded-[var(--bh-radius-full)] border-[var(--bh-space-xxs-2)] border-[var(--bh-bg-default)] bg-[var(--bh-interactive-brand-default)] text-[var(--bh-content-on-brand)] shadow-[var(--shadow-avatar-badge)]",
+        "absolute end-0 bottom-0 flex size-[var(--bh-space-xl-12)] items-center justify-center rounded-[var(--bh-radius-full)] border-[var(--bh-space-xxs-2)] border-[var(--bh-bg-default)] bg-[var(--bh-interactive-brand-default)] text-[var(--bh-content-on-brand)] shadow-[var(--elevation-avatar-badge)]",
         className
       )}
       {...props}

package/registry/components/badge.tsx

@@ -67,7 +67,8 @@ const legacyVariantMap: Record<
 const badgeVariants = cva(
   [
     "inline-flex min-w-0 shrink-0 items-center justify-center whitespace-nowrap",
-    "rounded-[var(--bh-radius-full)] border border-transparent outline-none",
+    // The border sits inside the padding, like Figma's inside stroke: each side padding below subtracts its width.
+    "rounded-[var(--bh-radius-full)] border-[length:var(--badge-border-width,var(--bh-border-width-default))] border-transparent outline-none",
     "transition-[background-color,border-color,color,box-shadow]",
     "focus-visible:border-[var(--bh-border-focus)] focus-visible:ring-[length:var(--bh-badge-focus-ring-width)] focus-visible:ring-[var(--ring)]",
     "aria-invalid:border-[var(--bh-border-focus-danger)] aria-invalid:ring-[var(--danger-ring)]",
@@ -78,7 +79,7 @@ const badgeVariants = cva(
     variants: {
       badgeStyle: {
         light: "border-transparent",
-        outline: "border-[length:var(--bh-badge-outline-border-width)] bg-transparent",
+        outline: "[--badge-border-width:var(--bh-badge-outline-border-width)] bg-transparent",
         solid: "border-transparent",
       },
       color: {
@@ -145,30 +146,30 @@ const badgeVariants = cva(
         type: "default",
         size: ["xs", "sm", "default"],
         showNumber: false,
-        class: "px-[var(--bh-space-md-8)]",
+        class: "px-[calc(var(--bh-space-md-8)-var(--badge-border-width,var(--bh-border-width-default)))]",
       },
       {
         type: "default",
         size: "lg",
         showNumber: false,
-        class: "px-[var(--bh-space-xl-12)]",
+        class: "px-[calc(var(--bh-space-xl-12)-var(--badge-border-width,var(--bh-border-width-default)))]",
       },
       {
         type: ["leading-icon", "trailing-icon", "dot"],
         showNumber: false,
         splitAction: false,
-        class: "px-[var(--bh-space-md-8)]",
+        class: "px-[calc(var(--bh-space-md-8)-var(--badge-border-width,var(--bh-border-width-default)))]",
       },
       {
         type: "trailing-icon",
         showNumber: false,
         splitAction: true,
-        class: "ps-[var(--bh-space-md-8)]",
+        class: "ps-[calc(var(--bh-space-md-8)-var(--badge-border-width,var(--bh-border-width-default)))]",
       },
       {
         type: "flag",
         showNumber: false,
-        class: "ps-[var(--bh-space-xs-4)] pe-[var(--bh-space-md-8)]",
+        class: "ps-[calc(var(--bh-space-xs-4)-var(--badge-border-width,var(--bh-border-width-default)))] pe-[calc(var(--bh-space-md-8)-var(--badge-border-width,var(--bh-border-width-default)))]",
       },
       {
         size: ["xs", "sm", "default"],

package/registry/components/button-group.tsx

@@ -32,7 +32,7 @@ type ToggleGroupContextValue = {
 const toggleGroupContext = React.createContext<ToggleGroupContextValue | null>(null)
 
 const buttonGroupVariants = cva(
-  "inline-flex w-fit max-w-full items-center overflow-x-auto overflow-y-hidden rounded-[var(--bh-button-group-radius)] bg-[var(--bh-button-group-bg)] text-[var(--bh-button-group-content)] shadow-[var(--shadow-button-group)] outline-none focus-visible:shadow-[var(--shadow-button-group-focus)] [--shadow-button-group:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-button-group-border),var(--shadow-component-default)]",
+  "inline-flex w-fit max-w-full items-center overflow-x-auto overflow-y-hidden rounded-[var(--bh-button-group-radius)] bg-[var(--bh-button-group-bg)] text-[var(--bh-button-group-content)] shadow-[var(--elevation-button-group)] outline-none focus-visible:shadow-[var(--elevation-button-group-focus)] [--elevation-button-group:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-button-group-border),var(--elevation-component-default)]",
   {
     variants: {
       size: {
@@ -48,7 +48,7 @@ const buttonGroupVariants = cva(
 )
 
 const buttonGroupItemVariants = cva(
-  "relative inline-flex shrink-0 items-center justify-center whitespace-nowrap bg-[var(--bh-button-group-item-bg)] text-[length:var(--bh-text-button-font-size)] font-[var(--bh-text-button-font-weight)] leading-[var(--bh-text-button-line-height)] tracking-[var(--bh-text-button-letter-spacing)] text-[var(--bh-button-group-content)] outline-none transition-[background-color,box-shadow,color] before:absolute before:inset-y-0 before:start-0 before:w-[var(--bh-border-width-default)] before:bg-[var(--bh-button-group-divider)] before:content-[''] first:before:hidden hover:bg-[var(--bh-button-group-item-hover-bg)] active:bg-[var(--bh-button-group-item-pressed-bg)] focus-visible:z-[var(--bh-z-raised)] focus-visible:shadow-[var(--shadow-button-group-focus)] aria-[pressed=true]:bg-[var(--bh-button-group-item-active-bg)] aria-[pressed=true]:text-[var(--bh-button-group-content-active)] data-[active=true]:bg-[var(--bh-button-group-item-active-bg)] data-[active=true]:text-[var(--bh-button-group-content-active)] disabled:pointer-events-none disabled:bg-[var(--bh-button-group-item-disabled-bg)] disabled:text-[var(--bh-button-group-content-disabled)] [&_svg]:pointer-events-none [&_svg]:size-[var(--bh-button-group-icon-size)] [&_svg]:m-[calc((var(--bh-button-group-icon-slot-size)-var(--bh-button-group-icon-size))/2)] [&_svg]:shrink-0 rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
+  "relative inline-flex shrink-0 items-center justify-center whitespace-nowrap bg-[var(--bh-button-group-item-bg)] text-[length:var(--bh-text-button-font-size)] font-[var(--bh-text-button-font-weight)] leading-[var(--bh-text-button-line-height)] tracking-[var(--bh-text-button-letter-spacing)] text-[var(--bh-button-group-content)] outline-none transition-[background-color,box-shadow,color] before:absolute before:inset-y-0 before:start-0 before:w-[var(--bh-border-width-default)] before:bg-[var(--bh-button-group-divider)] before:content-[''] first:before:hidden hover:bg-[var(--bh-button-group-item-hover-bg)] active:bg-[var(--bh-button-group-item-pressed-bg)] focus-visible:z-[var(--bh-z-raised)] focus-visible:shadow-[var(--elevation-button-group-focus)] aria-[pressed=true]:bg-[var(--bh-button-group-item-active-bg)] aria-[pressed=true]:text-[var(--bh-button-group-content-active)] data-[active=true]:bg-[var(--bh-button-group-item-active-bg)] data-[active=true]:text-[var(--bh-button-group-content-active)] disabled:pointer-events-none disabled:bg-[var(--bh-button-group-item-disabled-bg)] disabled:text-[var(--bh-button-group-content-disabled)] [&_svg]:pointer-events-none [&_svg]:size-[var(--bh-button-group-icon-size)] [&_svg]:m-[calc((var(--bh-button-group-icon-slot-size)-var(--bh-button-group-icon-size))/2)] [&_svg]:shrink-0 rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
   {
     variants: {
       size: {

package/registry/components/button.tsx

@@ -6,25 +6,30 @@ import { cn } from "@/lib/utils"
 
 type ControlDensity = "compact" | "default" | "comfortable"
 
+const dangerButtonVariant =
+  "bg-[var(--bh-interactive-danger-default)] text-[var(--bh-content-on-color)] shadow-[var(--elevation-button-raised)] hover:bg-[var(--bh-interactive-danger-hover)] active:bg-[var(--bh-interactive-danger-pressed)] focus-visible:shadow-[var(--elevation-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-disabled)] disabled:text-[var(--bh-content-disabled)]"
+
+const softDangerButtonVariant =
+  "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-danger-soft-default)] text-[var(--bh-content-danger-default)] hover:bg-[var(--bh-interactive-danger-soft-hover)] active:bg-[var(--bh-interactive-danger-soft-pressed)] focus-visible:border-[var(--bh-interactive-danger-default)] focus-visible:shadow-[var(--elevation-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-soft-disabled)] disabled:text-[var(--bh-content-disabled)]"
+
 const buttonVariants = cva(
-  "group/button inline-flex min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-control-default)] text-[length:var(--bh-text-button-font-size)] font-[var(--bh-text-button-font-weight)] leading-[var(--bh-text-button-line-height)] tracking-[var(--bh-text-button-letter-spacing)] outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none disabled:shadow-none aria-invalid:border-[length:var(--bh-border-width-default)] aria-invalid:border-[var(--bh-border-danger-strong)] aria-invalid:shadow-[var(--shadow-button-danger-focus)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[var(--bh-button-icon-size)] [&_svg:not([class*='size-'])]:m-[calc((var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] [&_svg[data-icon='inline-start']]:ms-[calc(var(--bh-button-icon-offset)+(var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] [&_svg[data-icon='inline-end']]:me-[calc(var(--bh-button-icon-offset)+(var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
+  "group/button inline-flex min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-control-default)] text-[length:var(--bh-text-button-font-size)] font-[var(--bh-text-button-font-weight)] leading-[var(--bh-text-button-line-height)] tracking-[var(--bh-text-button-letter-spacing)] outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:shadow-[var(--elevation-button-focus)] disabled:pointer-events-none disabled:shadow-none aria-invalid:border-[length:var(--bh-border-width-default)] aria-invalid:border-[var(--bh-border-danger-strong)] aria-invalid:shadow-[var(--elevation-button-danger-focus)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[var(--bh-button-icon-size)] [&_svg:not([class*='size-'])]:m-[calc((var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] [&_svg[data-icon='inline-start']]:ms-[calc(var(--bh-button-icon-offset)+(var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] [&_svg[data-icon='inline-end']]:me-[calc(var(--bh-button-icon-offset)+(var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
   {
     variants: {
       variant: {
         default:
-          "bg-[var(--bh-interactive-brand-default)] text-[var(--bh-content-on-brand)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-interactive-brand-hover)] active:bg-[var(--bh-interactive-brand-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
-        danger:
-          "bg-[var(--bh-interactive-danger-default)] text-[var(--bh-content-on-color)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-interactive-danger-hover)] active:bg-[var(--bh-interactive-danger-pressed)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-disabled)] disabled:text-[var(--bh-content-disabled)]",
-        destructive:
-          "bg-[var(--bh-interactive-danger-default)] text-[var(--bh-content-on-color)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-interactive-danger-hover)] active:bg-[var(--bh-interactive-danger-pressed)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-interactive-brand-default)] text-[var(--bh-content-on-brand)] shadow-[var(--elevation-button-raised)] hover:bg-[var(--bh-interactive-brand-hover)] active:bg-[var(--bh-interactive-brand-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
+        danger: dangerButtonVariant,
+        /** @deprecated Use `danger` instead. */
+        destructive: dangerButtonVariant,
         success:
-          "bg-[var(--bh-interactive-success-default)] text-[var(--bh-content-on-success)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-interactive-success-hover)] active:bg-[var(--bh-interactive-success-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-interactive-success-default)] text-[var(--bh-content-on-success)] shadow-[var(--elevation-button-raised)] hover:bg-[var(--bh-interactive-success-hover)] active:bg-[var(--bh-interactive-success-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
         warning:
-          "bg-[var(--bh-interactive-warning-default)] text-[var(--bh-content-on-warning)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-interactive-warning-hover)] active:bg-[var(--bh-interactive-warning-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-interactive-warning-default)] text-[var(--bh-content-on-warning)] shadow-[var(--elevation-button-raised)] hover:bg-[var(--bh-interactive-warning-hover)] active:bg-[var(--bh-interactive-warning-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
         secondary:
-          "bg-[var(--bh-interactive-secondary-default)] text-[var(--bh-content-default)] shadow-[var(--shadow-button-secondary)] [--bh-button-secondary-border:var(--bh-border-default)] hover:bg-[var(--bh-interactive-secondary-hover)] active:bg-[var(--bh-interactive-secondary-pressed)] focus-visible:[--bh-button-secondary-focus-border:var(--bh-border-brand-strong)] focus-visible:shadow-[var(--shadow-button-secondary-focus)] disabled:border-[length:var(--bh-border-width-default)] disabled:border-[var(--bh-border-disabled)] disabled:bg-[var(--bh-interactive-secondary-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-interactive-secondary-default)] text-[var(--bh-content-default)] shadow-[var(--elevation-button-secondary)] [--bh-button-secondary-border:var(--bh-border-default)] hover:bg-[var(--bh-interactive-secondary-hover)] active:bg-[var(--bh-interactive-secondary-pressed)] focus-visible:[--bh-button-secondary-focus-border:var(--bh-border-brand-strong)] focus-visible:shadow-[var(--elevation-button-secondary-focus)] disabled:border-[length:var(--bh-border-width-default)] disabled:border-[var(--bh-border-disabled)] disabled:bg-[var(--bh-interactive-secondary-disabled)] disabled:text-[var(--bh-content-disabled)]",
         soft:
-          "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-default)] shadow-[var(--shadow-button-soft)] hover:bg-[var(--bh-interactive-soft-hover)] active:bg-[var(--bh-interactive-soft-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:bg-[var(--bh-interactive-soft-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-default)] shadow-[var(--elevation-button-soft)] hover:bg-[var(--bh-interactive-soft-hover)] active:bg-[var(--bh-interactive-soft-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:bg-[var(--bh-interactive-soft-disabled)] disabled:text-[var(--bh-content-disabled)]",
         outline:
           "border-[length:var(--bh-border-width-default)] border-[var(--bh-border-default)] bg-[var(--bh-interactive-outlined-default)] text-[var(--bh-content-default)] hover:bg-[var(--bh-interactive-outlined-hover)] active:bg-[var(--bh-interactive-outlined-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:border-[var(--bh-border-disabled)] disabled:bg-[var(--bh-interactive-outlined-disabled)] disabled:text-[var(--bh-content-disabled)]",
         ghost:
@@ -33,10 +38,9 @@ const buttonVariants = cva(
           "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-brand-default)] hover:bg-[var(--bh-interactive-ghost-hover)] active:bg-[var(--bh-interactive-ghost-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:bg-[var(--bh-interactive-ghost-disabled)] disabled:text-[var(--bh-content-disabled)]",
         white:
           "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-bg-always-white)] text-[var(--bh-content-on-light)] focus-visible:border-[var(--bh-border-focus)] disabled:opacity-[var(--bh-opacity-30)]",
-        "soft-danger":
-          "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-danger-soft-default)] text-[var(--bh-content-danger-default)] hover:bg-[var(--bh-interactive-danger-soft-hover)] active:bg-[var(--bh-interactive-danger-soft-pressed)] focus-visible:border-[var(--bh-interactive-danger-default)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-soft-disabled)] disabled:text-[var(--bh-content-disabled)]",
-        "soft-destructive":
-          "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-danger-soft-default)] text-[var(--bh-content-danger-default)] hover:bg-[var(--bh-interactive-danger-soft-hover)] active:bg-[var(--bh-interactive-danger-soft-pressed)] focus-visible:border-[var(--bh-interactive-danger-default)] focus-visible:shadow-[var(--shadow-button-danger-focus)] disabled:bg-[var(--bh-interactive-danger-soft-disabled)] disabled:text-[var(--bh-content-disabled)]",
+        "soft-danger": softDangerButtonVariant,
+        /** @deprecated Use `soft-danger` instead. */
+        "soft-destructive": softDangerButtonVariant,
         link: "bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-brand-default)] hover:bg-[var(--bh-interactive-ghost-hover)] active:bg-[var(--bh-interactive-ghost-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:text-[var(--bh-content-disabled)]",
       },
       size: {
@@ -84,6 +88,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
       data-density={density}
       data-size={resolvedSize}
       data-slot="button"
+      data-variant={variant ?? "default"}
       ref={ref}
       className={cn(buttonVariants({ variant, size: resolvedSize, className }))}
       {...props}

package/registry/components/card.tsx

@@ -8,6 +8,7 @@ import { Button, type ButtonProps } from "./button"
 type CardOrientation = "vertical" | "horizontal"
 type CardType = "leading-image" | "trailing-image" | "full-image"
 type CardBreakpoint = "desktop" | "mobile"
+type CardSize = "default" | "comfortable"
 
 const cardVariants = cva(
   [
@@ -16,10 +17,14 @@ const cardVariants = cva(
     "text-[var(--bh-content-default)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-card-border)]",
     "[--bh-card-bg:var(--bh-bg-raised)]",
     "[--bh-card-border:var(--bh-border-subtle)]",
-    "[--bh-card-radius:var(--bh-radius-3xl-16)]",
   ],
   {
     variants: {
+      // comfortable is the app-shell panel: a smaller radius than the library cards.
+      size: {
+        default: "[--bh-card-radius:var(--bh-radius-3xl-16)]",
+        comfortable: "[--bh-card-radius:var(--bh-card-comfortable-radius)]",
+      },
       orientation: {
         vertical: "flex-col",
         horizontal: "items-stretch",
@@ -67,6 +72,7 @@ const cardVariants = cva(
       },
     ],
     defaultVariants: {
+      size: "default",
       orientation: "vertical",
       type: "leading-image",
       breakpoint: "desktop",
@@ -109,15 +115,18 @@ type CardActionsProps = React.ComponentProps<"div"> & {
 }
 
 type CardFooterProps = React.ComponentProps<"div">
-type CardSurfaceProps = React.ComponentPropsWithoutRef<"article">
+type CardSurfaceProps = React.ComponentPropsWithoutRef<"article"> & {
+  size?: CardSize
+}
 
 const CardSurface = React.forwardRef<HTMLElement, CardSurfaceProps>(
-  function CardSurface({ className, ...props }, ref) {
+  function CardSurface({ className, size = "default", ...props }, ref) {
     return (
       <article
         data-slot="card-surface"
+        data-size={size}
         ref={ref}
-        className={cn(cardVariants(), className)}
+        className={cn(cardVariants({ size }), className)}
         {...props}
       />
     )
@@ -144,6 +153,7 @@ const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
   showImage,
   showMoreButton,
   showSubtitle,
+  size = "default",
   subtitle,
   title,
   type = "leading-image",
@@ -199,10 +209,12 @@ const Card = React.forwardRef<HTMLElement, CardProps>(function Card({
       data-slot="card"
       data-breakpoint={cardBreakpoint}
       data-orientation={cardOrientation}
+      data-size={size ?? "default"}
       data-type={cardType}
       ref={ref}
       className={cn(
         cardVariants({
+          size,
           orientation: cardOrientation,
           type: cardType,
           breakpoint: cardBreakpoint,
@@ -550,7 +562,7 @@ function CardMoreButton({
         "inline-flex size-[var(--bh-card-more-size)] shrink-0 items-center justify-center",
         "rounded-[var(--bh-control-default)] outline-none",
         "transition-[background-color,color,box-shadow]",
-        "focus-visible:shadow-[var(--shadow-button-focus)]",
+        "focus-visible:shadow-[var(--elevation-button-focus)]",
         onImage
           ? "text-[var(--bh-content-on-color)] hover:bg-[var(--bh-interactive-ghost-hover)]"
           : "text-[var(--bh-content-subtle)] hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)]"
@@ -633,6 +645,7 @@ export {
   type CardMediaProps,
   type CardOrientation,
   type CardProps,
+  type CardSize,
   type CardSurfaceProps,
   type CardType,
 }

package/registry/components/chart-block-data.ts

@@ -0,0 +1,177 @@
+import type { ChartDatum, ChartSpec } from "./chart-options"
+
+export type ChartBlockDefinition = {
+  title: string
+  description: string
+  spec: ChartSpec
+  periods?: { label: string; count: number }[]
+}
+
+const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+const monthly = (keys: string[], values: number[][]): ChartDatum[] => values.map((row, index) => ({
+  name: months[index % 12] + (values.length > 12 ? ` '${24 + Math.floor(index / 12)}` : ""),
+  ...Object.fromEntries(keys.map((key, column) => [key, row[column]])),
+}))
+const monthPeriods = [{ label: "3 months", count: 3 }, { label: "6 months", count: 6 }, { label: "All", count: Infinity }]
+const series = (key: string, label: string, colorIndex: number) => ({ key, label, colorIndex })
+
+// Illustrative source datasets, adapted from EvilCharts' MIT-licensed ECharts blocks.
+// All visual decisions live in the shared token-aware option builders and block CSS.
+export const chartBlockDefinitions = {
+  latency: {
+    title: "Latency Percentiles",
+    description: "Request latency by percentile, in milliseconds.",
+    periods: [{ label: "5 minutes", count: 5 }, { label: "15 minutes", count: 15 }, { label: "All", count: Infinity }],
+    spec: {
+      family: "area", curve: "linear", variant: "gradient", hoverHighlight: true,
+      series: [series("p99", "P99 (ms)", 3), series("p95", "P95 (ms)", 2), series("p75", "P75 (ms)", 4), series("p50", "P50 (ms)", 0)],
+      data: [
+        [188, 92, 44, 20], [196, 95, 46, 21], [181, 89, 43, 20], [192, 94, 47, 22],
+        [205, 99, 45, 21], [187, 91, 44, 20], [179, 88, 42, 19], [198, 96, 46, 21],
+        [210, 101, 48, 22], [194, 93, 45, 21], [202, 97, 47, 22], [215, 104, 49, 23],
+        [231, 112, 52, 23], [278, 131, 57, 24], [306, 142, 61, 25], [289, 135, 58, 24],
+        [247, 118, 53, 23], [216, 105, 49, 22], [201, 97, 46, 21], [193, 94, 45, 21],
+        [186, 90, 44, 20], [199, 96, 46, 21], [207, 100, 47, 22], [191, 92, 45, 20],
+        [184, 89, 43, 20], [196, 95, 46, 21], [209, 101, 48, 22], [198, 96, 46, 21], [204, 98, 46, 21],
+      ].map(([p99, p95, p75, p50], index) => ({ name: `13:${String(index + 6).padStart(2, "0")}`, p99, p95, p75, p50 })),
+    },
+  },
+  portfolio: {
+    title: "Portfolio Comparison", description: "Compare the change in two example portfolios, in USD.",
+    periods: [{ label: "7 days", count: 7 }, { label: "14 days", count: 14 }, { label: "All", count: Infinity }],
+    spec: {
+      family: "area", curve: "step", variant: "dotted", hoverReveal: true,
+      series: [series("portfolioA", "Portfolio A (USD)", 0), series("portfolioB", "Portfolio B (USD)", 1)],
+      data: [
+        [53916, 53670], [54380, 53080], [54760, 52460], [54480, 51880], [54060, 51340],
+        [53820, 50900], [53520, 50520], [53240, 50200], [53080, 49960], [52840, 49760],
+        [52700, 49640], [52520, 49600], [52420, 49720], [52340, 49980], [52240, 50360],
+        [52140, 50820], [52080, 51340], [52020, 51900], [51960, 52440], [51900, 52960],
+        [51860, 53420], [51800, 53780], [51740, 54040], [51700, 54200], [51640, 54300],
+        [51580, 54320], [51538, 54287],
+      ].map(([portfolioA, portfolioB], index) => ({ name: index < 10 ? `Dec ${index + 22}` : `Jan ${index - 9}`, portfolioA, portfolioB })),
+    },
+  },
+  benchmark: {
+    title: "Growth Benchmark", description: "Weekly signups compared with the target.",
+    periods: [{ label: "Recent 4", count: 4 }, { label: "Recent 12", count: 12 }, { label: "All", count: Infinity }],
+    spec: {
+      family: "area", curve: "step", legend: true,
+      series: [{ ...series("actual", "Actual", 0), variant: "hatched" }, { ...series("target", "Target", 4), type: "line", stroke: "dashed" }],
+      data: [
+        ["Jan 1", 240, 125], ["Jan 8", 240, 125], ["Jan 15", 175, 200], ["Jan 22", 175, 200],
+        ["Feb 1", 175, 200], ["Feb 8", 260, 125], ["Feb 15", 260, 125], ["Feb 22", 260, 125],
+        ["Mar 1", 260, 190], ["Mar 8", 335, 190], ["Mar 15", 335, 190], ["Mar 22", 335, 390],
+        ["Apr 1", 335, 390], ["Apr 8", 335, 390], ["Apr 15", 190, 390], ["Apr 22", 215, 305],
+        ["May 1", 215, 305], ["May 8", 215, 175], ["May 15", 215, 175], ["May 22", 275, 175], ["Jun 1", 275, 245],
+      ].map(([name, actual, target]) => ({ name, actual, target })),
+    },
+  },
+  audience: {
+    title: "Audience Growth", description: "Monthly listeners across every show and episode.", periods: monthPeriods,
+    spec: { family: "area", curve: "monotone", variant: "gradient", series: [{ key: "listeners", label: "Listeners", colorIndices: [1, 4, 5] }],
+      data: monthly(["listeners"], [[2980], [3120], [3460], [3380], [3720], [4180], [4560]]) },
+  },
+  payouts: {
+    title: "Payout Trend", description: "Paid and pending amounts by month, in USD.", periods: monthPeriods,
+    spec: { family: "line", curve: "monotone", legend: true,
+      series: [{ key: "payouts", label: "Paid (USD)", colorIndices: [2, 7] }, { key: "pending", label: "Pending (USD)", colorIndices: [4, 5] }],
+      data: monthly(["payouts", "pending"], [[312, 548], [388, 502], [342, 561], [455, 470], [521, 398], [486, 441], [573, 372], [640, 316], [598, 358], [662, 284], [617, 331], [690, 262]]) },
+  },
+  shipments: {
+    title: "Shipments", description: "Orders shipped in corresponding slots this week and last week.",
+    periods: [{ label: "2 days", count: 8 }, { label: "4 days", count: 16 }, { label: "All", count: Infinity }],
+    spec: { family: "line", curve: "linear", legend: true,
+      series: [series("current", "This week", 0), { ...series("previous", "Last week", 4), stroke: "dashed" }],
+      data: [[14, 34], [9, 41], [18, 37], [26, 29], [31, 24], [27, 33], [19, 45], [12, 52], [16, 47], [22, 39], [15, 44], [11, 50], [17, 43], [24, 31], [20, 26], [13, 22], [21, 28], [29, 36], [34, 42], [28, 55], [23, 49], [30, 40], [36, 35], [32, 44]]
+        .map(([current, previous], index) => ({ name: `${["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][Math.floor(index / 4)]} ${index % 4 + 1}`, current, previous })) },
+  },
+  peak: {
+    title: "Peak Week", description: "Organic and paid signups, with the best week highlighted.",
+    periods: [{ label: "4 weeks", count: 4 }, { label: "8 weeks", count: 8 }, { label: "All", count: Infinity }],
+    spec: { family: "bar", stack: "stacked", highlightMax: true, legend: true,
+      series: [series("organic", "Organic", 0), series("paid", "Paid", 4)],
+      data: [[128, 74], [164, 91], [142, 66], [199, 108], [176, 84], [231, 167], [208, 96], [287, 158], [244, 112], [196, 88], [221, 103], [173, 79]]
+        .map(([organic, paid], index) => ({ name: `W${String(index + 1).padStart(2, "0")}`, organic, paid })) },
+  },
+  grid: {
+    title: "Grid Bar Chart", description: "Hourly sessions shown as columns of cells.",
+    periods: [{ label: "6 hours", count: 6 }, { label: "12 hours", count: 12 }, { label: "All", count: Infinity }],
+    spec: { family: "bar", variant: "blocks", series: [series("sessions", "Sessions", 0)],
+      data: [42, 28, 19, 14, 12, 18, 34, 66, 98, 124, 147, 163, 158, 171, 186, 174, 152, 138, 119, 96, 84, 71, 58, 47]
+        .map((sessions, index) => ({ name: `${String(index).padStart(2, "0")}:00`, sessions })) },
+  },
+  monospace: {
+    title: "Monospace Bar Chart", description: "Monthly sales with bars that expand on hover.", periods: monthPeriods,
+    spec: { family: "bar", variant: "expandable", series: [series("sales", "Sales (USD)", 0)],
+      data: monthly(["sales"], [342, 876, 512, 629, 458, 781, 394, 925, 647, 532, 803, 271, 388, 912, 564, 671, 499, 838, 427, 968, 702, 585, 861, 314].map((value) => [value])) },
+  },
+  "market-share": {
+    title: "Market Share", description: "Illustrative ecosystem value by company, in billions of USD.",
+    spec: { family: "pie", variant: "padded", series: [series("value", "Value (USD billions)", 0)],
+      data: [{ name: "Skyline", value: 27 }, { name: "Datawell", value: 21 }, { name: "Cloudpeak", value: 13 }, { name: "Taskbridge", value: 21 }, { name: "Insightloop", value: 6 }, { name: "Streamforge", value: 12 }] },
+  },
+  "progress-rings": {
+    title: "Progress Rings", description: "Where the workday leaks: illustrative findings from 1,240 survey responses.",
+    spec: { family: "pie", series: [series("value", "Respondents (%)", 0)], data: [
+      { name: "Additional support requests", value: 48 }, { name: "Inaccurate forecasts", value: 67 },
+    ] },
+  },
+  "revenue-mix": {
+    title: "Revenue Mix", description: "Revenue by sales channel, in USD.",
+    spec: { family: "pie", variant: "padded", series: [series("value", "Revenue (USD)", 0)], data: [
+      { name: "Direct", value: 52400 }, { name: "Marketplace", value: 38900 }, { name: "Wholesale", value: 24150 }, { name: "Affiliate", value: 16300 },
+    ] },
+  },
+  "reliability-score": {
+    title: "Reliability Score", description: "Delivery reliability: 842 out of 1,000, in the excellent band.",
+    spec: { family: "pie", variant: "padded", data: [
+      { name: "At risk", from: 0, value: 450 }, { name: "Fair", from: 450, value: 200 }, { name: "Good", from: 650, value: 170 }, { name: "Excellent", from: 820, value: 180 },
+    ], series: [series("value", "Band width", 0)] },
+  },
+  budget: {
+    title: "Monthly Budget", description: "The share and amount allocated to each monthly budget category.",
+    spec: { family: "radial", max: 100, series: [series("value", "Share (%)", 0)], data: [
+      { name: "Payroll", value: 46, amount: 920000 }, { name: "Infrastructure", value: 21, amount: 420000 }, { name: "Marketing", value: 14, amount: 280000 }, { name: "Tooling", value: 10, amount: 200000 }, { name: "Support", value: 9, amount: 180000 },
+    ] },
+  },
+  ride: {
+    title: "Ride Summary", description: "Distance, elevation, energy and cadence against their goals.",
+    spec: { family: "radial", data: [
+      { name: "Distance", value: 18.4, goal: 25, unit: "km" }, { name: "Elevation", value: 312, goal: 450, unit: "m" },
+      { name: "Energy", value: 684, goal: 1200, unit: "kJ" }, { name: "Cadence", value: 82, goal: 95, unit: "rpm" },
+    ] },
+  },
+  "cache-tiers": {
+    title: "Cache Tiers", description: "Request routing across four cache tiers, from a sample of 1,000 requests.",
+    spec: { family: "radial", variant: "semi", max: 100, series: [series("value", "Share (%)", 0)], data: [
+      { name: "L1 Memory", value: 61, count: 610 }, { name: "L2 Regional", value: 24, count: 240 },
+      { name: "Edge Overflow", value: 10, count: 100 }, { name: "Origin Fetch", value: 5, count: 50 },
+    ] },
+  },
+  allocation: {
+    title: "Fund Allocation", description: "Where the fund flows, in thousands of USD.",
+    spec: { family: "sankey", variant: "gradient", labels: "inside", data: [],
+      nodes: ["Inflow", "Equities", "Bonds", "Cash", "Growth", "Income", "Reserve"].map((name) => ({ name })),
+      links: [[0, 1, 78], [0, 2, 46], [0, 3, 24], [1, 4, 52], [1, 5, 26], [2, 5, 19], [2, 6, 27], [3, 4, 9], [3, 6, 15]]
+        .map(([source, target, value]) => ({ source, target, value })) },
+  },
+  pipeline: {
+    title: "Revenue Pipeline", description: "Four revenue sources flow into four operating allocations, in USD.",
+    spec: { family: "sankey", variant: "gradient", labels: "outside", data: [],
+      nodes: ["Retail", "Wholesale", "Licensing", "Services", "Pipeline", "Expansion", "Tooling", "Support", "Reserve"].map((name) => ({ name })),
+      links: [[0, 4, 31480], [1, 4, 46220], [2, 4, 14960], [3, 4, 28340], [4, 5, 52640], [4, 6, 9180], [4, 7, 12470], [4, 8, 46710]]
+        .map(([source, target, value]) => ({ source, target, value })) },
+  },
+} satisfies Record<string, ChartBlockDefinition>
+
+export type ChartBlockId = keyof typeof chartBlockDefinitions
+
+export const chartBlocks = (Object.entries(chartBlockDefinitions) as [ChartBlockId, ChartBlockDefinition][])
+  .map(([id, definition]) => ({ id, title: definition.title, description: definition.description, family: definition.spec.family }))
+
+export function getChartBlockSpec(block: ChartBlockId, period = "All"): ChartSpec {
+  const definition: ChartBlockDefinition = chartBlockDefinitions[block]
+  const count = definition.periods?.find((entry) => entry.label === period)?.count ?? Infinity
+  return { ...definition.spec, data: definition.spec.data.slice(-count) }
+}