@undevy-org/tablewright 0.5.2 → 0.6.0

package/dist/es/components/data-table/ColumnFilterPopover.js

@@ -3,7 +3,7 @@ import { useState, useRef, useEffect } from "react";
 import { Input } from "../ui/input.js";
 import { Checkbox } from "../ui/checkbox.js";
 import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
-import { FilterChip } from "./FilterChip.js";
+import { FilterChipPopoverTrigger } from "./FilterChipPopoverTrigger.js";
 import { FilterPopoverFooter } from "./FilterPopoverFooter.js";
 import { getStringArray, getNumberRange, getDateRange, isFilterValueEmpty } from "./filter-values.js";
 const DEFAULT_LABELS = {
@@ -221,7 +221,7 @@ function ColumnFilterPopover({
         const allText = allStats?.type === "text" ? allStats : null;
         const filtText = filteredStats?.type === "text" ? filteredStats : null;
         return /* @__PURE__ */ jsxs("div", { className: "p-3 w-64 space-y-3", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider block", children: [
             labels.contains,
             draftTags.length >= 2 && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] font-semibold text-[var(--tag-blue-text)] bg-[var(--tag-blue-bg)] rounded px-1 py-0.5 uppercase", children: labels.orBadge })
           ] }),
@@ -351,7 +351,7 @@ function ColumnFilterPopover({
         const filtDate = filteredStats?.type === "date" ? filteredStats : null;
         return /* @__PURE__ */ jsxs("div", { className: "p-3 w-64 space-y-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: labels.chipFrom }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider block", children: labels.chipFrom }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -362,7 +362,7 @@ function ColumnFilterPopover({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: labels.chipTo }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider block", children: labels.chipTo }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -439,7 +439,7 @@ function ColumnFilterPopover({
         const filtNum = filteredStats?.type === "number-range" ? filteredStats : null;
         return /* @__PURE__ */ jsxs("div", { className: "p-3 w-64 space-y-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: labels.chipMin }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider block", children: labels.chipMin }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -458,7 +458,7 @@ function ColumnFilterPopover({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: labels.chipMax }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider block", children: labels.chipMax }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -520,7 +520,7 @@ function ColumnFilterPopover({
   };
   return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      FilterChip,
+      FilterChipPopoverTrigger,
       {
         label: config.label,
         value: getDisplayValue(),

package/dist/es/components/data-table/ColumnHeaderMenu.js

@@ -75,7 +75,7 @@ function ColumnHeaderMenu({
       primarySorted === "asc" && /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3 shrink-0" }),
       primarySorted === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3 shrink-0" })
     ] }),
-    /* @__PURE__ */ jsxs("span", { className: "mt-1 inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-tertiary)]", children: [
+    /* @__PURE__ */ jsxs("span", { className: "mt-1 inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-secondary)]", children: [
       secondaryLabel,
       secondarySorted === "asc" && /* @__PURE__ */ jsx(ArrowUp, { className: "h-2.5 w-2.5 shrink-0" }),
       secondarySorted === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: "h-2.5 w-2.5 shrink-0" })

package/dist/es/components/data-table/CompoundFilterPopover.js

@@ -3,7 +3,7 @@ import { useState, useRef, useEffect } from "react";
 import { Input } from "../ui/input.js";
 import { Checkbox } from "../ui/checkbox.js";
 import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
-import { FilterChip } from "./FilterChip.js";
+import { FilterChipPopoverTrigger } from "./FilterChipPopoverTrigger.js";
 import { FilterPopoverFooter } from "./FilterPopoverFooter.js";
 import { getCompoundValue, isFilterValueEmpty, getNumberRange, getStringArray } from "./filter-values.js";
 const DEFAULT_LABELS = {
@@ -220,7 +220,7 @@ function CompoundFilterPopover({
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-tertiary)] block", children: labels.chipMin }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-secondary)] block", children: labels.chipMin }),
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -242,7 +242,7 @@ function CompoundFilterPopover({
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-tertiary)] block", children: labels.chipMax }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-secondary)] block", children: labels.chipMax }),
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -361,7 +361,7 @@ function CompoundFilterPopover({
       ] });
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-tertiary)] block mb-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-secondary)] block mb-2", children: [
         labels.contains,
         draft.tags.length >= 2 && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] font-semibold text-[var(--tag-blue-text)] bg-[var(--tag-blue-bg)] rounded px-1 py-0.5 uppercase", children: labels.orBadge })
       ] }),
@@ -452,7 +452,7 @@ function CompoundFilterPopover({
   };
   return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      FilterChip,
+      FilterChipPopoverTrigger,
       {
         label: config.label,
         value: getDisplayValue(),

package/dist/es/components/data-table/FilterChipPopoverTrigger.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const FilterChipPopoverTrigger = React.forwardRef(({ label, value, onRemove, active, children, className, ...triggerRest }, ref) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn(
+      "flex h-[var(--size-control-md)] items-center rounded-md border border-[var(--border-subtle)] text-[13px] transition-colors",
+      active ? "bg-[var(--bg-secondary)]" : "bg-[var(--bg-surface)]",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          ...triggerRest,
+          className: "flex h-full flex-1 cursor-pointer items-center border-0 bg-transparent p-0 pl-2.5 pr-1.5 text-left text-[13px] font-normal text-inherit",
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[var(--text-primary)]", children: label }),
+            value && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[var(--text-tertiary)]", children: ":" }),
+              /* @__PURE__ */ jsx("span", { className: "text-[var(--text-primary)] font-medium", children: value })
+            ] }),
+            children
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex h-full items-center pr-1.5", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            onRemove();
+          },
+          className: "flex h-5 w-5 items-center justify-center rounded-sm text-[var(--text-tertiary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--border-focus)]",
+          "aria-label": `Remove ${label} filter`,
+          children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+        }
+      ) })
+    ]
+  }
+));
+FilterChipPopoverTrigger.displayName = "FilterChipPopoverTrigger";
+export {
+  FilterChipPopoverTrigger
+};

package/dist/es/components/data-table/RowActionsMenu.js

@@ -8,7 +8,8 @@ function RowActionsMenu({
   sections,
   align = "end",
   triggerClassName,
-  contentClassName
+  contentClassName,
+  triggerAriaLabel = "Row actions"
 }) {
   const resolvedSections = sections && sections.length > 0 ? sections : actions.length > 0 ? [{ label: "", actions }] : [];
   const isGrouped = resolvedSections.some((section) => section.label);
@@ -18,7 +19,7 @@ function RowActionsMenu({
       {
         variant: "ghost",
         size: "icon",
-        "aria-label": "Row actions",
+        "aria-label": triggerAriaLabel,
         className: cn(
           "h-7 w-7 rounded-sm p-0 opacity-0 transition-opacity group-hover:opacity-100 data-[state=open]:opacity-100",
           triggerClassName

package/dist/es/components/data-table/SortableHeader.js

@@ -65,7 +65,7 @@ function SortableHeader({
           className: "group/secondary inline-flex cursor-pointer select-none items-center gap-1 text-left",
           onClick: onSecondaryClick,
           children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-tertiary)]", children: secondaryLabel }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-secondary)]", children: secondaryLabel }),
             /* @__PURE__ */ jsx(
               SortIcon,
               {
@@ -90,7 +90,7 @@ function SortableHeader({
       children: [
         isStacked ? /* @__PURE__ */ jsxs("span", { className: "flex flex-col leading-none", children: [
           /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-primary)]", children: resolvedPrimaryLabel }),
-          /* @__PURE__ */ jsx("span", { className: "mt-1 text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-tertiary)]", children: secondaryLabel })
+          /* @__PURE__ */ jsx("span", { className: "mt-1 text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-secondary)]", children: secondaryLabel })
         ] }) : /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-primary)]", children: resolvedPrimaryLabel }),
         /* @__PURE__ */ jsx(SortIcon, { sorted, hoverClass: "group-hover/header:opacity-100" })
       ]

package/dist/es/components/data-table/TableFooter.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useId } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "../ui/button.js";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../ui/select.js";
@@ -62,26 +63,44 @@ function TableFooter(props) {
     renderPagination(props)
   ] });
 }
+function RowsPerPagePagination(props) {
+  const rowsPerPageLabelId = useId();
+  const rowsPerPageOptions = props.rowsPerPageOptions ?? defaultRowsPerPageOptions;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 lg:justify-end", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: rowsPerPageLabelId,
+          className: "text-[12px] text-[var(--text-secondary)]",
+          children: "Rows per page"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: String(props.rowsPerPage),
+          onValueChange: (value) => props.onRowsPerPageChange(Number(value)),
+          children: [
+            /* @__PURE__ */ jsx(
+              SelectTrigger,
+              {
+                "aria-labelledby": rowsPerPageLabelId,
+                className: "h-[var(--size-control-sm)] w-[var(--size-select-compact)]",
+                children: /* @__PURE__ */ jsx(SelectValue, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectContent, { children: rowsPerPageOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option), children: option }, option)) })
+          ]
+        }
+      )
+    ] }),
+    renderNumericPager(props)
+  ] });
+}
 function renderPagination(props) {
   if (props.paginationVariant === "perPage") {
-    const rowsPerPageOptions = props.rowsPerPageOptions ?? defaultRowsPerPageOptions;
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 lg:justify-end", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[var(--text-secondary)]", children: "Rows per page" }),
-        /* @__PURE__ */ jsxs(
-          Select,
-          {
-            value: String(props.rowsPerPage),
-            onValueChange: (value) => props.onRowsPerPageChange(Number(value)),
-            children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-[var(--size-control-sm)] w-[var(--size-select-compact)]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-              /* @__PURE__ */ jsx(SelectContent, { children: rowsPerPageOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option), children: option }, option)) })
-            ]
-          }
-        )
-      ] }),
-      renderNumericPager(props)
-    ] });
+    return /* @__PURE__ */ jsx(RowsPerPagePagination, { ...props });
   }
   if (props.paginationVariant !== "pages") {
     return null;

package/dist/es/components/ui/combobox.js

@@ -111,7 +111,7 @@ function Combobox({
           triggerClassName
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: cn("truncate", !selected && "text-[var(--text-tertiary)]"), children: selected ? renderSelected ? renderSelected(selected) : selected.label : placeholder }),
+          /* @__PURE__ */ jsx("span", { className: cn("truncate", !selected && "text-[var(--text-secondary)]"), children: selected ? renderSelected ? renderSelected(selected) : selected.label : placeholder }),
           /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3.5 w-3.5 shrink-0 text-[var(--text-tertiary)]" })
         ]
       }
@@ -153,7 +153,7 @@ function Combobox({
                         ),
                         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
                           /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
-                          option.description && /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-[var(--text-tertiary)]", children: option.description })
+                          option.description && /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-[var(--text-secondary)]", children: option.description })
                         ] })
                       ]
                     },

package/dist/es/components/ui/popover.js

@@ -4,23 +4,58 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cn } from "../../lib/utils.js";
 import { STYLE_SCOPE } from "../../lib/style-scope.js";
 import { usePortalContainer } from "../../context/portal-container-context.js";
-const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverContext = React.createContext(null);
+function usePopoverContext() {
+  const context = React.useContext(PopoverContext);
+  if (!context) {
+    throw new Error("Popover components must be used within Popover");
+  }
+  return context;
+}
+function Popover(props) {
+  const triggerId = React.useId();
+  const [triggerMounted, setTriggerMounted] = React.useState(false);
+  const setTriggerMountedStable = React.useCallback((mounted) => {
+    setTriggerMounted(mounted);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    PopoverContext.Provider,
+    {
+      value: { triggerId, triggerMounted, setTriggerMounted: setTriggerMountedStable },
+      children: /* @__PURE__ */ jsx(PopoverPrimitive.Root, { ...props })
+    }
+  );
+}
+const PopoverTrigger = React.forwardRef(({ id, ...props }, ref) => {
+  const { triggerId, setTriggerMounted } = usePopoverContext();
+  const resolvedId = id ?? triggerId;
+  React.useEffect(() => {
+    setTriggerMounted(true);
+    return () => setTriggerMounted(false);
+  }, [setTriggerMounted]);
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { ref, id: resolvedId, ...props });
+});
+PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
   const container = usePortalContainer();
+  const { triggerId, triggerMounted } = usePopoverContext();
+  const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = props;
+  const resolvedAriaLabelledBy = ariaLabel !== void 0 && ariaLabelledBy === void 0 ? void 0 : ariaLabelledBy ?? (triggerMounted ? triggerId : void 0);
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
     {
       ref,
       align,
       sideOffset,
+      "aria-label": ariaLabel,
+      "aria-labelledby": resolvedAriaLabelledBy,
       className: cn(
         STYLE_SCOPE,
         "z-50 w-72 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 text-[var(--text-primary)] outline-none [box-shadow:var(--shadow-menu)]",
         className
       ),
-      ...props
+      ...rest
     }
   ) });
 });

package/dist/styles.css

@@ -942,6 +942,9 @@
 .border {
     border-width: 1px
 }
+.border-0 {
+    border-width: 0px
+}
 .border-b {
     border-bottom-width: 1px
 }
@@ -1346,6 +1349,9 @@
 .text-\[var\(--text-utility\)\] {
     color: var(--text-utility)
 }
+.text-inherit {
+    color: inherit
+}
 .text-red-600 {
     --tw-text-opacity: 1;
     color: rgb(220 38 38 / var(--tw-text-opacity, 1))

package/dist/tablewright.cjs

@@ -253,23 +253,58 @@ const Input = React__namespace.forwardRef(
   }
 );
 Input.displayName = "Input";
-const Popover = PopoverPrimitive__namespace.Root;
-const PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+const PopoverContext = React__namespace.createContext(null);
+function usePopoverContext() {
+  const context = React__namespace.useContext(PopoverContext);
+  if (!context) {
+    throw new Error("Popover components must be used within Popover");
+  }
+  return context;
+}
+function Popover(props) {
+  const triggerId = React__namespace.useId();
+  const [triggerMounted, setTriggerMounted] = React__namespace.useState(false);
+  const setTriggerMountedStable = React__namespace.useCallback((mounted) => {
+    setTriggerMounted(mounted);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PopoverContext.Provider,
+    {
+      value: { triggerId, triggerMounted, setTriggerMounted: setTriggerMountedStable },
+      children: /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { ...props })
+    }
+  );
+}
+const PopoverTrigger = React__namespace.forwardRef(({ id, ...props }, ref) => {
+  const { triggerId, setTriggerMounted } = usePopoverContext();
+  const resolvedId = id ?? triggerId;
+  React__namespace.useEffect(() => {
+    setTriggerMounted(true);
+    return () => setTriggerMounted(false);
+  }, [setTriggerMounted]);
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { ref, id: resolvedId, ...props });
+});
+PopoverTrigger.displayName = PopoverPrimitive__namespace.Trigger.displayName;
 const PopoverAnchor = PopoverPrimitive__namespace.Anchor;
 const PopoverContent = React__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => {
   const container = usePortalContainer();
+  const { triggerId, triggerMounted } = usePopoverContext();
+  const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = props;
+  const resolvedAriaLabelledBy = ariaLabel !== void 0 && ariaLabelledBy === void 0 ? void 0 : ariaLabelledBy ?? (triggerMounted ? triggerId : void 0);
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
     PopoverPrimitive__namespace.Content,
     {
       ref,
       align,
       sideOffset,
+      "aria-label": ariaLabel,
+      "aria-labelledby": resolvedAriaLabelledBy,
       className: cn(
         STYLE_SCOPE,
         "z-50 w-72 rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-4 text-[var(--text-primary)] outline-none [box-shadow:var(--shadow-menu)]",
         className
       ),
-      ...props
+      ...rest
     }
   ) });
 });
@@ -464,7 +499,7 @@ function Combobox({
           triggerClassName
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate", !selected && "text-[var(--text-tertiary)]"), children: selected ? renderSelected ? renderSelected(selected) : selected.label : placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate", !selected && "text-[var(--text-secondary)]"), children: selected ? renderSelected ? renderSelected(selected) : selected.label : placeholder }),
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "h-3.5 w-3.5 shrink-0 text-[var(--text-tertiary)]" })
         ]
       }
@@ -506,7 +541,7 @@ function Combobox({
                         ),
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col", children: [
                           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label }),
-                          option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[11px] text-[var(--text-tertiary)]", children: option.description })
+                          option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[11px] text-[var(--text-secondary)]", children: option.description })
                         ] })
                       ]
                     },
@@ -1360,7 +1395,8 @@ function RowActionsMenu({
   sections,
   align = "end",
   triggerClassName,
-  contentClassName
+  contentClassName,
+  triggerAriaLabel = "Row actions"
 }) {
   const resolvedSections = sections && sections.length > 0 ? sections : actions.length > 0 ? [{ label: "", actions }] : [];
   const isGrouped = resolvedSections.some((section) => section.label);
@@ -1370,7 +1406,7 @@ function RowActionsMenu({
       {
         variant: "ghost",
         size: "icon",
-        "aria-label": "Row actions",
+        "aria-label": triggerAriaLabel,
         className: cn(
           "h-7 w-7 rounded-sm p-0 opacity-0 transition-opacity group-hover:opacity-100 data-[state=open]:opacity-100",
           triggerClassName
@@ -1581,7 +1617,7 @@ function SortableHeader({
           className: "group/secondary inline-flex cursor-pointer select-none items-center gap-1 text-left",
           onClick: onSecondaryClick,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-tertiary)]", children: secondaryLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-secondary)]", children: secondaryLabel }),
             /* @__PURE__ */ jsxRuntime.jsx(
               SortIcon,
               {
@@ -1606,7 +1642,7 @@ function SortableHeader({
       children: [
         isStacked ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col leading-none", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-primary)]", children: resolvedPrimaryLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-tertiary)]", children: secondaryLabel })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-secondary)]", children: secondaryLabel })
         ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-primary)]", children: resolvedPrimaryLabel }),
         /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { sorted, hoverClass: "group-hover/header:opacity-100" })
       ]
@@ -1673,26 +1709,44 @@ function TableFooter(props) {
     renderPagination(props)
   ] });
 }
+function RowsPerPagePagination(props) {
+  const rowsPerPageLabelId = React.useId();
+  const rowsPerPageOptions = props.rowsPerPageOptions ?? defaultRowsPerPageOptions;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3 lg:justify-end", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          id: rowsPerPageLabelId,
+          className: "text-[12px] text-[var(--text-secondary)]",
+          children: "Rows per page"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Select,
+        {
+          value: String(props.rowsPerPage),
+          onValueChange: (value) => props.onRowsPerPageChange(Number(value)),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SelectTrigger,
+              {
+                "aria-labelledby": rowsPerPageLabelId,
+                className: "h-[var(--size-control-sm)] w-[var(--size-select-compact)]",
+                children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: rowsPerPageOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: String(option), children: option }, option)) })
+          ]
+        }
+      )
+    ] }),
+    renderNumericPager(props)
+  ] });
+}
 function renderPagination(props) {
   if (props.paginationVariant === "perPage") {
-    const rowsPerPageOptions = props.rowsPerPageOptions ?? defaultRowsPerPageOptions;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3 lg:justify-end", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[var(--text-secondary)]", children: "Rows per page" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Select,
-          {
-            value: String(props.rowsPerPage),
-            onValueChange: (value) => props.onRowsPerPageChange(Number(value)),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-[var(--size-control-sm)] w-[var(--size-select-compact)]", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: rowsPerPageOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: String(option), children: option }, option)) })
-            ]
-          }
-        )
-      ] }),
-      renderNumericPager(props)
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(RowsPerPagePagination, { ...props });
   }
   if (props.paginationVariant !== "pages") {
     return null;
@@ -2458,7 +2512,7 @@ function ColumnHeaderMenu({
       primarySorted === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3 w-3 shrink-0" }),
       primarySorted === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3 w-3 shrink-0" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mt-1 inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-tertiary)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mt-1 inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-[0.06em] text-[var(--text-secondary)]", children: [
       secondaryLabel,
       secondarySorted === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-2.5 w-2.5 shrink-0" }),
       secondarySorted === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-2.5 w-2.5 shrink-0" })
@@ -2722,6 +2776,49 @@ function GroupedColumnToggle({
     }
   );
 }
+const FilterChipPopoverTrigger = React__namespace.forwardRef(({ label, value, onRemove, active, children, className, ...triggerRest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: cn(
+      "flex h-[var(--size-control-md)] items-center rounded-md border border-[var(--border-subtle)] text-[13px] transition-colors",
+      active ? "bg-[var(--bg-secondary)]" : "bg-[var(--bg-surface)]",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          ...triggerRest,
+          className: "flex h-full flex-1 cursor-pointer items-center border-0 bg-transparent p-0 pl-2.5 pr-1.5 text-left text-[13px] font-normal text-inherit",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--text-primary)]", children: label }),
+            value && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--text-tertiary)]", children: ":" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--text-primary)] font-medium", children: value })
+            ] }),
+            children
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center pr-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            onRemove();
+          },
+          className: "flex h-5 w-5 items-center justify-center rounded-sm text-[var(--text-tertiary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--border-focus)]",
+          "aria-label": `Remove ${label} filter`,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5" })
+        }
+      ) })
+    ]
+  }
+));
+FilterChipPopoverTrigger.displayName = "FilterChipPopoverTrigger";
 function isObjectValue(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
@@ -2966,7 +3063,7 @@ function ColumnFilterPopover({
         const allText = allStats?.type === "text" ? allStats : null;
         const filtText = filteredStats?.type === "text" ? filteredStats : null;
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 w-64 space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider block", children: [
             labels.contains,
             draftTags.length >= 2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[10px] font-semibold text-[var(--tag-blue-text)] bg-[var(--tag-blue-bg)] rounded px-1 py-0.5 uppercase", children: labels.orBadge })
           ] }),
@@ -3096,7 +3193,7 @@ function ColumnFilterPopover({
         const filtDate = filteredStats?.type === "date" ? filteredStats : null;
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 w-64 space-y-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: labels.chipFrom }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider block", children: labels.chipFrom }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
@@ -3107,7 +3204,7 @@ function ColumnFilterPopover({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: labels.chipTo }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider block", children: labels.chipTo }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
@@ -3184,7 +3281,7 @@ function ColumnFilterPopover({
         const filtNum = filteredStats?.type === "number-range" ? filteredStats : null;
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 w-64 space-y-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: labels.chipMin }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider block", children: labels.chipMin }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
@@ -3203,7 +3300,7 @@ function ColumnFilterPopover({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: labels.chipMax }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-[var(--text-secondary)] uppercase tracking-wider block", children: labels.chipMax }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
@@ -3265,7 +3362,7 @@ function ColumnFilterPopover({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      FilterChip,
+      FilterChipPopoverTrigger,
       {
         label: config.label,
         value: getDisplayValue(),
@@ -3509,7 +3606,7 @@ function CompoundFilterPopover({
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-tertiary)] block", children: labels.chipMin }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-secondary)] block", children: labels.chipMin }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
@@ -3531,7 +3628,7 @@ function CompoundFilterPopover({
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-tertiary)] block", children: labels.chipMax }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-secondary)] block", children: labels.chipMax }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
@@ -3650,7 +3747,7 @@ function CompoundFilterPopover({
       ] });
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-tertiary)] block mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-secondary)] block mb-2", children: [
         labels.contains,
         draft.tags.length >= 2 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[10px] font-semibold text-[var(--tag-blue-text)] bg-[var(--tag-blue-bg)] rounded px-1 py-0.5 uppercase", children: labels.orBadge })
       ] }),
@@ -3741,7 +3838,7 @@ function CompoundFilterPopover({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      FilterChip,
+      FilterChipPopoverTrigger,
       {
         label: config.label,
         value: getDisplayValue(),

package/dist/tablewright.css

@@ -790,6 +790,9 @@
 .border {
     border-width: 1px
 }
+.border-0 {
+    border-width: 0px
+}
 .border-b {
     border-bottom-width: 1px
 }
@@ -1194,6 +1197,9 @@
 .text-\[var\(--text-utility\)\] {
     color: var(--text-utility)
 }
+.text-inherit {
+    color: inherit
+}
 .text-red-600 {
     --tw-text-opacity: 1;
     color: rgb(220 38 38 / var(--tw-text-opacity, 1))

package/dist/types/components/data-table/FilterChipPopoverTrigger.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { FilterChipProps } from "./FilterChip.js";
+export type FilterChipPopoverTriggerProps = Omit<FilterChipProps, keyof React.HTMLAttributes<HTMLDivElement>> & React.ButtonHTMLAttributes<HTMLButtonElement>;
+/** Filter chip shell whose label area is a real button for PopoverTrigger asChild. */
+export declare const FilterChipPopoverTrigger: React.ForwardRefExoticComponent<Omit<FilterChipProps, keyof React.HTMLAttributes<HTMLDivElement>> & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/data-table/RowActionsMenu.d.ts

@@ -5,6 +5,8 @@ interface RowActionsMenuProps {
     align?: "start" | "center" | "end";
     triggerClassName?: string;
     contentClassName?: string;
+    /** Accessible name for the icon trigger (e.g. "Actions for TX-123"). */
+    triggerAriaLabel?: string;
 }
-export declare function RowActionsMenu({ actions, sections, align, triggerClassName, contentClassName, }: RowActionsMenuProps): import("react").JSX.Element;
+export declare function RowActionsMenu({ actions, sections, align, triggerClassName, contentClassName, triggerAriaLabel, }: RowActionsMenuProps): import("react").JSX.Element;
 export {};

package/dist/types/components/ui/popover.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
-declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
 declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/types/components/ui/select.d.ts

@@ -1,6 +1,11 @@
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
+/**
+ * Select field control. Give the trigger an accessible name with `aria-label`, `aria-labelledby`,
+ * or a `<label htmlFor>` that points at the trigger's `id` — the trigger shows the selected value,
+ * not the field name.
+ */
 declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undevy-org/tablewright",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "React data-table and application-shell components: filters, drawers, row controls, sortable and resizable columns, built on Radix UI and TanStack Table.",
   "license": "MIT",
   "repository": {