@@ -0,0 +1,10 @@
+---
+'@object-ui/components': patch
+---
+
+fix(components): a grid's select-all draws a dash for a partial selection
+
+Clause-②: no
+Metadata-protocol: none
+
+With some but not all rows of the page selected, the data table's header checkbox was already announced as mixed (`aria-checked="mixed"`) but drew the same check mark as "all selected", so a user could read two selected rows as the whole page. It now draws a dash, filled like the checked state; all selected still draws the check and none selected draws nothing. The upstream Shadcn `Checkbox` is unchanged: the header uses a package-internal tri-state wrapper.
@@ -0,0 +1,50 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * TriStateCheckbox
+ *
+ * The Shadcn checkbox with a distinct mixed state: `checked="indeterminate"`
+ * draws a dash, `true` draws the check, `false` draws nothing. Radix's
+ * Indicator renders for both checked and indeterminate, and the upstream
+ * `ui/checkbox.tsx` hard-codes a check mark inside it, so a partial selection
+ * would read as "all selected".
+ *
+ * This lives in `custom/` to avoid modifying the Shadcn-synced
+ * `ui/checkbox.tsx`; its classes mirror that file, plus the indeterminate fill.
+ * Internal to this package: not re-exported from `custom/index.ts`.
+ */
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check, Minus } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+const TriStateCheckbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, checked, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    checked={checked}
+    className={cn(
+      'grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('grid place-content-center text-current')}>
+      {checked === 'indeterminate'
+        ? <Minus className="h-4 w-4" data-glyph="dash" />
+        : <Check className="h-4 w-4" data-glyph="check" />}
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+TriStateCheckbox.displayName = 'TriStateCheckbox';
+
+export { TriStateCheckbox };
@@ -0,0 +1,75 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * objectstack#27807 — with some rows selected, the header's select-all is
+ * announced as mixed AND drawn as a dash, never as the check mark that means
+ * "all selected". Controls: all selected draws the check; none draws nothing.
+ */
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import '../data-table';
+
+function renderTable() {
+  const DataTable = ComponentRegistry.get('data-table') as any;
+  return render(
+    <DataTable
+      schema={{
+        data: [
+          { id: 'a', name: 'Ada' },
+          { id: 'b', name: 'Grace' },
+          { id: 'c', name: 'Linus' },
+        ],
+        pagination: false,
+        searchable: false,
+        selectable: true,
+        columns: [{ header: 'Name', accessorKey: 'name' }],
+      }}
+    />,
+  );
+}
+
+function selectAllOf(container: HTMLElement) {
+  return container.querySelector('thead [data-slot="select-all"] [role="checkbox"]') as HTMLElement;
+}
+
+function rowCheckboxes(container: HTMLElement) {
+  return Array.from(container.querySelectorAll('tbody [data-slot="row-select"] [role="checkbox"]')) as HTMLElement[];
+}
+
+describe('data-table select-all mixed state (objectstack#27807)', () => {
+  it('a partial selection draws the dash, not the check, and stays aria-checked="mixed"', () => {
+    const { container } = renderTable();
+    const rows = rowCheckboxes(container);
+    expect(rows).toHaveLength(3);
+    fireEvent.click(rows[0]);
+    const header = selectAllOf(container);
+    expect(header).toHaveAttribute('aria-checked', 'mixed');
+    expect(header.querySelector('[data-glyph="dash"]')).not.toBeNull();
+    expect(header.querySelector('[data-glyph="check"]')).toBeNull();
+  });
+
+  it('control: all rows selected draws the check', () => {
+    const { container } = renderTable();
+    for (const row of rowCheckboxes(container)) fireEvent.click(row);
+    const header = selectAllOf(container);
+    expect(header).toHaveAttribute('aria-checked', 'true');
+    expect(header.querySelector('[data-glyph="check"]')).not.toBeNull();
+    expect(header.querySelector('[data-glyph="dash"]')).toBeNull();
+  });
+
+  it('control: no rows selected draws nothing', () => {
+    const { container } = renderTable();
+    const header = selectAllOf(container);
+    expect(header).toHaveAttribute('aria-checked', 'false');
+    expect(header.querySelector('svg')).toBeNull();
+  });
+});
@@ -31,6 +31,7 @@ import {
 import { Button } from '../../ui/button';
 import { Input } from '../../ui/input';
 import { Checkbox } from '../../ui/checkbox';
+import { TriStateCheckbox } from '../../custom/tri-state-checkbox';
 import {
   Select,
   SelectContent,
@@ -3142,7 +3143,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       absolutely placed checkbox. */}
                   {selectionMode === 'multiple' && (
                     <div data-slot="select-all" className={cn("flex items-center", showRowNumbers && "justify-center")}>
-                      <Checkbox
+                      <TriStateCheckbox
                         checked={allPageRowsSelected ? true : somePageRowsSelected ? 'indeterminate' : false}
                         onCheckedChange={handleSelectAll}
                         aria-label={t('table.selectAllRows')}