banhaten 0.4.0 → 0.6.0

package/registry/components/menubar.tsx

@@ -49,7 +49,7 @@ const Menubar = React.forwardRef<
       data-slot="menubar"
       ref={ref}
       className={cn(
-        "flex h-[var(--bh-space-7xl-40)] items-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xs-4)] shadow-[var(--shadow-component-default)]",
+        "flex h-[var(--bh-space-7xl-40)] items-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xs-4)] shadow-[var(--elevation-component-default)]",
         className
       )}
       {...props}
@@ -75,7 +75,7 @@ const MenubarTrigger = React.forwardRef<
 })
 
 const menuContentClassName =
-  "z-[var(--bh-z-popover)] min-w-[var(--bh-menu-width)] overflow-hidden rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xs-4)] text-[var(--bh-content-default)] shadow-[var(--shadow-menu)]"
+  "z-[var(--bh-z-popover)] min-w-[var(--bh-menu-width)] overflow-hidden rounded-[var(--bh-radius-xl-10)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xs-4)] text-[var(--bh-content-default)] shadow-[var(--elevation-menu)]"
 
 const menuItemClassName =
   "relative flex min-h-[var(--bh-menu-item-default-height)] cursor-default select-none items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-md-6)] px-[var(--bh-space-md-8)] py-[var(--bh-space-sm-6)] text-start 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-default)] outline-none data-[disabled]:pointer-events-none data-[disabled]:text-[var(--bh-content-disabled)] data-[highlighted]:bg-[var(--bh-menu-item-hover-bg)]"

package/registry/components/modal.tsx

@@ -38,8 +38,8 @@ type ConfirmModalMessages = {
 }
 
 const modalSurfaceBaseClassName = [
-  "flex max-h-[calc(100vh-(var(--bh-space-8xl-48)*2))] w-[var(--bh-modal-width)] max-w-[calc(100vw-(var(--bh-space-4xl-20)*2))] flex-col overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-modal)] outline-none",
-  "[--bh-modal-border:var(--bh-border-subtle)] [--shadow-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-modal-border),var(--shadow-2xl)]",
+  "flex max-h-[calc(100vh-(var(--bh-space-8xl-48)*2))] w-[var(--bh-modal-width)] max-w-[calc(100vw-(var(--bh-space-4xl-20)*2))] flex-col overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--elevation-modal)] outline-none",
+  "[--bh-modal-border:var(--bh-border-subtle)] [--elevation-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-modal-border),var(--elevation-06)]",
 ]
 
 const modalSizeVariants = {
@@ -334,7 +334,7 @@ const ModalCloseButtonSurface = React.forwardRef<
       ref={ref}
       type={type}
       className={cn(
-        "absolute end-[var(--bh-space-3xl-16)] top-1/2 inline-flex size-[var(--bh-space-6xl-32)] -translate-y-1/2 items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)]",
+        "absolute end-[var(--bh-space-3xl-16)] top-1/2 inline-flex size-[var(--bh-space-6xl-32)] -translate-y-1/2 items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--elevation-button-focus)]",
         className
       )}
       {...props}

package/registry/components/native-select.tsx

@@ -46,9 +46,9 @@ const nativeSelectRootVariants = cva(
 const nativeSelectControlVariants = cva(
   [
     "relative grid w-full rounded-[var(--bh-select-trigger-radius)]",
-    "[--bh-select-trigger-border-current:var(--bh-select-trigger-border)] [--shadow-select-trigger:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-current,var(--bh-select-trigger-border)),var(--shadow-component-default)]",
-    "bg-[var(--bh-select-trigger-bg)] shadow-[var(--shadow-select-trigger)] transition-[background-color,box-shadow]",
-    "focus-within:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-focus)] focus-within:shadow-[var(--shadow-select-focus-ring)]",
+    "[--bh-select-trigger-border-current:var(--bh-select-trigger-border)] [--elevation-select-trigger:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-current,var(--bh-select-trigger-border)),var(--elevation-component-default)]",
+    "bg-[var(--bh-select-trigger-bg)] shadow-[var(--elevation-select-trigger)] transition-[background-color,box-shadow]",
+    "focus-within:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-focus)] focus-within:shadow-[var(--elevation-select-focus-ring)]",
   ],
   {
     variants: {
@@ -60,7 +60,7 @@ const nativeSelectControlVariants = cva(
         default: "",
         filled: "",
         error:
-          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] shadow-[var(--shadow-select-trigger)] focus-within:shadow-[var(--shadow-select-danger-focus-ring)]",
+          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] shadow-[var(--elevation-select-trigger)] focus-within:shadow-[var(--elevation-select-danger-focus-ring)]",
         disabled:
           "pointer-events-none bg-[var(--bh-select-trigger-bg-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-disabled)]",
       },

package/registry/components/navigation-menu.tsx

@@ -90,7 +90,7 @@ const NavigationMenuContent = React.forwardRef<
       data-slot="navigation-menu-content"
       ref={ref}
       className={cn(
-        "start-0 top-0 w-full rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] text-[var(--bh-content-default)] shadow-[var(--shadow-popover)] md:absolute md:w-[var(--bh-space-19xl-384)]",
+        "start-0 top-0 w-full rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] text-[var(--bh-content-default)] shadow-[var(--elevation-popover)] md:absolute md:w-[var(--bh-space-19xl-384)]",
         className
       )}
       {...props}
@@ -125,7 +125,7 @@ const NavigationMenuViewport = React.forwardRef<
         data-slot="navigation-menu-viewport"
         ref={ref}
         className={cn(
-          "origin-top-center relative mt-[var(--bh-space-xs-4)] h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] shadow-[var(--shadow-popover)] md:w-[var(--radix-navigation-menu-viewport-width)]",
+          "origin-top-center relative mt-[var(--bh-space-xs-4)] h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] shadow-[var(--elevation-popover)] md:w-[var(--radix-navigation-menu-viewport-width)]",
           className
         )}
         {...props}

package/registry/components/pagination.tsx

@@ -109,7 +109,7 @@ const paginationControlVariants = cva(
     "text-[length:var(--bh-pagination-font-size)] font-[var(--bh-pagination-label-font-weight)]",
     "leading-[var(--bh-pagination-line-height)] tracking-[var(--bh-pagination-letter-spacing)]",
     "outline-none transition-[background-color,border-color,color,box-shadow]",
-    "focus-visible:shadow-[var(--shadow-pagination-focus)]",
+    "focus-visible:shadow-[var(--elevation-pagination-focus)]",
     "disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0",
     "rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
@@ -118,7 +118,7 @@ const paginationControlVariants = cva(
     variants: {
       variant: {
         soft:
-          "bg-[var(--bh-pagination-control-soft-bg)] shadow-[var(--shadow-pagination-control)] hover:bg-[var(--bh-pagination-control-soft-hover)] active:bg-[var(--bh-pagination-control-soft-pressed)]",
+          "bg-[var(--bh-pagination-control-soft-bg)] shadow-[var(--elevation-pagination-control)] hover:bg-[var(--bh-pagination-control-soft-hover)] active:bg-[var(--bh-pagination-control-soft-pressed)]",
         ghost:
           "bg-[var(--bh-pagination-control-ghost-bg)] hover:bg-[var(--bh-pagination-control-ghost-hover)] active:bg-[var(--bh-pagination-control-ghost-pressed)]",
       },
@@ -164,9 +164,9 @@ const paginationItemVariants = cva(
     variants: {
       active: {
         true:
-          "border-[var(--bh-pagination-active-border)] bg-[var(--bh-pagination-active-bg)] text-[var(--bh-pagination-active-content)] shadow-[var(--shadow-pagination-active)]",
+          "border-[var(--bh-pagination-active-border)] bg-[var(--bh-pagination-active-bg)] text-[var(--bh-pagination-active-content)] shadow-[var(--elevation-pagination-active)]",
         false:
-          "bg-[var(--bh-pagination-page-bg)] text-[var(--bh-pagination-page-content)] hover:bg-[var(--bh-pagination-page-hover)] active:bg-[var(--bh-pagination-page-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] focus-visible:shadow-[var(--shadow-pagination-focus)]",
+          "bg-[var(--bh-pagination-page-bg)] text-[var(--bh-pagination-page-content)] hover:bg-[var(--bh-pagination-page-hover)] active:bg-[var(--bh-pagination-page-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] focus-visible:shadow-[var(--elevation-pagination-focus)]",
       },
     },
     defaultVariants: {

package/registry/components/popover.tsx

@@ -24,7 +24,7 @@ const popoverContentVariants = cva(
   [
     "z-[var(--bh-z-popover)] grid max-w-[var(--bh-popover-max-width)] gap-[var(--bh-popover-content-gap)]",
     "rounded-[var(--bh-popover-radius)] bg-[var(--bh-popover-bg)] p-[var(--bh-popover-padding)]",
-    "text-start text-[var(--bh-content-default)] shadow-[var(--shadow-popover)] outline-none",
+    "text-start text-[var(--bh-content-default)] shadow-[var(--elevation-popover)] outline-none",
     "font-[var(--bh-font-family)] tracking-[var(--bh-text-base-letter-spacing)]",
     "data-[state=open]:animate-in data-[state=closed]:animate-out",
   ],
@@ -185,7 +185,7 @@ const PopoverTrigger = React.forwardRef<
       className={cn(
         "inline-flex min-w-0 items-center justify-center gap-[var(--bh-popover-trigger-gap)]",
         "rounded-[var(--bh-control-default)] text-start outline-none transition-[background-color,border-color,box-shadow]",
-        "focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
+        "focus-visible:shadow-[var(--elevation-button-focus)] disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
         className
       )}
       data-slot="popover-trigger"
@@ -290,7 +290,7 @@ const PopoverClose = React.forwardRef<HTMLButtonElement, PopoverCloseProps>(
         className={cn(
           "inline-flex size-[var(--bh-popover-close-size)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)]",
           "border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color]",
-          "hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)]",
+          "hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--elevation-button-focus)]",
           className
         )}
         data-slot="popover-close"

package/registry/components/progress-slider.tsx

@@ -186,7 +186,7 @@ function ProgressSlider({
       <SliderPrimitive.Thumb
         aria-label={props["aria-label"]}
         aria-valuetext={getProgressAriaValueText(ariaValueText, currentValue)}
-        className="relative z-[var(--bh-z-overlay)] flex h-[var(--bh-progress-slider-height-current)] w-[var(--bh-progress-slider-handle-width-current)] shrink-0 items-center justify-center rounded-[var(--bh-progress-slider-radius)] bg-transparent outline-none transition-[box-shadow] focus-visible:shadow-[var(--shadow-progress-slider-thumb-focus)]"
+        className="relative z-[var(--bh-z-overlay)] flex h-[var(--bh-progress-slider-height-current)] w-[var(--bh-progress-slider-handle-width-current)] shrink-0 items-center justify-center rounded-[var(--bh-progress-slider-radius)] bg-transparent outline-none transition-[box-shadow] focus-visible:shadow-[var(--elevation-progress-slider-thumb-focus)]"
         data-slot="progress-slider-thumb"
       >
         <span

package/registry/components/radio-card.tsx

@@ -21,15 +21,15 @@ const radioCardVariants = cva(
   [
     "group/radio-card relative inline-block w-[var(--bh-radio-card-width)] max-w-full shrink-0",
     "rounded-[var(--bh-radius-xl-10)] p-[var(--bh-space-3xl-16)]",
-    "bg-[var(--bh-radio-card-bg)] text-start shadow-[var(--shadow-radio-card-current)] outline-none",
+    "bg-[var(--bh-radio-card-bg)] text-start shadow-[var(--elevation-radio-card-current)] outline-none",
     "transition-[background-color,box-shadow]",
     "[--bh-radio-card-bg:var(--bh-bg-raised)]",
     "[--bh-radio-card-border:var(--bh-border-default)]",
-    "[--shadow-radio-card-current:var(--shadow-radio-card)]",
+    "[--elevation-radio-card-current:var(--elevation-radio-card)]",
     "has-[:focus-visible]:[--bh-radio-card-border:var(--bh-border-brand-strong)]",
     "has-[:disabled]:pointer-events-none",
     "has-[:disabled]:[--bh-radio-card-border:var(--bh-border-disabled)]",
-    "has-[:disabled]:[--shadow-radio-card-current:var(--shadow-radio-card-disabled)]",
+    "has-[:disabled]:[--elevation-radio-card-current:var(--elevation-radio-card-disabled)]",
     "has-[:disabled]:[--bh-radio-card-bg:var(--bh-bg-raised)]",
   ],
   {
@@ -40,7 +40,7 @@ const radioCardVariants = cva(
         active:
           "[--bh-radio-card-border:var(--bh-border-brand-strong)] [--bh-radio-card-border-width:var(--bh-radio-card-border-width-active)]",
         disabled:
-          "pointer-events-none [--bh-radio-card-bg:var(--bh-bg-raised)] [--bh-radio-card-border:var(--bh-border-disabled)] [--shadow-radio-card-current:var(--shadow-radio-card-disabled)]",
+          "pointer-events-none [--bh-radio-card-bg:var(--bh-bg-raised)] [--bh-radio-card-border:var(--bh-border-disabled)] [--elevation-radio-card-current:var(--elevation-radio-card-disabled)]",
       },
     },
     defaultVariants: {
@@ -528,12 +528,12 @@ function RadioCardIndicator({
     >
       <span
         className={cn(
-          "flex size-[var(--bh-space-3xl-16)] items-center justify-center rounded-[var(--bh-radius-full)] [--shadow-radio-control:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-radio-control-border,var(--bh-border-input)),var(--shadow-component-default)]",
+          "flex size-[var(--bh-space-3xl-16)] items-center justify-center rounded-[var(--bh-radius-full)] [--elevation-radio-control:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-radio-control-border,var(--bh-border-input)),var(--elevation-component-default)]",
           checked
-            ? "bg-[var(--bh-interactive-radiobutton-default)] shadow-[var(--shadow-radio-control)] [--bh-radio-control-border:transparent]"
+            ? "bg-[var(--bh-interactive-radiobutton-default)] shadow-[var(--elevation-radio-control)] [--bh-radio-control-border:transparent]"
             : disabled
               ? "bg-[var(--bh-bg-raised)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]"
-              : "bg-[var(--bh-bg-raised)] shadow-[var(--shadow-radio-control)] [--bh-radio-control-border:var(--bh-border-input)]"
+              : "bg-[var(--bh-bg-raised)] shadow-[var(--elevation-radio-control)] [--bh-radio-control-border:var(--bh-border-input)]"
         )}
       >
         {checked ? (

package/registry/components/radio-group.tsx

@@ -15,12 +15,12 @@ const radioRoot = cva(
 
 const radioControl = cva([
   "pointer-events-none flex size-[var(--bh-space-3xl-16)] items-center justify-center rounded-[var(--bh-radius-full)]",
-  "bg-[var(--bh-bg-default)] shadow-[var(--shadow-radio-control)] transition-[background-color,box-shadow]",
+  "bg-[var(--bh-bg-default)] shadow-[var(--elevation-radio-control)] transition-[background-color,box-shadow]",
   "[--bh-radio-control-border:var(--bh-border-input)]",
   "group-data-[invalid=true]/radio:[--bh-radio-control-border:var(--bh-border-danger-strong)]",
   "group-hover/radio-field:[--bh-radio-control-border:var(--bh-border-brand-strong)]",
   "peer-checked:bg-[var(--bh-interactive-radiobutton-default)] peer-checked:[--bh-radio-control-border:transparent]",
-  "peer-focus-visible:shadow-[var(--shadow-radio-control),var(--shadow-button-focus)]",
+  "peer-focus-visible:shadow-[var(--elevation-radio-control),var(--elevation-button-focus)]",
   "peer-disabled:bg-[var(--bh-bg-disabled)] peer-disabled:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
 ])
 

package/registry/components/resizable.tsx

@@ -68,7 +68,7 @@ function ResizablePanel({
   return (
     <Panel
       className={cn(
-        "outline-none focus-visible:shadow-[var(--shadow-component-focus-ring)]",
+        "outline-none focus-visible:shadow-[var(--elevation-component-focus-ring)]",
         className
       )}
       elementRef={setElementRef}
@@ -86,7 +86,7 @@ function ResizableHandle({
     <Separator
       data-slot="resizable-handle"
       className={cn(
-        "relative flex w-[var(--bh-border-width-default)] items-center justify-center bg-[var(--bh-border-subtle)] outline-none transition-[background-color,box-shadow] after:absolute after:inset-y-0 after:start-1/2 after:w-[var(--bh-space-5xl-24)] after:-translate-x-1/2 focus-visible:shadow-[var(--shadow-button-focus)] aria-[orientation=horizontal]:h-[var(--bh-border-width-default)] aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-[var(--bh-space-5xl-24)] aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0",
+        "relative flex w-[var(--bh-border-width-default)] items-center justify-center bg-[var(--bh-border-subtle)] outline-none transition-[background-color,box-shadow] after:absolute after:inset-y-0 after:start-1/2 after:w-[var(--bh-space-5xl-24)] after:-translate-x-1/2 focus-visible:shadow-[var(--elevation-button-focus)] aria-[orientation=horizontal]:h-[var(--bh-border-width-default)] aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-[var(--bh-space-5xl-24)] aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0",
         className
       )}
       {...props}

package/registry/components/rolling-count.css

@@ -0,0 +1,37 @@
+/* Rolling digits: the old glyph slides out as the new one slides in. */
+[data-slot="rolling-count"] {
+  font-variant-numeric: tabular-nums;
+  unicode-bidi: isolate;
+}
+
+[data-slot="rolling-count-digits"] {
+  display: inline-flex;
+  align-items: baseline;
+}
+
+[data-slot="rolling-digit"] {
+  block-size: 1em;
+  display: inline-block;
+  line-height: 1em;
+  overflow: hidden;
+}
+
+[data-slot="rolling-digit-track"] {
+  display: flex;
+  flex-direction: column;
+  transition: transform var(--bh-duration-slow) var(--bh-easing-standard);
+}
+
+[data-slot="rolling-digit-track"] > span {
+  block-size: 1em;
+  line-height: 1em;
+}
+
+[data-slot="rolling-digit-track"][data-direction="up"][data-shifted="true"],
+[data-slot="rolling-digit-track"][data-direction="down"][data-shifted="false"] {
+  transform: translateY(-1em);
+}
+
+[data-slot="rolling-digit-track"][data-direction="down"][data-shifted="true"] {
+  transform: translateY(0);
+}

package/registry/components/rolling-count.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { useMotionEnd } from "@/hooks/use-motion-end"
+
+import "./rolling-count.css"
+
+/** One character slot that rolls the old glyph out and the new one in. */
+function RollingDigit({ char }: { char: string }) {
+  const previous = React.useRef(char)
+  const [roll, setRoll] = React.useState<{
+    direction: "up" | "down"
+    from: string
+    to: string
+  } | null>(null)
+  const [shifted, setShifted] = React.useState(false)
+  const trackRef = React.useRef<HTMLSpanElement>(null)
+
+  // Swap back to the plain glyph once the roll transition has finished.
+  useMotionEnd(trackRef, roll !== null && shifted, () => setRoll(null))
+
+  React.useEffect(() => {
+    if (char === previous.current) return
+    const from = previous.current
+    previous.current = char
+    const fromNumber = Number.parseInt(from, 10)
+    const toNumber = Number.parseInt(char, 10)
+    // Digits roll like an odometer: 9 → 0 keeps rolling up, 0 → 9 rolls down.
+    const numeric = Number.isFinite(fromNumber) && Number.isFinite(toNumber)
+    const wrapsUp = numeric && fromNumber === 9 && toNumber === 0
+    const wrapsDown = numeric && fromNumber === 0 && toNumber === 9
+    const direction =
+      wrapsDown || (numeric && !wrapsUp && toNumber < fromNumber)
+        ? "down"
+        : "up"
+    setRoll({ direction, from, to: char })
+    setShifted(false)
+    let second = 0
+    const first = window.requestAnimationFrame(() => {
+      second = window.requestAnimationFrame(() => setShifted(true))
+    })
+    return () => {
+      window.cancelAnimationFrame(first)
+      window.cancelAnimationFrame(second)
+    }
+  }, [char])
+
+  if (!roll) {
+    return <span data-slot="rolling-digit">{char}</span>
+  }
+
+  const top = roll.direction === "down" ? roll.to : roll.from
+  const bottom = roll.direction === "down" ? roll.from : roll.to
+
+  return (
+    <span data-slot="rolling-digit">
+      <span
+        data-direction={roll.direction}
+        data-shifted={shifted ? "true" : "false"}
+        data-slot="rolling-digit-track"
+        ref={trackRef}
+      >
+        <span>{top}</span>
+        <span>{bottom}</span>
+      </span>
+    </span>
+  )
+}
+
+type RollingCountProps = Omit<React.ComponentProps<"span">, "children"> & {
+  value: string
+}
+
+/**
+ * Tabular figures where each changed character rolls into place. Assistive
+ * technology reads the plain value; the rolling glyphs are presentational.
+ */
+const RollingCount = React.forwardRef<HTMLSpanElement, RollingCountProps>(
+  function RollingCount(
+    { "aria-label": ariaLabel, className, dir = "ltr", value, ...props },
+    ref
+  ) {
+    // Digits stay in reading order for numbers even inside RTL copy; each
+    // glyph is its own box, so without an explicit direction bidi reorders
+    // them around the separator.
+    return (
+      <span
+        data-slot="rolling-count"
+        dir={dir}
+        ref={ref}
+        className={cn("inline-flex items-baseline", className)}
+        {...props}
+      >
+        <span className="sr-only">{ariaLabel ?? value}</span>
+        <span aria-hidden="true" data-slot="rolling-count-digits">
+          {/* Keyed from the end so a value that grows a digit (9/11 → 10/11)
+              rolls the existing glyphs in place instead of shifting them. */}
+          {Array.from(value).map((char, index, chars) => (
+            <RollingDigit char={char} key={chars.length - 1 - index} />
+          ))}
+        </span>
+      </span>
+    )
+  }
+)
+
+export { RollingCount }
+export type { RollingCountProps }

package/registry/components/scroll-area.tsx

@@ -48,7 +48,7 @@ const ScrollArea = React.forwardRef<
         data-slot="scroll-area-viewport"
         {...viewportProps}
         tabIndex={viewportProps?.tabIndex ?? 0}
-        className={cn("size-full rounded-[inherit] outline-none focus-visible:shadow-[var(--shadow-component-focus-ring)]", viewportProps?.className)}
+        className={cn("size-full rounded-[inherit] outline-none focus-visible:shadow-[var(--elevation-component-focus-ring)]", viewportProps?.className)}
       >
         {children}
       </ScrollAreaPrimitive.Viewport>

package/registry/components/select.tsx

@@ -31,8 +31,8 @@ const selectTrigger = cva(
     "group/select-trigger relative flex w-full items-center gap-[var(--bh-select-trigger-gap)] rounded-[var(--bh-select-trigger-radius)]",
     "select-none px-[var(--bh-select-trigger-padding-x)] text-start outline-none",
     "transition-[background-color,box-shadow]",
-    "[--bh-select-trigger-border-current:var(--bh-select-trigger-border)] [--shadow-select-trigger:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-current,var(--bh-select-trigger-border)),var(--shadow-component-default)]",
-    "focus-visible:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-focus)] focus-visible:shadow-[var(--shadow-select-focus-ring)]",
+    "[--bh-select-trigger-border-current:var(--bh-select-trigger-border)] [--elevation-select-trigger:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-current,var(--bh-select-trigger-border)),var(--elevation-component-default)]",
+    "focus-visible:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-focus)] focus-visible:shadow-[var(--elevation-select-focus-ring)]",
     "aria-invalid:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)]",
     "disabled:pointer-events-none disabled:bg-[var(--bh-select-trigger-bg-disabled)] disabled:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-disabled)]",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0",
@@ -46,7 +46,7 @@ const selectTrigger = cva(
       },
       variant: {
         default:
-          "bg-[var(--bh-select-trigger-bg)] shadow-[var(--shadow-select-trigger)]",
+          "bg-[var(--bh-select-trigger-bg)] shadow-[var(--elevation-select-trigger)]",
         soft:
           "bg-[var(--bh-select-trigger-bg-soft)] shadow-none",
       },
@@ -54,7 +54,7 @@ const selectTrigger = cva(
         default: "",
         filled: "",
         error:
-          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] shadow-[var(--shadow-select-trigger)] focus-visible:shadow-[var(--shadow-select-danger-focus-ring)]",
+          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] shadow-[var(--elevation-select-trigger)] focus-visible:shadow-[var(--elevation-select-danger-focus-ring)]",
         disabled:
           "pointer-events-none bg-[var(--bh-select-trigger-bg-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-disabled)]",
       },
@@ -71,7 +71,7 @@ const selectMenu = cva(
   [
     "w-[var(--radix-popper-anchor-width,var(--bh-select-menu-width))] max-w-[var(--radix-popper-available-width,100vw)] overflow-hidden rounded-[var(--bh-select-menu-radius)]",
     "select-none bg-[var(--bh-select-menu-bg)] py-[var(--bh-select-menu-padding-y)]",
-    "shadow-[var(--shadow-select-menu)]",
+    "shadow-[var(--elevation-select-menu)]",
   ].join(" ")
 )
 
@@ -167,6 +167,8 @@ type SelectProps = Omit<React.ComponentProps<"div">, "children" | "dir"> & {
 }
 
 const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   children,
   className,
   defaultSelectValue,
@@ -224,9 +226,11 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
   const shouldRenderMenu = React.Children.count(children) > 0
   const selectId = triggerId || generatedId
   const helperId = `${selectId}-helper`
-  const triggerAccessibleLabel = shouldRenderLabel
-    ? undefined
-    : getAccessibleText(selectedValue) ?? getAccessibleText(selectedPlaceholder)
+  const triggerAccessibleLabel =
+    ariaLabel ??
+    (!shouldRenderLabel && !ariaLabelledBy
+      ? getAccessibleText(selectedLabel)
+      : undefined)
   const rootOpenProps =
     open === undefined ? { onOpenChange } : { open, onOpenChange }
 
@@ -265,6 +269,7 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
           <SelectPrimitive.Trigger asChild>
             <SelectTrigger
               aria-label={triggerAccessibleLabel}
+              aria-labelledby={ariaLabelledBy}
               aria-describedby={shouldRenderHelperText ? helperId : undefined}
               aria-haspopup="listbox"
               aria-invalid={isError || undefined}
@@ -882,7 +887,7 @@ function SelectCheckboxIndicator({
       <span
         data-slot="select-checkbox-control"
         className={cn(
-          "pointer-events-none absolute left-1/2 top-1/2 size-[var(--bh-select-checkbox-size)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--bh-select-checkbox-radius)] shadow-[var(--shadow-select-checkbox)] [--bh-select-checkbox-border:var(--bh-border-input)] [--shadow-select-checkbox:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-checkbox-border,var(--bh-border-input)),var(--shadow-component-default)]",
+          "pointer-events-none absolute left-1/2 top-1/2 size-[var(--bh-select-checkbox-size)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--bh-select-checkbox-radius)] shadow-[var(--elevation-select-checkbox)] [--bh-select-checkbox-border:var(--bh-border-input)] [--elevation-select-checkbox:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-checkbox-border,var(--bh-border-input)),var(--elevation-component-default)]",
           checked
             ? "bg-[var(--bh-interactive-checkbox-default)] [--bh-select-checkbox-border:transparent]"
             : "bg-[var(--bh-bg-default)]",
@@ -891,7 +896,7 @@ function SelectCheckboxIndicator({
         )}
       />
       {checked ? (
-        <span className="absolute left-1/2 top-1/2 flex size-[var(--bh-select-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 items-center justify-center text-[var(--bh-content-on-color)]">
+        <span className="absolute left-1/2 top-1/2 flex size-[var(--bh-select-checkbox-icon-size)] -translate-x-1/2 -translate-y-1/2 items-center justify-center text-[var(--bh-interactive-checkbox-content)]">
           <SelectIcon name="check-fill" />
         </span>
       ) : null}

package/registry/components/sheet.tsx

@@ -13,7 +13,7 @@ type SheetSize = "sm" | "default" | "lg"
 const sheetContentVariants = cva(
   [
     "fixed z-[var(--bh-z-overlay)] flex flex-col overflow-hidden bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)]",
-    "shadow-[var(--shadow-component-default)] outline-none",
+    "shadow-[var(--elevation-component-default)] outline-none",
     "data-[state=open]:animate-in data-[state=closed]:animate-out",
   ],
   {
@@ -255,7 +255,7 @@ const SheetCloseButton = React.forwardRef<
         ref={ref}
         type={type}
         className={cn(
-          "absolute end-[var(--bh-space-3xl-16)] top-[var(--bh-space-3xl-16)] inline-flex size-[var(--bh-space-6xl-32)] items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)]",
+          "absolute end-[var(--bh-space-3xl-16)] top-[var(--bh-space-3xl-16)] inline-flex size-[var(--bh-space-6xl-32)] items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--elevation-button-focus)]",
           className
         )}
         {...props}

package/registry/components/shimmer-text.css

@@ -0,0 +1,69 @@
+[data-slot="shimmer-text"] {
+  --shimmer-text-color: var(--bh-content-subtle);
+  --shimmer-text-valley: var(--bh-content-disabled);
+
+  color: var(--shimmer-text-color);
+}
+
+[data-slot="shimmer-text"][data-tone="default"] {
+  --shimmer-text-color: var(--bh-content-default);
+  --shimmer-text-valley: var(--bh-content-subtle);
+}
+
+/* The shine is a wide gradient clipped to the glyphs and slid across them. */
+[data-slot="shimmer-text"][data-animated="true"] {
+  animation: bh-shimmer-text var(--bh-shimmer-text-duration)
+    var(--bh-easing-standard) infinite;
+  background-clip: text;
+  -webkit-background-clip: text;
+  background-image: linear-gradient(
+    90deg,
+    var(--shimmer-text-color) 0%,
+    var(--shimmer-text-color) 30%,
+    var(--shimmer-text-valley) 45%,
+    var(--shimmer-text-valley) 55%,
+    var(--shimmer-text-color) 70%,
+    var(--shimmer-text-color) 100%
+  );
+  background-size: 300% 100%;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+[dir="rtl"] [data-slot="shimmer-text"][data-animated="true"],
+[data-slot="shimmer-text"][dir="rtl"][data-animated="true"] {
+  animation-name: bh-shimmer-text-rtl;
+}
+
+@keyframes bh-shimmer-text {
+  0%,
+  18% {
+    background-position: 100% 0;
+  }
+
+  82%,
+  100% {
+    background-position: 0% 0;
+  }
+}
+
+@keyframes bh-shimmer-text-rtl {
+  0%,
+  18% {
+    background-position: 0% 0;
+  }
+
+  82%,
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="shimmer-text"][data-animated="true"] {
+    animation: none;
+    background-image: none;
+    color: var(--shimmer-text-color);
+    -webkit-text-fill-color: var(--shimmer-text-color);
+  }
+}

package/registry/components/shimmer-text.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+import "./shimmer-text.css"
+
+type ShimmerTextTone = "subtle" | "default"
+
+type ShimmerTextProps = React.ComponentProps<"span"> & {
+  /** Set false to freeze the sweep while keeping the same color contract. */
+  animated?: boolean
+  /** `subtle` reads as secondary copy; `default` matches primary text. */
+  tone?: ShimmerTextTone
+}
+
+/**
+ * Text with a soft brightness valley sweeping through it. The sweep direction
+ * follows the inherited writing direction, so Arabic labels shine start-to-end.
+ */
+const ShimmerText = React.forwardRef<HTMLSpanElement, ShimmerTextProps>(
+  function ShimmerText(
+    { animated = true, className, tone = "subtle", ...props },
+    ref
+  ) {
+    // The slot is what the shimmer styles key on, so it is pinned after the
+    // spread: a consumer that needs its own hook wraps the primitive instead.
+    return (
+      <span
+        data-animated={animated ? "true" : "false"}
+        data-tone={tone}
+        ref={ref}
+        className={cn("inline-block min-w-0", className)}
+        {...props}
+        data-slot="shimmer-text"
+      />
+    )
+  }
+)
+
+export { ShimmerText }
+export type { ShimmerTextProps, ShimmerTextTone }