@hex-core/components 0.2.0 → 1.0.1

package/dist/index.d.ts

@@ -125,11 +125,21 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
 /** A single radio option within a RadioGroup. */
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
+interface SliderProps extends React$1.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+    /**
+     * Per-thumb accessible labels. When the slider has multiple thumbs, pass
+     * one entry per thumb (e.g. ["Minimum", "Maximum"]). For a single-thumb
+     * slider, the Root's `aria-label` / `aria-labelledby` is mirrored onto
+     * the thumb automatically — pass `thumbLabels` only when those defaults
+     * are insufficient.
+     */
+    thumbLabels?: string[];
+}
 /**
  * A range input with one or more draggable thumbs.
  * Built on Radix UI Slider with keyboard controls (arrows, Home, End, PageUp/Down).
  */
-declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLSpanElement>>;
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
@@ -175,8 +185,17 @@ declare function Skeleton({ className, ...props }: React$1.HTMLAttributes<HTMLDi
  */
 declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
+interface ScrollAreaProps extends React$1.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+    /**
+     * tabIndex applied to the scroll viewport so keyboard users can scroll
+     * without a pointer. Defaults to `0` (focusable) — pass `-1` to skip the
+     * viewport in the tab order when ScrollArea wraps purely decorative or
+     * already-keyboard-reachable content.
+     */
+    viewportTabIndex?: number;
+}
 /** A scrollable area with custom-styled scrollbars. Content must be explicitly sized. */
-declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Styled scrollbar track + thumb. Rendered inside ScrollArea automatically. */
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -224,8 +243,22 @@ declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** Dimmed backdrop rendered behind the dialog content. */
 declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * When `true` (the default), DialogContent caps its height at viewport-2rem
+     * and renders children inside a padded inner scroll container. The Close
+     * button stays anchored to the (non-scrolling) outer panel so it remains
+     * visible even when the user scrolls long content.
+     *
+     * Pass `scrollable={false}` to opt out — useful when the consumer manages
+     * its own scroll surface (e.g. CommandDialog defers scroll to cmdk's
+     * internal CommandList).
+     */
+    scrollable?: boolean;
+}
 /** The dialog content panel, centered on the overlay. Includes a close button by default. */
-declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
+
 /**
  * Header container inside DialogContent; stacks title and description.
  * @returns A div wrapping title/description with vertical rhythm
@@ -511,7 +544,11 @@ declare const TableRow: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes
 declare const TableHead: React$1.ForwardRefExoticComponent<React$1.ThHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
 /** `<td>` with consistent padding. */
 declare const TableCell: React$1.ForwardRefExoticComponent<React$1.TdHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
-/** `<caption>` positioned below the table. */
+/**
+ * Visible `<caption>` rendered below the table. The parent `<Table>` sets
+ * `caption-bottom`, so the caption is announced first by screen readers when
+ * entering the table, then visually placed below the rows.
+ */
 declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
 
 /**
@@ -523,13 +560,24 @@ declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttrib
 interface DataTableProps<TData> {
     columns: ColumnDef<TData, unknown>[];
     data: TData[];
+    /**
+     * Visible caption rendered below the table. Announced by screen readers
+     * when the user enters the table. Provide either `caption` or `aria-label`.
+     */
+    caption?: React$1.ReactNode;
+    /**
+     * Accessible label for the table when no visible caption is shown.
+     * Forwarded as `aria-label` on the underlying `<table>` element. Kebab-case
+     * to match the canonical ARIA prop convention used elsewhere in Hex UI.
+     */
+    "aria-label"?: string;
 }
 /**
  * Render a data-driven table from TanStack column definitions.
- * @param props - Columns and data
+ * @param props - Columns, data, and optional accessible labelling (`caption` or `aria-label`)
  * @returns A styled Table rendered from the TanStack row model
  */
-declare function DataTable<TData>({ columns, data }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData>({ columns, data, caption, "aria-label": ariaLabel, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 /**
  * Root nav landmark for pagination controls.
@@ -690,14 +738,17 @@ declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
     value?: string;
     forceMount?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-/** Horizontal rule between groups. */
-declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React$1.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
-    alwaysRender?: boolean;
-} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Horizontal rule between groups. Renders as a presentational `<div>` (no role)
+ * so it can sit inside CommandList (role=listbox) without violating ARIA's
+ * required-children rule for listbox. The line is purely decorative — cmdk's
+ * built-in Separator hardcodes `role="separator"`, which axe rejects in this
+ * context, so we render the divider directly.
+ *
+ * The `data-cmdk-separator` attribute is preserved so existing CSS / test
+ * selectors that target cmdk's separator continue to match.
+ */
+declare const CommandSeparator: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 /** Selectable item. onSelect fires on Enter or click. */
 declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
     children?: React$1.ReactNode;
@@ -746,8 +797,10 @@ interface ComboboxProps {
     disabled?: boolean;
     /** Extra class names on the trigger button. */
     className?: string;
-    /** Accessible label for the trigger (required when no adjacent visible <label>). */
+    /** Accessible label for the trigger (required when no adjacent visible label). */
     "aria-label"?: string;
+    /** Id of an external visible label that names this combobox. */
+    "aria-labelledby"?: string;
 }
 /**
  * Searchable select input built on Command + Popover.
@@ -756,7 +809,7 @@ interface ComboboxProps {
  * the trigger; the popover contains a CommandInput and filtered CommandList.
  * @returns A trigger button that opens a filtered option list.
  */
-declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyText, disabled, className, "aria-label": ariaLabel, }: ComboboxProps): react_jsx_runtime.JSX.Element;
+declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyText, disabled, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: ComboboxProps): react_jsx_runtime.JSX.Element;
 declare namespace Combobox {
     var displayName: string;
 }

package/dist/index.js

@@ -46,7 +46,9 @@ var buttonVariants = cva(
         secondary: [
           "bg-secondary text-secondary-foreground",
           "shadow-sm",
-          "hover:bg-secondary/80 hover:shadow-md"
+          // Hover: shadow-elevation only — opacity-based bg shift would push apparent
+          // contrast below 3:1 vs --card during hover, regressing WCAG 1.4.11.
+          "hover:shadow-md"
         ].join(" "),
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
@@ -288,7 +290,9 @@ var badgeVariants = cva3(
     variants: {
       variant: {
         default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        // Hover stays at full --secondary fill — opacity-based shift would drop the
+        // composite contrast below 3:1 against --card on hover (WCAG 1.4.11).
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
         destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground"
       }
@@ -488,30 +492,46 @@ RadioGroupItem.displayName = "RadioGroupItem";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as React10 from "react";
 import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
-var Slider = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs4(
-  SliderPrimitive.Root,
-  {
-    ref,
-    className: cn("relative flex w-full touch-none select-none items-center", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx11(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx11(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-      (props.value ?? props.defaultValue ?? [0]).map((_, i) => /* @__PURE__ */ jsx11(
-        SliderPrimitive.Thumb,
-        {
-          className: cn(
-            "block h-5 w-5 rounded-full border-2 border-primary bg-background",
-            "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-md",
-            "hover:shadow-lg hover:scale-110",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            "disabled:pointer-events-none disabled:opacity-50"
-          )
-        },
-        i
-      ))
-    ]
+var Slider = React10.forwardRef(({ className, thumbLabels, ...props }, ref) => {
+  const values = props.value ?? props.defaultValue ?? [0];
+  const rootLabel = props["aria-label"];
+  const rootLabelledBy = props["aria-labelledby"];
+  if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && thumbLabels && thumbLabels.length !== values.length) {
+    console.warn(
+      `Slider: thumbLabels.length (${thumbLabels.length}) does not match value.length (${values.length}). Missing labels fall back to indexed names; extra labels are ignored.`
+    );
   }
-));
+  return /* @__PURE__ */ jsxs4(
+    SliderPrimitive.Root,
+    {
+      ref,
+      className: cn("relative flex w-full touch-none select-none items-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx11(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx11(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+        values.map((_, i) => {
+          const explicit = thumbLabels?.[i];
+          const fallback = values.length === 1 ? rootLabel : rootLabel ? `${rootLabel} (${i + 1} of ${values.length})` : void 0;
+          return /* @__PURE__ */ jsx11(
+            SliderPrimitive.Thumb,
+            {
+              "aria-label": explicit ?? fallback,
+              "aria-labelledby": explicit || fallback ? void 0 : rootLabelledBy,
+              className: cn(
+                "block h-5 w-5 rounded-full border-2 border-primary bg-background",
+                "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-md",
+                "hover:shadow-lg hover:scale-110",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                "disabled:pointer-events-none disabled:opacity-50"
+              )
+            },
+            i
+          );
+        })
+      ]
+    }
+  );
+});
 Slider.displayName = "Slider";
 
 // src/primitives/toggle/toggle.tsx
@@ -666,14 +686,24 @@ Progress.displayName = "Progress";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as React15 from "react";
 import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
-var ScrollArea = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(
+var ScrollArea = React15.forwardRef(({ className, children, viewportTabIndex = 0, ...props }, ref) => /* @__PURE__ */ jsxs5(
   ScrollAreaPrimitive.Root,
   {
     ref,
     className: cn("relative overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx17(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx17(
+        ScrollAreaPrimitive.Viewport,
+        {
+          tabIndex: viewportTabIndex,
+          className: cn(
+            "h-full w-full rounded-[inherit]",
+            viewportTabIndex >= 0 && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          ),
+          children
+        }
+      ),
       /* @__PURE__ */ jsx17(ScrollBar, { orientation: "vertical" }),
       /* @__PURE__ */ jsx17(ScrollBar, { orientation: "horizontal" }),
       /* @__PURE__ */ jsx17(ScrollAreaPrimitive.Corner, {})
@@ -884,15 +914,15 @@ var DialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(DialogPortal, { children: [
+var DialogContent = React19.forwardRef(({ className, children, scrollable = true, ...props }, ref) => /* @__PURE__ */ jsxs7(DialogPortal, { children: [
   /* @__PURE__ */ jsx21(DialogOverlay, {}),
   /* @__PURE__ */ jsxs7(
     DialogPrimitive.Content,
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-[var(--gap-md,1rem)]",
-        "border bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
+        scrollable ? "max-h-[calc(100vh-2rem)] border bg-background shadow-lg rounded-lg" : "gap-[var(--gap-md,1rem)] border bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
         "duration-[var(--duration-normal,200ms)] data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -900,12 +930,12 @@ var DialogContent = React19.forwardRef(({ className, children, ...props }, ref)
       ),
       ...props,
       children: [
-        children,
+        scrollable ? /* @__PURE__ */ jsx21("div", { className: "grid gap-[var(--gap-md,1rem)] overflow-y-auto p-[var(--space-6,1.5rem)]", children }) : children,
         /* @__PURE__ */ jsxs7(
           DialogPrimitive.Close,
           {
             className: cn(
-              "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background",
+              "absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background bg-background/80 backdrop-blur-sm",
               "transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               "disabled:pointer-events-none"
@@ -1962,7 +1992,10 @@ var TableCaption = React31.forwardRef(({ className, ...props }, ref) => /* @__PU
   "caption",
   {
     ref,
-    className: cn("mt-[var(--space-4,1rem)] text-sm text-muted-foreground", className),
+    className: cn(
+      "caption-bottom mt-[var(--space-4,1rem)] text-sm text-muted-foreground",
+      className
+    ),
     ...props
   }
 ));
@@ -1975,13 +2008,19 @@ import {
   useReactTable
 } from "@tanstack/react-table";
 import { jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
-function DataTable({ columns, data }) {
+function DataTable({
+  columns,
+  data,
+  caption,
+  "aria-label": ariaLabel
+}) {
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel()
   });
-  return /* @__PURE__ */ jsx35("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs13(Table, { children: [
+  return /* @__PURE__ */ jsx35("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs13(Table, { "aria-label": ariaLabel, children: [
+    caption ? /* @__PURE__ */ jsx35(TableCaption, { children: caption }) : null,
     /* @__PURE__ */ jsx35(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx35(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx35(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
     /* @__PURE__ */ jsx35(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx35(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx35(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx35(TableRow, { children: /* @__PURE__ */ jsx35(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) }) })
   ] }) });
@@ -2350,7 +2389,7 @@ function CommandDialog({
       /* @__PURE__ */ jsx40(DialogTitle, { children: title }),
       /* @__PURE__ */ jsx40(DialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsx40(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx40(Command, { className: "[&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-[var(--space-2,0.5rem)] [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-[var(--space-2,0.5rem)] [&_[cmdk-item]]:py-[var(--space-3,0.75rem)] [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
+    /* @__PURE__ */ jsx40(DialogContent, { className: "overflow-hidden p-0", scrollable: false, children: /* @__PURE__ */ jsx40(Command, { className: "[&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-[var(--space-2,0.5rem)] [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-[var(--space-2,0.5rem)] [&_[cmdk-item]]:py-[var(--space-3,0.75rem)] [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
   ] });
 }
 var CommandInput = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs17("div", { className: "flex items-center border-b px-[var(--space-3,0.75rem)]", "cmdk-input-wrapper": "", children: [
@@ -2409,9 +2448,11 @@ var CommandGroup = React35.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 CommandGroup.displayName = "CommandGroup";
 var CommandSeparator = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx40(
-  CommandPrimitive.Separator,
+  "div",
   {
     ref,
+    role: "none",
+    "data-cmdk-separator": "",
     className: cn("-mx-[var(--space-1,0.25rem)] h-px bg-border", className),
     ...props
   }
@@ -2458,9 +2499,11 @@ function Combobox({
   emptyText = "No results found.",
   disabled,
   className,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
 }) {
   const [open, setOpen] = React36.useState(false);
+  const listboxId = React36.useId();
   const selected = options.find((o) => o.value === value);
   return /* @__PURE__ */ jsxs18(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx41(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs18(
@@ -2470,7 +2513,9 @@ function Combobox({
         role: "combobox",
         "aria-expanded": open,
         "aria-haspopup": "listbox",
+        "aria-controls": open ? listboxId : void 0,
         "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
         disabled,
         className: cn(
           "inline-flex h-[var(--control-height-md,2.5rem)] w-[240px] items-center justify-between gap-[var(--gap-sm,0.5rem)] rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out",
@@ -2502,7 +2547,7 @@ function Combobox({
     ) }),
     /* @__PURE__ */ jsx41(PopoverContent, { className: "w-[240px] p-0", align: "start", children: /* @__PURE__ */ jsxs18(Command, { children: [
       /* @__PURE__ */ jsx41(CommandInput, { placeholder: searchPlaceholder }),
-      /* @__PURE__ */ jsxs18(CommandList, { children: [
+      /* @__PURE__ */ jsxs18(CommandList, { id: listboxId, children: [
         /* @__PURE__ */ jsx41(CommandEmpty, { children: emptyText }),
         /* @__PURE__ */ jsx41(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs18(
           CommandItem,
@@ -3706,7 +3751,7 @@ var dialogSchema = {
       "Putting too many primary actions in DialogFooter"
     ],
     relatedComponents: ["alert-dialog", "popover", "sheet"],
-    accessibilityNotes: "Radix traps focus, handles Escape to close, and wires aria-labelledby/describedby to DialogTitle/DialogDescription. Always include a DialogTitle.",
+    accessibilityNotes: "Radix traps focus, handles Escape to close, and wires aria-labelledby/describedby to DialogTitle/DialogDescription. Always include a DialogTitle. DialogContent is constrained to `max-h-[calc(100vh-2rem)]` and scrolls internally so long content stays inside the focus trap.",
     tokenBudget: 600
   },
   tags: ["dialog", "modal", "overlay", "popup", "form"]
@@ -4224,6 +4269,24 @@ var sliderSchema = {
       default: "horizontal",
       description: "Slider direction",
       enumValues: ["horizontal", "vertical"]
+    },
+    {
+      name: "aria-label",
+      type: "string",
+      required: false,
+      description: "Accessible label for the slider as a whole. Mirrored onto a single thumb automatically; for range sliders prefer thumbLabels."
+    },
+    {
+      name: "aria-labelledby",
+      type: "string",
+      required: false,
+      description: "Id of an external visible label that names the slider."
+    },
+    {
+      name: "thumbLabels",
+      type: "object",
+      required: false,
+      description: "Per-thumb accessible labels (string[]). Required for range sliders so each thumb has a meaningful name (e.g. ['Minimum price', 'Maximum price']). For a single-thumb slider, the Root's aria-label is mirrored onto the thumb automatically and thumbLabels is only needed when overriding that default."
     }
   ],
   variants: [],
@@ -4253,10 +4316,12 @@ var sliderSchema = {
       "Using Slider for exact values without showing the number",
       "Missing min/max bounds",
       "Using step=1 for fractional values (set step=0.01)",
-      "Not providing aria-label when there's no visible label"
+      "Not providing aria-label / aria-labelledby when there's no visible label",
+      "Range slider with only Root aria-label and no thumbLabels \u2014 both thumbs fall back to '(N of 2)' indexed names instead of meaningful per-thumb labels",
+      "thumbLabels.length !== value.length \u2014 extra labels are ignored, missing labels fall back to indexed names (dev-mode warning)"
     ],
     relatedComponents: ["input"],
-    accessibilityNotes: "Arrow keys step by step, Home/End jump to min/max, PageUp/PageDown step larger. Radix handles aria-valuemin/max/now. Add aria-label if no visible label.",
+    accessibilityNotes: "Arrow keys step by step, Home/End jump to min/max, PageUp/PageDown step larger. Radix handles aria-valuemin/max/now. Each thumb has its own accessible name: explicit via thumbLabels[i], else mirrored from the Root's aria-label (single thumb) or indexed '(i of N)' fallback (range). Add aria-label / aria-labelledby on the Root when there's no visible label.",
     tokenBudget: 450
   },
   tags: ["slider", "range", "form", "numeric", "input"]
@@ -4683,7 +4748,14 @@ var scrollAreaSchema = {
       description: "When scrollbars are visible",
       enumValues: ["auto", "always", "scroll", "hover"]
     },
-    { name: "className", type: "string", required: false, description: "Set dimensions via Tailwind (e.g. h-72 w-48)" }
+    { name: "className", type: "string", required: false, description: "Set dimensions via Tailwind (e.g. h-72 w-48)" },
+    {
+      name: "viewportTabIndex",
+      type: "number",
+      required: false,
+      default: 0,
+      description: "tabIndex applied to the scroll viewport. Defaults to 0 so keyboard users can scroll without a pointer; pass -1 to skip the viewport in the tab order when wrapping decorative or already-keyboard-reachable content."
+    }
   ],
   variants: [],
   slots: [
@@ -4713,10 +4785,11 @@ var scrollAreaSchema = {
     commonMistakes: [
       "Forgetting to set height/width \u2014 scrollbars don't appear",
       "Using for the whole page",
-      "Nesting ScrollAreas (confusing UX)"
+      "Nesting ScrollAreas (confusing UX)",
+      "Wrapping decorative or already-keyboard-reachable content without setting viewportTabIndex={-1} \u2014 adds an unnecessary tab stop"
     ],
     relatedComponents: [],
-    accessibilityNotes: "Radix doesn't make the viewport focusable by default \u2014 add tabIndex={0} on a focusable child or the viewport to enable keyboard scrolling (arrow keys, PgUp/PgDn, Home/End). For long lists, consider pagination or virtualization.",
+    accessibilityNotes: "The viewport is keyboard-focusable by default (viewportTabIndex=0) so users can scroll long content via arrow keys / PgUp / PgDn / Home / End without a pointer. Pass viewportTabIndex={-1} when the contents are already in the tab order or purely decorative. For very long lists, consider pagination or virtualization.",
     tokenBudget: 350
   },
   tags: ["scroll-area", "scroll", "overflow", "scrollbar", "layout"]
@@ -5250,7 +5323,19 @@ var dataTableSchema = {
   subcategory: "data",
   props: [
     { name: "columns", type: "object", required: true, description: "ColumnDef<TData, TValue>[] from @tanstack/react-table" },
-    { name: "data", type: "object", required: true, description: "Array of row data" }
+    { name: "data", type: "object", required: true, description: "Array of row data" },
+    {
+      name: "caption",
+      type: "ReactNode",
+      required: false,
+      description: "Visible caption rendered below the table; announced by screen readers when entering the table"
+    },
+    {
+      name: "aria-label",
+      type: "string",
+      required: false,
+      description: "Accessible label forwarded as aria-label on the underlying <table>; use when no visible caption is shown"
+    }
   ],
   variants: [],
   slots: [],
@@ -5274,10 +5359,11 @@ var dataTableSchema = {
       "Forgetting getCoreRowModel() (table renders nothing)",
       "Recreating columns array on every render (breaks memoization \u2014 wrap in useMemo or define outside the component)",
       "Using accessorKey with nested paths without accessorFn",
-      "Not adding filter/sort row models when those features are needed"
+      "Not adding filter/sort row models when those features are needed",
+      "Shipping a table without `caption` or `aria-label` \u2014 the table is unlabelled to assistive tech"
     ],
     relatedComponents: ["table", "pagination"],
-    accessibilityNotes: "Uses semantic <table> via Hex UI Table primitives. Add aria-sort to sortable column headers. Announce filter/sort changes via aria-live for dynamic updates.",
+    accessibilityNotes: "Pass either `caption` (visible) or `aria-label` so screen readers announce the table when the user enters it. Add aria-sort to sortable column headers. Announce filter/sort changes via aria-live for dynamic updates.",
     tokenBudget: 900
   },
   tags: ["data-table", "tanstack", "sortable", "filterable", "paginated"]
@@ -5691,10 +5777,11 @@ var commandSchema = {
       "Forgetting CommandList \u2014 items won't be scrollable or grouped properly",
       "Giving CommandItem non-unique values (breaks filtering and controlled state)",
       "Overriding CommandInput className to remove the border/padding \u2014 breaks the \u2318K icon layout",
-      "Not rendering CommandEmpty \u2014 the list looks broken when a search has no matches"
+      "Not rendering CommandEmpty \u2014 the list looks broken when a search has no matches",
+      "Querying CommandSeparator via cmdk's internal Separator state \u2014 Hex UI renders it as a presentational div with role='none' (and the `data-cmdk-separator` attribute preserved for selector compatibility) so it can sit inside CommandList's role=listbox without violating ARIA"
     ],
     relatedComponents: ["combobox", "dialog", "dropdown-menu"],
-    accessibilityNotes: "cmdk wires role=listbox/option and aria-activedescendant. Use the `label` prop on Command for a screen-reader-only name when no visible heading exists.",
+    accessibilityNotes: "cmdk wires role=listbox/option and aria-activedescendant. Use the `label` prop on Command for a screen-reader-only name when no visible heading exists. CommandSeparator renders with role='none' (still selectable via `[data-cmdk-separator]`) so listbox-children rules are satisfied.",
     tokenBudget: 900
   },
   tags: ["command", "cmdk", "palette", "search", "launcher"]
@@ -5758,7 +5845,13 @@ var comboboxSchema = {
       name: "aria-label",
       type: "string",
       required: false,
-      description: "Accessible label \u2014 required when no adjacent visible <label> is used"
+      description: "Accessible label \u2014 required when no adjacent visible label is used"
+    },
+    {
+      name: "aria-labelledby",
+      type: "string",
+      required: false,
+      description: "Id of an external visible label that names the combobox"
     }
   ],
   variants: [],
@@ -5789,10 +5882,10 @@ var comboboxSchema = {
       "Using the label as the value \u2014 fine if stable, but prefer a short stable `value` string",
       "Forgetting to bind value + onChange \u2014 uncontrolled mode doesn't exist on this wrapper",
       "Mixing translated labels without keying on value \u2014 label changes won't update selection",
-      "Missing aria-label when there's no adjacent visible <label>"
+      "Missing aria-label / aria-labelledby \u2014 role='combobox' does not allow name from contents, so without one of these the trigger has no accessible name"
     ],
     relatedComponents: ["command", "popover", "select"],
-    accessibilityNotes: "Trigger has role='combobox' + aria-expanded. Popover traps focus inside the CommandInput. Options are announced via cmdk's aria-activedescendant wiring.",
+    accessibilityNotes: "Trigger has role='combobox' + aria-expanded + aria-haspopup='listbox'. aria-controls points at the inner CommandList (a useId-stabilized listbox). Pass aria-label or aria-labelledby \u2014 combobox does not derive its name from contents.",
     tokenBudget: 900
   },
   tags: ["combobox", "select", "search", "cmdk", "input"]