@leavepulse/ui 0.43.3 → 0.44.0

package/src/components/LpSegmented.vue

@@ -16,6 +16,7 @@ export default { inheritAttrs: false }
 import { Motion } from "motion-v"
 import { ToggleGroupItem, ToggleGroupRoot } from "reka-ui"
 import { useId } from "vue"
+import { useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { usePillTransition } from "../composables/usePillTransition"
 import LpIcon from "./LpIcon.vue"
@@ -25,6 +26,11 @@ export interface SegmentedOption {
   label?: string
   /** Optional iconify name shown before the label (or alone, icon-only). */
   icon?: string
+  /**
+   * Accessible name for an icon-only segment. Without it the raw `value` is
+   * announced, which is an identifier rather than words.
+   */
+  ariaLabel?: string
 }
 
 const props = withDefaults(
@@ -66,6 +72,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
   ].join(" "),
 )
 
+const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
+
 const pillId = `lp-segmented-${useId()}`
 const pillTransition = usePillTransition()
 </script>
@@ -74,7 +82,9 @@ const pillTransition = usePillTransition()
   <ToggleGroupRoot
     :model-value="modelValue"
     type="single"
-    :disabled="disabled"
+    :disabled="field.disabled"
+    :aria-labelledby="field.labelId"
+    :aria-describedby="field.describedBy"
     :rovingFocus="true"
     :class="rootClass"
     v-bind="rest"
@@ -84,7 +94,7 @@ const pillTransition = usePillTransition()
       v-for="opt in options"
       :key="opt.value"
       :value="opt.value"
-      :aria-label="opt.label ? undefined : opt.value"
+      :aria-label="opt.ariaLabel ?? (opt.label ? undefined : opt.value)"
       class="relative inline-flex h-full items-center justify-center gap-1.5 rounded-md px-3 font-medium outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] focus-visible:ring-2 focus-visible:ring-ring data-[state=on]:text-ink data-[state=off]:text-muted data-[state=off]:hover:text-ink disabled:cursor-not-allowed disabled:opacity-55"
       :class="block ? 'flex-1' : ''"
     >

package/src/components/LpShortcutsDialog.vue

@@ -18,8 +18,10 @@ import {
   activeShortcuts,
   appleModifierLabel,
   mergeShortcutGroups,
+  useAppleKeyboard,
   type ShortcutGroup,
 } from "../composables/useHotkeys"
+import { useLabels } from "../composables/useLpConfig"
 
 const props = withDefaults(
   defineProps<{
@@ -32,9 +34,12 @@ const props = withDefaults(
     /** Frosted glass panel, passed to LpModal. Follows `provideGlass` when unset. */
     glass?: boolean
   }>(),
-  { open: false, groups: () => [], live: false, title: "Keyboard shortcuts", glass: undefined },
+  { open: false, groups: () => [], live: false, title: undefined, glass: undefined },
 )
 
+const text = useLabels("shortcuts", { title: "Keyboard shortcuts" })
+const apple = useAppleKeyboard()
+
 /*
  * One key per "+", except a "+" that is the key itself: "Ctrl++" is Ctrl and
  * plus, not Ctrl and two blanks.
@@ -53,7 +58,7 @@ const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
     :glass="props.glass"
     :open="props.open"
     size="lg"
-    :title="props.title"
+    :title="props.title ?? text.title"
     :description="props.description"
     @update:open="(value: boolean) => emit('update:open', value)"
   >
@@ -65,7 +70,7 @@ const emit = defineEmits<{ (e: "update:open", value: boolean): void }>()
             <dt>{{ entry.label }}</dt>
             <dd>
               <kbd v-for="(key, index) in keysOf(entry.combo)" :key="`${key}-${index}`">
-                {{ appleModifierLabel(key.trim()) }}
+                {{ appleModifierLabel(key.trim(), apple) }}
               </kbd>
             </dd>
           </div>

package/src/components/LpSidebar.vue

@@ -14,6 +14,7 @@
  * the static <nav> it always has — existing call sites are unaffected.
  */
 import { computed, ref, useId } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import LpDrawer from "./LpDrawer.vue"
 import LpInput from "./LpInput.vue"
 import LpSidebarNav from "./LpSidebarNav.vue"
@@ -45,8 +46,10 @@ const props = withDefaults(
      * query is active — a hidden match is the same as no match.
      */
     searchable?: boolean
-    /** Placeholder for that field. */
+    /** Placeholder for that field (defaults to the `search` label). */
     searchPlaceholder?: string
+    /** Text overrides: `nav` names the landmark, `search` the filter field. */
+    labels?: Partial<{ nav: string; search: string }>
     /** The query, when the app wants to own it (v-model:search). */
     search?: string
     /** Show a skeleton placeholder instead of the items. */
@@ -113,7 +116,6 @@ const props = withDefaults(
     autoCollapseAfter?: number
   }>(),
   {
-    searchPlaceholder: "Search",
     skeletonRows: 6,
     skeletonHeader: true,
     responsive: false,
@@ -132,6 +134,9 @@ const emit = defineEmits<{
   (e: "update:search", value: string): void
 }>()
 
+const text = useLabels("sidebar", { nav: "Sidebar", search: "Search" }, () => props.labels)
+const placeholder = computed(() => props.searchPlaceholder ?? text.value.search)
+
 // Normalise both inputs to a single section list.
 const allGroups = computed<SidebarSection[]>(() =>
   props.sections ?? (props.items ? [{ items: props.items }] : []),
@@ -271,7 +276,7 @@ defineOptions({ inheritAttrs: false })
     class="h-full flex-col gap-1 p-3"
     :class="[railClass, chromeClass, width ? '' : 'w-60']"
     :style="width ? { width } : undefined"
-    aria-label="Sidebar"
+    :aria-label="text.nav"
     v-bind="$attrs"
   >
     <!-- Rail: edge-to-edge (negative margins cancel the p-3) and h-16 to match
@@ -298,8 +303,8 @@ defineOptions({ inheritAttrs: false })
       size="sm"
       icon="lucide:search"
       class="mb-2 shrink-0"
-      :placeholder="searchPlaceholder"
-      :aria-label="searchPlaceholder"
+      :placeholder="placeholder"
+      :aria-label="placeholder"
     />
     <LpSidebarNav
       :groups="groups"
@@ -339,7 +344,7 @@ defineOptions({ inheritAttrs: false })
     :edge-breakpoint="mobileBreakpoint"
     @update:open="(v) => emit('update:open', v)"
   >
-    <div class="flex h-full flex-col gap-1">
+    <nav class="flex h-full flex-col gap-1" :aria-label="text.nav">
       <div
         v-if="$slots.header"
         class="shrink-0"
@@ -357,8 +362,8 @@ defineOptions({ inheritAttrs: false })
         size="sm"
         icon="lucide:search"
         class="mb-2 shrink-0"
-        :placeholder="searchPlaceholder"
-        :aria-label="searchPlaceholder"
+        :placeholder="placeholder"
+        :aria-label="placeholder"
       />
       <LpSidebarNav
         :groups="groups"
@@ -383,6 +388,6 @@ defineOptions({ inheritAttrs: false })
       <div v-if="$slots.footer" class="mt-2 shrink-0 border-t border-line pt-3">
         <slot name="footer" />
       </div>
-    </div>
+    </nav>
   </LpDrawer>
 </template>

package/src/components/LpSidebarNav.vue

@@ -21,6 +21,8 @@ import LpContextMenu from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import type { SidebarItem, SidebarSection } from "./sidebar"
+import { resolveLink, type ResolvedLink } from "./link"
+import { useLinkComponent } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
@@ -75,6 +77,18 @@ function isOpen(section: SidebarSection): boolean {
 
 const pillTransition = usePillTransition()
 
+const linkComponent = useLinkComponent()
+
+/*
+ * A disabled item is always a disabled button: an anchor cannot be disabled,
+ * and the old enabled-button fallback for a disabled link stayed focusable.
+ */
+function rowOf(item: SidebarItem): ResolvedLink {
+  const link = item.disabled ? null : resolveLink(linkComponent.value, { to: item.to, href: item.href })
+  if (link) return link
+  return { is: "button", props: { type: "button", disabled: item.disabled || undefined } }
+}
+
 // The nav fills the remaining height with a fixed gap between groups; a short sidebar needs both under the consumer's control.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "flex min-h-0 flex-1 flex-col gap-4",
@@ -118,7 +132,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
            because a thing that reacts to a click must look like one. -->
       <CollapsibleTrigger
         v-if="section.title && section.collapsible"
-        class="group/section mt-2 flex cursor-pointer items-center gap-2 rounded-control px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-white/[0.04] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+        class="group/section mt-2 flex cursor-pointer items-center gap-2 rounded-control px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-ink/[0.04] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
       >
         <LpIcon
           v-if="section.icon"
@@ -165,10 +179,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :items="item.menu ?? []"
       >
         <component
-          :is="item.href && !item.disabled ? 'a' : 'button'"
-          :href="item.href && !item.disabled ? item.href : undefined"
-          :type="item.href ? undefined : 'button'"
-          :disabled="item.href ? undefined : item.disabled"
+          :is="rowOf(item).is"
+          v-bind="rowOf(item).props"
           :aria-current="itemActive(item) ? 'page' : undefined"
           :aria-disabled="item.disabled || undefined"
           class="group/item relative flex items-center gap-3 rounded-control px-3 py-2 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"

package/src/components/LpSkeleton.vue

@@ -88,7 +88,10 @@ const isBlock = computed(() => !slots.default)
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .lp-skeleton-item {
+  /* Repeats the descendant form: it outranks a bare class, and grouped items
+     kept pulsing under reduced motion. */
+  .lp-skeleton-item,
+  .lp-skeleton .lp-skeleton-item {
     animation: none;
     opacity: 0.75;
   }

package/src/components/LpSlider.vue

@@ -9,6 +9,7 @@ export default { inheritAttrs: false }
 // Single-value slider (reka Slider). reka models value as an array; we expose
 // a plain number for the common single-thumb case. Themed via tokens.
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui"
+import { useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
@@ -38,6 +39,8 @@ function onCommit(v: number[] | undefined) {
   if (v && v.length) emit("change", v[0])
 }
 
+const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
+
 // A slider is full-width by default; putting one in a toolbar means constraining it, and a fixed h-5 has to yield to a denser row.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55",
@@ -50,7 +53,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     :min="min"
     :max="max"
     :step="step"
-    :disabled="disabled"
+    :disabled="field.disabled"
     :class="rootClass"
     v-bind="rest"
     @update:model-value="onUpdate"
@@ -60,7 +63,10 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       <SliderRange class="absolute h-full rounded-pill bg-brand" />
     </SliderTrack>
     <SliderThumb
+      :id="field.id"
       :aria-label="ariaLabel"
+      :aria-labelledby="ariaLabel ? undefined : field.labelId"
+      :aria-describedby="field.describedBy"
       class="block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
     />
   </SliderRoot>

package/src/components/LpSparkline.vue

@@ -16,6 +16,7 @@
  */
 import { computed } from "vue"
 import { useReveal } from "../composables/useReveal"
+import { useLabels } from "../composables/useLpConfig"
 import { areaPath, extent, linePath, normalise, type Box } from "./chart"
 
 const props = withDefaults(
@@ -56,6 +57,7 @@ const props = withDefaults(
      * watched being drawn — not a figure mostly spent easing out.
      */
     duration?: number
+    labels?: Partial<Record<"empty" | "up" | "down" | "flat" | "latest", string>>
   }>(),
   { width: 84, height: 24, tone: "brand", smooth: 0.9, animate: true, duration: 900 },
 )
@@ -131,14 +133,20 @@ const lastPoint = computed(() => {
 const hasData = computed(() => series.value[0].values.some((v) => v != null))
 
 /* A bare <svg> is invisible to a screen reader; say the shape out loud. */
+const text = useLabels(
+  "sparkline",
+  { empty: "No data", up: "trending up", down: "trending down", flat: "flat", latest: "latest" },
+  () => props.labels,
+)
+
 const label = computed(() => {
   if (props.ariaLabel) return props.ariaLabel
   const values = series.value[0].values.filter((v): v is number => v != null)
-  if (!values.length) return "No data"
+  if (!values.length) return text.value.empty
   const first = values[0]
   const last = values[values.length - 1]
-  const dir = last > first ? "trending up" : last < first ? "trending down" : "flat"
-  return `${dir}, latest ${last}`
+  const dir = last > first ? text.value.up : last < first ? text.value.down : text.value.flat
+  return `${dir}, ${text.value.latest} ${last}`
 })
 
 /*

package/src/components/LpSwitch.vue

@@ -6,8 +6,9 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
-import { computed, useSlots } from "vue"
+import { computed, useId, useSlots } from "vue"
 import { SwitchRoot, SwitchThumb } from "reka-ui"
+import { useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
 const props = withDefaults(
@@ -46,31 +47,53 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() => {
     : "inline-flex cursor-pointer items-center gap-2 text-sm text-ink"
 })
 
+// Whatever is not class (name, aria-*, @focus…) belongs to the switch itself,
+// labelled or not: on the label row it would land on the <label>.
+const field = useFieldControl(() => ({
+  wrapped: false,
+  id: typeof rest.value.id === "string" ? rest.value.id : undefined,
+  disabled: props.disabled,
+}))
+const descriptionId = `${useId()}-description`
+const describedBy = computed(
+  () => [props.description && labelled.value ? descriptionId : "", field.value.describedBy ?? ""].filter(Boolean).join(" ") || undefined,
+)
+
 function onUpdate(value: boolean) {
   emit("update:modelValue", value)
 }
 </script>
 
 <template>
-  <label v-if="labelled" :class="[rootClass, disabled && 'cursor-not-allowed']" v-bind="rest">
+  <label v-if="labelled" :class="[rootClass, field.disabled && 'cursor-not-allowed']">
     <span v-if="labelPosition === 'start'" class="flex min-w-0 flex-col">
       <slot>{{ label }}</slot>
-      <span v-if="description" class="text-xs text-muted">{{ description }}</span>
+      <span v-if="description" :id="descriptionId" class="text-xs text-muted">{{ description }}</span>
     </span>
-    <SwitchRoot :model-value="modelValue" :disabled="disabled" :class="TRACK" @update:model-value="onUpdate">
+    <SwitchRoot
+      v-bind="rest"
+      :id="field.id"
+      :model-value="modelValue"
+      :disabled="field.disabled"
+      :aria-describedby="describedBy"
+      :class="TRACK"
+      @update:model-value="onUpdate"
+    >
       <SwitchThumb :class="THUMB" />
     </SwitchRoot>
     <span v-if="labelPosition === 'end'" class="flex min-w-0 flex-col">
       <slot>{{ label }}</slot>
-      <span v-if="description" class="text-xs text-muted">{{ description }}</span>
+      <span v-if="description" :id="descriptionId" class="text-xs text-muted">{{ description }}</span>
     </span>
   </label>
   <SwitchRoot
     v-else
+    v-bind="rest"
+    :id="field.id"
     :model-value="modelValue"
-    :disabled="disabled"
+    :disabled="field.disabled"
+    :aria-describedby="describedBy"
     :class="rootClass"
-    v-bind="rest"
     @update:model-value="onUpdate"
   >
     <SwitchThumb :class="THUMB" />

package/src/components/LpTable.vue

@@ -13,6 +13,8 @@ import LpPagination from "./LpPagination.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import { useAsyncTask } from "../composables/useAsyncTask"
 import { useRovingFocus } from "../composables/useRovingFocus"
+import { useLabels } from "../composables/useLpConfig"
+import { compareValues } from "./tableSort"
 
 export interface TableColumn<Row> {
   key: string
@@ -21,6 +23,10 @@ export interface TableColumn<Row> {
   width?: string
   /** Allow clicking the header to sort by this column. */
   sortable?: boolean
+  /** The value this column sorts by, when the cell holds something else. */
+  sortValue?: (row: Row) => unknown
+  /** Full control over the order; wins over `sortValue`. Ascending order. */
+  compare?: (a: Row, b: Row) => number
   /**
    * Offer "show only these values" in the header's menu, built from the values
    * actually present in the rows. For a column that holds a small vocabulary —
@@ -38,6 +44,19 @@ export interface TableColumn<Row> {
   alwaysVisible?: boolean
 }
 
+export interface TableLabels {
+  [key: string]: string
+  loading: string
+  error: string
+  empty: string
+  sortAsc: string
+  sortDesc: string
+  sortClear: string
+  filter: string
+  showAll: string
+  columns: string
+}
+
 export interface SortState {
   key: string
   dir: "asc" | "desc"
@@ -68,6 +87,7 @@ export interface TablePage<Row> {
 
 type RowKey = string | number
 
+
 const props = withDefaults(
   defineProps<{
     columns: TableColumn<T>[]
@@ -86,7 +106,11 @@ const props = withDefaults(
     debounce?: number
     loadingLabel?: string
     errorLabel?: string
-    /** Stable id per row — required for selection; falls back to index otherwise. */
+    /**
+     * Stable id per row. Without it a row is keyed by its position in `rows`,
+     * which survives sorting and filtering but not a new array; set it whenever
+     * rows are replaced (`load`, polling) and selection must carry over.
+     */
     rowKey?: keyof T | ((row: T) => RowKey)
     emptyLabel?: string
     emptyIcon?: string
@@ -111,27 +135,50 @@ const props = withDefaults(
     filterLabel?: string
     showAllLabel?: string
     columnsLabel?: string
+    /** All of the wording above in one object, and the config-level scope "table". */
+    labels?: Partial<TableLabels>
   }>(),
   {
     rows: () => [],
     pageSize: 25,
     debounce: 150,
-    loadingLabel: "Loading…",
-    errorLabel: "Could not load",
-    emptyLabel: "Nothing here yet",
     emptyIcon: "lucide:inbox",
     selectable: false,
     selected: () => [],
-    sort: null,
-    sortAscLabel: "Sort ascending",
-    sortDescLabel: "Sort descending",
-    sortClearLabel: "Clear sorting",
-    filterLabel: "Show only",
-    showAllLabel: "Show all",
-    columnsLabel: "Columns",
+    // undefined, not null: null is a parent saying "unsorted", undefined is no
+    // parent at all, and only the latter lets the table keep its own sort.
+    sort: undefined,
   },
 )
 
+const labelSet = useLabels<TableLabels>(
+  "table",
+  {
+    loading: "Loading…",
+    error: "Could not load",
+    empty: "Nothing here yet",
+    sortAsc: "Sort ascending",
+    sortDesc: "Sort descending",
+    sortClear: "Clear sorting",
+    filter: "Show only",
+    showAll: "Show all",
+    columns: "Columns",
+  },
+  () => props.labels,
+)
+const text = computed<TableLabels>(() => ({
+  ...labelSet.value,
+  loading: props.loadingLabel ?? labelSet.value.loading,
+  error: props.errorLabel ?? labelSet.value.error,
+  empty: props.emptyLabel ?? labelSet.value.empty,
+  sortAsc: props.sortAscLabel ?? labelSet.value.sortAsc,
+  sortDesc: props.sortDescLabel ?? labelSet.value.sortDesc,
+  sortClear: props.sortClearLabel ?? labelSet.value.sortClear,
+  filter: props.filterLabel ?? labelSet.value.filter,
+  showAll: props.showAllLabel ?? labelSet.value.showAll,
+  columns: props.columnsLabel ?? labelSet.value.columns,
+}))
+
 /*
  * Layout classes belong on the root, not on the scroll area. Since the pager
  * wrapper became the root, a caller's `min-h-0 flex-1` landed on the inner
@@ -156,7 +203,9 @@ const emit = defineEmits<{
 function keyFor(row: T, index: number): RowKey {
   if (typeof props.rowKey === "function") return props.rowKey(row)
   if (props.rowKey) return row[props.rowKey] as RowKey
-  return index
+  // Position in the source, not in the sorted view: a sort must not move a
+  // tick from one row to another.
+  return sourceIndex.value.get(row) ?? index
 }
 
 function alignClass(align?: "left" | "right" | "center"): string {
@@ -207,7 +256,7 @@ const contextMenu = computed<ContextMenuItemDef[]>(() => {
 // emitted an event nobody was listening for, and left the rows exactly as they
 // were: a control that answers a click by doing nothing.
 const ownSort = ref<SortState | null>(null)
-const activeSort = computed(() => props.sort ?? ownSort.value)
+const activeSort = computed(() => (props.sort !== undefined ? props.sort : ownSort.value))
 
 // ── server-backed rows ───────────────────────────────────────
 const loaded = shallowRef<T[]>([])
@@ -219,6 +268,7 @@ const task = useAsyncTask<TablePage<T>>()
 const loading = task.pending
 
 const sourceRows = computed<T[]>(() => (props.load ? loaded.value : props.rows))
+const sourceIndex = computed(() => new Map(sourceRows.value.map((row, i) => [row, i])))
 
 // The tallest page shown so far, held as a floor: the last page is usually
 // short, and without it the pager below jumps up the moment you reach it.
@@ -321,17 +371,13 @@ const displayRows = computed<T[]>(() => {
   const col = props.columns.find((c) => c.key === s.key)
   if (!col?.sortable) return filteredRows.value
   const factor = s.dir === "asc" ? 1 : -1
-  return [...filteredRows.value].sort((a, b) => compare(a[s.key], b[s.key]) * factor)
+  const own = col.compare
+  const value = col.sortValue ?? ((row: T) => row[s.key])
+  return [...filteredRows.value].sort(
+    (a, b) => (own ? own(a, b) : compareValues(value(a), value(b))) * factor,
+  )
 })
 
-function compare(a: unknown, b: unknown): number {
-  if (a == null && b == null) return 0
-  if (a == null) return -1
-  if (b == null) return 1
-  if (typeof a === "number" && typeof b === "number") return a - b
-  return String(a).localeCompare(String(b), undefined, { numeric: true })
-}
-
 function toggleSort(col: TableColumn<T>) {
   if (!col.sortable) return
   const s = activeSort.value
@@ -377,19 +423,19 @@ function headerMenu(col: TableColumn<T>): ContextMenuItemDef[] {
   if (col.sortable) {
     items.push(
       {
-        label: props.sortAscLabel,
+        label: text.value.sortAsc,
         icon: "lucide:arrow-up",
         disabled: s?.key === col.key && s.dir === "asc",
         onSelect: set({ key: col.key, dir: "asc" }),
       },
       {
-        label: props.sortDescLabel,
+        label: text.value.sortDesc,
         icon: "lucide:arrow-down",
         disabled: s?.key === col.key && s.dir === "desc",
         onSelect: set({ key: col.key, dir: "desc" }),
       },
       {
-        label: props.sortClearLabel,
+        label: text.value.sortClear,
         icon: "lucide:x",
         disabled: !s,
         onSelect: set(null),
@@ -402,7 +448,7 @@ function headerMenu(col: TableColumn<T>): ContextMenuItemDef[] {
   if (col.filterable) {
     const hidden = hiddenValues.value[col.key]
     items.push({
-      label: props.filterLabel,
+      label: text.value.filter,
       icon: "lucide:filter",
       separatorBefore: items.length > 0,
       children: [
@@ -412,7 +458,7 @@ function headerMenu(col: TableColumn<T>): ContextMenuItemDef[] {
           onSelect: () => toggleValue(col.key, value),
         })),
         {
-          label: props.showAllLabel,
+          label: text.value.showAll,
           icon: "lucide:list",
           separatorBefore: true,
           disabled: !hidden?.size,
@@ -435,7 +481,7 @@ function tableMenu(): ContextMenuItemDef[] {
   if (!offered.length) return []
   return [
     {
-      label: props.columnsLabel,
+      label: text.value.columns,
       icon: "lucide:columns-3",
       children: offered.map((col) => ({
         label: col.label,
@@ -462,6 +508,13 @@ function fetchPage(delay = 0) {
   task.run((signal) => load(query, signal), {
     delay,
     apply: (result) => {
+      // Rows deleted from the last page leave it past the end; step back to
+      // the page that now exists rather than strand the user on an empty one.
+      const last = Math.max(1, Math.ceil(result.total / props.pageSize))
+      if (page.value > last) {
+        page.value = last
+        return
+      }
       loaded.value = result.rows
       total.value = result.total
       facets.value = result.facets ?? {}
@@ -488,7 +541,8 @@ defineExpose({ reload: () => fetchPage() })
 
 // ── selection ────────────────────────────────────────────────
 const selectedSet = computed(() => new Set(props.selected))
-const allKeys = computed(() => sourceRows.value.map((r, i) => keyFor(r, i)))
+// "All" is what the user can see: rows a header filter hides are left alone.
+const allKeys = computed(() => filteredRows.value.map((r, i) => keyFor(r, i)))
 const allChecked = computed(
   () => allKeys.value.length > 0 && allKeys.value.every((k) => selectedSet.value.has(k)),
 )
@@ -497,7 +551,12 @@ const someChecked = computed(
 )
 
 function toggleAll(checked: boolean) {
-  emit("update:selected", checked ? [...allKeys.value] : [])
+  const next = new Set(selectedSet.value)
+  for (const key of allKeys.value) {
+    if (checked) next.add(key)
+    else next.delete(key)
+  }
+  emit("update:selected", [...next])
 }
 
 function toggleRow(key: RowKey, checked: boolean) {
@@ -507,7 +566,7 @@ function toggleRow(key: RowKey, checked: boolean) {
   emit("update:selected", [...next])
 }
 
-const colSpan = computed(() => props.columns.length + (props.selectable ? 1 : 0))
+const colSpan = computed(() => visibleColumns.value.length + (props.selectable ? 1 : 0))
 
 /*
  * Keyboard navigation over the rows. A table is one Tab stop, not one per row:
@@ -703,7 +762,7 @@ const barInsetTop = computed(() =>
               class="mx-auto mb-2 opacity-60"
               :class="loading ? 'animate-spin' : ''"
             />
-            <div>{{ loading ? loadingLabel : failed ? errorLabel : emptyLabel }}</div>
+            <div>{{ loading ? text.loading : failed ? text.error : text.empty }}</div>
           </td>
         </tr>
         <!-- A plain <tr>, because TransitionGroup animates element children and