@charcuterie/ui 2.13.0 → 2.14.0

package/dist/QueryBuilder/QueryBuilder.d.ts

@@ -3,6 +3,8 @@ import type { ReactNode } from "react";
 export type QueryBuilderLabels = {
     addGroup?: string;
     addLeaf?: string;
+    /** The caption over each group's combinator picker. */
+    match?: string;
     removeGroup?: string;
     removeLeaf?: string;
 };
@@ -19,6 +21,35 @@ export type QueryBuilderProps<Combinator, Leaf> = {
     /** The value a fresh leaf is born with when "+ Condition" is pressed. */
     createLeafValue: () => Leaf;
     labels?: QueryBuilderLabels;
+    /**
+     * The group's combinator control, when one `Listbox` over a flat
+     * option list is the wrong shape for it.
+     *
+     * Optional, and the default is the right answer for most consumers:
+     * a combinator that is a plain enum reads as one picker. But a
+     * combinator can be a *composite* — mux-magic's is a quantifier
+     * (ANY/ALL/NO) crossed with a target (a nested group, a style row,
+     * a script-info block), and the legal pairs are asymmetric
+     * (`notAllScriptInfo` exists, `notAllStyle` does not). Flattened
+     * into one list that is nine options where the user is making two
+     * choices, and the illegal pairs are invisible until they are
+     * missing.
+     *
+     * So the combinator is app-ownable for the same reason `renderLeaf`
+     * is: `Combinator` is opaque here, and only the app knows whether
+     * its shape is an enum or a product. `options` and the current
+     * `value` are handed over unchanged; the app calls `onChange` with a
+     * real `Combinator`.
+     */
+    renderCombinator?: (args: {
+        nodeId: string;
+        onChange: (combinator: Combinator) => void;
+        options: readonly {
+            label: string;
+            value: Combinator;
+        }[];
+        value: Combinator;
+    }) => ReactNode;
     /**
      * The leaf UI, owned by the app. `QueryBuilder` knows nothing about
      * what a condition *is* — a field/operator/value triple, a
@@ -60,5 +91,5 @@ export type QueryBuilderProps<Combinator, Leaf> = {
  * renders groups, and both are rendered inside a `.map`, which is
  * exactly the shape the member-file rule is for.
  */
-export declare const QueryBuilder: <Combinator, Leaf>({ combinatorOptions, createLeafValue, labels, renderLeaf, tree, }: QueryBuilderProps<Combinator, Leaf>) => ReactNode;
+export declare const QueryBuilder: <Combinator, Leaf>({ combinatorOptions, createLeafValue, labels, renderCombinator, renderLeaf, tree, }: QueryBuilderProps<Combinator, Leaf>) => ReactNode;
 //# sourceMappingURL=QueryBuilder.d.ts.map

package/dist/QueryBuilder/QueryBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.d.ts","sourceRoot":"","sources":["../../src/QueryBuilder/QueryBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAK9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,UAAU,EAAE,IAAI,IAAI;IAChD;;;;OAIG;IACH,iBAAiB,EAAE,SAAS;QAC1B,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,UAAU,CAAA;KAClB,EAAE,CAAA;IACH,yEAAyE;IACzE,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B;;;;;OAKG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE;QACjB,MAAM,EAAE,MAAM,CAAA;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;QAC/B,KAAK,EAAE,IAAI,CAAA;KACZ,KAAK,SAAS,CAAA;IACf;;;;;OAKG;IACH,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;CAC7B,CAAA;AASD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,YAAY,GAAI,UAAU,EAAE,IAAI,EAAE,mEAM5C,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,KAAG,SAiBxC,CAAA"}
+{"version":3,"file":"QueryBuilder.d.ts","sourceRoot":"","sources":["../../src/QueryBuilder/QueryBuilder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAK9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,iBAAiB,CAAC,UAAU,EAAE,IAAI,IAAI;IAChD;;;;OAIG;IACH,iBAAiB,EAAE,SAAS;QAC1B,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,UAAU,CAAA;KAClB,EAAE,CAAA;IACH,yEAAyE;IACzE,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B;;;;;;;;;;;;;;;;;;;OAmBG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QACxB,MAAM,EAAE,MAAM,CAAA;QACd,QAAQ,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAA;QAC1C,OAAO,EAAE,SAAS;YAChB,KAAK,EAAE,MAAM,CAAA;YACb,KAAK,EAAE,UAAU,CAAA;SAClB,EAAE,CAAA;QACH,KAAK,EAAE,UAAU,CAAA;KAClB,KAAK,SAAS,CAAA;IACf;;;;;OAKG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE;QACjB,MAAM,EAAE,MAAM,CAAA;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;QAC/B,KAAK,EAAE,IAAI,CAAA;KACZ,KAAK,SAAS,CAAA;IACf;;;;;OAKG;IACH,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;CAC7B,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,YAAY,GAAI,UAAU,EAAE,IAAI,EAAE,qFAO5C,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,KAAG,SAkBxC,CAAA"}

package/dist/QueryBuilder/QueryBuilder.js

@@ -4,6 +4,7 @@ import { QueryBuilderGroup } from "./QueryBuilderGroup.js";
 const DEFAULT_LABELS = {
     addGroup: "Add group",
     addLeaf: "Add condition",
+    match: "Match",
     removeGroup: "Remove group",
     removeLeaf: "Remove condition",
 };
@@ -29,9 +30,9 @@ const DEFAULT_LABELS = {
  * renders groups, and both are rendered inside a `.map`, which is
  * exactly the shape the member-file rule is for.
  */
-export const QueryBuilder = ({ combinatorOptions, createLeafValue, labels, renderLeaf, tree, }) => {
+export const QueryBuilder = ({ combinatorOptions, createLeafValue, labels, renderCombinator, renderLeaf, tree, }) => {
     const state = useStoreValue(tree);
     const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    return (_jsx(QueryBuilderGroup, { combinatorOptions: combinatorOptions, createLeafValue: createLeafValue, depth: 0, labels: resolvedLabels, node: selectRootGroup(state), renderLeaf: renderLeaf, state: state, tree: tree }));
+    return (_jsx(QueryBuilderGroup, { combinatorOptions: combinatorOptions, createLeafValue: createLeafValue, depth: 0, labels: resolvedLabels, node: selectRootGroup(state), renderCombinator: renderCombinator, renderLeaf: renderLeaf, state: state, tree: tree }));
 };
 //# sourceMappingURL=QueryBuilder.js.map

package/dist/QueryBuilder/QueryBuilder.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.js","sourceRoot":"","sources":["../../src/QueryBuilder/QueryBuilder.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,eAAe,EACf,aAAa,GACd,MAAM,oBAAoB,CAAA;AAG3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAA;AA0C3D,MAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,WAAW;IACrB,OAAO,EAAE,eAAe;IACxB,WAAW,EAAE,cAAc;IAC3B,UAAU,EAAE,kBAAkB;CACQ,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAmB,EAC7C,iBAAiB,EACjB,eAAe,EACf,MAAM,EACN,UAAU,EACV,IAAI,GACgC,EAAa,EAAE;IACnD,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,CAAA;IAEjC,MAAM,cAAc,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,MAAM,EAAE,CAAA;IAEvD,OAAO,CACL,KAAC,iBAAiB,IAChB,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,cAAc,EACtB,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,EAC5B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,GACV,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"QueryBuilder.js","sourceRoot":"","sources":["../../src/QueryBuilder/QueryBuilder.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,eAAe,EACf,aAAa,GACd,MAAM,oBAAoB,CAAA;AAG3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAA;AAyE3D,MAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,WAAW;IACrB,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,cAAc;IAC3B,UAAU,EAAE,kBAAkB;CACQ,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAmB,EAC7C,iBAAiB,EACjB,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,IAAI,GACgC,EAAa,EAAE;IACnD,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,CAAA;IAEjC,MAAM,cAAc,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,MAAM,EAAE,CAAA;IAEvD,OAAO,CACL,KAAC,iBAAiB,IAChB,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,cAAc,EACtB,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,GACV,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/QueryBuilder/QueryBuilderCombinator.d.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+export type QueryBuilderCombinatorProps<Combinator> = {
+    /** The visible caption above the control, e.g. "Match". */
+    label: string;
+    onChange: (combinator: Combinator) => void;
+    options: readonly {
+        label: string;
+        value: Combinator;
+    }[];
+    value: Combinator;
+};
+/**
+ * One group's combinator picker.
+ *
+ * A `Listbox`, not a native `Select`, per
+ * [the 2026-08-10 demotion](../../../../docs/decisions/2026-08-10-listbox-and-combobox-are-the-default-and-select-is-demoted.md).
+ * `QueryBuilder` shipped in #84 with a `Select` the day after that
+ * record landed; `charcuterie/prefer-listbox-over-select` did not
+ * catch it because the component-choice block is scoped to app
+ * packages and exempts this one — right for a primitive, wrong for a
+ * composite an app consumes whole.
+ *
+ * ### Why this is its own file
+ *
+ * `Listbox` needs a visibility state, and a group renders one picker
+ * per group inside a recursive `.map`. A hook cannot be called there,
+ * so the picker becomes a component — the same member-file case as
+ * `QueryBuilderRow`.
+ *
+ * ### The name, and why it is not a `Field`
+ *
+ * `Field` wires `<label htmlFor>` by cloning its `id` onto the
+ * control. `Listbox`'s trigger cannot take one: `useAnchoredOverlay`
+ * overwrites the cloned trigger's `id` with the one the panel points
+ * `aria-labelledby` at, so the label would address an element that no
+ * longer carries that id — the exact defect `Field` exists to
+ * prevent. So the caption is plain text and the trigger is named with
+ * `aria-label`.
+ *
+ * That name is `"<label>: <current value>"` rather than bare
+ * `"<label>"` on purpose: the button's visible text is the current
+ * combinator, and WCAG 2.5.3 wants the visible text contained in the
+ * accessible name. "Match" alone would fail it; "Match: ALL — every
+ * condition" reads correctly and keeps each group's control findable
+ * by name.
+ *
+ * The combinator stays opaque here exactly as it is in the rest of
+ * the component: `String(value)` bridges it to the string-valued
+ * `Listbox`, and a selection is mapped back to the real `Combinator`
+ * before it leaves.
+ */
+export declare const QueryBuilderCombinator: <Combinator>({ label, onChange, options, value, }: QueryBuilderCombinatorProps<Combinator>) => ReactNode;
+//# sourceMappingURL=QueryBuilderCombinator.d.ts.map

package/dist/QueryBuilder/QueryBuilderCombinator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBuilderCombinator.d.ts","sourceRoot":"","sources":["../../src/QueryBuilder/QueryBuilderCombinator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,2BAA2B,CAAC,UAAU,IAAI;IACpD,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAA;IAC1C,OAAO,EAAE,SAAS;QAChB,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,UAAU,CAAA;KAClB,EAAE,CAAA;IACH,KAAK,EAAE,UAAU,CAAA;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,sBAAsB,GAAI,UAAU,EAAG,sCAKjD,2BAA2B,CAAC,UAAU,CAAC,KAAG,SA6C5C,CAAA"}

package/dist/QueryBuilder/QueryBuilderCombinator.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useVisibility } from "@charcuterie/logic";
+import { Button } from "../Button/Button.js";
+import { Listbox } from "../Listbox/Listbox.js";
+/**
+ * One group's combinator picker.
+ *
+ * A `Listbox`, not a native `Select`, per
+ * [the 2026-08-10 demotion](../../../../docs/decisions/2026-08-10-listbox-and-combobox-are-the-default-and-select-is-demoted.md).
+ * `QueryBuilder` shipped in #84 with a `Select` the day after that
+ * record landed; `charcuterie/prefer-listbox-over-select` did not
+ * catch it because the component-choice block is scoped to app
+ * packages and exempts this one — right for a primitive, wrong for a
+ * composite an app consumes whole.
+ *
+ * ### Why this is its own file
+ *
+ * `Listbox` needs a visibility state, and a group renders one picker
+ * per group inside a recursive `.map`. A hook cannot be called there,
+ * so the picker becomes a component — the same member-file case as
+ * `QueryBuilderRow`.
+ *
+ * ### The name, and why it is not a `Field`
+ *
+ * `Field` wires `<label htmlFor>` by cloning its `id` onto the
+ * control. `Listbox`'s trigger cannot take one: `useAnchoredOverlay`
+ * overwrites the cloned trigger's `id` with the one the panel points
+ * `aria-labelledby` at, so the label would address an element that no
+ * longer carries that id — the exact defect `Field` exists to
+ * prevent. So the caption is plain text and the trigger is named with
+ * `aria-label`.
+ *
+ * That name is `"<label>: <current value>"` rather than bare
+ * `"<label>"` on purpose: the button's visible text is the current
+ * combinator, and WCAG 2.5.3 wants the visible text contained in the
+ * accessible name. "Match" alone would fail it; "Match: ALL — every
+ * condition" reads correctly and keeps each group's control findable
+ * by name.
+ *
+ * The combinator stays opaque here exactly as it is in the rest of
+ * the component: `String(value)` bridges it to the string-valued
+ * `Listbox`, and a selection is mapped back to the real `Combinator`
+ * before it leaves.
+ */
+export const QueryBuilderCombinator = ({ label, onChange, options, value, }) => {
+    const { hide, isVisible, toggle } = useVisibility();
+    const currentOption = options.find((option) => String(option.value) === String(value));
+    const currentLabel = currentOption?.label ?? "";
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "font-medium text-content-primary text-sm", children: label }), _jsx(Listbox, { isVisible: isVisible, onDismiss: hide, onSelect: (nextValue) => {
+                    const match = options.find((option) => String(option.value) === nextValue);
+                    if (match) {
+                        onChange(match.value);
+                    }
+                }, options: options.map((option) => ({
+                    label: option.label,
+                    value: String(option.value),
+                })), selectedValue: String(value), trigger: _jsx(Button, { appearance: "outline", "aria-label": `${label}: ${currentLabel}`, intent: "neutral", onClick: toggle, children: currentLabel }) })] }));
+};
+//# sourceMappingURL=QueryBuilderCombinator.js.map

package/dist/QueryBuilder/QueryBuilderCombinator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBuilderCombinator.js","sourceRoot":"","sources":["../../src/QueryBuilder/QueryBuilderCombinator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAwB,CAAA;AAahD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAc,EAClD,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAK,GACmC,EAAa,EAAE;IACvD,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAEnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAChC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC,KAAK,CAAC,CACnD,CAAA;IAED,MAAM,YAAY,GAAG,aAAa,EAAE,KAAK,IAAI,EAAE,CAAA;IAE/C,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,eAAM,SAAS,EAAC,0CAA0C,YACvD,KAAK,GACD,EAEP,KAAC,OAAO,IACN,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,IAAI,EACf,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE;oBACtB,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CACxB,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,SAAS,CAC/C,CAAA;oBAED,IAAI,KAAK,EAAE,CAAC;wBACV,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;oBACvB,CAAC;gBACH,CAAC,EACD,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;oBAChC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACnB,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;iBAC5B,CAAC,CAAC,EACH,aAAa,EAAE,MAAM,CAAC,KAAK,CAAC,EAC5B,OAAO,EACL,KAAC,MAAM,IACL,UAAU,EAAC,SAAS,gBACR,GAAG,KAAK,KAAK,YAAY,EAAE,EACvC,MAAM,EAAC,SAAS,EAChB,OAAO,EAAE,MAAM,YAEd,YAAY,GACN,GAEX,IACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/QueryBuilder/QueryBuilderGroup.d.ts

@@ -11,6 +11,15 @@ export type QueryBuilderGroupProps<Combinator, Leaf> = {
     depth: number;
     labels: Required<QueryBuilderLabels>;
     node: TreeGroupNode<Combinator>;
+    renderCombinator?: (args: {
+        nodeId: string;
+        onChange: (combinator: Combinator) => void;
+        options: readonly {
+            label: string;
+            value: Combinator;
+        }[];
+        value: Combinator;
+    }) => ReactNode;
     renderLeaf: (args: {
         nodeId: string;
         onChange: (value: Leaf) => void;
@@ -20,18 +29,14 @@ export type QueryBuilderGroupProps<Combinator, Leaf> = {
     tree: Tree<Combinator, Leaf>;
 };
 /**
- * One match group: a "Match" combinator select, its children (leaf
+ * One match group: a "Match" combinator picker, its children (leaf
  * rows and nested groups), and a toolbar to add either. Its own file
  * because it renders itself recursively for nested groups and is
  * itself rendered inside the parent's `.map` — the member-file case.
  *
- * The combinator is opaque, so the native `Select` (which speaks
- * strings) is bridged by `String(value)`: options carry the
- * stringified combinator, and a change is mapped back to the real
- * `Combinator` before it reaches `setCombinator`. That keeps
- * `Combinator` fully generic while still using the platform control
- * that brings type-ahead, the mobile wheel, and form semantics for
- * free.
+ * The picker is `QueryBuilderCombinator`, a `Listbox` rather than the
+ * native `Select` this shipped with — see that file for why it is a
+ * component and how it stays generic over an opaque `Combinator`.
  */
-export declare const QueryBuilderGroup: <Combinator, Leaf>({ combinatorOptions, createLeafValue, depth, labels, node, renderLeaf, state, tree, }: QueryBuilderGroupProps<Combinator, Leaf>) => ReactNode;
+export declare const QueryBuilderGroup: <Combinator, Leaf>({ combinatorOptions, createLeafValue, depth, labels, node, renderCombinator, renderLeaf, state, tree, }: QueryBuilderGroupProps<Combinator, Leaf>) => ReactNode;
 //# sourceMappingURL=QueryBuilderGroup.d.ts.map

package/dist/QueryBuilder/QueryBuilderGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilderGroup.d.ts","sourceRoot":"","sources":["../../src/QueryBuilder/QueryBuilderGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,IAAI,EACJ,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAA;AAE3B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAG5D,MAAM,MAAM,sBAAsB,CAAC,UAAU,EAAE,IAAI,IAAI;IACrD,iBAAiB,EAAE,SAAS;QAC1B,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,UAAU,CAAA;KAClB,EAAE,CAAA;IACH,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAA;IACpC,IAAI,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IAC/B,UAAU,EAAE,CAAC,IAAI,EAAE;QACjB,MAAM,EAAE,MAAM,CAAA;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;QAC/B,KAAK,EAAE,IAAI,CAAA;KACZ,KAAK,SAAS,CAAA;IACf,KAAK,EAAE,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;IAClC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;CAC7B,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,EAAE,IAAI,EAAE,uFASjD,sBAAsB,CAAC,UAAU,EAAE,IAAI,CAAC,KAAG,SA6H7C,CAAA"}
+{"version":3,"file":"QueryBuilderGroup.d.ts","sourceRoot":"","sources":["../../src/QueryBuilder/QueryBuilderGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,IAAI,EACJ,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAA;AAE3B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAI5D,MAAM,MAAM,sBAAsB,CAAC,UAAU,EAAE,IAAI,IAAI;IACrD,iBAAiB,EAAE,SAAS;QAC1B,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,UAAU,CAAA;KAClB,EAAE,CAAA;IACH,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAA;IACpC,IAAI,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IAC/B,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QACxB,MAAM,EAAE,MAAM,CAAA;QACd,QAAQ,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAA;QAC1C,OAAO,EAAE,SAAS;YAChB,KAAK,EAAE,MAAM,CAAA;YACb,KAAK,EAAE,UAAU,CAAA;SAClB,EAAE,CAAA;QACH,KAAK,EAAE,UAAU,CAAA;KAClB,KAAK,SAAS,CAAA;IACf,UAAU,EAAE,CAAC,IAAI,EAAE;QACjB,MAAM,EAAE,MAAM,CAAA;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;QAC/B,KAAK,EAAE,IAAI,CAAA;KACZ,KAAK,SAAS,CAAA;IACf,KAAK,EAAE,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;IAClC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;CAC7B,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAU,EAAE,IAAI,EAAE,yGAUjD,sBAAsB,CAAC,UAAU,EAAE,IAAI,CAAC,KAAG,SA4H7C,CAAA"}

package/dist/QueryBuilder/QueryBuilderGroup.js

@@ -2,45 +2,39 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { selectChildNodes } from "@charcuterie/logic";
 import { Button } from "../Button/Button.js";
 import { Card } from "../Card/Card.js";
-import { Field } from "../Field/Field.js";
 import { IconButton } from "../IconButton/IconButton.js";
-import { Select } from "../Select/Select.js";
 import { toClassName } from "../toClassName.js";
+import { QueryBuilderCombinator } from "./QueryBuilderCombinator.js";
 import { QueryBuilderRow } from "./QueryBuilderRow.js";
 /**
- * One match group: a "Match" combinator select, its children (leaf
+ * One match group: a "Match" combinator picker, its children (leaf
  * rows and nested groups), and a toolbar to add either. Its own file
  * because it renders itself recursively for nested groups and is
  * itself rendered inside the parent's `.map` — the member-file case.
  *
- * The combinator is opaque, so the native `Select` (which speaks
- * strings) is bridged by `String(value)`: options carry the
- * stringified combinator, and a change is mapped back to the real
- * `Combinator` before it reaches `setCombinator`. That keeps
- * `Combinator` fully generic while still using the platform control
- * that brings type-ahead, the mobile wheel, and form semantics for
- * free.
+ * The picker is `QueryBuilderCombinator`, a `Listbox` rather than the
+ * native `Select` this shipped with — see that file for why it is a
+ * component and how it stays generic over an opaque `Combinator`.
  */
-export const QueryBuilderGroup = ({ combinatorOptions, createLeafValue, depth, labels, node, renderLeaf, state, tree, }) => {
+export const QueryBuilderGroup = ({ combinatorOptions, createLeafValue, depth, labels, node, renderCombinator, renderLeaf, state, tree, }) => {
     const children = selectChildNodes(state, node.id);
-    const selectOptions = combinatorOptions.map((option) => ({
-        label: option.label,
-        value: String(option.value),
-    }));
+    const setCombinator = (nextCombinator) => {
+        tree.setCombinator(node.id, nextCombinator);
+    };
     const card = (_jsx(Card
     // Nested groups sit on the sunken surface so the depth reads as
     // recession, not another raised card floating at the same level.
     , { 
         // Nested groups sit on the sunken surface so the depth reads as
         // recession, not another raised card floating at the same level.
-        surface: depth === 0 ? "raised" : "sunken", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "min-w-52", children: _jsx(Field, { label: "Match", children: _jsx(Select, { onChange: (nextValue) => {
-                                        const match = combinatorOptions.find((option) => String(option.value) === nextValue);
-                                        if (match) {
-                                            tree.setCombinator(node.id, match.value);
-                                        }
-                                    }, options: selectOptions, value: String(node.combinator) }) }) }), depth === 0 ? null : (_jsx(IconButton, { appearance: "ghost", intent: "danger", label: labels.removeGroup, onClick: () => {
+        surface: depth === 0 ? "raised" : "sunken", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "min-w-52", children: renderCombinator ? (renderCombinator({
+                                nodeId: node.id,
+                                onChange: setCombinator,
+                                options: combinatorOptions,
+                                value: node.combinator,
+                            })) : (_jsx(QueryBuilderCombinator, { label: labels.match, onChange: setCombinator, options: combinatorOptions, value: node.combinator })) }), depth === 0 ? null : (_jsx(IconButton, { appearance: "ghost", intent: "danger", label: labels.removeGroup, onClick: () => {
                                 tree.removeNode(node.id);
-                            }, size: "sm", children: "\u2715" }))] }), children.length === 0 ? null : (_jsx("div", { className: "flex flex-col gap-2", children: children.map((child) => child.kind === "group" ? (_jsx(QueryBuilderGroup, { combinatorOptions: combinatorOptions, createLeafValue: createLeafValue, depth: depth + 1, labels: labels, node: child, renderLeaf: renderLeaf, state: state, tree: tree }, child.id)) : (_jsx(QueryBuilderRow, { label: labels.removeLeaf, nodeId: child.id, onChange: (value) => {
+                            }, size: "sm", children: "\u2715" }))] }), children.length === 0 ? null : (_jsx("div", { className: "flex flex-col gap-2", children: children.map((child) => child.kind === "group" ? (_jsx(QueryBuilderGroup, { combinatorOptions: combinatorOptions, createLeafValue: createLeafValue, depth: depth + 1, labels: labels, node: child, renderCombinator: renderCombinator, renderLeaf: renderLeaf, state: state, tree: tree }, child.id)) : (_jsx(QueryBuilderRow, { label: labels.removeLeaf, nodeId: child.id, onChange: (value) => {
                             tree.patchLeaf(child.id, value);
                         }, onRemove: () => {
                             tree.removeNode(child.id);

package/dist/QueryBuilder/QueryBuilderGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilderGroup.js","sourceRoot":"","sources":["../../src/QueryBuilder/QueryBuilderGroup.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"QueryBuilderGroup.js","sourceRoot":"","sources":["../../src/QueryBuilder/QueryBuilderGroup.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAkB,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA8B,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA8B,CAAA;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAuB,CAAA;AA8BvD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAmB,EAClD,iBAAiB,EACjB,eAAe,EACf,KAAK,EACL,MAAM,EACN,IAAI,EACJ,gBAAgB,EAChB,UAAU,EACV,KAAK,EACL,IAAI,GACqC,EAAa,EAAE;IACxD,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,CAAA;IAEjD,MAAM,aAAa,GAAG,CAAC,cAA0B,EAAE,EAAE;QACnD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,CAAC,CAAA;IAC7C,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,CACX,KAAC,IAAI;IACH,gEAAgE;IAChE,iEAAiE;;QADjE,gEAAgE;QAChE,iEAAiE;QACjE,OAAO,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,YAE1C,eAAK,SAAS,EAAC,qBAAqB,aAClC,eAAK,SAAS,EAAC,wCAAwC,aACrD,cAAK,SAAS,EAAC,UAAU,YACtB,gBAAgB,CAAC,CAAC,CAAC,CAClB,gBAAgB,CAAC;gCACf,MAAM,EAAE,IAAI,CAAC,EAAE;gCACf,QAAQ,EAAE,aAAa;gCACvB,OAAO,EAAE,iBAAiB;gCAC1B,KAAK,EAAE,IAAI,CAAC,UAAU;6BACvB,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,IACrB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE,IAAI,CAAC,UAAU,GACtB,CACH,GACG,EAEL,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACpB,KAAC,UAAU,IACT,UAAU,EAAC,OAAO,EAClB,MAAM,EAAC,QAAQ,EACf,KAAK,EAAE,MAAM,CAAC,WAAW,EACzB,OAAO,EAAE,GAAG,EAAE;gCACZ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;4BAC1B,CAAC,EACD,IAAI,EAAC,IAAI,uBAGE,CACd,IACG,EAEL,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC9B,cAAK,SAAS,EAAC,qBAAqB,YACjC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACtB,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,iBAAiB,IAChB,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,KAAK,GAAG,CAAC,EAEhB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,KAAK,EACX,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,IANL,KAAK,CAAC,EAAE,CAOb,CACH,CAAC,CAAC,CAAC,CACF,KAAC,eAAe,IAEd,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,MAAM,EAAE,KAAK,CAAC,EAAE,EAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4BAClB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAA;wBACjC,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE;4BACb,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;wBAC3B,CAAC,EACD,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,CAAC,KAAK,IAVb,KAAK,CAAC,EAAE,CAWb,CACH,CACF,GACG,CACP,EAED,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,MAAM,IACL,UAAU,EAAC,SAAS,EACpB,MAAM,EAAC,SAAS,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,EAAE,CAAC,CAAA;4BAC1C,CAAC,EACD,IAAI,EAAC,IAAI,YAER,KAAK,MAAM,CAAC,OAAO,EAAE,GACf,EAET,KAAC,MAAM,IACL,UAAU,EAAC,SAAS,EACpB,MAAM,EAAC,SAAS,EAChB,OAAO,EAAE,GAAG,EAAE;gCACZ,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;4BACxB,CAAC,EACD,IAAI,EAAC,IAAI,YAER,KAAK,MAAM,CAAC,QAAQ,EAAE,GAChB,IACL,IACF,GACD,CACR,CAAA;IAED,qEAAqE;IACrE,oEAAoE;IACpE,gEAAgE;IAChE,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,IAAI,CACL,CAAC,CAAC,CAAC,CACF,cACE,SAAS,EAAE,WAAW,CACpB,6CAA6C,CAC9C,YAEA,IAAI,GACD,CACP,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",

package/src/QueryBuilder/QueryBuilder.mdx

@@ -55,9 +55,16 @@ the sunken surface so it recedes rather than floating at the same level as its p
 
 ## Driving it
 
-Every control is nameable, not a `data-testid`: the combinator select is named `Match` by the
-field label, the leaf controls by their own labels, and each delete is an `IconButton` whose
-required `label` makes it findable. Add a condition, nest a group, flip a combinator, delete a
-row — all reachable by role and name.
+Every control is nameable, not a `data-testid`: the combinator picker is a `Listbox` whose
+trigger is named `Match: <current combinator>`, the leaf controls by their own labels, and each
+delete is an `IconButton` whose required `label` makes it findable. Add a condition, nest a
+group, flip a combinator, delete a row — all reachable by role and name.
+
+The picker is a `Listbox` rather than a native `Select`, per
+[the 2026-08-10 demotion](../../../../docs/decisions/2026-08-10-listbox-and-combobox-are-the-default-and-select-is-demoted.md).
+Its name carries the current value because the trigger's visible text *is* that value, and
+WCAG 2.5.3 wants the visible text contained in the accessible name — so query it with
+`getByRole("button", { name: /^Match: / })`, not by the bare caption. Rename the caption with
+`labels.match`.
 
 <Canvas of={QueryBuilderStories.Interactive} />

package/src/QueryBuilder/QueryBuilder.stories.tsx

@@ -1,9 +1,15 @@
 import type { SerializedTree } from "@charcuterie/logic"
-import { createTree, useTree } from "@charcuterie/logic"
+import {
+  createTree,
+  useTree,
+  useVisibility,
+} from "@charcuterie/logic"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
+import { useState } from "react"
+import { Button } from "../Button/Button.tsx"
 import { StorySection } from "../board.storyHelpers.tsx"
-import { Select } from "../Select/Select.tsx"
+import { Listbox } from "../Listbox/Listbox.tsx"
 import { QueryBuilder } from "./QueryBuilder.tsx"
 
 /**
@@ -46,6 +52,58 @@ const createLeafValue = (): DemoLeaf => ({
   value: "",
 })
 
+/**
+ * A leaf's own picker — a `Listbox`, like the combinator above it,
+ * because [the 2026-08-10 demotion](../../../../docs/decisions/2026-08-10-listbox-and-combobox-are-the-default-and-select-is-demoted.md)
+ * applies to an app's leaf UI exactly as it does to this component's
+ * own controls. This story is the example apps copy, so it must not
+ * teach the native `Select` the record demoted.
+ *
+ * It is a component rather than inline JSX for the same reason
+ * `QueryBuilderCombinator` is: `Listbox` needs a visibility state, and
+ * a leaf is rendered inside a `.map` where a hook cannot be called.
+ * An app adopting `QueryBuilder` writes this same small wrapper — see
+ * the note in `QueryBuilder.mdx`.
+ */
+const LeafPicker = ({
+  label,
+  onChange,
+  options,
+  value,
+}: {
+  label: string
+  onChange: (value: string) => void
+  options: readonly { label: string; value: string }[]
+  value: string
+}): ReactNode => {
+  const { hide, isVisible, toggle } = useVisibility()
+
+  const currentLabel =
+    options.find((option) => option.value === value)
+      ?.label ?? ""
+
+  return (
+    <Listbox
+      isVisible={isVisible}
+      onDismiss={hide}
+      onSelect={onChange}
+      options={options}
+      selectedValue={value}
+      trigger={
+        <Button
+          appearance="outline"
+          aria-label={`${label}: ${currentLabel}`}
+          intent="neutral"
+          onClick={toggle}
+          size="sm"
+        >
+          {currentLabel}
+        </Button>
+      }
+    />
+  )
+}
+
 const renderLeaf = ({
   onChange,
   value,
@@ -55,23 +113,21 @@ const renderLeaf = ({
   value: DemoLeaf
 }): ReactNode => (
   <div className="flex flex-wrap items-center gap-2">
-    <Select
+    <LeafPicker
       label="Field"
       onChange={(field) => {
         onChange({ ...value, field })
       }}
       options={FIELD_OPTIONS}
-      size="sm"
       value={value.field}
     />
 
-    <Select
+    <LeafPicker
       label="Operator"
       onChange={(operator) => {
         onChange({ ...value, operator })
       }}
       options={OPERATOR_OPTIONS}
-      size="sm"
       value={value.operator}
     />
 
@@ -241,3 +297,133 @@ export const Interactive: Story = {
     />
   ),
 }
+
+/**
+ * `renderCombinator` — the group's combinator control, owned by the app.
+ *
+ * The default single picker is right when a combinator is a plain enum.
+ * mux-magic's is not: it is a **quantifier** (ANY/ALL/NO) crossed with a
+ * **target** (these groups, style rows, script-info blocks), and the legal
+ * pairs are asymmetric — the DSL has `notAllScriptInfo` and no
+ * `notAllStyle`. Flattened to one list, that asymmetry is invisible; split
+ * in two, the second picker filters and the illegal pair cannot be built.
+ *
+ * This story is that shape in miniature: pick `NOT ALL` and the target
+ * list collapses to the one target it can legally take.
+ */
+const PAIR_COMBINATORS = {
+  "all:group": "and",
+  "all:row": "and",
+  "any:group": "or",
+  "any:row": "or",
+  "notAll:group": "and",
+} as const
+
+const QUANTIFIER_OPTIONS = [
+  { label: "ALL", value: "all" },
+  { label: "ANY", value: "any" },
+  { label: "NOT ALL", value: "notAll" },
+] as const
+
+const CombinatorPair = ({
+  onChange,
+  value,
+}: {
+  onChange: (combinator: Combinator) => void
+  value: Combinator
+}): ReactNode => {
+  const [quantifier, setQuantifier] =
+    useState<string>("all")
+
+  // "NOT ALL" is legal over groups only here — the same filtered
+  // second picker mux-magic needs, in one line.
+  const targetOptions =
+    quantifier === "notAll"
+      ? [{ label: "of these groups", value: "group" }]
+      : [
+          { label: "of these groups", value: "group" },
+          { label: "matching rows", value: "row" },
+        ]
+
+  const [target, setTarget] = useState<string>("group")
+
+  const resolvedTarget =
+    quantifier === "notAll" ? "group" : target
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <span className="font-medium text-content-primary text-sm">
+        Match
+      </span>
+
+      <div className="flex items-center gap-1.5">
+        <LeafPicker
+          label="Quantifier"
+          onChange={(nextQuantifier) => {
+            setQuantifier(nextQuantifier)
+
+            const nextTarget =
+              nextQuantifier === "notAll"
+                ? "group"
+                : resolvedTarget
+
+            onChange(
+              PAIR_COMBINATORS[
+                `${nextQuantifier}:${nextTarget}` as keyof typeof PAIR_COMBINATORS
+              ],
+            )
+          }}
+          options={QUANTIFIER_OPTIONS}
+          value={quantifier}
+        />
+
+        <LeafPicker
+          label="Target"
+          onChange={(nextTarget) => {
+            setTarget(nextTarget)
+
+            onChange(
+              PAIR_COMBINATORS[
+                `${quantifier}:${nextTarget}` as keyof typeof PAIR_COMBINATORS
+              ],
+            )
+          }}
+          options={targetOptions}
+          value={resolvedTarget}
+        />
+      </div>
+
+      <span className="text-content-muted text-xs">
+        {`Combinator: ${String(value)}`}
+      </span>
+    </div>
+  )
+}
+
+export const CustomCombinator: Story = {
+  render: () => {
+    const CustomCombinatorHarness = (): ReactNode => {
+      const tree = useTree<Combinator, DemoLeaf>({
+        defaultCombinator: "and",
+        initialTree: FLAT_TREE,
+      })
+
+      return (
+        <QueryBuilder
+          combinatorOptions={COMBINATOR_OPTIONS}
+          createLeafValue={createLeafValue}
+          renderCombinator={({ onChange, value }) => (
+            <CombinatorPair
+              onChange={onChange}
+              value={value}
+            />
+          )}
+          renderLeaf={renderLeaf}
+          tree={tree}
+        />
+      )
+    }
+
+    return <CustomCombinatorHarness />
+  },
+}

package/src/QueryBuilder/QueryBuilder.test.tsx

@@ -7,20 +7,31 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./QueryBuilder.stories.tsx"
 
-const { AllStates, Default, Interactive } =
-  composeStories(stories)
+const {
+  AllStates,
+  CustomCombinator,
+  Default,
+  Interactive,
+} = composeStories(stories)
 
 test("the root group exposes its combinator as a named 'Match' control", async () => {
   const { canvas, canvasElement } =
     await mountStory(Default)
 
-  // One root group, so exactly one combinator select — findable by
-  // the label `Field` wires, not a testid.
-  expectAgentDrivable(canvas, {
-    name: "Match",
-    role: "combobox",
+  // One root group, so exactly one combinator picker. It is a
+  // `Listbox` trigger, so the control is a button that opens a
+  // listbox — named "Match: <current>", which keeps the button's
+  // visible text (the combinator) inside its accessible name.
+  const combinator = expectAgentDrivable(canvas, {
+    name: /^Match: /,
+    role: "button",
   })
 
+  await expect(combinator).toHaveAttribute(
+    "aria-haspopup",
+    "listbox",
+  )
+
   await expectNoAxeViolations(canvasElement)
 })
 
@@ -55,7 +66,7 @@ test("'+ Add group' nests a second group with its own combinator", async () => {
     await mountStory(Interactive)
 
   await expect(
-    canvas.getAllByRole("combobox", { name: "Match" }),
+    canvas.getAllByRole("button", { name: /^Match: / }),
   ).toHaveLength(1)
 
   await userEvent.click(
@@ -67,7 +78,7 @@ test("'+ Add group' nests a second group with its own combinator", async () => {
 
   await waitFor(() => {
     expect(
-      canvas.getAllByRole("combobox", { name: "Match" }),
+      canvas.getAllByRole("button", { name: /^Match: / }),
     ).toHaveLength(2)
   })
 
@@ -80,23 +91,31 @@ test("'+ Add group' nests a second group with its own combinator", async () => {
   await expectNoAxeViolations(canvasElement)
 })
 
-test("changing the combinator select updates its value", async () => {
-  const { canvas } = await mountStory(Interactive)
-
-  const combinator = expectAgentDrivable(canvas, {
-    name: "Match",
-    role: "combobox",
-  })
+test("choosing a combinator from the listbox updates the group", async () => {
+  const { body, canvas } = await mountStory(Interactive)
 
-  await expect(combinator).toHaveValue("and")
+  // The trigger's label IS the current combinator, so the change is
+  // asserted on its accessible name rather than a form value — a
+  // `Listbox` trigger is a button and holds none.
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      name: "Match: ALL — every condition",
+      role: "button",
+    }),
+  )
 
-  await userEvent.selectOptions(
-    combinator,
-    "ANY — one condition",
+  await userEvent.click(
+    expectAgentDrivable(body, {
+      name: "ANY — one condition",
+      role: "option",
+    }),
   )
 
   await waitFor(() => {
-    expect(combinator).toHaveValue("or")
+    expectAgentDrivable(canvas, {
+      name: "Match: ANY — one condition",
+      role: "button",
+    })
   })
 })
 
@@ -122,11 +141,64 @@ test("a nested tree renders every group's combinator and passes axe", async () =
     await mountStory(AllStates)
 
   // Flat harness (1 group) + nested harness (root + one sub-group) =
-  // three combinator selects, which is the nesting rendering.
+  // three combinator pickers, which is the nesting rendering.
   await expect(
-    canvas.getAllByRole("combobox", { name: "Match" })
+    canvas.getAllByRole("button", { name: /^Match: / })
       .length,
   ).toBeGreaterThanOrEqual(3)
 
   await expectNoAxeViolations(canvasElement)
 })
+
+test("renderCombinator replaces the built-in picker, and its second control filters", async () => {
+  const { body, canvas } = await mountStory(
+    CustomCombinator,
+  )
+
+  // The app's control is rendered instead of the default one — no
+  // "Match: <combinator>" trigger anywhere.
+  await expect(
+    canvas.queryAllByRole("button", { name: /^Match: / }),
+  ).toHaveLength(0)
+
+  const target = expectAgentDrivable(canvas, {
+    name: /^Target: /,
+    role: "button",
+  })
+
+  // Both targets are offered while the quantifier is ALL.
+  await userEvent.click(target)
+
+  await expect(body.getAllByRole("option")).toHaveLength(2)
+
+  await userEvent.keyboard("{Escape}")
+
+  // Switching to NOT ALL collapses the target list to the one legal
+  // pair — the asymmetry this prop exists to express.
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      name: /^Quantifier: /,
+      role: "button",
+    }),
+  )
+
+  await userEvent.click(
+    expectAgentDrivable(body, {
+      name: "NOT ALL",
+      role: "option",
+    }),
+  )
+
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      name: /^Target: /,
+      role: "button",
+    }),
+  )
+
+  await waitFor(async () => {
+    await expect(body.getAllByRole("option")).toHaveLength(
+      1,
+    )
+  })
+})

package/src/QueryBuilder/QueryBuilder.tsx

@@ -10,6 +10,8 @@ import { QueryBuilderGroup } from "./QueryBuilderGroup.tsx"
 export type QueryBuilderLabels = {
   addGroup?: string
   addLeaf?: string
+  /** The caption over each group's combinator picker. */
+  match?: string
   removeGroup?: string
   removeLeaf?: string
 }
@@ -27,6 +29,35 @@ export type QueryBuilderProps<Combinator, Leaf> = {
   /** The value a fresh leaf is born with when "+ Condition" is pressed. */
   createLeafValue: () => Leaf
   labels?: QueryBuilderLabels
+  /**
+   * The group's combinator control, when one `Listbox` over a flat
+   * option list is the wrong shape for it.
+   *
+   * Optional, and the default is the right answer for most consumers:
+   * a combinator that is a plain enum reads as one picker. But a
+   * combinator can be a *composite* — mux-magic's is a quantifier
+   * (ANY/ALL/NO) crossed with a target (a nested group, a style row,
+   * a script-info block), and the legal pairs are asymmetric
+   * (`notAllScriptInfo` exists, `notAllStyle` does not). Flattened
+   * into one list that is nine options where the user is making two
+   * choices, and the illegal pairs are invisible until they are
+   * missing.
+   *
+   * So the combinator is app-ownable for the same reason `renderLeaf`
+   * is: `Combinator` is opaque here, and only the app knows whether
+   * its shape is an enum or a product. `options` and the current
+   * `value` are handed over unchanged; the app calls `onChange` with a
+   * real `Combinator`.
+   */
+  renderCombinator?: (args: {
+    nodeId: string
+    onChange: (combinator: Combinator) => void
+    options: readonly {
+      label: string
+      value: Combinator
+    }[]
+    value: Combinator
+  }) => ReactNode
   /**
    * The leaf UI, owned by the app. `QueryBuilder` knows nothing about
    * what a condition *is* — a field/operator/value triple, a
@@ -50,6 +81,7 @@ export type QueryBuilderProps<Combinator, Leaf> = {
 const DEFAULT_LABELS = {
   addGroup: "Add group",
   addLeaf: "Add condition",
+  match: "Match",
   removeGroup: "Remove group",
   removeLeaf: "Remove condition",
 } satisfies Required<QueryBuilderLabels>
@@ -80,6 +112,7 @@ export const QueryBuilder = <Combinator, Leaf>({
   combinatorOptions,
   createLeafValue,
   labels,
+  renderCombinator,
   renderLeaf,
   tree,
 }: QueryBuilderProps<Combinator, Leaf>): ReactNode => {
@@ -94,6 +127,7 @@ export const QueryBuilder = <Combinator, Leaf>({
       depth={0}
       labels={resolvedLabels}
       node={selectRootGroup(state)}
+      renderCombinator={renderCombinator}
       renderLeaf={renderLeaf}
       state={state}
       tree={tree}

package/src/QueryBuilder/QueryBuilderCombinator.tsx

@@ -0,0 +1,108 @@
+import { useVisibility } from "@charcuterie/logic"
+import type { ReactNode } from "react"
+
+import { Button } from "../Button/Button.tsx"
+import { Listbox } from "../Listbox/Listbox.tsx"
+
+export type QueryBuilderCombinatorProps<Combinator> = {
+  /** The visible caption above the control, e.g. "Match". */
+  label: string
+  onChange: (combinator: Combinator) => void
+  options: readonly {
+    label: string
+    value: Combinator
+  }[]
+  value: Combinator
+}
+
+/**
+ * One group's combinator picker.
+ *
+ * A `Listbox`, not a native `Select`, per
+ * [the 2026-08-10 demotion](../../../../docs/decisions/2026-08-10-listbox-and-combobox-are-the-default-and-select-is-demoted.md).
+ * `QueryBuilder` shipped in #84 with a `Select` the day after that
+ * record landed; `charcuterie/prefer-listbox-over-select` did not
+ * catch it because the component-choice block is scoped to app
+ * packages and exempts this one — right for a primitive, wrong for a
+ * composite an app consumes whole.
+ *
+ * ### Why this is its own file
+ *
+ * `Listbox` needs a visibility state, and a group renders one picker
+ * per group inside a recursive `.map`. A hook cannot be called there,
+ * so the picker becomes a component — the same member-file case as
+ * `QueryBuilderRow`.
+ *
+ * ### The name, and why it is not a `Field`
+ *
+ * `Field` wires `<label htmlFor>` by cloning its `id` onto the
+ * control. `Listbox`'s trigger cannot take one: `useAnchoredOverlay`
+ * overwrites the cloned trigger's `id` with the one the panel points
+ * `aria-labelledby` at, so the label would address an element that no
+ * longer carries that id — the exact defect `Field` exists to
+ * prevent. So the caption is plain text and the trigger is named with
+ * `aria-label`.
+ *
+ * That name is `"<label>: <current value>"` rather than bare
+ * `"<label>"` on purpose: the button's visible text is the current
+ * combinator, and WCAG 2.5.3 wants the visible text contained in the
+ * accessible name. "Match" alone would fail it; "Match: ALL — every
+ * condition" reads correctly and keeps each group's control findable
+ * by name.
+ *
+ * The combinator stays opaque here exactly as it is in the rest of
+ * the component: `String(value)` bridges it to the string-valued
+ * `Listbox`, and a selection is mapped back to the real `Combinator`
+ * before it leaves.
+ */
+export const QueryBuilderCombinator = <Combinator,>({
+  label,
+  onChange,
+  options,
+  value,
+}: QueryBuilderCombinatorProps<Combinator>): ReactNode => {
+  const { hide, isVisible, toggle } = useVisibility()
+
+  const currentOption = options.find(
+    (option) => String(option.value) === String(value),
+  )
+
+  const currentLabel = currentOption?.label ?? ""
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <span className="font-medium text-content-primary text-sm">
+        {label}
+      </span>
+
+      <Listbox
+        isVisible={isVisible}
+        onDismiss={hide}
+        onSelect={(nextValue) => {
+          const match = options.find(
+            (option) => String(option.value) === nextValue,
+          )
+
+          if (match) {
+            onChange(match.value)
+          }
+        }}
+        options={options.map((option) => ({
+          label: option.label,
+          value: String(option.value),
+        }))}
+        selectedValue={String(value)}
+        trigger={
+          <Button
+            appearance="outline"
+            aria-label={`${label}: ${currentLabel}`}
+            intent="neutral"
+            onClick={toggle}
+          >
+            {currentLabel}
+          </Button>
+        }
+      />
+    </div>
+  )
+}

package/src/QueryBuilder/QueryBuilderGroup.tsx

@@ -8,11 +8,10 @@ import type { ReactNode } from "react"
 
 import { Button } from "../Button/Button.tsx"
 import { Card } from "../Card/Card.tsx"
-import { Field } from "../Field/Field.tsx"
 import { IconButton } from "../IconButton/IconButton.tsx"
-import { Select } from "../Select/Select.tsx"
 import { toClassName } from "../toClassName.ts"
 import type { QueryBuilderLabels } from "./QueryBuilder.tsx"
+import { QueryBuilderCombinator } from "./QueryBuilderCombinator.tsx"
 import { QueryBuilderRow } from "./QueryBuilderRow.tsx"
 
 export type QueryBuilderGroupProps<Combinator, Leaf> = {
@@ -25,6 +24,15 @@ export type QueryBuilderGroupProps<Combinator, Leaf> = {
   depth: number
   labels: Required<QueryBuilderLabels>
   node: TreeGroupNode<Combinator>
+  renderCombinator?: (args: {
+    nodeId: string
+    onChange: (combinator: Combinator) => void
+    options: readonly {
+      label: string
+      value: Combinator
+    }[]
+    value: Combinator
+  }) => ReactNode
   renderLeaf: (args: {
     nodeId: string
     onChange: (value: Leaf) => void
@@ -35,18 +43,14 @@ export type QueryBuilderGroupProps<Combinator, Leaf> = {
 }
 
 /**
- * One match group: a "Match" combinator select, its children (leaf
+ * One match group: a "Match" combinator picker, its children (leaf
  * rows and nested groups), and a toolbar to add either. Its own file
  * because it renders itself recursively for nested groups and is
  * itself rendered inside the parent's `.map` — the member-file case.
  *
- * The combinator is opaque, so the native `Select` (which speaks
- * strings) is bridged by `String(value)`: options carry the
- * stringified combinator, and a change is mapped back to the real
- * `Combinator` before it reaches `setCombinator`. That keeps
- * `Combinator` fully generic while still using the platform control
- * that brings type-ahead, the mobile wheel, and form semantics for
- * free.
+ * The picker is `QueryBuilderCombinator`, a `Listbox` rather than the
+ * native `Select` this shipped with — see that file for why it is a
+ * component and how it stays generic over an opaque `Combinator`.
  */
 export const QueryBuilderGroup = <Combinator, Leaf>({
   combinatorOptions,
@@ -54,16 +58,16 @@ export const QueryBuilderGroup = <Combinator, Leaf>({
   depth,
   labels,
   node,
+  renderCombinator,
   renderLeaf,
   state,
   tree,
 }: QueryBuilderGroupProps<Combinator, Leaf>): ReactNode => {
   const children = selectChildNodes(state, node.id)
 
-  const selectOptions = combinatorOptions.map((option) => ({
-    label: option.label,
-    value: String(option.value),
-  }))
+  const setCombinator = (nextCombinator: Combinator) => {
+    tree.setCombinator(node.id, nextCombinator)
+  }
 
   const card = (
     <Card
@@ -74,22 +78,21 @@ export const QueryBuilderGroup = <Combinator, Leaf>({
       <div className="flex flex-col gap-3">
         <div className="flex items-start justify-between gap-2">
           <div className="min-w-52">
-            <Field label="Match">
-              <Select
-                onChange={(nextValue) => {
-                  const match = combinatorOptions.find(
-                    (option) =>
-                      String(option.value) === nextValue,
-                  )
-
-                  if (match) {
-                    tree.setCombinator(node.id, match.value)
-                  }
-                }}
-                options={selectOptions}
-                value={String(node.combinator)}
+            {renderCombinator ? (
+              renderCombinator({
+                nodeId: node.id,
+                onChange: setCombinator,
+                options: combinatorOptions,
+                value: node.combinator,
+              })
+            ) : (
+              <QueryBuilderCombinator
+                label={labels.match}
+                onChange={setCombinator}
+                options={combinatorOptions}
+                value={node.combinator}
               />
-            </Field>
+            )}
           </div>
 
           {depth === 0 ? null : (
@@ -118,6 +121,7 @@ export const QueryBuilderGroup = <Combinator, Leaf>({
                   key={child.id}
                   labels={labels}
                   node={child}
+                  renderCombinator={renderCombinator}
                   renderLeaf={renderLeaf}
                   state={state}
                   tree={tree}