@neasg/design-system 0.4.22 → 0.4.23

package/README.md

@@ -146,6 +146,15 @@ const darkThemeTokenMapping = {
   "--tooltip-foreground": "var(--nea-dark-neutral-50)",
   "--primary": "148 30% 38%",
   "--primary-foreground": "var(--nea-dark-neutral-50)",
+  "--interactive-foreground": "143 44% 67%",
+  "--highlight-background": "148 20% 18%",
+  "--highlight-foreground": "143 44% 67%",
+  "--button-primary-background": "148 30% 38%",
+  "--button-primary-hover-background": "148 30% 39%",
+  "--button-primary-foreground": "0 0% 100%",
+  "--count-badge-background": "144 66% 40%",
+  "--count-badge-foreground": "var(--nea-dark-neutral-800)",
+  "--instructional-foreground": "var(--nea-dark-neutral-200)",
   "--secondary": "var(--nea-dark-neutral-500)",
   "--secondary-foreground": "var(--nea-dark-neutral-100)",
   "--muted": "var(--nea-dark-neutral-500)",

package/dist/badge.js

@@ -7,7 +7,7 @@ const badgeVariants = cva("inline-flex items-center justify-center text-center r
     variants: {
         variant: {
             secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-            muted: "border-transparent bg-muted text-muted-foreground",
+            muted: "border-transparent bg-muted text-instructional",
             destructive: "border-transparent bg-[hsl(var(--status-destructive))] text-[hsl(var(--status-destructive-foreground))]",
             outline: "text-foreground",
             success: "border-transparent bg-[hsl(var(--status-success))] text-[hsl(var(--status-success-foreground))]",

package/dist/button.js

@@ -6,12 +6,12 @@ import { cn } from "./lib/utils";
 const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-control text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none [&_svg]:h-4 [&_svg]:min-h-4 [&_svg]:w-4 [&_svg]:min-w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            default: "bg-button-primary text-button-primary-foreground hover:bg-button-primary-hover",
             destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
             outline: "border border-[hsl(var(--button-outline-border))] bg-[hsl(var(--button-outline-background))] text-foreground hover:bg-[hsl(var(--button-outline-hover-background))] hover:text-accent-foreground",
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
             ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:text-primary/85 hover:underline",
+            link: "text-interactive underline-offset-4 hover:text-interactive hover:underline",
         },
         size: {
             sm: "h-8 px-2.5 text-sm",

package/dist/calendar.js

@@ -16,7 +16,7 @@ function CalendarDayButton({ className, day, modifiers, children, disabled, onCl
     return (_jsx("button", { ref: ref, type: type, disabled: disabled, onClick: onClick, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: tabIndex, "aria-label": ariaLabel, "aria-pressed": ariaPressed, "aria-selected": ariaSelected, "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
             !modifiers.range_start &&
             !modifiers.range_end &&
-            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("inline-flex cursor-pointer items-center justify-center rounded-control outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-primary/10 data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 aspect-square w-full min-w-[--cell-size] data-[range-end=true]:rounded-control data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-control group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px]", defaultClassNames.day, className), children: _jsx(Typography, { as: "span", variant: "bodySm", color: "inherit", children: children }) }));
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("inline-flex cursor-pointer items-center justify-center rounded-control outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", "data-[selected-single=true]:bg-button-primary data-[selected-single=true]:text-button-primary-foreground data-[range-middle=true]:bg-highlight data-[range-middle=true]:text-highlight-foreground data-[range-start=true]:bg-button-primary data-[range-start=true]:text-button-primary-foreground data-[range-end=true]:bg-button-primary data-[range-end=true]:text-button-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 aspect-square w-full min-w-[--cell-size] data-[range-end=true]:rounded-control data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-control group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px]", defaultClassNames.day, className), children: _jsx(Typography, { as: "span", variant: "bodySm", color: "inherit", children: children }) }));
 }
 function Calendar({ className, classNames, showOutsideDays = true, fixedWeeks = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
@@ -44,9 +44,9 @@ function Calendar({ className, classNames, showOutsideDays = true, fixedWeeks =
             week_number_header: cn("w-[--cell-size] select-none", defaultClassNames.week_number_header),
             week_number: cn("text-muted-foreground select-none text-[0.8rem]", defaultClassNames.week_number),
             day: cn("group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-[var(--radius-control)] [&:last-child[data-selected=true]_button]:rounded-r-[var(--radius-control)]", defaultClassNames.day),
-            range_start: cn("bg-primary/10 rounded-l-[var(--radius-control)]", defaultClassNames.range_start),
-            range_middle: cn("bg-primary/10 rounded-none", defaultClassNames.range_middle),
-            range_end: cn("bg-primary/10 rounded-r-[var(--radius-control)]", defaultClassNames.range_end),
+            range_start: cn("bg-highlight rounded-l-[var(--radius-control)]", defaultClassNames.range_start),
+            range_middle: cn("bg-highlight rounded-none", defaultClassNames.range_middle),
+            range_end: cn("bg-highlight rounded-r-[var(--radius-control)]", defaultClassNames.range_end),
             today: cn("bg-accent text-accent-foreground rounded-control data-[selected=true]:rounded-none", defaultClassNames.today),
             outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
             disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),

package/dist/card.js

@@ -109,7 +109,8 @@ const Card = React.forwardRef(({ title, description, variant = "default", size =
     return (_jsxs("div", { ref: ref, onClick: onClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, role: role !== null && role !== void 0 ? role : (interactive ? "button" : undefined), tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (interactive ? 0 : undefined), "aria-pressed": ariaPressed !== null && ariaPressed !== void 0 ? ariaPressed : (interactive && active !== undefined ? Boolean(active) : undefined), className: cn("group/card rounded-surface border border-[hsl(var(--card-border))] text-card-foreground", variant === "default" && "bg-card", variant === "elevated" && "bg-card shadow-sm", variant === "gradient" &&
             "border-[hsl(var(--card-gradient-border))]/30 bg-gradient-to-br from-[hsl(var(--card-gradient-from))] to-[hsl(var(--card-gradient-to))] text-[hsl(var(--card-gradient-foreground))]", active && "border-primary bg-primary/[0.04] ring-1 ring-primary/20", accent === "primary" &&
             "border-[hsl(var(--card-border))] shadow-[inset_4px_0_0_0_hsl(var(--primary))]", interactive &&
-            "cursor-pointer transition-[border-color,background-color,box-shadow,transform] duration-150 ease-out hover:border-primary/50 hover:bg-primary/5 hover:shadow-md motion-safe:hover:-translate-y-0.5 motion-safe:active:translate-y-0 motion-safe:active:scale-[0.99] focus-visible:border-primary/50 focus-visible:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", className), ...props, children: [_jsxs("div", { className: cn("relative flex flex-col gap-2", size === "default" && "p-4", size === "compact" && "p-3", showIcon && size === "default" && "pr-12", showIcon && size === "compact" && "pr-10"), children: [showIcon ? (_jsx("span", { "aria-hidden": "true", "data-slot": "card-icon", className: cn("pointer-events-none absolute right-3 top-3 inline-flex size-7 items-center justify-center rounded-control border border-[hsl(var(--card-border))] bg-background/80 text-muted-foreground shadow-sm transition-[background-color,color,transform] duration-150 ease-out group-hover/card:scale-105 group-hover/card:bg-primary/10 group-hover/card:text-primary group-focus-visible/card:bg-primary/10 group-focus-visible/card:text-primary motion-reduce:transition-colors [&_svg]:size-3.5", size === "compact" && "right-2.5 top-2.5 size-6 [&_svg]:size-3", active && "border-primary/30 bg-primary/10 text-primary", variant === "gradient" &&
+            "cursor-pointer transition-[border-color,background-color,box-shadow,transform] duration-150 ease-out hover:border-primary/50 hover:bg-primary/5 hover:shadow-md motion-safe:hover:-translate-y-0.5 motion-safe:active:translate-y-0 motion-safe:active:scale-[0.99] focus-visible:border-primary/50 focus-visible:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", className), ...props, children: [_jsxs("div", { className: cn("relative flex flex-col gap-2", size === "default" && "p-4", size === "compact" && "p-3", showIcon && size === "default" && "pr-12", showIcon && size === "compact" && "pr-10"), children: [showIcon ? (_jsx("span", { "aria-hidden": "true", "data-slot": "card-icon", className: cn("pointer-events-none absolute right-3 top-3 inline-flex size-7 items-center justify-center rounded-control border border-[hsl(var(--card-border))] bg-background/80 text-muted-foreground shadow-sm transition-[background-color,color,transform] duration-150 ease-out group-hover/card:scale-105 group-hover/card:bg-highlight group-hover/card:text-highlight-foreground group-focus-visible/card:bg-highlight group-focus-visible/card:text-highlight-foreground motion-reduce:transition-colors [&_svg]:size-3.5", size === "compact" && "right-2.5 top-2.5 size-6 [&_svg]:size-3", active &&
+                            "border-primary/30 bg-highlight text-highlight-foreground", variant === "gradient" &&
                             "border-white/25 bg-white/10 text-current group-hover/card:bg-white/20 group-hover/card:text-current group-focus-visible/card:bg-white/20 group-focus-visible/card:text-current"), children: renderedIcon })) : null, loading ? (_jsx(Skeleton, { className: "h-3.5 w-24" })) : (renderedTitle), loading
                         ? description != null && _jsx(Skeleton, { className: "h-5 w-40" })
                         : renderedDescription, loading ? (stat !== undefined && _jsx(Skeleton, { className: "h-8 w-20" })) : stat ? (_jsx(Typography, { as: "p", variant: "title", color: variant === "gradient" ? "inherit" : undefined, children: stat })) : null, loading ? (subMetric !== undefined && _jsx(Skeleton, { className: "h-5 w-28" })) : subMetric ? (_jsx(Typography, { as: "p", variant: "caption", color: variant === "gradient" ? "inherit" : undefined, className: variant === "gradient" ? "opacity-80" : undefined, children: subMetric })) : null] }), children ? (_jsx("div", { className: cn(size === "default" && "p-4 pt-0", size === "compact" && "p-3 pt-0"), children: children })) : null, footer ? (_jsx("div", { className: cn("flex items-center", size === "default" && "p-4 pt-0", size === "compact" && "p-3 pt-0"), children: footer })) : null] }));

package/dist/command-search.js

@@ -241,7 +241,7 @@ function CommandSearch({ value, onValueChange, sections, children, className, is
                                                                 if (((_c = section.action) === null || _c === void 0 ? void 0 : _c.closeOnSelect) !== false) {
                                                                     setIsOpen(false);
                                                                 }
-                                                            }), children: _jsx(Button, { asChild: true, variant: "link", size: "compact", className: "w-full justify-start text-left font-medium group-data-[selected=true]:underline", children: _jsxs("span", { children: [_jsx("span", { className: "min-w-0 truncate", children: section.action.label }), _jsxs("span", { className: "inline-flex shrink-0 items-center justify-center text-primary", children: [(_a = section.action.affordance) !== null && _a !== void 0 ? _a : (_jsx(ArrowRight, { className: "size-[var(--space-4)]", "aria-hidden": "true" })), _jsx("span", { className: "sr-only", children: (_b = section.action.affordanceLabel) !== null && _b !== void 0 ? _b : "Show all results in group" })] })] }) }) }, `${section.key}-action`)) : null] })] }, section.key));
+                                                            }), children: _jsx(Button, { asChild: true, variant: "link", size: "compact", className: "w-full justify-start text-left font-medium group-data-[selected=true]:underline", children: _jsxs("span", { children: [_jsx("span", { className: "min-w-0 truncate", children: section.action.label }), _jsxs("span", { className: "inline-flex shrink-0 items-center justify-center text-interactive", children: [(_a = section.action.affordance) !== null && _a !== void 0 ? _a : (_jsx(ArrowRight, { className: "size-[var(--space-4)]", "aria-hidden": "true" })), _jsx("span", { className: "sr-only", children: (_b = section.action.affordanceLabel) !== null && _b !== void 0 ? _b : "Show all results in group" })] })] }) }) }, `${section.key}-action`)) : null] })] }, section.key));
                                     })) : (_jsx(CommandSearchEmptyState, { query: value, resultsMinHeight: resultsMinHeight }))) : (_jsx(CommandSearchEmptyState, { query: value, resultsMinHeight: resultsMinHeight })) }), shouldShowAllResults ? (_jsx(PopoverMenuFooter, { inset: "flush", children: _jsxs(PopoverMenuFooterAction, { className: "group", onClick: () => {
                                             onShowAllResults === null || onShowAllResults === void 0 ? void 0 : onShowAllResults(normalizedValue);
                                             setIsOpen(false);

package/dist/count-badge.js

@@ -17,7 +17,7 @@ function CountBadge({ count, variant = "default", size = "md", max, pulse = fals
     const variantClasses = {
         default: {
             badgeVariant: "secondary",
-            className: "border-transparent bg-primary text-primary-foreground hover:bg-primary/90",
+            className: "border-transparent bg-count-badge text-count-badge-foreground",
         },
         danger: {
             badgeVariant: "destructive",
@@ -29,7 +29,7 @@ function CountBadge({ count, variant = "default", size = "md", max, pulse = fals
         },
     };
     const pulseColor = {
-        default: "bg-primary/75",
+        default: "bg-count-badge/75",
         danger: "bg-[hsl(var(--status-destructive))]/70",
         muted: "bg-muted-foreground/50",
     };

package/dist/date-input.js

@@ -166,7 +166,7 @@ const DateInput = React.forwardRef((props, ref) => {
     const disabledDays = (date) => isDateOutsideBounds(date, minDate, maxDate);
     const calendarContent = (_jsx(_Fragment, { children: props.mode === "range" ? (_jsx(Calendar, { mode: "range", selected: selectedRange, onSelect: handleRangeSelect, disabled: disabledDays, defaultMonth: (_b = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _b !== void 0 ? _b : selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to, numberOfMonths: (_c = props.numberOfMonths) !== null && _c !== void 0 ? _c : 2, showOutsideDays: false, autoFocus: true })) : (_jsx(Calendar, { mode: "single", selected: selectedDate, onSelect: handleSelect, disabled: disabledDays, defaultMonth: selectedDate, autoFocus: true })) }));
     if (appearance === "inline") {
-        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(Popover, { open: open, onOpenChange: handleOpenChange, align: "start", title: popoverTitle, surface: popoverTitle ? "menu" : "panel", contentClassName: "w-auto p-0", trigger: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-primary underline decoration-primary/40 underline-offset-4 transition-colors hover:decoration-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }), children: calendarContent }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
+        return (_jsxs("span", { className: cn("inline-flex", className), "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(Popover, { open: open, onOpenChange: handleOpenChange, align: "start", title: popoverTitle, surface: popoverTitle ? "menu" : "panel", contentClassName: "w-auto p-0", trigger: _jsxs("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("inline-flex cursor-pointer items-baseline rounded-sm border-0 bg-transparent p-0 font-medium text-interactive underline decoration-interactive/40 underline-offset-4 transition-colors hover:decoration-interactive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", !displayValue && "text-muted-foreground decoration-border", isInvalid && "text-destructive decoration-destructive", triggerClassName), children: [_jsxs("span", { className: "sr-only", children: [label, ": "] }), _jsx("span", { children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder })] }), children: calendarContent }), showDescription ? (_jsx("span", { id: descriptionId, className: "sr-only", children: description })) : null, error ? (_jsx("span", { id: errorId, role: "alert", className: "sr-only", children: error })) : null] }));
     }
     return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs("div", { className: "relative", children: [_jsx(Popover, { open: open, onOpenChange: handleOpenChange, align: "start", title: popoverTitle, surface: popoverTitle ? "menu" : "panel", contentClassName: "w-auto p-0", trigger: _jsx("button", { ref: ref, type: "button", id: inputId, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn(inputControlClassName, "relative cursor-pointer pr-9 text-left", showClearButton && "pr-16", !displayValue && "text-muted-foreground", isInvalid && "border-destructive focus-visible:ring-destructive", triggerClassName), children: _jsx("span", { className: "block truncate", children: displayValue !== null && displayValue !== void 0 ? displayValue : placeholder }) }), children: calendarContent }), _jsxs("span", { "aria-hidden": showClearButton ? undefined : true, className: "pointer-events-none absolute inset-y-0 right-3 flex items-center gap-2 text-muted-foreground", children: [showClearButton ? (_jsx("button", { type: "button", "aria-label": resolvedClearLabel, onClick: handleClear, className: "pointer-events-auto inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed", children: _jsx(XIcon, { size: 14, className: "flex items-center justify-center" }) })) : null, _jsx(CalendarIcon, { "aria-hidden": "true", className: "h-4 w-4 shrink-0", strokeWidth: 2 })] })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });

package/dist/dropdown-button.js

@@ -6,12 +6,12 @@ import { Popover } from "./popover";
 import { PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger, } from "./popover-primitive";
 import { cn } from "./lib/utils";
 const splitButtonDividerClassNames = {
-    default: "before:bg-primary-foreground/30",
+    default: "before:bg-button-primary-foreground/30",
     destructive: "before:bg-destructive-foreground/30",
     outline: "before:bg-[hsl(var(--button-outline-border))]",
     secondary: "before:bg-secondary-foreground/20",
     ghost: "before:bg-border",
-    link: "before:bg-primary/25",
+    link: "before:bg-interactive/25",
 };
 function DropdownButton({ label, leadingIcon, children, className, contentClassName, dropdownAriaLabel, menuWidth = "trigger", align = "end", alignOffset, avoidCollisions, collisionPadding, defaultOpen, disabled, hideWhenDetached, loading, loadingIndicator, loadingText, modal, onClick, onOpenChange, open, side, sideOffset = 4, split: splitProp, sticky, type = "button", variant, size, ...buttonProps }) {
     const menuContentClassName = cn("shadow-overlay-strong border-border/80 bg-popover ring-1 ring-border/50", menuWidth === "trigger" &&

package/dist/file-upload.js

@@ -92,7 +92,7 @@ export function FileUpload({ accept, maxSize = DEFAULT_MAX_FILE_SIZE, maxFiles =
     const fileInput = (_jsx("input", { ref: inputRef, type: "file", accept: accept, multiple: maxFiles > 1, onChange: handleInputChange, disabled: disabled, className: "hidden" }));
     return (_jsxs("div", { className: cn("space-y-2", className), children: [fileInput, _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onClick: openFilePicker, className: cn("relative flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-surface border border-dashed p-4 transition-colors", isDragOver && !disabled
                     ? "border-primary bg-primary/5"
-                    : "border-muted-foreground/25 hover:border-muted-foreground/50", disabled && "cursor-not-allowed opacity-50"), children: [_jsx(UploadIcon, { className: cn(isDragOver ? "text-primary" : "text-muted-foreground"), size: 28 }), _jsxs("div", { className: "text-center", children: [_jsx(Typography, { as: "p", variant: "label", children: isDragOver ? "Drop files here" : "Drag & drop files here" }), _jsxs(Typography, { as: "p", variant: "caption", className: "mt-1", children: ["or click to browse (max ", formatFileSize(maxSize), " each)"] })] })] }), error ? (_jsx(Typography, { as: "p", variant: "bodySm", className: "text-destructive", children: error })) : null, value.length > 0 ? (_jsx("div", { className: "space-y-2", children: value.map((file, index) => {
+                    : "border-muted-foreground/25 hover:border-muted-foreground/50", disabled && "cursor-not-allowed opacity-50"), children: [_jsx(UploadIcon, { className: cn(isDragOver ? "text-interactive" : "text-muted-foreground"), size: 28 }), _jsxs("div", { className: "text-center", children: [_jsx(Typography, { as: "p", variant: "label", children: isDragOver ? "Drop files here" : "Drag & drop files here" }), _jsxs(Typography, { as: "p", variant: "caption", className: "mt-1", children: ["or click to browse (max ", formatFileSize(maxSize), " each)"] })] })] }), error ? (_jsx(Typography, { as: "p", variant: "bodySm", className: "text-destructive", children: error })) : null, value.length > 0 ? (_jsx("div", { className: "space-y-2", children: value.map((file, index) => {
                     var _a;
                     const progress = uploadProgress === null || uploadProgress === void 0 ? void 0 : uploadProgress.get(file.name);
                     const isUploading = (progress === null || progress === void 0 ? void 0 : progress.status) === "uploading";

package/dist/filter-toggle.js

@@ -9,7 +9,7 @@ const filterToggleVariants = cva("inline-flex shrink-0 cursor-pointer select-non
             muted: "",
         },
         selected: {
-            true: "border-transparent bg-primary/10 text-primary hover:bg-primary/20 focus-visible:bg-primary/20",
+            true: "border-transparent bg-highlight text-highlight-foreground hover:bg-highlight/80 focus-visible:bg-highlight/80",
             false: "border-transparent bg-muted text-muted-foreground hover:bg-muted/80",
         },
     },

package/dist/index.d.ts

@@ -131,7 +131,7 @@ export { TableColumnVisibilityMenu } from "./table-column-visibility";
 export type { TableColumnVisibilityMenuProps } from "./table-column-visibility";
 export { useTableSort } from "./use-table-sort";
 export type { UseTableSortOptions, UseTableSortReturn, } from "./use-table-sort";
-export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
+export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableRowHeader, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
 export type { TableColumn, TableColumnWidths, TableProps, TableResizeMode, TableRowExpansionProps, TableRowTone, TableSortDirection, TableSortingProps, TableSkeletonConfig, TableRowSkeletonProps, } from "./table";
 export type { TableColumnFilter, TableColumnFilterOption, TableDateColumnFilter, TableOptionsColumnFilter, TableTextColumnFilter, } from "./table-column-filter";
 export { Tabs, SubTabs, TabsRoot, TabWithDropdown, type TabsItem, type TabsItemLabel, type TabsItemLabelProps, type TabsProps, type SubTabsItem, type SubTabsProps, TabsList, TabsTrigger, TabsContent, type TabWithDropdownProps, useTabsContext, type TabDropdownSection, } from "./tabs";

package/dist/index.js

@@ -68,7 +68,7 @@ export { Pagination } from "./pagination";
 export { TableToolbar } from "./table-toolbar";
 export { TableColumnVisibilityMenu } from "./table-column-visibility";
 export { useTableSort } from "./use-table-sort";
-export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
+export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableRowHeader, TableCaption, TableRowSkeleton, TABLE_SKELETON_PRESETS, } from "./table";
 export { Tabs, SubTabs, TabsRoot, TabWithDropdown, TabsList, TabsTrigger, TabsContent, useTabsContext, } from "./tabs";
 export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider, } from "./tooltip";
 export { Toaster, toast } from "./toaster";

package/dist/input-control.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 declare const inputControlPaddingClassName = "px-3 py-2";
-declare const inputControlClassName = "h-control w-full min-w-0 rounded-control border border-input bg-transparent px-3 py-2 text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20";
+declare const inputControlClassName = "h-control w-full min-w-0 rounded-control border border-input bg-transparent px-3 py-2 text-sm transition-[color,box-shadow] outline-none selection:bg-highlight selection:text-highlight-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20";
 declare const InputControl: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { InputControl, inputControlClassName, inputControlPaddingClassName };

package/dist/input-control.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "./lib/utils";
 const inputControlPaddingClassName = "px-3 py-2";
-const inputControlClassName = `h-control w-full min-w-0 rounded-control border border-input bg-transparent ${inputControlPaddingClassName} text-sm transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20`;
+const inputControlClassName = `h-control w-full min-w-0 rounded-control border border-input bg-transparent ${inputControlPaddingClassName} text-sm transition-[color,box-shadow] outline-none selection:bg-highlight selection:text-highlight-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20`;
 const InputControl = React.forwardRef(({ className, type = "text", ...props }, ref) => (_jsx("input", { ref: ref, type: type, "data-slot": "input", className: cn(inputControlClassName, className), ...props })));
 InputControl.displayName = "InputControl";
 export { InputControl, inputControlClassName, inputControlPaddingClassName };

package/dist/link.js

@@ -5,8 +5,8 @@ import { cn } from "./lib/utils";
 const linkVariants = cva("rounded-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", {
     variants: {
         variant: {
-            default: "text-primary underline-offset-4 hover:text-primary/85 hover:underline",
-            subtle: "text-foreground underline-offset-4 hover:text-primary hover:underline",
+            default: "text-interactive underline-offset-4 hover:text-interactive hover:underline",
+            subtle: "text-foreground underline-offset-4 hover:text-interactive hover:underline",
             inherit: "text-inherit no-underline hover:no-underline",
         },
     },

package/dist/message-item.js

@@ -43,7 +43,7 @@ export function MessageNewDivider({ children = "New Message", className, }) {
 }
 export function MessageAttachmentRow({ attachment, downloadUrl, downloadLabel = `Download ${attachment.name}`, className, ...props }) {
     const renderContent = (isInteractive) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0 pr-1", children: [_jsx(Typography, { as: "p", variant: "bodySm", className: "line-clamp-2 font-medium", children: attachment.name }), attachment.size ? (_jsx(Typography, { as: "p", variant: "caption", children: attachment.size })) : null] }), _jsx("span", { "aria-hidden": "true", className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-control border border-border bg-background text-muted-foreground transition-colors", isInteractive
-                    ? "group-hover:border-primary/40 group-hover:bg-primary/10 group-hover:text-primary group-focus-visible:border-primary/40 group-focus-visible:bg-primary/10 group-focus-visible:text-primary"
+                    ? "group-hover:border-primary/40 group-hover:bg-highlight group-hover:text-highlight-foreground group-focus-visible:border-primary/40 group-focus-visible:bg-highlight group-focus-visible:text-highlight-foreground"
                     : "opacity-60"), children: _jsx(DownloadIcon, { size: 14 }) })] }));
     if (downloadUrl) {
         return (_jsx("a", { className: cn("group grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)_2.75rem] items-center gap-3 rounded-lg border border-border bg-card px-3 py-2 text-foreground no-underline shadow-sm transition hover:border-primary/50 hover:bg-primary/5 hover:no-underline hover:shadow-md focus-visible:border-primary/50 focus-visible:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", className), href: downloadUrl, target: "_blank", rel: "noopener noreferrer", download: attachment.name, "aria-label": downloadLabel, title: downloadLabel, ...props, children: renderContent(true) }));
@@ -143,7 +143,7 @@ export function MessageItem({ message, caseId, showNewBadge = false, newMessageL
     const messageDate = (_a = message.sentAt) !== null && _a !== void 0 ? _a : message.createdAt;
     const downloadCaseId = caseId !== null && caseId !== void 0 ? caseId : message.caseId;
     const contentHtml = toHtmlContent(message.content);
-    const richContentClassName = cn("break-words leading-6", "[&_p]:my-0 [&_p+p]:mt-2", "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5", "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5", "[&_li]:my-1", "[&_a]:text-primary [&_a]:underline [&_a:hover]:text-primary/80", "[&_h1]:mb-2 [&_h1]:mt-3 [&_h1]:text-xl [&_h1]:font-semibold", "[&_h2]:mb-2 [&_h2]:mt-3 [&_h2]:text-lg [&_h2]:font-semibold", "[&_h3]:mb-1.5 [&_h3]:mt-3 [&_h3]:text-base [&_h3]:font-semibold", "[&_h4]:mb-1.5 [&_h4]:mt-3 [&_h4]:font-semibold", "[&_h5]:mb-1.5 [&_h5]:mt-3 [&_h5]:font-semibold", "[&_h6]:mb-1.5 [&_h6]:mt-3 [&_h6]:font-semibold", "[&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground", "[&_table]:my-2 [&_table]:w-full [&_table]:border-collapse", "[&_td]:border [&_td]:border-border [&_td]:p-2", "[&_th]:border [&_th]:border-border [&_th]:bg-[hsl(var(--table-header-background))] [&_th]:p-2 [&_th]:font-semibold", "[&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono [&_pre]:text-[0.85em]", "[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em]", "[&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_mark]:rounded-sm [&_mark]:bg-[hsl(var(--status-warning))] [&_mark]:px-0.5 [&_mark]:text-[hsl(var(--status-warning-foreground))]", "[&_img]:h-auto [&_img]:max-w-full", contentClassName);
+    const richContentClassName = cn("break-words leading-6", "[&_p]:my-0 [&_p+p]:mt-2", "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5", "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5", "[&_li]:my-1", "[&_a]:text-interactive [&_a]:underline [&_a:hover]:text-interactive", "[&_h1]:mb-2 [&_h1]:mt-3 [&_h1]:text-xl [&_h1]:font-semibold", "[&_h2]:mb-2 [&_h2]:mt-3 [&_h2]:text-lg [&_h2]:font-semibold", "[&_h3]:mb-1.5 [&_h3]:mt-3 [&_h3]:text-base [&_h3]:font-semibold", "[&_h4]:mb-1.5 [&_h4]:mt-3 [&_h4]:font-semibold", "[&_h5]:mb-1.5 [&_h5]:mt-3 [&_h5]:font-semibold", "[&_h6]:mb-1.5 [&_h6]:mt-3 [&_h6]:font-semibold", "[&_blockquote]:my-2 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground", "[&_table]:my-2 [&_table]:w-full [&_table]:border-collapse", "[&_td]:border [&_td]:border-border [&_td]:p-2", "[&_th]:border [&_th]:border-border [&_th]:bg-[hsl(var(--table-header-background))] [&_th]:p-2 [&_th]:font-semibold", "[&_pre]:my-2 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono [&_pre]:text-[0.85em]", "[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em]", "[&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_mark]:rounded-sm [&_mark]:bg-[hsl(var(--status-warning))] [&_mark]:px-0.5 [&_mark]:text-[hsl(var(--status-warning-foreground))]", "[&_img]:h-auto [&_img]:max-w-full", contentClassName);
     return (_jsxs(_Fragment, { children: [showUnreadDivider && (_jsx(MessageNewDivider, { children: newMessageLabel })), _jsxs("article", { ref: messageRef, className: cn("min-w-0", className), children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-x-3 gap-y-1", children: [_jsx(AvatarProfile, { fallback: getInitials(initialsName), name: senderName, nameAs: "h3", nameTrailing: isApplicant ? (_jsx(Badge, { variant: "warning", bordered: true, children: "Applicant" })) : undefined, role: hasSenderProfileRole ? (_jsx("span", { "data-slot": "message-author-role", children: senderProfileRole })) : undefined, rolePlacement: "below", className: "min-w-0 flex-1 [column-gap:var(--space-3)]", avatarClassName: "h-9 w-9 shrink-0", fallbackClassName: "text-xs font-medium", nameClassName: "max-w-full whitespace-normal break-words [overflow-wrap:anywhere]" }), _jsx("time", { className: "shrink-0 whitespace-nowrap pt-0.5", dateTime: messageDate.toISOString(), children: _jsx(Typography, { as: "span", variant: "caption", className: "text-muted-foreground/60", children: formatTimestamp
                                         ? formatTimestamp(messageDate, message)
                                         : formatNotificationTimestamp(messageDate, {

package/dist/multi-select.js

@@ -162,7 +162,7 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
                     var _a;
                     event.preventDefault();
                     (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, children: label }), _jsxs(Popover, { open: disabled ? false : open, onOpenChange: handleOpenChange, align: "start", sideOffset: 4, collisionPadding: 16, surface: "menu", tabBehavior: "close", contentClassName: "flex max-h-[var(--radix-popover-content-available-height)] w-[var(--radix-popover-trigger-width)] min-w-[var(--radix-popover-trigger-width)] flex-col overflow-hidden", onOpenAutoFocus: (event) => event.preventDefault(), trigger: _jsxs("div", { ref: triggerRef, role: "combobox", id: selectId, tabIndex: disabled ? -1 : 0, onKeyDown: handleTriggerKeyDown, "aria-expanded": open, "aria-controls": listboxId, "aria-haspopup": "listbox", "aria-invalid": isInvalid ? "true" : undefined, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": labelId, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("relative flex h-control w-full cursor-pointer items-center gap-1.5 overflow-hidden rounded-control border border-input bg-background px-2.5 py-1.5 pr-8 text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", isInvalid ? "border-destructive" : "border-input", disabled && "cursor-not-allowed opacity-50", triggerClassName), children: [selectedLabels.length > 0 ? (_jsxs(_Fragment, { children: [selectedLabels.slice(0, maxVisibleTags).map((opt) => (_jsxs(Badge, { variant: "secondary", className: "max-w-[10rem] shrink-0 justify-start gap-1 overflow-visible text-sm font-medium", children: [_jsx("span", { className: "min-w-0 truncate", children: opt.label }), _jsx("button", { type: "button", className: "inline-flex cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: (event) => {
+                }, children: label }), _jsxs(Popover, { open: disabled ? false : open, onOpenChange: handleOpenChange, align: "start", sideOffset: 4, collisionPadding: 16, surface: "menu", tabBehavior: "close", contentClassName: "flex max-h-[var(--radix-popover-content-available-height)] w-[var(--radix-popover-trigger-width)] min-w-[var(--radix-popover-trigger-width)] flex-col overflow-hidden", onOpenAutoFocus: (event) => event.preventDefault(), trigger: _jsxs("div", { ref: triggerRef, role: "combobox", id: selectId, tabIndex: disabled ? -1 : 0, onKeyDown: handleTriggerKeyDown, "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-haspopup": "listbox", "aria-invalid": isInvalid ? "true" : undefined, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": labelId, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("relative flex h-control w-full cursor-pointer items-center gap-1.5 overflow-hidden rounded-control border border-input bg-background px-2.5 py-1.5 pr-8 text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", isInvalid ? "border-destructive" : "border-input", disabled && "cursor-not-allowed opacity-50", triggerClassName), children: [selectedLabels.length > 0 ? (_jsxs(_Fragment, { children: [selectedLabels.slice(0, maxVisibleTags).map((opt) => (_jsxs(Badge, { variant: "secondary", className: "max-w-[10rem] shrink-0 justify-start gap-1 overflow-visible text-sm font-medium", children: [_jsx("span", { className: "min-w-0 truncate", children: opt.label }), _jsx("button", { type: "button", className: "inline-flex cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: (event) => {
                                                 event.stopPropagation();
                                                 removeOption(opt.value);
                                             }, "aria-label": `Remove ${opt.label}`, children: _jsx(XIcon, { size: 12 }) })] }, opt.value))), selectedLabels.length > maxVisibleTags ? (_jsxs(Badge, { variant: "secondary", className: "shrink-0 text-sm font-medium", title: selectedLabels
@@ -171,7 +171,7 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
                                         .join(", "), children: ["+", selectedLabels.length - maxVisibleTags] })) : null] })) : (_jsx("span", { className: "text-muted-foreground", children: placeholder })), _jsx(ChevronDownIcon, { "aria-hidden": "true", size: 16, className: cn("pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 shrink-0 text-muted-foreground transition-transform duration-150", open && "rotate-180") })] }), children: [searchable ? (_jsx(PopoverMenuSearch, { ref: searchInputRef, value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), onKeyDown: handleSearchKeyDown, placeholder: searchPlaceholder, "aria-label": searchPlaceholder, className: "h-control border-0 bg-transparent px-2 py-0 text-sm shadow-none" })) : null, _jsx("div", { ref: listboxRef, id: listboxId, role: "listbox", "aria-label": typeof label === "string" ? label : "Options", "aria-multiselectable": "true", className: "max-h-64 overflow-y-auto", onKeyDown: handleListboxKeyDown, children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
                             const isSelected = value.includes(option.value);
                             return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, disabled: option.disabled, tabIndex: -1, onClick: () => toggleOption(option.value), className: cn("flex min-h-8 w-full cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", isSelected &&
-                                    "bg-primary/10 text-primary hover:bg-primary/20 hover:text-primary focus:bg-primary/20 focus:text-primary"), children: [_jsx(Checkbox, { checked: isSelected, disabled: option.disabled, tabIndex: -1, readOnly: true, "aria-hidden": "true", className: "mt-0.5" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(SearchHighlight, { text: option.label, query: searchQuery }), option.description ? (_jsx(Typography, { as: "span", variant: "caption", children: _jsx(SearchHighlight, { text: option.description, query: searchQuery }) })) : null] })] }, option.value));
+                                    "bg-highlight text-highlight-foreground hover:bg-highlight/80 hover:text-highlight-foreground focus:bg-highlight/80 focus:text-highlight-foreground"), children: [_jsx(Checkbox, { checked: isSelected, disabled: option.disabled, tabIndex: -1, readOnly: true, "aria-hidden": "true", className: "mt-0.5" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(SearchHighlight, { text: option.label, query: searchQuery }), option.description ? (_jsx(Typography, { as: "span", variant: "caption", children: _jsx(SearchHighlight, { text: option.description, query: searchQuery }) })) : null] })] }, option.value));
                         })) : (_jsx("div", { className: "px-2.5 py-1.5 text-center text-sm text-muted-foreground", children: "No options found." })) })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 }
 export { MultiSelect };

package/dist/page-header.d.ts

@@ -1,9 +1,11 @@
 import * as React from "react";
 export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     title: React.ReactNode;
+    /** Semantic heading level for the page title. Use 1 for top-level routed pages. */
+    headingLevel?: 1 | 2;
     subtitle?: React.ReactNode;
     breadcrumbs?: React.ReactNode;
     children?: React.ReactNode;
 }
-declare function PageHeader({ title, subtitle, breadcrumbs, children, className, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function PageHeader({ title, headingLevel, subtitle, breadcrumbs, children, className, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
 export { PageHeader };

package/dist/page-header.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from "./typography";
-function PageHeader({ title, subtitle, breadcrumbs, children, className, ...props }) {
-    return (_jsx("div", { className: className, ...props, children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [breadcrumbs ? _jsx("div", { children: breadcrumbs }) : null, _jsx("div", { className: "flex items-center gap-2", children: _jsx(Typography, { as: "h2", variant: "title", children: title }) }), subtitle ? (_jsx(Typography, { as: "p", variant: "caption", children: subtitle })) : null] }), children] }) }));
+function PageHeader({ title, headingLevel = 2, subtitle, breadcrumbs, children, className, ...props }) {
+    return (_jsx("div", { className: className, ...props, children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [breadcrumbs ? _jsx("div", { children: breadcrumbs }) : null, _jsx("div", { className: "flex items-center gap-2", children: _jsx(Typography, { as: headingLevel === 1 ? "h1" : "h2", variant: "title", children: title }) }), subtitle ? (_jsx(Typography, { as: "p", variant: "caption", children: subtitle })) : null] }), children] }) }));
 }
 export { PageHeader };

package/dist/pagination.d.ts

@@ -7,6 +7,12 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
     onPageChange: (page: number) => void;
     onItemsPerPageChange?: (itemsPerPage: number) => void;
     itemsPerPageOptions?: number[];
+    /** Accessible name for the page-navigation landmark. */
+    navigationLabel?: string;
+    /** Visible label for the page-size control. */
+    itemsPerPageLabel?: string;
+    /** Accessible name for the page-size control. Defaults to `itemsPerPageLabel`. */
+    itemsPerPageAriaLabel?: string;
 }
-declare function Pagination({ currentPage, totalPages, totalItems, itemsPerPage, onPageChange, onItemsPerPageChange, itemsPerPageOptions, className, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+declare function Pagination({ currentPage, totalPages, totalItems, itemsPerPage, onPageChange, onItemsPerPageChange, itemsPerPageOptions, navigationLabel, itemsPerPageLabel, itemsPerPageAriaLabel, className, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
 export { Pagination };

package/dist/pagination.js

@@ -13,13 +13,14 @@ const PaginationContent = React.forwardRef(({ className, ...props }, ref) => (_j
 PaginationContent.displayName = "PaginationContent";
 const PaginationItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, className: cn("", className), ...props })));
 PaginationItem.displayName = "PaginationItem";
-function Pagination({ currentPage, totalPages, totalItems, itemsPerPage = 5, onPageChange, onItemsPerPageChange, itemsPerPageOptions = [5, 10, 20, 50, 100], className, ...props }) {
+function Pagination({ currentPage, totalPages, totalItems, itemsPerPage = 5, onPageChange, onItemsPerPageChange, itemsPerPageOptions = [5, 10, 20, 50, 100], navigationLabel = "Pagination", itemsPerPageLabel = "Rows per page", itemsPerPageAriaLabel, className, ...props }) {
+    const itemsPerPageLabelId = React.useId();
     const normalizedTotalPages = totalPages || 1;
     const startItem = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
     const endItem = Math.min(currentPage * itemsPerPage, totalItems);
-    return (_jsxs("div", { className: cn("flex items-center justify-between gap-4", className), ...props, children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Showing ", startItem, "-", endItem, " out of ", totalItems] }), _jsxs("div", { className: "flex items-center gap-4", children: [onItemsPerPageChange ? (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Typography, { as: "span", variant: "caption", children: "Rows per page" }), _jsxs(SelectRoot, { value: itemsPerPage.toString(), onValueChange: (value) => {
+    return (_jsxs("div", { "data-slot": "pagination", className: cn("flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4", className), ...props, children: [_jsxs("div", { className: "text-sm text-instructional", children: ["Showing ", startItem, "-", endItem, " out of ", totalItems] }), _jsxs("div", { "data-slot": "pagination-controls", className: "flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2 sm:w-auto sm:flex-nowrap sm:justify-start", children: [onItemsPerPageChange ? (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Typography, { id: itemsPerPageLabelId, as: "span", variant: "caption", children: itemsPerPageLabel }), _jsxs(SelectRoot, { value: itemsPerPage.toString(), onValueChange: (value) => {
                                     onItemsPerPageChange(Number(value));
                                     onPageChange(1);
-                                }, children: [_jsx(SelectTrigger, { className: "w-[64px] text-sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itemsPerPageOptions.map((option) => (_jsx(SelectItem, { value: option.toString(), children: option }, option))) })] })] })) : null, _jsxs("div", { className: "text-sm text-muted-foreground", children: ["Page ", currentPage, " of ", normalizedTotalPages] }), _jsx(PaginationNav, { className: "mx-0 w-auto justify-start", children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "Go to first page", children: _jsx(ChevronsLeft, { className: "h-4 w-4" }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(Math.max(1, currentPage - 1)), disabled: currentPage === 1, "aria-label": "Go to previous page", children: _jsx(ChevronLeftIcon, { size: 16 }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(Math.min(normalizedTotalPages, currentPage + 1)), disabled: currentPage === normalizedTotalPages || totalPages === 0, "aria-label": "Go to next page", children: _jsx(ChevronRightIcon, { size: 16 }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(normalizedTotalPages), disabled: currentPage === normalizedTotalPages || totalPages === 0, "aria-label": "Go to last page", children: _jsx(ChevronsRight, { className: "h-4 w-4" }) }) })] }) })] })] }));
+                                }, children: [_jsx(SelectTrigger, { "aria-label": itemsPerPageAriaLabel, "aria-labelledby": itemsPerPageAriaLabel ? undefined : itemsPerPageLabelId, className: "w-[64px] text-sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itemsPerPageOptions.map((option) => (_jsx(SelectItem, { value: option.toString(), children: option }, option))) })] })] })) : null, _jsxs("div", { className: "text-sm text-instructional", children: ["Page ", currentPage, " of ", normalizedTotalPages] }), _jsx(PaginationNav, { "aria-label": navigationLabel, className: "mx-0 w-auto justify-start", children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "Go to first page", children: _jsx(ChevronsLeft, { className: "h-4 w-4" }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(Math.max(1, currentPage - 1)), disabled: currentPage === 1, "aria-label": "Go to previous page", children: _jsx(ChevronLeftIcon, { size: 16 }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(Math.min(normalizedTotalPages, currentPage + 1)), disabled: currentPage === normalizedTotalPages || totalPages === 0, "aria-label": "Go to next page", children: _jsx(ChevronRightIcon, { size: 16 }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(normalizedTotalPages), disabled: currentPage === normalizedTotalPages || totalPages === 0, "aria-label": "Go to last page", children: _jsx(ChevronsRight, { className: "h-4 w-4" }) }) })] }) })] })] }));
 }
 export { Pagination };

package/dist/popover-menu.js

@@ -21,12 +21,12 @@ function PopoverMenuSection({ className, children, ...props }) {
     return (_jsx("div", { className: cn("space-y-0", className), ...props, children: children }));
 }
 function PopoverMenuItem({ className, children, active, type = "button", ...props }) {
-    return (_jsxs(Button, { type: type, variant: "ghost", "data-slot": "popover-menu-item", className: cn("h-auto min-h-8 w-full justify-start gap-2 px-2 py-2 text-left font-normal whitespace-normal", popoverMenuItemFocusClassName, active &&
-            "bg-primary/10 text-primary hover:bg-primary/20 hover:text-primary focus-visible:bg-primary/20 focus-visible:text-primary", className), ...props, children: [children, active ? _jsx(Check, { "aria-hidden": "true", className: "ml-auto h-4 w-4 shrink-0" }) : null] }));
+    return (_jsxs(Button, { type: type, variant: "ghost", "data-slot": "popover-menu-item", className: cn("h-auto min-h-8 w-full justify-start gap-2 px-2 py-2 text-left font-normal whitespace-normal aria-[selected=true]:bg-highlight aria-[selected=true]:text-highlight-foreground aria-[selected=true]:[--muted-foreground:var(--instructional-foreground)] aria-[selected=true]:hover:bg-highlight/80 aria-[selected=true]:hover:text-highlight-foreground aria-[selected=true]:focus-visible:bg-highlight/80 aria-[selected=true]:focus-visible:text-highlight-foreground", popoverMenuItemFocusClassName, active &&
+            "bg-highlight text-highlight-foreground [--muted-foreground:var(--instructional-foreground)] hover:bg-highlight/80 hover:text-highlight-foreground focus-visible:bg-highlight/80 focus-visible:text-highlight-foreground", className), ...props, children: [children, active ? _jsx(Check, { "aria-hidden": "true", className: "ml-auto h-4 w-4 shrink-0" }) : null] }));
 }
 function PopoverMenuCheckboxItem({ className, children, checked = false, description, disabled, onChange, readOnly, ...props }) {
     return (_jsxs("label", { className: cn("flex h-auto min-h-8 w-full cursor-pointer items-start gap-1.5 rounded-sm px-2 py-2 text-left text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-within:bg-accent focus-within:text-accent-foreground", popoverMenuItemFocusWithinClassName, checked &&
-            "bg-primary/10 text-primary hover:bg-primary/20 hover:text-primary focus-within:bg-primary/20 focus-within:text-primary", disabled &&
+            "bg-highlight text-highlight-foreground hover:bg-highlight/80 hover:text-highlight-foreground focus-within:bg-highlight/80 focus-within:text-highlight-foreground", disabled &&
             "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-inherit", className), children: [_jsx(Checkbox, { ...props, "data-slot": "popover-menu-item", checked: checked, disabled: disabled, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : !onChange, onChange: onChange, className: "mt-0.5" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(Typography, { as: "span", variant: "bodySm", className: "block", children: children }), description ? (_jsx(Typography, { as: "span", variant: "caption", className: "mt-0.5 block", children: description })) : null] })] }));
 }
 function PopoverMenuDivider({ className, ...props }) {

package/dist/rich-text-editor.js

@@ -390,5 +390,5 @@ export function RichTextEditor({ placeholder = "Type message here...", editorAri
                                     }, children: color.value === "" && (_jsx("span", { className: "text-xs text-muted-foreground", children: "A" })) }, `bg-${color.name}`))) }) }), _jsx(ToolbarIconButton, { label: "Bullet list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("bulletList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBulletList().run(), children: _jsx(ListIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Ordered list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("orderedList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrderedIcon, { size: 14 }) }), _jsx(Tooltip, { content: `Attach files (max ${maxFileSizeLabel}) - ${acceptedFileTypesLabel}`, side: "top", contentClassName: "max-w-[240px] text-center", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, "aria-label": "Attach files", children: _jsx(PaperclipIcon, { size: 14 }) }) }), _jsx(ToolbarIconButton, { label: "Add link", active: editor === null || editor === void 0 ? void 0 : editor.isActive("link"), onClick: openLinkMenu, children: _jsx(LinkIcon, { size: 14 }) }), showTemplates && templates.length > 0 && (_jsx(_Fragment, { children: _jsxs(Popover, { open: templatePopoverOpen, onOpenChange: setTemplatePopoverOpen, align: "end", contentClassName: "w-96 p-0", trigger: _jsxs(Button, { type: "button", variant: "ghost", className: "h-8 gap-1 text-muted-foreground", children: ["Template", _jsx(ChevronDownIcon, { size: 14 })] }), children: [_jsx("div", { className: "max-h-80 overflow-y-auto", children: templatesByCategory.map(({ category, templates }) => {
                                             var _a;
                                             return (_jsxs("div", { children: [_jsx("div", { className: "sticky top-0 bg-muted px-3 py-2 text-sm font-semibold text-foreground", children: (_a = templateCategoryLabels[category]) !== null && _a !== void 0 ? _a : category }), templates.map((template) => (_jsxs("button", { type: "button", className: "w-full border-b border-border/50 px-3 py-2 text-left text-sm transition-colors last:border-0 hover:bg-muted", onClick: () => applyTemplate(template), children: [_jsx("div", { className: "truncate font-medium", children: template.name }), template.description && (_jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: template.description }))] }, template.id)))] }, category));
-                                        }) }), templateCreateHref && (_jsx("div", { className: "border-t p-2", children: _jsxs("a", { href: templateCreateHref, target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm text-primary transition-colors hover:bg-muted", children: [_jsx(PlusIcon, { size: 16 }), templateCreateLabel] }) }))] }) }))] }) }), _jsx("div", { className: "bg-muted px-3 pb-2 pt-1 dark:bg-background", children: sendAction })] }));
+                                        }) }), templateCreateHref && (_jsx("div", { className: "border-t p-2", children: _jsxs("a", { href: templateCreateHref, target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm text-interactive transition-colors hover:bg-muted", children: [_jsx(PlusIcon, { size: 16 }), templateCreateLabel] }) }))] }) }))] }) }), _jsx("div", { className: "bg-muted px-3 pb-2 pt-1 dark:bg-background", children: sendAction })] }));
 }

package/dist/select-primitive.js

@@ -27,7 +27,7 @@ const SelectContent = React.forwardRef(({ className, children, header, position
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props })));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, description, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", className: cn("relative flex min-h-8 w-full cursor-pointer select-none items-center gap-1.5 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary data-[state=checked]:hover:bg-primary/20 data-[state=checked]:hover:text-primary data-[state=checked]:focus:bg-primary/20 data-[state=checked]:focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(SelectPrimitive.ItemText, { className: "break-words font-normal", children: children }), description ? (_jsx(Typography, { as: "span", variant: "caption", children: description })) : null] })] })));
+const SelectItem = React.forwardRef(({ className, children, description, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", className: cn("relative flex min-h-8 w-full cursor-pointer select-none items-center gap-1.5 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-highlight data-[state=checked]:text-highlight-foreground data-[state=checked]:hover:bg-highlight/80 data-[state=checked]:hover:text-highlight-foreground data-[state=checked]:focus:bg-highlight/80 data-[state=checked]:focus:text-highlight-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(SelectPrimitive.ItemText, { className: "break-words font-normal", children: children }), description ? (_jsx(Typography, { as: "span", variant: "caption", children: description })) : null] })] })));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, "data-slot": "select-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props })));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

package/dist/spinner.js

@@ -8,7 +8,7 @@ const SIZE_CLASS = {
     lg: "h-10 w-10 border-[3px]",
 };
 function Spinner({ size = "md", label = "Loading", className, ...props }) {
-    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cn("inline-flex items-center justify-center", className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: cn("shrink-0 animate-spin rounded-full border-current border-t-transparent text-primary", SIZE_CLASS[size]) }), _jsx("span", { className: "sr-only", children: label })] }));
+    return (_jsxs("div", { role: "status", "aria-live": "polite", className: cn("inline-flex items-center justify-center", className), ...props, children: [_jsx("span", { "aria-hidden": "true", className: cn("shrink-0 animate-spin rounded-full border-current border-t-transparent text-interactive", SIZE_CLASS[size]) }), _jsx("span", { className: "sr-only", children: label })] }));
 }
 function LoaderStack({ size, label, message, description, }) {
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "mb-4", children: _jsx(Spinner, { size: size, label: label }) }), message || description ? (_jsxs("div", { className: "space-y-1.5", children: [message ? (_jsx(Typography, { as: "p", variant: "bodySm", className: "font-semibold", children: message })) : null, description ? (_jsx(Typography, { as: "p", variant: "caption", className: "max-w-md", children: description })) : null] })) : null] }));

package/dist/styles.css

@@ -171,6 +171,15 @@
 
     --primary: var(--nea-green-700);
     --primary-foreground: var(--nea-neutral-0);
+    --interactive-foreground: var(--nea-green-800);
+    --highlight-background: var(--nea-green-100);
+    --highlight-foreground: var(--nea-green-900);
+    --button-primary-background: var(--nea-green-800);
+    --button-primary-hover-background: var(--nea-green-900);
+    --button-primary-foreground: var(--nea-neutral-0);
+    --count-badge-background: var(--nea-green-800);
+    --count-badge-foreground: var(--nea-neutral-0);
+    --instructional-foreground: 215 16% 40%;
 
     --secondary: var(--nea-neutral-100);
     --secondary-foreground: var(--nea-neutral-900);
@@ -296,6 +305,15 @@
 
     --primary: 148 30% 38%;
     --primary-foreground: var(--nea-dark-neutral-50);
+    --interactive-foreground: 143 44% 67%;
+    --highlight-background: 148 20% 18%;
+    --highlight-foreground: 143 44% 67%;
+    --button-primary-background: 148 30% 38%;
+    --button-primary-hover-background: 148 30% 39%;
+    --button-primary-foreground: 0 0% 100%;
+    --count-badge-background: 148 24% 24%;
+    --count-badge-foreground: 143 44% 67%;
+    --instructional-foreground: var(--nea-dark-neutral-200);
 
     --secondary: var(--nea-dark-neutral-500);
     --secondary-foreground: var(--nea-dark-neutral-100);

package/dist/table.d.ts

@@ -30,6 +30,14 @@ declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<
     treatWidthAsMinWidth?: boolean;
     containOverflow?: boolean;
 } & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableRowHeader: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & {
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    wrap?: boolean;
+    treatWidthAsMinWidth?: boolean;
+    containOverflow?: boolean;
+} & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 type TableAlign = "left" | "center" | "right";
 export type TableRowTone = "default" | "muted" | "warning";
@@ -85,13 +93,15 @@ export interface TableColumn<Row> {
     skeleton?: TableSkeletonConfig;
     headerClassName?: string;
     cellClassName?: string;
+    /** Renders this column's body cells as semantic row headers. */
+    rowHeader?: boolean;
     /** Pins the column to the left or right edge while the table scrolls horizontally. */
     sticky?: "left" | "right";
     /** Enables a resize handle for this column. Use `resizableColumns` on Table to opt every column in by default. */
     resizable?: boolean;
     /** Minimum pixel width while resizing. Defaults to `minWidth`, then 64. */
     resizeMinWidth?: number;
-    /** Maximum pixel width while resizing. Omit to allow the column to grow. */
+    /** Maximum pixel width while resizing. Defaults to 1200. */
     resizeMaxWidth?: number;
 }
 export interface TableSortingProps {
@@ -137,6 +147,8 @@ export interface TableColumnResizeHandleRenderProps<Row> {
     handle: React.ReactElement;
 }
 export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Accessible name used as a visually hidden caption when `caption` is omitted. */
+    accessibleLabel: string;
     columns: TableColumn<Row>[];
     rows: Row[];
     getRowKey: (row: Row, index: number) => string;
@@ -155,6 +167,8 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     sorting?: TableSortingProps;
     pagination?: Omit<PaginationProps, "className">;
     loading?: boolean;
+    /** Status announced while loading. */
+    loadingLabel?: string;
     loadingRows?: number;
     /** Optional controlled ordered list of visible column keys. Omit to render every column in config order. */
     visibleColumnKeys?: readonly string[];
@@ -180,8 +194,6 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     striped?: boolean;
     /** Adds a disclosure column and full-width expandable content for nested tables or row details. */
     rowExpansion?: TableRowExpansionProps<Row>;
-    /** When set, rows become interactive: cursor-pointer, hover highlight, and click handling. */
-    onRowClick?: (row: Row, index: number) => void;
 }
-declare function Table<Row>({ columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading, loadingRows, visibleColumnKeys, resizableColumns, columnResizeMode, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState, emptyStateMinHeight, striped, rowExpansion, onRowClick, onScroll, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
-export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, TableRowSkeleton, };
+declare function Table<Row>({ accessibleLabel, columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading, loadingLabel, loadingRows, visibleColumnKeys, resizableColumns, columnResizeMode, columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState, emptyStateMinHeight, striped, rowExpansion, onScroll, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
+export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableRowHeader, TableCaption, SortableTableHead, TableRowSkeleton, };

package/dist/table.js

@@ -14,6 +14,7 @@ const TableContainer = React.forwardRef(({ className, ...props }, ref) => (_jsx(
 TableContainer.displayName = "TableContainer";
 const DEFAULT_COLUMN_RESIZE_MIN_WIDTH = 64;
 const DEFAULT_COLUMN_RESIZE_START_WIDTH = 160;
+const DEFAULT_COLUMN_RESIZE_MAX_WIDTH = 1200;
 const COLUMN_RESIZE_KEYBOARD_STEP = 16;
 const TABLE_EXPANSION_COLUMN_WIDTH = 48;
 const TABLE_MIN_WIDTH_CSS_VAR = "--table-min-width";
@@ -62,7 +63,7 @@ function getColumnResizeMinWidth(column) {
 }
 function getColumnResizeMaxWidth(column) {
     var _a;
-    return (_a = parsePixelSize(column.resizeMaxWidth)) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY;
+    return (_a = parsePixelSize(column.resizeMaxWidth)) !== null && _a !== void 0 ? _a : DEFAULT_COLUMN_RESIZE_MAX_WIDTH;
 }
 function getColumnResizeMaxWidthStyle(column) {
     const maxWidth = getColumnResizeMaxWidth(column);
@@ -138,6 +139,15 @@ function getColumnResizeLabel(column) {
     }
     return column.key;
 }
+function getColumnHeaderAriaLabel(column) {
+    if (column.header === null ||
+        column.header === undefined ||
+        column.header === false ||
+        column.header === "") {
+        return getColumnResizeLabel(column);
+    }
+    return undefined;
+}
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("sticky top-0 z-10 bg-[hsl(var(--table-header-background))] [&_tr]:border-b [&_tr]:border-[hsl(var(--table-border))] [&>tr]:bg-inherit", className), ...props })));
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn("[&_tr:last-child]:border-0", className), ...props })));
@@ -146,7 +156,7 @@ const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tf
 TableFooter.displayName = "TableFooter";
 const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn("border-b border-[hsl(var(--table-border))] bg-card text-card-foreground transition-colors data-[state=selected]:bg-muted", className), ...props })));
 TableRow.displayName = "TableRow";
-const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, treatWidthAsMinWidth, containOverflow, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-11 px-4 py-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", overflowContainmentClassName({ containOverflow, wrap }), className), style: getTableColumnSizingStyle({
+const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, treatWidthAsMinWidth, containOverflow, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-11 px-4 py-2 text-left align-middle font-medium text-instructional [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", overflowContainmentClassName({ containOverflow, wrap }), className), style: getTableColumnSizingStyle({
         style: {
             ...style,
             fontWeight: 500,
@@ -165,6 +175,14 @@ const TableCell = React.forwardRef(({ className, style, width, minWidth, maxWidt
         treatWidthAsMinWidth,
     }), ...props })));
 TableCell.displayName = "TableCell";
+const TableRowHeader = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, treatWidthAsMinWidth, containOverflow, scope = "row", ...props }, ref) => (_jsx("th", { ref: ref, scope: scope, className: cn("h-12 px-4 py-2 text-left align-middle font-medium text-card-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", overflowContainmentClassName({ containOverflow, wrap }), className), style: getTableColumnSizingStyle({
+        style,
+        width,
+        minWidth,
+        maxWidth,
+        treatWidthAsMinWidth,
+    }), ...props })));
+TableRowHeader.displayName = "TableRowHeader";
 const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })));
 TableCaption.displayName = "TableCaption";
 const STICKY_SCROLL_EDGE_THRESHOLD = 1;
@@ -246,13 +264,20 @@ export const TABLE_SKELETON_PRESETS = {
 };
 function SortableTableHead({ field, children, currentSortField, currentSortDirection, onSort, className, allowWrap = false, width, minWidth, maxWidth, align, sortLabel, resizeHandle, treatWidthAsMinWidth, containOverflow, }) {
     const isSorted = currentSortField === field;
-    return (_jsxs(TableHead, { "data-slot": "table-column-head", className: cn(resizeHandle && "relative", alignClassName(align), className), wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, treatWidthAsMinWidth: treatWidthAsMinWidth, containOverflow: containOverflow, children: [_jsxs("button", { type: "button", onClick: () => onSort(field), className: cn("-ml-1.5 flex h-7 cursor-pointer items-center gap-1 rounded px-1.5 py-0 font-medium transition-colors hover:text-foreground", containOverflow && "max-w-full overflow-hidden", allowWrap
+    const resolvedSortLabel = sortLabel !== null && sortLabel !== void 0 ? sortLabel : (typeof children === "string" || typeof children === "number"
+        ? String(children)
+        : field);
+    return (_jsxs(TableHead, { "data-slot": "table-column-head", scope: "col", "aria-sort": isSorted
+            ? currentSortDirection === "asc"
+                ? "ascending"
+                : "descending"
+            : undefined, className: cn(resizeHandle && "relative", alignClassName(align), className), wrap: allowWrap, width: width, minWidth: minWidth, maxWidth: maxWidth, treatWidthAsMinWidth: treatWidthAsMinWidth, containOverflow: containOverflow, children: [_jsxs("button", { type: "button", onClick: () => onSort(field), className: cn("-ml-1.5 flex h-7 cursor-pointer items-center gap-1 rounded px-1.5 py-0 font-medium transition-colors hover:text-foreground", containOverflow && "max-w-full overflow-hidden", allowWrap
                     ? "max-w-full whitespace-normal text-left"
-                    : "whitespace-nowrap", align === "right" && "ml-auto justify-end", align === "center" && "mx-auto justify-center"), style: { font: "inherit", color: "inherit", fontWeight: 500 }, "aria-label": `Sort by ${sortLabel !== null && sortLabel !== void 0 ? sortLabel : field}`, children: [_jsx("span", { className: cn("min-w-0", containOverflow && !allowWrap && "truncate", containOverflow && allowWrap && "break-words [overflow-wrap:anywhere]"), children: children }), _jsx("span", { className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: isSorted ? (currentSortDirection === "asc" ? (_jsx(ArrowUpIcon, { className: "shrink-0", size: 14 })) : (_jsx(ArrowDownIcon, { className: "shrink-0", size: 14 }))) : (_jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })) })] }), resizeHandle] }));
+                    : "whitespace-nowrap", align === "right" && "ml-auto justify-end", align === "center" && "mx-auto justify-center"), style: { font: "inherit", color: "inherit", fontWeight: 500 }, "aria-label": `Sort by ${resolvedSortLabel}`, children: [_jsx("span", { className: cn("min-w-0", containOverflow && !allowWrap && "truncate", containOverflow && allowWrap && "break-words [overflow-wrap:anywhere]"), children: children }), _jsx("span", { "aria-hidden": "true", className: "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center", children: isSorted ? (currentSortDirection === "asc" ? (_jsx(ArrowUpIcon, { className: "shrink-0", size: 14 })) : (_jsx(ArrowDownIcon, { className: "shrink-0", size: 14 }))) : (_jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })) })] }), resizeHandle] }));
 }
 const TableColumnResizeHandle = React.forwardRef(function TableColumnResizeHandle({ column, nextColumn, currentWidth, minWidth, maxWidth, onResizeStart, onResizeByKeyboard, className, onClick, ...props }, ref) {
     const label = getColumnResizeLabel(column);
-    return (_jsx("button", { ...props, ref: ref, type: "button", "aria-label": `Resize ${label} column`, title: `Resize ${label} column`, "aria-valuenow": currentWidth, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, onPointerDown: (event) => onResizeStart(column, nextColumn, event), onClick: (event) => {
+    return (_jsx("div", { ...props, ref: ref, role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-label": `Resize ${label} column`, title: `Resize ${label} column`, "aria-valuenow": currentWidth, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, "aria-valuetext": currentWidth === undefined ? undefined : `${currentWidth} pixels`, onPointerDown: (event) => onResizeStart(column, nextColumn, event), onClick: (event) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
             if (event.defaultPrevented) {
                 return;
@@ -268,11 +293,11 @@ const TableColumnResizeHandle = React.forwardRef(function TableColumnResizeHandl
             onResizeByKeyboard(column, nextColumn, event.key === "ArrowLeft"
                 ? -COLUMN_RESIZE_KEYBOARD_STEP
                 : COLUMN_RESIZE_KEYBOARD_STEP);
-        }, className: cn("group absolute right-0 top-0 z-[1] flex h-full w-4 cursor-col-resize touch-none items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), children: _jsx("span", { "aria-hidden": "true", className: "h-6 w-px rounded-full bg-[hsl(var(--table-border))] transition-colors group-hover:bg-primary group-focus-visible:bg-primary" }) }));
+        }, className: cn("group absolute right-0 top-0 z-[1] flex h-full w-4 cursor-col-resize touch-none items-center justify-center rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", className), children: _jsx("span", { "aria-hidden": "true", className: "h-6 w-px rounded-full bg-[hsl(var(--table-border))] transition-colors group-hover:bg-primary group-focus-visible:bg-primary" }) }));
 });
 const TableColumnGrowResizeHandle = React.forwardRef(function TableColumnGrowResizeHandle({ column, currentWidth, minWidth, maxWidth, onResizeStart, onResizeByKeyboard, className, onClick, ...props }, ref) {
     const label = getColumnResizeLabel(column);
-    return (_jsx("button", { ...props, ref: ref, type: "button", "aria-label": `Resize ${label} column`, title: `Resize ${label} column`, "aria-valuenow": currentWidth, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, onPointerDown: (event) => onResizeStart(column, event), onClick: (event) => {
+    return (_jsx("div", { ...props, ref: ref, role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-label": `Resize ${label} column`, title: `Resize ${label} column`, "aria-valuenow": currentWidth, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, "aria-valuetext": currentWidth === undefined ? undefined : `${currentWidth} pixels`, onPointerDown: (event) => onResizeStart(column, event), onClick: (event) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
             if (event.defaultPrevented) {
                 return;
@@ -288,7 +313,7 @@ const TableColumnGrowResizeHandle = React.forwardRef(function TableColumnGrowRes
             onResizeByKeyboard(column, event.key === "ArrowLeft"
                 ? -COLUMN_RESIZE_KEYBOARD_STEP
                 : COLUMN_RESIZE_KEYBOARD_STEP);
-        }, className: cn("group absolute right-0 top-0 z-[1] flex h-full w-4 cursor-col-resize touch-none items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), children: _jsx("span", { "aria-hidden": "true", className: "h-6 w-px rounded-full bg-[hsl(var(--table-border))] transition-colors group-hover:bg-primary group-focus-visible:bg-primary" }) }));
+        }, className: cn("group absolute right-0 top-0 z-[1] flex h-full w-4 cursor-col-resize touch-none items-center justify-center rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", className), children: _jsx("span", { "aria-hidden": "true", className: "h-6 w-px rounded-full bg-[hsl(var(--table-border))] transition-colors group-hover:bg-primary group-focus-visible:bg-primary" }) }));
 });
 function getDefaultSkeleton(column) {
     var _a, _b;
@@ -329,7 +354,18 @@ function getVisibleColumns(columns, visibleColumnKeys) {
 function isStickyResizeBoundary(column, nextColumn) {
     return Boolean(column.sticky === "right" || nextColumn.sticky);
 }
-function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading = false, loadingRows = 5, visibleColumnKeys, resizableColumns = false, columnResizeMode = "pair", columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState = false, emptyStateMinHeight = DEFAULT_CENTERED_EMPTY_STATE_MIN_HEIGHT, striped = false, rowExpansion, onRowClick, onScroll, style, ...props }) {
+function getColumnPairResizeRange(column, nextColumn, columnWidths) {
+    const currentWidth = getResolvedResizableColumnWidth(column, columnWidths);
+    const nextWidth = getResolvedResizableColumnWidth(nextColumn, columnWidths);
+    const minDelta = Math.max(getColumnResizeMinWidth(column) - currentWidth, nextWidth - getColumnResizeMaxWidth(nextColumn));
+    const maxDelta = Math.min(getColumnResizeMaxWidth(column) - currentWidth, nextWidth - getColumnResizeMinWidth(nextColumn));
+    return {
+        currentWidth,
+        minWidth: Math.round(currentWidth + minDelta),
+        maxWidth: Math.round(currentWidth + maxDelta),
+    };
+}
+function Table({ accessibleLabel, columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, rowTone, maxHeight, minHeight, sorting, pagination, loading = false, loadingLabel = "Loading table data", loadingRows = 5, visibleColumnKeys, resizableColumns = false, columnResizeMode = "pair", columnWidths, defaultColumnWidths, onColumnWidthsChange, renderColumnResizeHandle, tableLayout, centerEmptyState = false, emptyStateMinHeight = DEFAULT_CENTERED_EMPTY_STATE_MIN_HEIGHT, striped = false, rowExpansion, onScroll, style, ...props }) {
     const visibleColumns = getVisibleColumns(columns, visibleColumnKeys);
     const hasExpansionColumn = Boolean(rowExpansion);
     const hasColumnFilters = visibleColumns.some((column) => column.filter);
@@ -353,6 +389,7 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
     const [stickyScrollState, setStickyScrollState] = React.useState({
         left: false,
         right: false,
+        scrollable: false,
     });
     const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = React.useState(() => { var _a; return new Set((_a = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.defaultExpandedRowKeys) !== null && _a !== void 0 ? _a : []); });
     const controlledExpandedRowKeys = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.expandedRowKeys;
@@ -364,12 +401,16 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
         }
         const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
         const scrollLeft = Math.max(0, element.scrollLeft);
+        const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);
         const nextScrollState = {
             left: scrollLeft > STICKY_SCROLL_EDGE_THRESHOLD,
             right: scrollLeft < maxScrollLeft - STICKY_SCROLL_EDGE_THRESHOLD,
+            scrollable: maxScrollLeft > STICKY_SCROLL_EDGE_THRESHOLD ||
+                maxScrollTop > STICKY_SCROLL_EDGE_THRESHOLD,
         };
         setStickyScrollState((currentScrollState) => currentScrollState.left === nextScrollState.left &&
-            currentScrollState.right === nextScrollState.right
+            currentScrollState.right === nextScrollState.right &&
+            currentScrollState.scrollable === nextScrollState.scrollable
             ? currentScrollState
             : nextScrollState);
     }, []);
@@ -499,13 +540,17 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
         if (stickyResizeBoundary) {
             return null;
         }
+        const pairRange = getColumnPairResizeRange(column, nextColumn, resolvedColumnWidths);
         const currentWidth = isGrowResizeMode
             ? getColumnResizeBaseWidth(column, resolvedColumnWidths)
-            : getResolvedResizableColumnWidth(column, resolvedColumnWidths);
-        const maxWidth = Number.isFinite(getColumnResizeMaxWidth(column))
+            : pairRange.currentWidth;
+        const minWidth = isGrowResizeMode
+            ? getColumnResizeMinWidth(column)
+            : pairRange.minWidth;
+        const maxWidth = isGrowResizeMode
             ? getColumnResizeMaxWidth(column)
-            : undefined;
-        const handle = isGrowResizeMode ? (_jsx(TableColumnGrowResizeHandle, { column: column, currentWidth: currentWidth, minWidth: getColumnResizeMinWidth(column), maxWidth: maxWidth, onResizeStart: startGrowColumnResize, onResizeByKeyboard: resizeGrowColumnByKeyboard })) : (_jsx(TableColumnResizeHandle, { column: column, nextColumn: nextColumn, currentWidth: currentWidth, minWidth: getColumnResizeMinWidth(column), maxWidth: maxWidth, onResizeStart: startColumnResize, onResizeByKeyboard: resizeColumnByKeyboard }));
+            : pairRange.maxWidth;
+        const handle = isGrowResizeMode ? (_jsx(TableColumnGrowResizeHandle, { column: column, currentWidth: currentWidth, minWidth: minWidth, maxWidth: maxWidth, onResizeStart: startGrowColumnResize, onResizeByKeyboard: resizeGrowColumnByKeyboard })) : (_jsx(TableColumnResizeHandle, { column: column, nextColumn: nextColumn, currentWidth: currentWidth, minWidth: minWidth, maxWidth: maxWidth, onResizeStart: startColumnResize, onResizeByKeyboard: resizeColumnByKeyboard }));
         if (renderColumnResizeHandle) {
             return renderColumnResizeHandle({ column, nextColumn, handle });
         }
@@ -540,89 +585,94 @@ function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { mess
         (_a = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.onExpandedRowKeysChange) === null || _a === void 0 ? void 0 : _a.call(rowExpansion, Array.from(nextExpandedRowKeys));
     }, [controlledExpandedRowKeys, rowExpansion, uncontrolledExpandedRowKeys]);
     const resolvedEmptyState = centerEmptyState ? (_jsx("div", { "data-slot": "table-empty-state", className: "flex w-full min-w-0 items-center justify-center whitespace-normal text-center [&>*]:mx-auto", style: { minHeight: emptyStateMinHeight }, children: emptyState })) : (emptyState);
-    const container = (_jsx(TableContainer, { ref: tableContainerRef, onScroll: handleTableContainerScroll, className: cn("w-full", loading && "pointer-events-none select-none", className, containerClassName), style: {
+    const container = (_jsxs(TableContainer, { ref: tableContainerRef, role: stickyScrollState.scrollable ? "region" : undefined, "aria-label": stickyScrollState.scrollable
+            ? `${accessibleLabel} scroll area`
+            : undefined, tabIndex: stickyScrollState.scrollable ? 0 : undefined, onScroll: handleTableContainerScroll, className: cn("w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", loading && "pointer-events-none select-none", className, containerClassName), style: {
             ...style,
             ...(growTableMinWidth !== undefined
                 ? { [TABLE_MIN_WIDTH_CSS_VAR]: `${growTableMinWidth}px` }
                 : {}),
             ...(maxHeight !== undefined ? { maxHeight } : {}),
             ...(resolvedMinHeight !== undefined ? { minHeight: resolvedMinHeight } : {}),
-        }, ...props, children: _jsxs(TableRoot, { className: cn(shouldUseFixedLayout && "table-fixed", isGrowResizeMode &&
-                (hasResolvedColumnWidths
-                    ? "w-[var(--table-min-width)]"
-                    : "min-w-[var(--table-min-width)]"), tableClassName), children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsxs("colgroup", { children: [hasExpansionColumn ? (_jsx("col", { style: {
-                                width: `${TABLE_EXPANSION_COLUMN_WIDTH}px`,
-                                minWidth: `${TABLE_EXPANSION_COLUMN_WIDTH}px`,
-                                maxWidth: `${TABLE_EXPANSION_COLUMN_WIDTH}px`,
-                            } })) : null, visibleColumns.map((column) => (_jsx("col", { style: getTableColumnSizingStyle({
-                                width: getRenderedColumnWidth({
-                                    column,
-                                    columnWidths: resolvedColumnWidths,
-                                    resizing: isColumnResizingEnabled,
-                                }),
-                                minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled),
-                                maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled),
-                                treatWidthAsMinWidth: !isColumnResizingEnabled,
-                            }) }, column.key)))] }), _jsxs(TableHeader, { children: [_jsxs(TableRow, { children: [hasExpansionColumn ? (_jsx(TableHead, { "data-slot": "table-expansion-head", "aria-label": "Expand rows", className: "w-12 px-2" })) : null, visibleColumns.map((column, columnIndex) => {
-                                    var _a;
-                                    const sortField = (_a = column.sortKey) !== null && _a !== void 0 ? _a : column.key;
-                                    const isSortable = column.sortable && sorting;
-                                    const columnWidth = getRenderedColumnWidth({
+        }, ...props, children: [_jsxs(TableRoot, { "aria-busy": loading, className: cn(shouldUseFixedLayout && "table-fixed", isGrowResizeMode &&
+                    (hasResolvedColumnWidths
+                        ? "w-[var(--table-min-width)]"
+                        : "min-w-[var(--table-min-width)]"), tableClassName), children: [_jsx(TableCaption, { className: caption ? undefined : "sr-only !m-0", children: caption !== null && caption !== void 0 ? caption : accessibleLabel }), _jsxs("colgroup", { children: [hasExpansionColumn ? (_jsx("col", { style: {
+                                    width: `${TABLE_EXPANSION_COLUMN_WIDTH}px`,
+                                    minWidth: `${TABLE_EXPANSION_COLUMN_WIDTH}px`,
+                                    maxWidth: `${TABLE_EXPANSION_COLUMN_WIDTH}px`,
+                                } })) : null, visibleColumns.map((column) => (_jsx("col", { style: getTableColumnSizingStyle({
+                                    width: getRenderedColumnWidth({
                                         column,
                                         columnWidths: resolvedColumnWidths,
                                         resizing: isColumnResizingEnabled,
-                                    });
-                                    const resizeHandle = renderResizeHandle(column, columnIndex);
-                                    return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: cn(stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), allowWrap: column.wrap, width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), align: column.align, sortLabel: column.sortLabel, resizeHandle: resizeHandle, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, children: column.header }, column.key)) : (_jsxs(TableHead, { "data-slot": "table-column-head", width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(resizeHandle && "relative", alignClassName(column.align), stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), children: [column.header, resizeHandle] }, column.key)));
-                                })] }), hasColumnFilters ? (_jsxs(TableRow, { "data-slot": "table-filter-row", className: "!bg-card", children: [hasExpansionColumn ? (_jsx(TableHead, { "data-slot": "table-expansion-filter-cell", "aria-hidden": "true", className: "w-12 px-2" })) : null, visibleColumns.map((column) => {
-                                    const columnWidth = getRenderedColumnWidth({
-                                        column,
-                                        columnWidths: resolvedColumnWidths,
-                                        resizing: isColumnResizingEnabled,
-                                    });
-                                    return (_jsx(TableHead, { "data-slot": "table-filter-cell", width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn("relative h-11 px-2 py-1 font-normal", stickyClassName(column.sticky, "filter", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.filterClassName), children: column.filter ? (_jsx("div", { "data-slot": "table-filter-control", className: "absolute inset-x-2 inset-y-1 min-w-0", children: _jsx(TableColumnFilterControl, { filter: column.filter, label: getColumnResizeLabel(column) }) })) : null }, column.key));
-                                })] })) : null] }), _jsx(TableBody, { children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: [
-                            ...(hasExpansionColumn
-                                ? [{ width: "1rem", height: "1rem" }]
-                                : []),
-                            ...visibleColumns.map((column) => {
-                                var _a;
-                                return (_a = column.skeleton) !== null && _a !== void 0 ? _a : getDefaultSkeleton(column);
-                            }),
-                        ] })) : rows.length ? (rows.map((row, rowIndex) => {
-                        var _a, _b, _c, _d;
-                        const rowKey = getRowKey(row, rowIndex);
-                        const resolvedTone = typeof rowTone === "function"
-                            ? rowTone(row, rowIndex)
-                            : rowTone;
-                        const isRowExpandable = (_b = (_a = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.isRowExpandable) === null || _a === void 0 ? void 0 : _a.call(rowExpansion, row, rowIndex)) !== null && _b !== void 0 ? _b : hasExpansionColumn;
-                        const isExpanded = isRowExpandable && resolvedExpandedRowKeys.has(rowKey);
-                        const expandedContentId = `${expansionIdPrefix}-expanded-row-${rowIndex}`;
-                        return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { "data-expanded": isExpanded ? "true" : undefined, onClick: onRowClick ? () => onRowClick(row, rowIndex) : undefined, className: cn(onRowClick && "cursor-pointer hover:bg-muted", striped &&
-                                        rowIndex % 2 === 1 &&
-                                        !resolvedTone &&
-                                        "bg-[hsl(var(--table-row-striped-background))]", tableRowToneClassName(resolvedTone), typeof rowClassName === "function"
-                                        ? rowClassName(row, rowIndex)
-                                        : rowClassName), children: [hasExpansionColumn ? (_jsx(TableCell, { className: "w-12 px-2 text-center", children: isRowExpandable ? (_jsx("button", { type: "button", "aria-expanded": isExpanded, "aria-controls": expandedContentId, "aria-label": (_d = (_c = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.getToggleLabel) === null || _c === void 0 ? void 0 : _c.call(rowExpansion, row, rowIndex, isExpanded)) !== null && _d !== void 0 ? _d : `${isExpanded ? "Collapse" : "Expand"} row ${rowIndex + 1}`, onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    toggleExpandedRow(rowKey);
-                                                }, className: "inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx(ChevronRight, { "aria-hidden": "true", className: cn("h-4 w-4 transition-transform duration-150", isExpanded && "rotate-90") }) })) : null })) : null, visibleColumns.map((column) => {
-                                            var _a, _b;
-                                            const columnWidth = getRenderedColumnWidth({
-                                                column,
-                                                columnWidths: resolvedColumnWidths,
-                                                resizing: isColumnResizingEnabled,
-                                            });
-                                            const value = (_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.call(column, row, rowIndex)) !== null && _b !== void 0 ? _b : (column.accessorKey !== undefined
-                                                ? row[column.accessorKey]
-                                                : null);
-                                            return (_jsx(TableCell, { width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(alignClassName(column.align), stickyClassName(column.sticky, "cell", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.cellClassName), children: value }, column.key));
-                                        })] }), isExpanded ? (_jsx(TableRow, { id: expandedContentId, "data-slot": "table-expanded-row", className: "bg-[hsl(var(--table-row-striped-background))] hover:bg-[hsl(var(--table-row-striped-background))]", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length +
-                                            (hasExpansionColumn ? 1 : 0), 1), className: "h-auto whitespace-normal p-4", children: rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.renderExpandedContent(row, rowIndex) }) })) : null] }, rowKey));
-                    })) : (_jsx(TableRow, { className: "cursor-default hover:bg-card", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length + (hasExpansionColumn ? 1 : 0), 1), className: "p-6", children: resolvedEmptyState }) })) })] }) }));
+                                    }),
+                                    minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled),
+                                    maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled),
+                                    treatWidthAsMinWidth: !isColumnResizingEnabled,
+                                }) }, column.key)))] }), _jsxs(TableHeader, { children: [_jsxs(TableRow, { children: [hasExpansionColumn ? (_jsx(TableHead, { "data-slot": "table-expansion-head", "aria-label": "Expand rows", scope: "col", className: "w-12 px-2" })) : null, visibleColumns.map((column, columnIndex) => {
+                                        var _a;
+                                        const sortField = (_a = column.sortKey) !== null && _a !== void 0 ? _a : column.key;
+                                        const isSortable = column.sortable && sorting;
+                                        const columnWidth = getRenderedColumnWidth({
+                                            column,
+                                            columnWidths: resolvedColumnWidths,
+                                            resizing: isColumnResizingEnabled,
+                                        });
+                                        const resizeHandle = renderResizeHandle(column, columnIndex);
+                                        return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: cn(stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), allowWrap: column.wrap, width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), align: column.align, sortLabel: column.sortLabel, resizeHandle: resizeHandle, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, children: column.header }, column.key)) : (_jsxs(TableHead, { "data-slot": "table-column-head", "aria-label": getColumnHeaderAriaLabel(column), scope: "col", width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(resizeHandle && "relative", alignClassName(column.align), stickyClassName(column.sticky, "head", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.headerClassName), children: [column.header, resizeHandle] }, column.key)));
+                                    })] }), hasColumnFilters ? (_jsxs(TableRow, { "data-slot": "table-filter-row", className: "!bg-card", children: [hasExpansionColumn ? (_jsx(TableCell, { "data-slot": "table-expansion-filter-cell", "aria-hidden": "true", className: "w-12 px-2" })) : null, visibleColumns.map((column) => {
+                                        const columnWidth = getRenderedColumnWidth({
+                                            column,
+                                            columnWidths: resolvedColumnWidths,
+                                            resizing: isColumnResizingEnabled,
+                                        });
+                                        return (_jsx(TableCell, { "data-slot": "table-filter-cell", width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn("relative h-11 px-2 py-1 font-normal", stickyClassName(column.sticky, "filter", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.filterClassName), children: column.filter ? (_jsx("div", { "data-slot": "table-filter-control", className: "absolute inset-x-2 inset-y-1 min-w-0", children: _jsx(TableColumnFilterControl, { filter: column.filter, label: getColumnResizeLabel(column) }) })) : null }, column.key));
+                                    })] })) : null] }), _jsx(TableBody, { "aria-hidden": loading ? "true" : undefined, children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: [
+                                ...(hasExpansionColumn
+                                    ? [{ width: "1rem", height: "1rem" }]
+                                    : []),
+                                ...visibleColumns.map((column) => {
+                                    var _a;
+                                    return (_a = column.skeleton) !== null && _a !== void 0 ? _a : getDefaultSkeleton(column);
+                                }),
+                            ] })) : rows.length ? (rows.map((row, rowIndex) => {
+                            var _a, _b, _c, _d;
+                            const rowKey = getRowKey(row, rowIndex);
+                            const resolvedTone = typeof rowTone === "function"
+                                ? rowTone(row, rowIndex)
+                                : rowTone;
+                            const isRowExpandable = (_b = (_a = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.isRowExpandable) === null || _a === void 0 ? void 0 : _a.call(rowExpansion, row, rowIndex)) !== null && _b !== void 0 ? _b : hasExpansionColumn;
+                            const isExpanded = isRowExpandable && resolvedExpandedRowKeys.has(rowKey);
+                            const expandedContentId = `${expansionIdPrefix}-expanded-row-${rowIndex}`;
+                            return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { "data-expanded": isExpanded ? "true" : undefined, className: cn(striped &&
+                                            rowIndex % 2 === 1 &&
+                                            !resolvedTone &&
+                                            "bg-[hsl(var(--table-row-striped-background))]", tableRowToneClassName(resolvedTone), typeof rowClassName === "function"
+                                            ? rowClassName(row, rowIndex)
+                                            : rowClassName), children: [hasExpansionColumn ? (_jsx(TableCell, { className: "w-12 px-2 text-center", children: isRowExpandable ? (_jsx("button", { type: "button", "aria-expanded": isExpanded, "aria-controls": isExpanded ? expandedContentId : undefined, "aria-label": (_d = (_c = rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.getToggleLabel) === null || _c === void 0 ? void 0 : _c.call(rowExpansion, row, rowIndex, isExpanded)) !== null && _d !== void 0 ? _d : `${isExpanded ? "Collapse" : "Expand"} row ${rowIndex + 1}`, onClick: (event) => {
+                                                        event.stopPropagation();
+                                                        toggleExpandedRow(rowKey);
+                                                    }, className: "inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx(ChevronRight, { "aria-hidden": "true", className: cn("h-4 w-4 transition-transform duration-150", isExpanded && "rotate-90") }) })) : null })) : null, visibleColumns.map((column) => {
+                                                var _a, _b;
+                                                const columnWidth = getRenderedColumnWidth({
+                                                    column,
+                                                    columnWidths: resolvedColumnWidths,
+                                                    resizing: isColumnResizingEnabled,
+                                                });
+                                                const value = (_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.call(column, row, rowIndex)) !== null && _b !== void 0 ? _b : (column.accessorKey !== undefined
+                                                    ? row[column.accessorKey]
+                                                    : null);
+                                                const Cell = column.rowHeader
+                                                    ? TableRowHeader
+                                                    : TableCell;
+                                                return (_jsx(Cell, { width: columnWidth, minWidth: getRenderedColumnMinWidth(column, isColumnResizingEnabled), maxWidth: getRenderedColumnMaxWidth(column, isColumnResizingEnabled), wrap: column.wrap, treatWidthAsMinWidth: !isColumnResizingEnabled, containOverflow: isColumnResizingEnabled, className: cn(alignClassName(column.align), stickyClassName(column.sticky, "cell", getStickyShadowVisibility(column.sticky, stickyScrollState)), column.cellClassName), children: value }, column.key));
+                                            })] }), isExpanded ? (_jsx(TableRow, { id: expandedContentId, "data-slot": "table-expanded-row", className: "bg-[hsl(var(--table-row-striped-background))] hover:bg-[hsl(var(--table-row-striped-background))]", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length +
+                                                (hasExpansionColumn ? 1 : 0), 1), className: "h-auto whitespace-normal p-4", children: rowExpansion === null || rowExpansion === void 0 ? void 0 : rowExpansion.renderExpandedContent(row, rowIndex) }) })) : null] }, rowKey));
+                        })) : (_jsx(TableRow, { className: "cursor-default hover:bg-card", children: _jsx(TableCell, { colSpan: Math.max(visibleColumns.length + (hasExpansionColumn ? 1 : 0), 1), className: "p-6", children: resolvedEmptyState }) })) })] }), _jsx("div", { role: "status", className: "sr-only", children: loading ? loadingLabel : null })] }));
     if (!pagination) {
         return (_jsxs("div", { className: "space-y-4", children: [toolbar, container] }));
     }
     return (_jsxs("div", { className: "space-y-4", children: [toolbar, container, _jsx(Pagination, { ...pagination })] }));
 }
-export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, TableRowSkeleton, };
+export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableRowHeader, TableCaption, SortableTableHead, TableRowSkeleton, };

package/dist/tailwind-preset.js

@@ -38,6 +38,21 @@ export const neaTailwindPreset = {
                     DEFAULT: "hsl(var(--primary))",
                     foreground: "hsl(var(--primary-foreground))",
                 },
+                interactive: "hsl(var(--interactive-foreground))",
+                highlight: {
+                    DEFAULT: "hsl(var(--highlight-background))",
+                    foreground: "hsl(var(--highlight-foreground))",
+                },
+                "button-primary": {
+                    DEFAULT: "hsl(var(--button-primary-background))",
+                    foreground: "hsl(var(--button-primary-foreground))",
+                },
+                "button-primary-hover": "hsl(var(--button-primary-hover-background))",
+                "count-badge": {
+                    DEFAULT: "hsl(var(--count-badge-background))",
+                    foreground: "hsl(var(--count-badge-foreground))",
+                },
+                instructional: "hsl(var(--instructional-foreground))",
                 secondary: {
                     DEFAULT: "hsl(var(--secondary))",
                     foreground: "hsl(var(--secondary-foreground))",

package/dist/theme.d.ts

@@ -357,6 +357,15 @@ export declare const darkThemeTokenMapping: {
     readonly "--tooltip-foreground": "var(--nea-dark-neutral-50)";
     readonly "--primary": "148 30% 38%";
     readonly "--primary-foreground": "var(--nea-dark-neutral-50)";
+    readonly "--interactive-foreground": "143 44% 67%";
+    readonly "--highlight-background": "148 20% 18%";
+    readonly "--highlight-foreground": "143 44% 67%";
+    readonly "--button-primary-background": "148 30% 38%";
+    readonly "--button-primary-hover-background": "148 30% 39%";
+    readonly "--button-primary-foreground": "0 0% 100%";
+    readonly "--count-badge-background": "148 24% 24%";
+    readonly "--count-badge-foreground": "143 44% 67%";
+    readonly "--instructional-foreground": "var(--nea-dark-neutral-200)";
     readonly "--secondary": "var(--nea-dark-neutral-500)";
     readonly "--secondary-foreground": "var(--nea-dark-neutral-100)";
     readonly "--muted": "var(--nea-dark-neutral-500)";
@@ -448,6 +457,42 @@ export declare const semanticColorTokens: readonly [{
     readonly foregroundToken: "--primary-foreground";
     readonly darkValue: "148 30% 38%";
     readonly darkForegroundValue: "var(--nea-dark-neutral-50)";
+}, {
+    readonly name: "Interactive Foreground";
+    readonly token: "--interactive-foreground";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "143 44% 67%";
+    readonly darkForegroundValue?: undefined;
+}, {
+    readonly name: "Highlight";
+    readonly token: "--highlight-background";
+    readonly foregroundToken: "--highlight-foreground";
+    readonly darkValue: "148 20% 18%";
+    readonly darkForegroundValue: "143 44% 67%";
+}, {
+    readonly name: "Primary Button";
+    readonly token: "--button-primary-background";
+    readonly foregroundToken: "--button-primary-foreground";
+    readonly darkValue: "148 30% 38%";
+    readonly darkForegroundValue: "0 0% 100%";
+}, {
+    readonly name: "Primary Button Hover";
+    readonly token: "--button-primary-hover-background";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "148 30% 39%";
+    readonly darkForegroundValue?: undefined;
+}, {
+    readonly name: "Count Badge";
+    readonly token: "--count-badge-background";
+    readonly foregroundToken: "--count-badge-foreground";
+    readonly darkValue: "148 24% 24%";
+    readonly darkForegroundValue: "143 44% 67%";
+}, {
+    readonly name: "Instructional Foreground";
+    readonly token: "--instructional-foreground";
+    readonly foregroundToken?: undefined;
+    readonly darkValue: "var(--nea-dark-neutral-200)";
+    readonly darkForegroundValue?: undefined;
 }, {
     readonly name: "Secondary";
     readonly token: "--secondary";

package/dist/theme.js

@@ -186,6 +186,15 @@ export const darkThemeTokenMapping = {
     "--tooltip-foreground": "var(--nea-dark-neutral-50)",
     "--primary": "148 30% 38%",
     "--primary-foreground": "var(--nea-dark-neutral-50)",
+    "--interactive-foreground": "143 44% 67%",
+    "--highlight-background": "148 20% 18%",
+    "--highlight-foreground": "143 44% 67%",
+    "--button-primary-background": "148 30% 38%",
+    "--button-primary-hover-background": "148 30% 39%",
+    "--button-primary-foreground": "0 0% 100%",
+    "--count-badge-background": "148 24% 24%",
+    "--count-badge-foreground": "143 44% 67%",
+    "--instructional-foreground": "var(--nea-dark-neutral-200)",
     "--secondary": "var(--nea-dark-neutral-500)",
     "--secondary-foreground": "var(--nea-dark-neutral-100)",
     "--muted": "var(--nea-dark-neutral-500)",
@@ -273,6 +282,33 @@ export const semanticColorTokens = [
         token: "--primary",
         foregroundToken: "--primary-foreground",
     }),
+    withDarkThemeMapping({
+        name: "Interactive Foreground",
+        token: "--interactive-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Highlight",
+        token: "--highlight-background",
+        foregroundToken: "--highlight-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Primary Button",
+        token: "--button-primary-background",
+        foregroundToken: "--button-primary-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Primary Button Hover",
+        token: "--button-primary-hover-background",
+    }),
+    withDarkThemeMapping({
+        name: "Count Badge",
+        token: "--count-badge-background",
+        foregroundToken: "--count-badge-foreground",
+    }),
+    withDarkThemeMapping({
+        name: "Instructional Foreground",
+        token: "--instructional-foreground",
+    }),
     withDarkThemeMapping({
         name: "Secondary",
         token: "--secondary",

package/dist/toaster.js

@@ -36,7 +36,7 @@ function Toaster({ position = "top-right", visibleToasts = 3, closeButton = true
                 title: cn(typographyVariants({ variant: "bodySm" }), "!font-medium !text-popover-foreground"),
                 description: cn(typographyVariants({ variant: "bodySm" }), "!text-muted-foreground"),
                 icon: "!mx-0 flex !h-8 !w-8 shrink-0 !items-center !justify-center self-start rounded-control !border !border-border !bg-muted !text-muted-foreground [&>svg]:!m-0 [&>svg]:!h-4 [&>svg]:!w-4",
-                actionButton: cn(buttonVariants({ variant: "default", size: "compact" }), toastActionClassName, "!bg-primary !text-primary-foreground hover:!bg-primary/90"),
+                actionButton: cn(buttonVariants({ variant: "default", size: "compact" }), toastActionClassName, "!bg-button-primary !text-button-primary-foreground hover:!bg-button-primary-hover"),
                 cancelButton: cn(buttonVariants({ variant: "outline", size: "compact" }), toastActionClassName, "!border-[hsl(var(--button-outline-border))] !bg-[hsl(var(--button-outline-background))] !text-foreground hover:!bg-[hsl(var(--button-outline-hover-background))]"),
                 closeButton: "!absolute !left-auto !right-2.5 !top-2.5 !flex !h-6 !w-6 !translate-x-0 !translate-y-0 !items-center !justify-center !rounded-control !border-0 !bg-transparent !text-muted-foreground hover:!bg-accent hover:!text-foreground",
                 success: "border-[hsl(var(--status-success-foreground))]/20 [&_[data-icon]]:!border-status-success-foreground/20 [&_[data-icon]]:!bg-status-success [&_[data-icon]]:!text-status-success-foreground",

package/dist/typography.js

@@ -12,8 +12,8 @@ const typographyVariants = cva("", {
             body: "text-base text-foreground",
             bodySm: "text-sm text-foreground",
             label: "text-sm font-medium leading-5 text-foreground",
-            caption: "text-sm text-muted-foreground",
-            eyebrow: "text-[11px] font-semibold uppercase leading-4 tracking-normal text-muted-foreground",
+            caption: "text-sm text-instructional",
+            eyebrow: "text-[11px] font-semibold uppercase leading-4 tracking-normal text-instructional",
         },
     },
     defaultVariants: {
@@ -40,7 +40,7 @@ const Typography = React.forwardRef(({ as, asChild = false, className, variant,
         : color === "foreground"
             ? "text-foreground"
             : color === "muted"
-                ? "text-muted-foreground"
+                ? "text-instructional"
                 : undefined;
     return (_jsx(Comp, { ref: ref, className: cn(typographyVariants({ variant: resolvedVariant }), colorClass, className), ...props }));
 });

package/dist/use-search-highlight.js

@@ -41,6 +41,6 @@ function useSearchHighlight(text, query) {
 }
 function SearchHighlight({ text, query, className, markClassName, ...props }) {
     const segments = useSearchHighlight(text, query);
-    return (_jsx("span", { className: className, ...props, children: segments.map((segment, index) => segment.matched ? (_jsx("mark", { className: cn("rounded-[2px] bg-primary/10 px-0.5 font-medium text-primary dark:bg-primary/50 dark:text-foreground dark:ring-1 dark:ring-inset dark:ring-[hsl(var(--status-success-foreground)/0.55)]", markClassName), children: segment.text }, `${segment.text}-${index}`)) : (_jsx(React.Fragment, { children: segment.text }, `${segment.text}-${index}`))) }));
+    return (_jsx("span", { className: className, ...props, children: segments.map((segment, index) => segment.matched ? (_jsx("mark", { className: cn("rounded-[2px] bg-highlight px-0.5 font-medium text-highlight-foreground", markClassName), children: segment.text }, `${segment.text}-${index}`)) : (_jsx(React.Fragment, { children: segment.text }, `${segment.text}-${index}`))) }));
 }
 export { SearchHighlight, useSearchHighlight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.22",
+  "version": "0.4.23",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",