banhaten 0.2.0 → 0.4.0

package/registry/components/kbd.tsx

@@ -9,7 +9,7 @@ const kbdVariants = cva(
   [
     "inline-flex min-w-[var(--bh-space-5xl-24)] items-center justify-center whitespace-nowrap rounded-[var(--bh-radius-md-6)]",
     "border border-[var(--bh-border-default)] bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-subtle)]",
-    "font-[var(--bh-font-family)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)]",
+    "[font-family:var(--bh-font-family)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)]",
     "leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] shadow-[var(--shadow-button-soft)]",
     "data-[disabled=true]:border-[var(--bh-border-disabled)] data-[disabled=true]:bg-[var(--bh-interactive-soft-disabled)] data-[disabled=true]:text-[var(--bh-content-disabled)] data-[disabled=true]:shadow-none",
   ],
@@ -26,6 +26,14 @@ const kbdVariants = cva(
   }
 )
 
+const shortcutVariants = cva([
+  "inline-flex h-[var(--bh-space-4xl-20)] min-w-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-radius-sm-4)] px-[var(--bh-space-xs-4)]",
+  "border border-[var(--bh-border-default)] bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-subtle)]",
+  "[font-family:var(--bh-font-family)] text-[length:var(--bh-text-body-2xs-medium-font-size)] font-[var(--bh-text-body-2xs-medium-font-weight)]",
+  "leading-[var(--bh-text-body-2xs-medium-line-height)] tracking-[var(--bh-text-body-2xs-medium-letter-spacing)]",
+  "data-[disabled=true]:border-[var(--bh-border-disabled)] data-[disabled=true]:bg-[var(--bh-interactive-soft-disabled)] data-[disabled=true]:text-[var(--bh-content-disabled)]",
+])
+
 type KbdProps = React.ComponentProps<"kbd"> &
   VariantProps<typeof kbdVariants> & {
     disabled?: boolean
@@ -48,6 +56,55 @@ const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd(
 
 type ShortcutPlatform = "auto" | "mac" | "windows" | "linux"
 
+type ShortcutProps = Omit<React.ComponentProps<"kbd">, "children"> & {
+  children?: React.ReactNode
+  disabled?: boolean
+  keys?: readonly string[]
+  platform?: ShortcutPlatform
+}
+
+const Shortcut = React.forwardRef<HTMLElement, ShortcutProps>(function Shortcut(
+  {
+    "aria-label": ariaLabel,
+    children,
+    className,
+    disabled = false,
+    keys = [],
+    platform = "auto",
+    ...props
+  },
+  ref
+) {
+  const resolvedPlatform = useShortcutPlatform(platform)
+  const resolvedKeys = keys.map((key) =>
+    resolveShortcutKey(key, resolvedPlatform)
+  )
+  const content =
+    children ?? formatShortcutKeys(resolvedKeys, resolvedPlatform)
+  const accessibleLabel =
+    ariaLabel ??
+    (resolvedKeys.length > 0
+      ? resolvedKeys.map(readableShortcutKey).join(" plus ")
+      : typeof children === "string"
+        ? readableShortcutText(children)
+        : undefined)
+
+  return (
+    <kbd
+      aria-label={accessibleLabel}
+      className={cn(shortcutVariants(), className)}
+      data-disabled={disabled ? "true" : undefined}
+      data-platform={resolvedPlatform}
+      data-slot="shortcut"
+      dir="ltr"
+      ref={ref}
+      {...props}
+    >
+      {content}
+    </kbd>
+  )
+})
+
 type KbdShortcutProps = Omit<React.ComponentProps<"span">, "children"> & {
   disabled?: boolean
   keys: readonly string[]
@@ -68,18 +125,7 @@ const KbdShortcut = React.forwardRef<HTMLSpanElement, KbdShortcutProps>(
     },
     ref
   ) {
-    const [resolvedPlatform, setResolvedPlatform] = React.useState<
-      Exclude<ShortcutPlatform, "auto">
-    >(platform === "auto" ? "mac" : platform)
-
-    React.useEffect(() => {
-      if (platform !== "auto") {
-        setResolvedPlatform(platform)
-        return
-      }
-
-      setResolvedPlatform(detectShortcutPlatform())
-    }, [platform])
+    const resolvedPlatform = useShortcutPlatform(platform)
 
     const resolvedKeys = keys.map((key) =>
       resolveShortcutKey(key, resolvedPlatform)
@@ -117,6 +163,25 @@ const KbdShortcut = React.forwardRef<HTMLSpanElement, KbdShortcutProps>(
   }
 )
 
+function useShortcutPlatform(
+  platform: ShortcutPlatform
+): Exclude<ShortcutPlatform, "auto"> {
+  const [resolvedPlatform, setResolvedPlatform] = React.useState<
+    Exclude<ShortcutPlatform, "auto">
+  >(platform === "auto" ? "mac" : platform)
+
+  React.useEffect(() => {
+    if (platform !== "auto") {
+      setResolvedPlatform(platform)
+      return
+    }
+
+    setResolvedPlatform(detectShortcutPlatform())
+  }, [platform])
+
+  return resolvedPlatform
+}
+
 function detectShortcutPlatform(): Exclude<ShortcutPlatform, "auto"> {
   if (typeof navigator === "undefined") return "mac"
   const platform = navigator.platform.toLowerCase()
@@ -147,5 +212,34 @@ function readableShortcutKey(key: string) {
   return key
 }
 
-export { Kbd, KbdShortcut, kbdVariants }
-export type { KbdProps, KbdShortcutProps, ShortcutPlatform }
+function formatShortcutKeys(
+  keys: readonly string[],
+  platform: Exclude<ShortcutPlatform, "auto">
+) {
+  if (platform === "mac" && keys.slice(0, -1).every(isMacShortcutSymbol)) {
+    return keys.join("")
+  }
+
+  return keys.join(" ")
+}
+
+function isMacShortcutSymbol(key: string) {
+  return ["⌘", "⌥", "⇧", "⌃"].includes(key)
+}
+
+function readableShortcutText(value: string) {
+  return value
+    .replaceAll("⌘", "Command ")
+    .replaceAll("⌥", "Option ")
+    .replaceAll("⇧", "Shift ")
+    .replaceAll("⌃", "Control ")
+    .trim()
+}
+
+export { Kbd, KbdShortcut, Shortcut, kbdVariants, shortcutVariants }
+export type {
+  KbdProps,
+  KbdShortcutProps,
+  ShortcutPlatform,
+  ShortcutProps,
+}

package/registry/components/menu.tsx

@@ -90,7 +90,7 @@ const menuItemIconVariants = cva(
     variants: {
       position: {
         leading:
-          "h-[var(--bh-menu-leading-icon-size)] ps-[var(--bh-menu-icon-padding)] [&_svg]:size-[var(--bh-menu-leading-icon-size)]",
+          "h-[var(--bh-menu-leading-icon-slot-size)] ps-[var(--bh-menu-icon-padding)] [&_svg]:size-[var(--bh-menu-leading-icon-size)]",
         trailing:
           "size-[var(--bh-menu-trailing-icon-size)] text-[var(--bh-content-muted)] [&_svg]:size-[var(--bh-menu-trailing-icon-size)]",
       },
@@ -283,11 +283,12 @@ type MenuSubTriggerProps = React.ComponentProps<"div"> &
   }
 
 const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem({
+  "aria-checked": ariaChecked,
   className,
   kind = "default",
   disabled = false,
   asChild = false,
-  role = "menuitem",
+  role,
   tabIndex,
   children,
   onSelect,
@@ -298,15 +299,23 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
   const isStaticMenu = React.useContext(MenuStaticContext)
   const selectedKind: MenuItemKind = kind ?? "default"
   const isDisabled = disabled
+  const switchState = findMenuItemSwitchState(children)
+  const resolvedRole = role ??
+    (switchState === undefined ? "menuitem" : "menuitemcheckbox")
+  const resolvedChecked =
+    resolvedRole === "menuitemcheckbox"
+      ? (ariaChecked ?? switchState ?? false)
+      : undefined
 
   const item = (
     <Comp
+      aria-checked={resolvedChecked}
       aria-disabled={isDisabled ? true : undefined}
       data-disabled={isDisabled ? "true" : "false"}
       data-kind={selectedKind}
       data-slot="menu-item"
       ref={ref}
-      role={role}
+      role={resolvedRole}
       tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}
       className={cn(menuItemVariants({ kind: selectedKind, className }))}
       {...props}
@@ -319,6 +328,20 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
 
   if (isStaticMenu) return item
 
+  if (switchState !== undefined) {
+    return (
+      <DropdownMenuPrimitive.CheckboxItem
+        asChild
+        checked={switchState}
+        disabled={isDisabled}
+        onSelect={onSelect}
+        textValue={textValue ?? getMenuItemTextValue(children)}
+      >
+        {item}
+      </DropdownMenuPrimitive.CheckboxItem>
+    )
+  }
+
   return (
     <DropdownMenuPrimitive.Item
       asChild
@@ -333,6 +356,27 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
 
 MenuItem.displayName = "MenuItem"
 
+function findMenuItemSwitchState(children: React.ReactNode): boolean | undefined {
+  let state: boolean | undefined
+
+  React.Children.forEach(children, (child) => {
+    if (state !== undefined || !React.isValidElement(child)) return
+
+    const element = child as React.ReactElement<{
+      active?: boolean
+      children?: React.ReactNode
+    }>
+    if (element.type === MenuItemSwitch) {
+      state = Boolean(element.props.active)
+      return
+    }
+
+    state = findMenuItemSwitchState(element.props.children)
+  })
+
+  return state
+}
+
 const MenuSubTrigger = React.forwardRef<HTMLDivElement, MenuSubTriggerProps>(function MenuSubTrigger({
   className,
   kind = "default",
@@ -576,7 +620,10 @@ function MenuItemBadge({
   )
 }
 
-type MenuItemSwitchProps = Omit<React.ComponentProps<"span">, "role"> & {
+type MenuItemSwitchProps = Omit<
+  React.ComponentProps<"span">,
+  "aria-checked" | "aria-label" | "aria-labelledby" | "role"
+> & {
   active?: boolean
   disabled?: boolean
 }
@@ -589,12 +636,10 @@ function MenuItemSwitch({
 }: MenuItemSwitchProps) {
   return (
     <span
-      aria-checked={active}
-      aria-disabled={disabled || undefined}
+      aria-hidden="true"
       data-active={active ? "true" : "false"}
       data-disabled={disabled ? "true" : "false"}
       data-slot="menu-item-switch"
-      role="switch"
       className={cn(
         "flex h-[var(--bh-menu-switch-height)] w-[var(--bh-menu-switch-width)] shrink-0 items-center rounded-[var(--bh-radius-full)] p-[var(--bh-menu-switch-padding)] group-data-[disabled=true]/menu-item:bg-[var(--bh-interactive-switch-disabled)]",
         active
@@ -677,6 +722,8 @@ function MenuProgress({
   ...props
 }: MenuProgressProps) {
   const clampedValue = Math.min(100, Math.max(0, value))
+  const labelId = React.useId()
+  const hasLabel = hasRenderableContent(label)
 
   return (
     <div
@@ -688,6 +735,8 @@ function MenuProgress({
       {...props}
     >
       <div
+        aria-label={hasLabel ? undefined : "Progress"}
+        aria-labelledby={hasLabel ? labelId : undefined}
         aria-valuemax={100}
         aria-valuemin={0}
         aria-valuenow={clampedValue}
@@ -717,6 +766,7 @@ function MenuProgress({
             >
               {hasRenderableContent(label) ? (
                 <span
+                  id={labelId}
                   data-slot="menu-progress-label-text"
                   dir="auto"
                   className="truncate text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] text-[var(--bh-content-default)]"

package/registry/components/modal.tsx

@@ -39,7 +39,7 @@ 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-component-default)]",
+  "[--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)]",
 ]
 
 const modalSizeVariants = {

package/registry/components/navigation-menu.tsx

@@ -145,7 +145,7 @@ const NavigationMenuIndicator = React.forwardRef<
       className={cn("top-full z-[var(--bh-z-popover)] flex h-[var(--bh-space-lg-10)] items-end justify-center overflow-hidden", className)}
       {...props}
     >
-      <div className="relative top-[var(--bh-space-xs-4)] size-[var(--bh-space-lg-10)] rotate-45 rounded-tl-[var(--bh-radius-sm-4)] bg-[var(--bh-bg-raised)] shadow-[var(--shadow-popover)]" />
+      <div className="relative top-[var(--bh-space-xs-4)] size-[var(--bh-space-lg-10)] rotate-45 rounded-tl-[var(--bh-radius-sm-4)] bg-[var(--bh-bg-raised)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-subtle)]" />
     </NavigationMenuPrimitive.Indicator>
   )
 })

package/registry/components/pagination.css

@@ -0,0 +1,36 @@
+.ds-pagination {
+  container-type: inline-size;
+}
+
+.ds-pagination__controls {
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: thin;
+}
+
+/* Approved exception: container-query breakpoints stay literal because CSS vars are not reliable in query conditions. */
+@container (max-width: 28rem) {
+  .ds-pagination [data-slot="pagination-caption"] {
+    width: 100%;
+    flex: 1 0 100%;
+  }
+
+  .ds-pagination[data-type="numeric"] .ds-pagination__controls {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .ds-pagination[data-type="numeric"] .ds-pagination__pages > :nth-child(n + 4):not(:last-child) {
+    display: none;
+  }
+
+  .ds-pagination[data-type="simple"] .ds-pagination__controls {
+    margin-inline-start: auto;
+  }
+
+  .ds-pagination[data-type="summary"] [data-slot="pagination-summary"] {
+    order: -1;
+    width: 100%;
+    text-align: center;
+  }
+}

package/registry/components/pagination.tsx

@@ -5,6 +5,8 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { useResolvedDirection } from "@/hooks/use-direction"
 
+import "./pagination.css"
+
 type PaginationType = "numeric" | "simple" | "summary"
 type PaginationVariant = "soft" | "ghost"
 type PaginationPage =
@@ -65,7 +67,7 @@ const arabicPaginationMessages: PaginationMessages = {
 
 const paginationVariants = cva(
   [
-    "flex max-w-full items-center",
+    "ds-pagination flex w-full max-w-full min-w-0 flex-wrap items-center",
     "text-[length:var(--bh-pagination-font-size)]",
     "leading-[var(--bh-pagination-line-height)]",
     "tracking-[var(--bh-pagination-letter-spacing)]",
@@ -74,11 +76,11 @@ const paginationVariants = cva(
     variants: {
       type: {
         numeric:
-          "w-[var(--bh-pagination-numeric-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
+          "max-w-[var(--bh-pagination-numeric-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
         simple:
-          "w-[var(--bh-pagination-simple-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
+          "max-w-[var(--bh-pagination-simple-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
         summary:
-          "w-[var(--bh-pagination-simple-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
+          "max-w-[var(--bh-pagination-simple-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
       },
       showCaption: {
         true: "",
@@ -109,7 +111,7 @@ const paginationControlVariants = cva(
     "outline-none transition-[background-color,border-color,color,box-shadow]",
     "focus-visible:shadow-[var(--shadow-pagination-focus)]",
     "disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
-    "[&_svg]:pointer-events-none [&_svg]:size-[var(--bh-pagination-icon-size)] [&_svg]:shrink-0",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
     "rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
   ],
   {
@@ -321,7 +323,7 @@ const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagin
             />
             <div
               data-slot="pagination-pages"
-              className="flex shrink-0 items-center gap-[var(--bh-pagination-page-gap)]"
+              className="ds-pagination__pages flex min-w-0 shrink-0 items-center gap-[var(--bh-pagination-page-gap)]"
             >
               {pages.map((item, index) => (
                 <PaginationPageItem
@@ -381,7 +383,7 @@ function PaginationControls({
     <div
       data-slot="pagination-controls"
       className={cn(
-        "flex shrink-0 items-center",
+        "ds-pagination__controls flex max-w-full min-w-0 shrink-0 items-center",
         type === "numeric"
           ? "gap-[var(--bh-pagination-control-gap)]"
           : "gap-[var(--bh-pagination-action-gap)]"
@@ -505,13 +507,18 @@ function PaginationArrowIcon({ type }: { type: "previous" | "next" }) {
   const Icon = type === "previous" ? ChevronLeftIcon : ChevronRightIcon
 
   return (
-    <Icon
-      aria-hidden="true"
-      data-rtl-flip="true"
+    <span
       data-slot="pagination-icon"
-      focusable="false"
-      strokeWidth="var(--bh-icon-stroke-225)"
-    />
+      className="inline-flex size-[var(--bh-pagination-icon-slot-size)] shrink-0 items-center justify-center"
+    >
+      <Icon
+        aria-hidden="true"
+        className="size-[var(--bh-pagination-icon-size)]"
+        data-rtl-flip="true"
+        focusable="false"
+        strokeWidth="var(--bh-icon-stroke-225)"
+      />
+    </span>
   )
 }
 

package/registry/components/progress-slider.tsx

@@ -12,7 +12,7 @@ type ProgressSliderSize = "default" | "lg"
 const progressSliderVariants = cva(
   [
     "group/progress-slider relative flex touch-none select-none items-center",
-    "w-[var(--bh-progress-slider-width-current)] max-w-full",
+    "w-full max-w-[var(--bh-progress-slider-width-current)] min-w-0",
     "data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--bh-opacity-60)]",
     "[--bh-progress-slider-width-current:var(--bh-progress-slider-width-md)]",
     "[--bh-progress-slider-height-current:var(--bh-progress-slider-height-md)]",

package/registry/components/radio-card.tsx

@@ -579,7 +579,7 @@ function RadioCardMedia({
     <span
       data-slot="radio-card-icon"
       className={cn(
-        "flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center text-[var(--bh-content-subtle)]",
+        "flex size-[var(--bh-icon-slot-size-default)] shrink-0 items-center justify-center text-[var(--bh-content-subtle)] [&_svg]:size-[var(--bh-icon-size-default)]",
         disabled && "text-[var(--bh-content-disabled)]"
       )}
     >
@@ -592,7 +592,6 @@ function RadioCardUserIcon() {
   return (
     <UserIcon
       aria-hidden="true"
-      className="size-[var(--bh-space-4xl-20)]"
       strokeWidth="var(--bh-icon-stroke-200)"
     />
   )

package/registry/components/resizable.tsx

@@ -17,7 +17,9 @@ import { cn } from "@/lib/utils"
 type ResizablePanelGroupProps = Omit<GroupProps, "orientation"> & {
   direction?: Orientation
 }
-type ResizablePanelProps = PanelProps
+type ResizablePanelProps = PanelProps & {
+  contentTabIndex?: number
+}
 type ResizableHandleProps = SeparatorProps & {
   withHandle?: boolean
 }
@@ -41,7 +43,39 @@ function ResizablePanelGroup({
   )
 }
 
-const ResizablePanel = Panel
+function ResizablePanel({
+  className,
+  contentTabIndex = 0,
+  elementRef,
+  ...props
+}: ResizablePanelProps) {
+  const setElementRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      const content = node?.firstElementChild
+      if (content instanceof HTMLElement) {
+        content.tabIndex = contentTabIndex
+        content.setAttribute("data-slot", "resizable-panel-content")
+      }
+
+      if (typeof elementRef === "function") elementRef(node)
+      else if (elementRef) {
+        ;(elementRef as React.MutableRefObject<HTMLDivElement | null>).current = node
+      }
+    },
+    [contentTabIndex, elementRef]
+  )
+
+  return (
+    <Panel
+      className={cn(
+        "outline-none focus-visible:shadow-[var(--shadow-component-focus-ring)]",
+        className
+      )}
+      elementRef={setElementRef}
+      {...props}
+    />
+  )
+}
 
 function ResizableHandle({
   className,

package/registry/components/scroll-area.tsx

@@ -5,9 +5,15 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "@/lib/utils"
 
+type ScrollAreaOrientation = "vertical" | "horizontal" | "both"
 type ScrollAreaProps = React.ComponentPropsWithoutRef<
   typeof ScrollAreaPrimitive.Root
->
+> & {
+  orientation?: ScrollAreaOrientation
+  viewportProps?: React.ComponentPropsWithoutRef<
+    typeof ScrollAreaPrimitive.Viewport
+  >
+}
 type ScrollBarProps = React.ComponentPropsWithoutRef<
   typeof ScrollAreaPrimitive.ScrollAreaScrollbar
 >
@@ -15,9 +21,24 @@ type ScrollBarProps = React.ComponentPropsWithoutRef<
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   ScrollAreaProps
->(function ScrollArea({ children, className, ...props }, ref) {
+>(function ScrollArea(
+  {
+    children,
+    className,
+    orientation = "vertical",
+    viewportProps,
+    ...props
+  },
+  ref
+) {
+  const hasVerticalScrollbar =
+    orientation === "vertical" || orientation === "both"
+  const hasHorizontalScrollbar =
+    orientation === "horizontal" || orientation === "both"
+
   return (
     <ScrollAreaPrimitive.Root
+      data-orientation={orientation}
       data-slot="scroll-area"
       ref={ref}
       className={cn("relative overflow-hidden", className)}
@@ -25,12 +46,15 @@ const ScrollArea = React.forwardRef<
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit]"
+        {...viewportProps}
+        tabIndex={viewportProps?.tabIndex ?? 0}
+        className={cn("size-full rounded-[inherit] outline-none focus-visible:shadow-[var(--shadow-component-focus-ring)]", viewportProps?.className)}
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
+      {hasVerticalScrollbar ? <ScrollBar orientation="vertical" /> : null}
+      {hasHorizontalScrollbar ? <ScrollBar orientation="horizontal" /> : null}
+      {orientation === "both" ? <ScrollAreaPrimitive.Corner /> : null}
     </ScrollAreaPrimitive.Root>
   )
 })
@@ -64,4 +88,4 @@ const ScrollBar = React.forwardRef<
 })
 
 export { ScrollArea, ScrollBar }
-export type { ScrollAreaProps, ScrollBarProps }
+export type { ScrollAreaOrientation, ScrollAreaProps, ScrollBarProps }