@undevy-org/tablewright 0.4.0 → 0.5.1

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

@@ -27,8 +27,13 @@ function AppliedStateChips({
   onClearAll,
   columnFilterStats,
   requestOpenFilterId,
-  onRequestOpenHandled
+  onRequestOpenHandled,
+  labels: labelOverrides,
+  columnFilterLabels,
+  compoundFilterLabels,
+  filterPopoverFooterLabels
 }) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
   const hasFilters = filters.length > 0;
   const hasSort = currentSort !== null;
   const hasHiddenColumns = hiddenColumnsCount > 0;
@@ -39,13 +44,13 @@ function AppliedStateChips({
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 pb-3", children: [
     /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: onClearAll, className: "shrink-0", children: [
       /* @__PURE__ */ jsx(X, { size: 14 }),
-      DEFAULT_LABELS.clearAll
+      labels.clearAll
     ] }),
     hasHiddenColumns && /* @__PURE__ */ jsx(
       FilterChip,
       {
-        label: DEFAULT_LABELS.columns,
-        value: DEFAULT_LABELS.hiddenCount(hiddenColumnsCount),
+        label: labels.columns,
+        value: labels.hiddenCount(hiddenColumnsCount),
         onRemove: onResetColumns,
         onClick: onOpenColumnsMenu,
         className: "cursor-pointer"
@@ -68,7 +73,9 @@ function AppliedStateChips({
             chipClassName: isEmpty ? "border-dashed" : void 0,
             columnFilterStats,
             requestOpen: filter.columnId === requestOpenFilterId,
-            onRequestOpenHandled
+            onRequestOpenHandled,
+            labels: compoundFilterLabels,
+            footerLabels: filterPopoverFooterLabels
           },
           filter.columnId
         );
@@ -84,7 +91,9 @@ function AppliedStateChips({
           chipClassName: isEmpty ? "border-dashed" : void 0,
           stats: columnFilterStats?.[filter.columnId],
           requestOpen: filter.columnId === requestOpenFilterId,
-          onRequestOpenHandled
+          onRequestOpenHandled,
+          labels: columnFilterLabels,
+          footerLabels: filterPopoverFooterLabels
         },
         filter.columnId
       );

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

@@ -18,6 +18,9 @@ const DEFAULT_LABELS = {
   chipTo: "to",
   chipMin: "min",
   chipMax: "max",
+  contains: "Contains",
+  orBadge: "OR",
+  numberInputPlaceholder: "0",
   valuesCount: (n) => `${n} values`,
   selectedCount: (n) => `${n} selected`
 };
@@ -48,8 +51,11 @@ function ColumnFilterPopover({
   chipClassName,
   stats,
   requestOpen,
-  onRequestOpenHandled
+  onRequestOpenHandled,
+  labels: labelOverrides,
+  footerLabels
 }) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
   const [isOpen, setIsOpen] = useState(false);
   const onRequestOpenHandledRef = useRef(onRequestOpenHandled);
   useEffect(() => {
@@ -186,7 +192,7 @@ function ColumnFilterPopover({
           if (!textStats || textStats.type !== "text") {
             return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
               /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[54px]", children: label }),
-              /* @__PURE__ */ jsx("span", { className: "rounded bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[11px] text-[var(--text-tertiary)] italic", children: DEFAULT_LABELS.noData })
+              /* @__PURE__ */ jsx("span", { className: "rounded bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[11px] text-[var(--text-tertiary)] italic", children: labels.noData })
             ] });
           }
           const { samples, totalUnique } = textStats;
@@ -216,8 +222,8 @@ function ColumnFilterPopover({
         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: [
-            "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: "OR" })
+            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 })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 rounded-md border border-[var(--border-subtle)] bg-[var(--bg-surface)] px-2 py-1.5 focus-within:border-[var(--border-focus)]", children: [
             draftTags.map((tag) => /* @__PURE__ */ jsxs(
@@ -244,7 +250,7 @@ function ColumnFilterPopover({
               {
                 autoFocus: true,
                 className: "flex-1 min-w-[60px] bg-transparent text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-tertiary)]",
-                placeholder: draftTags.length === 0 ? DEFAULT_LABELS.searchPlaceholder : DEFAULT_LABELS.addValuePlaceholder,
+                placeholder: draftTags.length === 0 ? labels.searchPlaceholder : labels.addValuePlaceholder,
                 value: draftInput,
                 onChange: (e) => setDraftInput(e.target.value),
                 onKeyDown: handleTextKeyDown
@@ -252,8 +258,8 @@ function ColumnFilterPopover({
             )
           ] }),
           allText && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] pt-2 space-y-2", children: [
-            renderTextRow(DEFAULT_LABELS.statsTextAllPrefix, allText),
-            filteredStats !== null && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderTextRow(DEFAULT_LABELS.statsTextFilteredPrefix, filtText) })
+            renderTextRow(labels.statsTextAllPrefix, allText),
+            filteredStats !== null && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderTextRow(labels.statsTextFilteredPrefix, filtText) })
           ] })
         ] });
       }
@@ -292,7 +298,7 @@ function ColumnFilterPopover({
           if (!dateStats || dateStats.type !== "date") {
             return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
               /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[54px]", children: label }),
-              /* @__PURE__ */ jsx("span", { className: "rounded bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[11px] text-[var(--text-tertiary)] italic", children: DEFAULT_LABELS.noData })
+              /* @__PURE__ */ jsx("span", { className: "rounded bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[11px] text-[var(--text-tertiary)] italic", children: labels.noData })
             ] });
           }
           const { min, max } = dateStats;
@@ -320,7 +326,7 @@ function ColumnFilterPopover({
                 className: chipCls(draftDate.from === min),
                 onClick: () => setDraftDate((prev) => ({ ...prev, from: min })),
                 children: [
-                  DEFAULT_LABELS.chipFrom,
+                  labels.chipFrom,
                   " ",
                   formatChipDate(min)
                 ]
@@ -333,7 +339,7 @@ function ColumnFilterPopover({
                 className: chipCls(draftDate.to === max),
                 onClick: () => setDraftDate((prev) => ({ ...prev, to: max })),
                 children: [
-                  DEFAULT_LABELS.chipTo,
+                  labels.chipTo,
                   " ",
                   formatChipDate(max)
                 ]
@@ -345,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: DEFAULT_LABELS.chipFrom }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: labels.chipFrom }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -356,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: DEFAULT_LABELS.chipTo }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: labels.chipTo }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -367,8 +373,8 @@ function ColumnFilterPopover({
             )
           ] }),
           allDate && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] pt-2 space-y-2", children: [
-            renderDateRow(DEFAULT_LABELS.statsAllPrefix, allDate),
-            filteredStats !== null && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderDateRow(DEFAULT_LABELS.statsFilteredPrefix, filtDate) })
+            renderDateRow(labels.statsAllPrefix, allDate),
+            filteredStats !== null && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderDateRow(labels.statsFilteredPrefix, filtDate) })
           ] })
         ] });
       }
@@ -377,7 +383,7 @@ function ColumnFilterPopover({
           if (!numStats || numStats.type !== "number-range") {
             return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
               /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[54px]", children: label }),
-              /* @__PURE__ */ jsx("span", { className: "rounded bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[11px] text-[var(--text-tertiary)] italic", children: DEFAULT_LABELS.noData })
+              /* @__PURE__ */ jsx("span", { className: "rounded bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[11px] text-[var(--text-tertiary)] italic", children: labels.noData })
             ] });
           }
           const { min, max } = numStats;
@@ -408,7 +414,7 @@ function ColumnFilterPopover({
                 className: chipCls(draftNumberFrom === String(min)),
                 onClick: () => setDraftNumberFrom(String(min)),
                 children: [
-                  DEFAULT_LABELS.chipMin,
+                  labels.chipMin,
                   " ",
                   min
                 ]
@@ -421,7 +427,7 @@ function ColumnFilterPopover({
                 className: chipCls(draftNumberTo === String(max)),
                 onClick: () => setDraftNumberTo(String(max)),
                 children: [
-                  DEFAULT_LABELS.chipMax,
+                  labels.chipMax,
                   " ",
                   max
                 ]
@@ -433,13 +439,13 @@ 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: DEFAULT_LABELS.chipMin }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: labels.chipMin }),
             /* @__PURE__ */ jsx(
               Input,
               {
                 type: "number",
                 autoFocus: true,
-                placeholder: allNum ? String(allNum.min) : "0",
+                placeholder: allNum ? String(allNum.min) : labels.numberInputPlaceholder,
                 value: draftNumberFrom,
                 onChange: (e) => setDraftNumberFrom(e.target.value),
                 onKeyDown: (e) => {
@@ -452,12 +458,12 @@ 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: DEFAULT_LABELS.chipMax }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: labels.chipMax }),
             /* @__PURE__ */ jsx(
               Input,
               {
                 type: "number",
-                placeholder: allNum ? String(allNum.max) : "0",
+                placeholder: allNum ? String(allNum.max) : labels.numberInputPlaceholder,
                 value: draftNumberTo,
                 onChange: (e) => setDraftNumberTo(e.target.value),
                 onKeyDown: (e) => {
@@ -470,8 +476,8 @@ function ColumnFilterPopover({
             )
           ] }),
           allNum && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] pt-2 space-y-2", children: [
-            renderNumRow(DEFAULT_LABELS.statsAllPrefix, allNum),
-            filteredStats !== null && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderNumRow(DEFAULT_LABELS.statsFilteredPrefix, filtNum) })
+            renderNumRow(labels.statsAllPrefix, allNum),
+            filteredStats !== null && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderNumRow(labels.statsFilteredPrefix, filtNum) })
           ] })
         ] });
       }
@@ -488,21 +494,21 @@ function ColumnFilterPopover({
       }
       if (value.length === 2) {
         const joined = value.join(", ");
-        return joined.length > 24 ? `${value.length} values` : joined;
+        return joined.length > 24 ? labels.valuesCount(value.length) : joined;
       }
-      return DEFAULT_LABELS.valuesCount(value.length);
+      return labels.valuesCount(value.length);
     }
     if (config.type === "enum" && Array.isArray(value)) {
       if (value.length === 1) {
         return config.options?.find((o) => o.value === value[0])?.label ?? value[0];
       }
-      return DEFAULT_LABELS.selectedCount(value.length);
+      return labels.selectedCount(value.length);
     }
     if (config.type === "date") {
       const { from, to } = getDateRange(value);
       if (from && to) return `${from} — ${to}`;
-      if (from) return `${DEFAULT_LABELS.chipFrom} ${from}`;
-      if (to) return `${DEFAULT_LABELS.chipTo} ${to}`;
+      if (from) return `${labels.chipFrom} ${from}`;
+      if (to) return `${labels.chipTo} ${to}`;
     }
     if (config.type === "number-range") {
       const { from, to } = getNumberRange(value);
@@ -531,7 +537,14 @@ function ColumnFilterPopover({
         className: "w-auto p-0 [box-shadow:var(--shadow-menu)] border-[var(--border-subtle)] flex flex-col max-h-[min(var(--radix-popover-content-available-height),520px)] overflow-hidden",
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain", children: renderContent() }),
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 bg-[var(--bg-surface)]", children: /* @__PURE__ */ jsx(FilterPopoverFooter, { onApply: handleApply, onClear: handleClear }) })
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 bg-[var(--bg-surface)]", children: /* @__PURE__ */ jsx(
+            FilterPopoverFooter,
+            {
+              onApply: handleApply,
+              onClear: handleClear,
+              labels: footerLabels
+            }
+          ) })
         ]
       }
     )

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

@@ -10,10 +10,16 @@ const DEFAULT_LABELS = {
   searchPlaceholder: "Search...",
   addPlaceholder: "Add...",
   contains: "Contains",
+  orBadge: "OR",
   chipMin: "min",
   chipMax: "max",
   statsAllPrefix: "All:",
-  statsFilteredPrefix: "Filt:"
+  statsFilteredPrefix: "Filt:",
+  numberInputPlaceholder: "0",
+  resetSectionTitle: (subLabel) => `Reset ${subLabel}`,
+  filtersCount: (n) => `${n} filters`,
+  subValuesCount: (n) => `${n} values`,
+  subSelectedCount: (n) => `${n} selected`
 };
 function initDraft(sub, compound) {
   const val = compound[sub.key];
@@ -48,7 +54,7 @@ function draftToValue(draft) {
   const all = trimmed.length > 0 && !draft.tags.includes(trimmed) ? [...draft.tags, trimmed] : [...draft.tags];
   return all.length > 0 ? all : void 0;
 }
-function formatSubDisplay(sub, val) {
+function formatSubDisplay(sub, val, labels) {
   if (isFilterValueEmpty(val)) return null;
   if (sub.type === "number-range") {
     const { from, to } = getNumberRange(val);
@@ -62,14 +68,14 @@ function formatSubDisplay(sub, val) {
       const label = sub.options?.find((o) => o.value === val[0])?.label ?? val[0];
       return `${sub.label}: ${label}`;
     }
-    return `${sub.label}: ${val.length} selected`;
+    return `${sub.label}: ${labels.subSelectedCount(val.length)}`;
   }
   if (Array.isArray(val) && val.length > 0) {
     if (val.length === 1) {
       const display = val[0].length > 15 ? `${val[0].slice(0, 15)}…` : val[0];
       return `${sub.label}: ${display}`;
     }
-    return `${sub.label}: ${val.length} values`;
+    return `${sub.label}: ${labels.subValuesCount(val.length)}`;
   }
   return null;
 }
@@ -82,8 +88,11 @@ function CompoundFilterPopover({
   chipClassName,
   columnFilterStats,
   requestOpen,
-  onRequestOpenHandled
+  onRequestOpenHandled,
+  labels: labelOverrides,
+  footerLabels
 }) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
   const subFilters = config.subFilters ?? [];
   const compound = getCompoundValue(filter.value);
   const [isOpen, setIsOpen] = useState(false);
@@ -159,12 +168,12 @@ function CompoundFilterPopover({
     if (isFilterValueEmpty(compound)) return void 0;
     const parts = [];
     for (const sub of subFilters) {
-      const display = formatSubDisplay(sub, compound[sub.key]);
+      const display = formatSubDisplay(sub, compound[sub.key], labels);
       if (display) parts.push(display);
     }
     if (parts.length === 0) return void 0;
     const joined = parts.join(" & ");
-    return joined.length > 30 ? `${parts.length} filters` : joined;
+    return joined.length > 30 ? labels.filtersCount(parts.length) : joined;
   };
   const updateDraft = (key, updater) => {
     setDrafts((prev) => ({ ...prev, [key]: updater(prev[key]) }));
@@ -187,7 +196,7 @@ function CompoundFilterPopover({
             className: chipCls(draft.from === String(min)),
             onClick: () => updateDraft(sub.key, (d) => ({ ...d, from: String(min) })),
             children: [
-              DEFAULT_LABELS.chipMin,
+              labels.chipMin,
               " ",
               min.toLocaleString()
             ]
@@ -200,7 +209,7 @@ function CompoundFilterPopover({
             className: chipCls(draft.to === String(max)),
             onClick: () => updateDraft(sub.key, (d) => ({ ...d, to: String(max) })),
             children: [
-              DEFAULT_LABELS.chipMax,
+              labels.chipMax,
               " ",
               max.toLocaleString()
             ]
@@ -211,13 +220,13 @@ 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: DEFAULT_LABELS.chipMin }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-tertiary)] block", children: labels.chipMin }),
           /* @__PURE__ */ jsx(
             Input,
             {
               type: "number",
               autoFocus: subFilters.indexOf(sub) === 0,
-              placeholder: allNum ? String(allNum.min) : "0",
+              placeholder: allNum ? String(allNum.min) : labels.numberInputPlaceholder,
               value: draft.from,
               onChange: (e) => updateDraft(sub.key, (prev) => ({
                 ...prev,
@@ -233,12 +242,12 @@ 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: DEFAULT_LABELS.chipMax }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.1em] text-[var(--text-tertiary)] block", children: labels.chipMax }),
           /* @__PURE__ */ jsx(
             Input,
             {
               type: "number",
-              placeholder: allNum ? String(allNum.max) : "0",
+              placeholder: allNum ? String(allNum.max) : labels.numberInputPlaceholder,
               value: draft.to,
               onChange: (e) => updateDraft(sub.key, (prev) => ({
                 ...prev,
@@ -255,8 +264,8 @@ function CompoundFilterPopover({
         ] })
       ] }),
       allNum && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] mt-3 pt-2 space-y-2", children: [
-        renderNumRow(DEFAULT_LABELS.statsAllPrefix, allNum),
-        filtNum && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderNumRow(DEFAULT_LABELS.statsFilteredPrefix, filtNum) })
+        renderNumRow(labels.statsAllPrefix, allNum),
+        filtNum && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderNumRow(labels.statsFilteredPrefix, filtNum) })
       ] })
     ] });
   };
@@ -353,8 +362,8 @@ 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: [
-        DEFAULT_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: "OR" })
+        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 })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 rounded-md border border-[var(--border-subtle)] bg-[var(--bg-surface)] px-2 py-1.5 focus-within:border-[var(--border-focus)]", children: [
         draft.tags.map((tag) => /* @__PURE__ */ jsxs(
@@ -384,7 +393,7 @@ function CompoundFilterPopover({
           {
             autoFocus: subFilters.indexOf(sub) === 0,
             className: "flex-1 min-w-[50px] bg-transparent text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-tertiary)]",
-            placeholder: draft.tags.length === 0 ? DEFAULT_LABELS.searchPlaceholder : DEFAULT_LABELS.addPlaceholder,
+            placeholder: draft.tags.length === 0 ? labels.searchPlaceholder : labels.addPlaceholder,
             value: draft.input,
             onChange: (e) => updateDraft(sub.key, (prev) => ({ ...prev, input: e.target.value })),
             onKeyDown: handleTextKeyDown
@@ -392,8 +401,8 @@ function CompoundFilterPopover({
         )
       ] }),
       allText && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] mt-3 pt-2 space-y-2", children: [
-        renderTextRow(DEFAULT_LABELS.statsAllPrefix, allText),
-        filtText && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderTextRow(DEFAULT_LABELS.statsFilteredPrefix, filtText) })
+        renderTextRow(labels.statsAllPrefix, allText),
+        filtText && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderTextRow(labels.statsFilteredPrefix, filtText) })
       ] })
     ] });
   };
@@ -475,7 +484,7 @@ function CompoundFilterPopover({
                       type: "button",
                       className: "text-[11px] text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] transition-colors",
                       onClick: () => handleResetSection(sub.key),
-                      title: `Reset ${sub.label}`,
+                      title: labels.resetSectionTitle(sub.label),
                       children: "✕"
                     }
                   )
@@ -487,7 +496,14 @@ function CompoundFilterPopover({
             },
             sub.key
           )) }),
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 bg-[var(--bg-surface)]", children: /* @__PURE__ */ jsx(FilterPopoverFooter, { onApply: handleApply, onClear: handleClearAll }) })
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 bg-[var(--bg-surface)]", children: /* @__PURE__ */ jsx(
+            FilterPopoverFooter,
+            {
+              onApply: handleApply,
+              onClear: handleClearAll,
+              labels: footerLabels
+            }
+          ) })
         ]
       }
     )

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

@@ -3,6 +3,7 @@ import { useState, useRef, useEffect } from "react";
 import { Minimize2, Maximize2, X } from "lucide-react";
 import { Button } from "../ui/button.js";
 import { cn } from "../../lib/utils.js";
+import { SCROLL_REGION_TAB_INDEX } from "../../lib/scroll-region-tab-index.js";
 import { useScrollActivity } from "../../hooks/use-scroll-activity.js";
 import { DrawerExpandContext } from "../../context/drawer-expand-context.js";
 function DrawerShell({
@@ -86,6 +87,7 @@ function DrawerShell({
     "div",
     {
       ref: bodyScrollRef,
+      tabIndex: SCROLL_REGION_TAB_INDEX,
       className: "scrollbar-auto-hide min-h-0 flex-1 overflow-y-auto px-6 py-6",
       children
     }

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

@@ -8,6 +8,21 @@ import { Input } from "../ui/input.js";
 import { Combobox } from "../ui/combobox.js";
 import { isFilterValueEmpty, getDateRange, getNumberRange, getCompoundValue } from "./filter-values.js";
 import { hasActiveManagedFilters } from "./managed-filters.js";
+const DEFAULT_LABELS = {
+  closeFiltersAriaLabel: "Close filters",
+  closeFiltersTitle: "Close filters",
+  apply: "Apply",
+  clear: "Clear",
+  anyPlaceholder: "Any",
+  rangeFromPlaceholder: "From",
+  rangeToPlaceholder: "To",
+  fieldRangeFromAriaLabel: (fieldLabel) => `${fieldLabel} — from`,
+  fieldRangeToAriaLabel: (fieldLabel) => `${fieldLabel} — to`,
+  compoundSubRangeFromAriaLabel: (subLabel) => `${subLabel} — from`,
+  compoundSubRangeToAriaLabel: (subLabel) => `${subLabel} — to`,
+  compoundSubRangeFromPlaceholder: (subLabel) => `${subLabel} from`,
+  compoundSubRangeToPlaceholder: (subLabel) => `${subLabel} to`
+};
 function deriveInitialState(fields, filters) {
   const byId = new Map(filters.map((f) => [f.columnId, f.value]));
   const next = {};
@@ -24,8 +39,10 @@ function FilterFormPanel({
   className,
   id,
   onClose,
-  hiddenSubFilterKeys
+  hiddenSubFilterKeys,
+  labels: labelOverrides
 }) {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
   const hiddenSubSet = useMemo(() => new Set(hiddenSubFilterKeys ?? []), [hiddenSubFilterKeys]);
   const renderableFields = useMemo(
     () => fields.filter((id2) => {
@@ -100,8 +117,8 @@ function FilterFormPanel({
               type: "button",
               variant: "ghost",
               size: "icon",
-              "aria-label": "Close filters",
-              title: "Close filters",
+              "aria-label": labels.closeFiltersAriaLabel,
+              title: labels.closeFiltersTitle,
               onClick: onClose,
               className: "h-7 w-7",
               children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
@@ -118,7 +135,8 @@ function FilterFormPanel({
               value: state[fieldId],
               onChange: (v) => setField(fieldId, v),
               fieldId,
-              hiddenSubSet
+              hiddenSubSet,
+              labels
             },
             fieldId
           );
@@ -132,16 +150,16 @@ function FilterFormPanel({
               size: "sm",
               onClick: handleClear,
               disabled: isClearDisabled,
-              children: "Clear"
+              children: labels.clear
             }
           ),
-          /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: "Apply" })
+          /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: labels.apply })
         ] }) })
       ]
     }
   );
 }
-function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
+function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
   if (config.type === "text") {
     const text = Array.isArray(value) ? value[0] ?? "" : "";
     return /* @__PURE__ */ jsxs("label", { className: "flex min-w-0 flex-col gap-1.5", children: [
@@ -170,7 +188,7 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
           value: selected || null,
           onChange: (v) => onChange(v ? [v] : void 0),
           options: config.options ?? [],
-          placeholder: "Any",
+          placeholder: labels.anyPlaceholder,
           triggerAriaLabel: config.label,
           triggerClassName: "h-9 min-w-0"
         }
@@ -191,7 +209,7 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
           Input,
           {
             type: "date",
-            "aria-label": `${config.label} — from`,
+            "aria-label": labels.fieldRangeFromAriaLabel(config.label),
             value: range.from ?? "",
             onChange: update("from"),
             className: "h-9 min-w-0 flex-1"
@@ -201,7 +219,7 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
           Input,
           {
             type: "date",
-            "aria-label": `${config.label} — to`,
+            "aria-label": labels.fieldRangeToAriaLabel(config.label),
             value: range.to ?? "",
             onChange: update("to"),
             className: "h-9 min-w-0 flex-1"
@@ -225,10 +243,10 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
           Input,
           {
             type: "number",
-            "aria-label": `${config.label} — from`,
+            "aria-label": labels.fieldRangeFromAriaLabel(config.label),
             value: range.from ?? "",
             onChange: update("from"),
-            placeholder: "From",
+            placeholder: labels.rangeFromPlaceholder,
             className: "h-9 min-w-0 flex-1"
           }
         ),
@@ -236,10 +254,10 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
           Input,
           {
             type: "number",
-            "aria-label": `${config.label} — to`,
+            "aria-label": labels.fieldRangeToAriaLabel(config.label),
             value: range.to ?? "",
             onChange: update("to"),
-            placeholder: "To",
+            placeholder: labels.rangeToPlaceholder,
             className: "h-9 min-w-0 flex-1"
           }
         )
@@ -319,10 +337,10 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
                   Input,
                   {
                     type: "number",
-                    "aria-label": `${sub.label} — from`,
+                    "aria-label": labels.compoundSubRangeFromAriaLabel(sub.label),
                     value: range.from ?? "",
                     onChange: updateRange("from"),
-                    placeholder: `${sub.label} from`,
+                    placeholder: labels.compoundSubRangeFromPlaceholder(sub.label),
                     className: "h-9 min-w-0 flex-1"
                   }
                 ),
@@ -330,10 +348,10 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
                   Input,
                   {
                     type: "number",
-                    "aria-label": `${sub.label} — to`,
+                    "aria-label": labels.compoundSubRangeToAriaLabel(sub.label),
                     value: range.to ?? "",
                     onChange: updateRange("to"),
-                    placeholder: `${sub.label} to`,
+                    placeholder: labels.compoundSubRangeToPlaceholder(sub.label),
                     className: "h-9 min-w-0 flex-1"
                   }
                 )