banhaten 0.2.0 → 0.3.0

package/registry/components/field.tsx

@@ -10,10 +10,14 @@ type FieldOrientation = "vertical" | "horizontal" | "responsive"
 
 type FieldContextValue = {
   controlId: string
-  descriptionId: string
+  defaultDescriptionId: string
+  defaultErrorId: string
+  descriptionIds: readonly string[]
   disabled?: boolean
-  errorId: string
+  errorIds: readonly string[]
   invalid?: boolean
+  registerDescription: (id: string) => () => void
+  registerError: (id: string) => () => void
 }
 
 type FieldProps = React.ComponentProps<"div"> & {
@@ -48,15 +52,38 @@ function Field({
 }: FieldProps) {
   const generatedId = React.useId()
   const resolvedControlId = controlId ?? `${generatedId}-control`
+  const [descriptionIds, setDescriptionIds] = React.useState<string[]>([])
+  const [errorIds, setErrorIds] = React.useState<string[]>([])
+  const registerDescription = React.useCallback(
+    (id: string) => registerFieldReference(setDescriptionIds, id),
+    []
+  )
+  const registerError = React.useCallback(
+    (id: string) => registerFieldReference(setErrorIds, id),
+    []
+  )
   const context = React.useMemo<FieldContextValue>(
     () => ({
       controlId: resolvedControlId,
-      descriptionId: `${generatedId}-description`,
+      defaultDescriptionId: `${generatedId}-description`,
+      defaultErrorId: `${generatedId}-error`,
+      descriptionIds,
       disabled,
-      errorId: `${generatedId}-error`,
+      errorIds,
       invalid,
+      registerDescription,
+      registerError,
     }),
-    [disabled, generatedId, invalid, resolvedControlId]
+    [
+      descriptionIds,
+      disabled,
+      errorIds,
+      generatedId,
+      invalid,
+      registerDescription,
+      registerError,
+      resolvedControlId,
+    ]
   )
 
   return (
@@ -86,7 +113,10 @@ function FieldControl({ className, ...props }: FieldControlProps) {
   const context = useFieldContext("FieldControl")
   const describedBy =
     props["aria-describedby"] ??
-    [context.descriptionId, context.invalid ? context.errorId : undefined]
+    [
+      ...context.descriptionIds,
+      ...(context.invalid ? context.errorIds : []),
+    ]
       .filter(Boolean)
       .join(" ")
 
@@ -117,12 +147,18 @@ function FieldLabel({ htmlFor, ...props }: FieldLabelProps) {
 
 function FieldDescription({ className, id, ...props }: FieldDescriptionProps) {
   const context = useFieldContext("FieldDescription")
+  const resolvedId = id ?? context.defaultDescriptionId
+
+  React.useEffect(
+    () => context.registerDescription(resolvedId),
+    [context.registerDescription, resolvedId]
+  )
 
   return (
     <p
       data-slot="field-description"
       dir="auto"
-      id={id ?? context.descriptionId}
+      id={resolvedId}
       className={cn(
         "m-0 text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
         className
@@ -134,12 +170,18 @@ function FieldDescription({ className, id, ...props }: FieldDescriptionProps) {
 
 function FieldError({ className, id, role = "alert", ...props }: FieldErrorProps) {
   const context = useFieldContext("FieldError")
+  const resolvedId = id ?? context.defaultErrorId
+
+  React.useEffect(
+    () => context.registerError(resolvedId),
+    [context.registerError, resolvedId]
+  )
 
   return (
     <p
       data-slot="field-error"
       dir="auto"
-      id={id ?? context.errorId}
+      id={resolvedId}
       role={role}
       className={cn(
         "m-0 text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-danger-default)]",
@@ -150,6 +192,17 @@ function FieldError({ className, id, role = "alert", ...props }: FieldErrorProps
   )
 }
 
+function registerFieldReference(
+  setIds: React.Dispatch<React.SetStateAction<string[]>>,
+  id: string
+) {
+  setIds((current) => (current.includes(id) ? current : [...current, id]))
+
+  return () => {
+    setIds((current) => current.filter((candidate) => candidate !== id))
+  }
+}
+
 function FieldGroup({ className, ...props }: FieldGroupProps) {
   return (
     <div

package/registry/components/menu.tsx

@@ -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-lg)]",
 ]
 
 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: "",
@@ -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)]"

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/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 }

package/registry/components/select.tsx

@@ -224,6 +224,9 @@ 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 rootOpenProps =
     open === undefined ? { onOpenChange } : { open, onOpenChange }
 
@@ -261,8 +264,8 @@ const Select = React.forwardRef<HTMLDivElement, SelectProps>(function Select({
         <div data-slot="select-control" className="relative w-full">
           <SelectPrimitive.Trigger asChild>
             <SelectTrigger
+              aria-label={triggerAccessibleLabel}
               aria-describedby={shouldRenderHelperText ? helperId : undefined}
-              aria-expanded={open || undefined}
               aria-haspopup="listbox"
               aria-invalid={isError || undefined}
               expandIcon={expandIcon}
@@ -436,6 +439,12 @@ function hasRenderableContent(content: React.ReactNode) {
   )
 }
 
+function getAccessibleText(content: React.ReactNode) {
+  return typeof content === "string" || typeof content === "number"
+    ? String(content)
+    : undefined
+}
+
 type SelectHelperTextProps = React.ComponentProps<"p"> & {
   hasIcon?: boolean
   type?: "default" | "error"
@@ -592,7 +601,14 @@ SelectTrigger.displayName = "SelectTrigger"
 type SelectMenuProps = React.ComponentProps<"div">
 
 const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuProps>(function SelectMenu(
-  { children, className, onKeyDown, role, ...props },
+  {
+    "aria-label": ariaLabel = "Options",
+    children,
+    className,
+    onKeyDown,
+    role,
+    ...props
+  },
   ref
 ) {
   const handleKeyDown = React.useCallback(
@@ -638,6 +654,7 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuProps>(function Se
 
   return (
     <div
+      aria-label={ariaLabel}
       data-slot="select-menu"
       onKeyDown={handleKeyDown}
       ref={ref}
@@ -645,7 +662,11 @@ const SelectMenu = React.forwardRef<HTMLDivElement, SelectMenuProps>(function Se
       className={cn(selectMenu(), className)}
       {...props}
     >
-      <div data-slot="select-menu-list" className={selectMenuList()}>
+      <div
+        data-slot="select-menu-list"
+        role="presentation"
+        className={selectMenuList()}
+      >
         {children}
       </div>
     </div>
@@ -689,6 +710,8 @@ type SelectMenuItemProps = SelectMenuItemBaseProps &
 
 const SelectMenuItem = React.forwardRef<HTMLButtonElement, SelectMenuItemProps>(function SelectMenuItem({
   addonText,
+  "aria-checked": ariaChecked,
+  "aria-selected": ariaSelected,
   children,
   className,
   disabled,
@@ -706,8 +729,12 @@ const SelectMenuItem = React.forwardRef<HTMLButtonElement, SelectMenuItemProps>(
   const generatedValue = React.useId()
   const isDisabled = disabled
   const selectedWithEndCheck = selected && selectionType === "default"
-  const resolvedRole =
-    role || (selectionType === "checkbox" ? "menuitemcheckbox" : "option")
+  const resolvedRole = role || "option"
+  const usesCheckedState =
+    resolvedRole === "checkbox" ||
+    resolvedRole === "menuitemcheckbox" ||
+    resolvedRole === "radio" ||
+    resolvedRole === "menuitemradio"
   const selectedMedia =
     media === false ? null : media ?? getDefaultSelectItemMedia(itemType)
   const content = label ?? children
@@ -723,13 +750,9 @@ const SelectMenuItem = React.forwardRef<HTMLButtonElement, SelectMenuItemProps>(
 
   const item = (
     <button
-      aria-checked={
-        selectionType === "checkbox" ? Boolean(selected) : undefined
-      }
+      aria-checked={usesCheckedState ? (ariaChecked ?? Boolean(selected)) : undefined}
       aria-disabled={isDisabled || undefined}
-      aria-selected={
-        selectionType === "default" ? Boolean(selected) : undefined
-      }
+      aria-selected={resolvedRole === "option" ? (ariaSelected ?? Boolean(selected)) : undefined}
       data-disabled={isDisabled ? "true" : undefined}
       data-item-type={itemType}
       data-selected={selected ? "true" : "false"}

package/registry/components/sidebar.tsx

@@ -34,7 +34,9 @@ type SidebarMenuButtonProps = React.ComponentProps<"button"> & {
 type SidebarToggleProps = React.ComponentProps<"button">
 type SidebarTriggerProps = SidebarToggleProps
 type SidebarRailProps = React.ComponentProps<"button">
-type SidebarInsetProps = React.ComponentProps<"main">
+type SidebarInsetProps = React.ComponentProps<"div"> & {
+  asChild?: boolean
+}
 
 const SidebarContext = React.createContext<SidebarContextValue | null>(null)
 
@@ -91,7 +93,9 @@ const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(function Sidebar(
   { className, side = "start", ...props },
   ref
 ) {
-  const { collapsed, dir } = useSidebarContext()
+  const context = React.useContext(SidebarContext)
+  const collapsed = context?.collapsed ?? false
+  const dir = context?.dir
 
   return (
     <aside
@@ -299,10 +303,12 @@ const SidebarRail = React.forwardRef<HTMLButtonElement, SidebarRailProps>(
   }
 )
 
-const SidebarInset = React.forwardRef<HTMLElement, SidebarInsetProps>(
-  function SidebarInset({ className, ...props }, ref) {
+const SidebarInset = React.forwardRef<HTMLDivElement, SidebarInsetProps>(
+  function SidebarInset({ asChild = false, className, ...props }, ref) {
+    const Comp = asChild ? Slot : "div"
+
     return (
-      <main
+      <Comp
         data-slot="sidebar-inset"
         ref={ref}
         className={cn("min-w-0 flex-1", className)}