cursedbelt 5.91.0 → 5.92.1

package/dist/styles-areas/disk-usage.css

@@ -18,15 +18,14 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 33 candidate(s).
+ * 26 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("[&_svg]:size-3 bg-accent/60 collapse cursor-help duration-150 first:pt-1");
-@source inline("focus-within:border-field-ring focus-within:ring-2 focus-within:ring-field-ring/30");
-@source inline("group-focus-visible/tile:opacity-100 group-hover/du-row:opacity-100 group-hover/tile:opacity-100");
-@source inline("group/du-row group/tile hover:bg-muted-foreground/10 italic max-w-56 max-w-96 mb-2 min-h-8");
-@source inline("min-w-24 min-w-56 mr-0.5 opacity-100 pl-2 pr-1 ring-inset ring-ring self-stretch text-3xl");
-@source inline("text-[length:var(--text-glyph)] text-muted-foreground/60 text-success");
+@source inline("bg-accent/60 collapse cursor-help duration-150 first:pt-1 group-focus-visible/tile:opacity-100");
+@source inline("group-hover/du-row:opacity-100 group-hover/tile:opacity-100 group/du-row group/tile");
+@source inline("hover:bg-muted-foreground/10 italic max-w-56 max-w-96 mb-2 min-h-8 min-w-56 mr-0.5 opacity-100");
+@source inline("ring-inset ring-ring self-stretch text-3xl text-[length:var(--text-glyph)]");
+@source inline("text-muted-foreground/60 text-success");

package/dist/styles-areas/emoji.css

@@ -18,11 +18,10 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 9 candidate(s).
+ * 8 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("h-105 hover:border-field-ring max-h-64 min-w-48 shadow-popover size-7 text-field-placeholder");
-@source inline("text-xl w-88");
+@source inline("h-105 hover:border-field-ring min-w-48 shadow-popover size-7 text-field-placeholder text-xl w-88");

package/dist/styles-areas/fields.css

@@ -18,32 +18,27 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 104 candidate(s).
+ * 87 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("-mx-1 [&::-webkit-scrollbar]:hidden [&_svg]:size-3");
-@source inline("[background:var(--cb-swatch-fill,var(--muted))] [scrollbar-width:none] appearance-none");
-@source inline("aria-checked:ring-2 aria-checked:ring-foreground aria-checked:ring-offset-1 bg-accent/15");
-@source inline("bg-surface-sunken/80 bg-warning/10 border-border/40 border-field-error caret-transparent");
-@source inline("cursor-text data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
-@source inline("data-[highlighted]:bg-accent/10 data-[highlighted]:text-accent-strong");
-@source inline("data-[starting-style]:opacity-0 data-[starting-style]:scale-95");
-@source inline("data-[state=checked]:ring-foreground data-[state=checked]:ring-offset-1 disabled:hover:scale-100");
-@source inline("disabled:opacity-40 duration-100 focus-visible:border-border-strong focus-visible:ring-0");
-@source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
-@source inline("focus-within:ring-field-ring/30 focus-within:ring-offset-1 focus-within:ring-ring");
-@source inline("group-focus-within:opacity-100 h-105 h-12 h-3.5 has-[[aria-invalid=true]]:border-field-error");
-@source inline("hover:bg-muted/50 hover:border-field-ring hover:scale-110 hover:text-warning italic left-2.5 li");
-@source inline("list-none max-h-64 md:flex-col md:gap-0.5 md:justify-start md:overflow-visible md:text-left");
-@source inline("md:w-full min-h-20 min-w-24 min-w-64 min-w-[var(--anchor-width)] min-w-full min-w-max");
-@source inline("mix-blend-difference mr-2 pl-1.5 pl-2 pl-2.5 pointer-coarse:before:-left-1");
+@source inline("-mx-1 [&::-webkit-scrollbar]:hidden [background:var(--cb-swatch-fill,var(--muted))]");
+@source inline("[scrollbar-width:none] appearance-none aria-checked:ring-2 aria-checked:ring-foreground");
+@source inline("aria-checked:ring-offset-1 bg-accent/15 bg-surface-sunken/80 bg-warning/10 border-border/40");
+@source inline("border-field-error caret-transparent cursor-text data-[state=checked]:ring-foreground");
+@source inline("data-[state=checked]:ring-offset-1 disabled:hover:scale-100 disabled:opacity-40");
+@source inline("focus-visible:border-border-strong focus-visible:ring-0 focus-visible:ring-field-ring/40");
+@source inline("focus-within:ring-offset-1 focus-within:ring-ring group-focus-within:opacity-100 h-105 h-12");
+@source inline("h-3.5 has-[[aria-invalid=true]]:border-field-error hover:bg-muted/50 hover:border-field-ring");
+@source inline("hover:scale-110 hover:text-warning italic left-2.5 li list-none md:flex-col md:gap-0.5");
+@source inline("md:justify-start md:overflow-visible md:text-left md:w-full min-h-20 min-w-64 min-w-full");
+@source inline("min-w-max mix-blend-difference mr-2 pl-1.5 pl-2.5 pointer-coarse:before:-left-1");
 @source inline("pointer-coarse:before:-right-1 pointer-coarse:before:absolute");
 @source inline("pointer-coarse:before:bottom-[calc(var(--hit-slop-y)*-1)]");
-@source inline("pointer-coarse:before:top-[calc(var(--hit-slop-y)*-1)] pointer-coarse:items-center pr-1 pr-16");
-@source inline("pr-2 pr-3 pr-9 pt-1 resize-none resize-y right-1.5 right-3 ring-accent/30 ring-field-error/30");
+@source inline("pointer-coarse:before:top-[calc(var(--hit-slop-y)*-1)] pointer-coarse:items-center pr-16 pr-2");
+@source inline("pr-3 pr-9 pt-1 resize-none resize-y right-1.5 right-3 ring-accent/30 ring-field-error/30");
 @source inline("self-stretch size-7 size-9 size-full sm:w-11 sm:w-56 text-field-placeholder text-success text-xl");
-@source inline("top-1.5 transition-[transform,opacity] w-20 w-32 w-36 w-40 w-88 w-fit w-max whitespace-pre");
+@source inline("top-1.5 w-20 w-32 w-36 w-40 w-88 w-fit w-max whitespace-pre");
 @source inline('pointer-coarse:before:content-[""]');

package/dist/styles-areas/master-detail.css

@@ -18,14 +18,13 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 25 candidate(s).
+ * 21 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
 @source inline("[&::-webkit-scrollbar]:hidden [scrollbar-width:none] bg-[var(--accent)]/12 bg-[var(--card)]");
-@source inline("bg-accent/15 border-[var(--border)] flex-row focus-within:border-field-ring focus-within:ring-2");
-@source inline("focus-within:ring-field-ring/30 has-[[aria-invalid=true]]:border-field-error");
-@source inline("hover:bg-[var(--muted)] hover:bg-muted/80 mb-1.5 mb-4 min-h min-h-full pb-0.5 pr-1 ring-1");
+@source inline("bg-accent/15 border-[var(--border)] flex-row has-[[aria-invalid=true]]:border-field-error");
+@source inline("hover:bg-[var(--muted)] hover:bg-muted/80 mb-1.5 mb-4 min-h min-h-full pb-0.5 ring-1");
 @source inline("ring-[var(--accent)]/40 ring-accent/30 ring-inset self-stretch shrink-[1000]");

package/dist/styles-areas/master-lock.css

@@ -18,11 +18,10 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 5 candidate(s).
+ * 2 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("focus-within:border-field-ring focus-within:ring-2 focus-within:ring-field-ring/30");
 @source inline("has-[[aria-invalid=true]]:border-field-error self-stretch");

package/dist/styles-areas/media-gallery.css

@@ -18,18 +18,16 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 56 candidate(s).
+ * 49 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("[&_svg]:size-3 appearance-none aspect-video backdrop-blur-xs bg-black/55 bg-black/80 bg-black/85");
-@source inline("bg-black/95 bg-white/10 border-none bottom-1 col collapse ease-in-out f");
-@source inline("focus-visible:ring-offset-black focus-within:border-field-ring focus-within:ring-2");
-@source inline("focus-within:ring-field-ring/30 hover:bg-white/20 hover:border-accent-solid hover:text-white");
-@source inline("inset-4 left-1 max-h-[40vh] min-h-20 min-h-dvh min-w-12 min-w-16 min-w-20 min-w-24 mx-1 pl-2");
-@source inline("place-items-center pr-1 resize-none right-1 right-4 size-9 text-tone-amber-ink");
-@source inline("text-tone-cyan-ink text-tone-emerald-ink text-tone-orange-ink text-tone-purple-ink");
-@source inline("text-tone-rose-ink text-tone-sky-ink text-tone-slate-ink text-white/70 top-1 top-4 translate");
-@source inline("translate-x-px w-40 w-48 zoom zoom-in");
+@source inline("appearance-none aspect-video backdrop-blur-xs bg-black/55 bg-black/80 bg-black/85 bg-black/95");
+@source inline("bg-white/10 border-none bottom-1 col collapse ease-in-out f focus-visible:ring-offset-black");
+@source inline("hover:bg-white/20 hover:border-accent-solid hover:text-white inset-4 left-1 max-h-[40vh]");
+@source inline("min-h-20 min-h-dvh min-w-12 min-w-16 min-w-20 mx-1 place-items-center resize-none right-1");
+@source inline("right-4 size-9 text-tone-amber-ink text-tone-cyan-ink text-tone-emerald-ink text-tone-orange-ink");
+@source inline("text-tone-purple-ink text-tone-rose-ink text-tone-sky-ink text-tone-slate-ink text-white/70");
+@source inline("top-1 top-4 translate translate-x-px w-40 w-48 zoom zoom-in");

package/dist/styles-areas/rich-text.css

@@ -18,11 +18,11 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 8 candidate(s).
+ * 7 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("flex-nowrap focus-within:ring-2 focus-within:ring-offset-0 focus-within:ring-ring italic");
-@source inline("min-h-32 sm:flex-wrap top-full");
+@source inline("flex-nowrap focus-within:ring-offset-0 focus-within:ring-ring italic min-h-32 sm:flex-wrap");
+@source inline("top-full");

package/dist/styles-areas/stats.css

@@ -18,29 +18,25 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 103 candidate(s).
+ * 86 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("[&>div]:sm:[grid-template-columns:…] [&_svg]:size-3 [&_svg]:size-3.5 basis-40 bg-accent/15");
-@source inline("bg-accent/40 bg-background/70 bg-success/10 bg-warning/10 bg-warning/20 border-field-error");
-@source inline("border-l-2 border-l-border-strong border-l-destructive border-l-warning bottom-3 col col-span-2");
-@source inline("col-start-2 collapse cursor-help data-[ending-style]:opacity-0 data-[ending-style]:scale-95");
-@source inline("data-[highlighted]:bg-accent/10 data-[highlighted]:text-accent-strong");
-@source inline("data-[starting-style]:opacity-0 data-[starting-style]:scale-95 divide-x duration-100 first:pl-1");
-@source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
-@source inline("focus-within:ring-field-ring/30 gap-x-1.5 gap-x-2 gap-y-0.5 grid-cols-[minmax(0,1fr)_auto]");
-@source inline("group-focus-visible/meter:opacity-100 group-focus-visible/stat:opacity-100");
-@source inline("group-focus-visible/tile:opacity-100 group-hover/meter:opacity-100 group-hover/stat:opacity-100");
-@source inline("group-hover/tile:opacity-100 group/meter group/stat group/tile h-105");
-@source inline("has-[[aria-invalid=true]]:border-field-error hover:bg-muted/50 hover:border-field-ring");
-@source inline("hover:text-warning last:pr-1 left-3 left-[var(--timeline-rail-x)] list-none max-h-64 min-h-20");
-@source inline("min-h-9 min-w-24 min-w-34 min-w-[var(--anchor-width)] min-w-full mr-0.5 mr-1.5 mr-2 normal-case");
-@source inline("pl-1.5 pl-2 pr-1 pr-16 pr-3 pt-1 resize-none resize-y ring-field-error/30 rounded-b-md");
+@source inline("[&>div]:sm:[grid-template-columns:…] [&_svg]:size-3.5 basis-40 bg-accent/15 bg-accent/40");
+@source inline("bg-background/70 bg-success/10 bg-warning/10 bg-warning/20 border-field-error border-l-2");
+@source inline("border-l-border-strong border-l-destructive border-l-warning bottom-3 col col-span-2 col-start-2");
+@source inline("collapse cursor-help divide-x first:pl-1 focus-visible:ring-field-ring/40 gap-x-1.5 gap-x-2");
+@source inline("gap-y-0.5 grid-cols-[minmax(0,1fr)_auto] group-focus-visible/meter:opacity-100");
+@source inline("group-focus-visible/stat:opacity-100 group-focus-visible/tile:opacity-100");
+@source inline("group-hover/meter:opacity-100 group-hover/stat:opacity-100 group-hover/tile:opacity-100");
+@source inline("group/meter group/stat group/tile h-105 has-[[aria-invalid=true]]:border-field-error");
+@source inline("hover:bg-muted/50 hover:border-field-ring hover:text-warning last:pr-1 left-3");
+@source inline("left-[var(--timeline-rail-x)] list-none min-h-20 min-h-9 min-w-34 min-w-full mr-0.5 mr-1.5 mr-2");
+@source inline("normal-case pl-1.5 pr-16 pr-3 pt-1 resize-none resize-y ring-field-error/30 rounded-b-md");
 @source inline("rounded-t-md row-start-1 self-stretch shadow-md size-7 sm:col-auto sm:col-span-1 sm:flex-nowrap");
 @source inline("sm:grid-cols-[minmax(7rem,18rem)_minmax(4rem,1fr)_auto]");
 @source inline("sm:grid-cols-[minmax(7rem,34rem)_minmax(4rem,1fr)_auto] sm:row-auto sm:truncate text-3xl");
 @source inline("text-[length:var(--text-glyph)] text-field-placeholder text-foreground/80 text-success text-xl");
-@source inline("top-7 tracking-normal transition-[transform,opacity] w-36 w-48 w-88 whitespace-pre z-[1]");
+@source inline("top-7 tracking-normal w-36 w-48 w-88 whitespace-pre z-[1]");

package/dist/styles-areas/wizard.css

@@ -18,19 +18,14 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 42 candidate(s).
+ * 25 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-@source inline("[&_svg]:size-3 border-field-error collapse data-[ending-style]:opacity-0");
-@source inline("data-[ending-style]:scale-95 data-[highlighted]:bg-accent/10");
-@source inline("data-[highlighted]:text-accent-strong data-[starting-style]:opacity-0");
-@source inline("data-[starting-style]:scale-95 disabled:bg-transparent disabled:opacity-100 duration-100");
-@source inline("focus-visible:ring-field-ring/40 focus-within:border-field-ring focus-within:ring-2");
-@source inline("focus-within:ring-field-ring/30 h-105 has-[[aria-invalid=true]]:border-field-error");
-@source inline("hover:border-field-ring hover:text-warning max-h-64 min-h-20 min-w-24");
-@source inline("min-w-[var(--anchor-width)] mr-1.5 mr-2 pl-1.5 pl-2 pr-1 pr-16 pr-3 resize-none resize-y");
-@source inline("ring-field-error/30 self-stretch size-7 sm:inline text-field-placeholder text-xl");
-@source inline("transition-[transform,opacity] w-36 w-88");
+@source inline("border-field-error collapse disabled:bg-transparent disabled:opacity-100");
+@source inline("focus-visible:ring-field-ring/40 h-105 has-[[aria-invalid=true]]:border-field-error");
+@source inline("hover:border-field-ring hover:text-warning min-h-20 mr-1.5 mr-2 pl-1.5 pr-16 pr-3 resize-none");
+@source inline("resize-y ring-field-error/30 self-stretch size-7 sm:inline text-field-placeholder text-xl w-36");
+@source inline("w-88");

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.91.0",
+	"version": "5.92.1",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",
@@ -528,6 +528,12 @@
 			"source": "./src/react/components/Modal.tsx",
 			"import": "./dist/react/components/Modal.js"
 		},
+		"./react/autocomplete": {
+			"types": "./dist/react/components/Autocomplete.d.ts",
+			"bun": "./src/react/components/Autocomplete.tsx",
+			"source": "./src/react/components/Autocomplete.tsx",
+			"import": "./dist/react/components/Autocomplete.js"
+		},
 		"./react/multi-select-field": {
 			"types": "./dist/react/components/MultiSelectField.d.ts",
 			"bun": "./src/react/components/MultiSelectField.tsx",

package/scripts/guardrails-baseline.json

@@ -24,7 +24,7 @@
     "no-inline-style": 73,
     "no-arbitrary-length": 0,
     "opt-out-count": 272,
-    "opt-out-needs-cause": 254
+    "opt-out-needs-cause": 253
   },
   "cursedshell": {
     "no-raw-action-button": 0,

package/scripts/guardrailsEnforce.spec.ts

@@ -1063,6 +1063,19 @@ describe('no-native-select — the OS draws its list (owner, 2026-10-10)', () =>
     expect(check('no-native-select', `<selection-bar />`)).toHaveLength(0);
   });
 
+  // forge task 3602, the owner 2026-10-23: *"When I click the add a tag dropdown, the dropdown does
+  // not look styled … I was in dark mode and it popped up light."* That was an `<input list>`.
+  test('a <datalist> is the same OS list, and counts too (forge task 3602)', () => {
+    const source = `<input list="known-tags" value={tag} onChange={(e) => setTag(e.target.value)} />
+    <datalist id="known-tags">
+      {tags.map((t) => <option key={t} value={t} />)}
+    </datalist>`;
+    expect(check('no-native-select', source)).toHaveLength(1);
+    expect(check('no-native-select', `<datalist id={\`ft-record-\${category}\`}>`)).toHaveLength(1);
+    expect(check('no-native-select', `// was a <datalist> until 3602\n<AutocompleteField suggestions={tags} />`)).toHaveLength(0);
+    expect(check('no-native-select', `<datalistish />`)).toHaveLength(0);
+  });
+
   test('the styled controls, and a comment that names it, are not one', () => {
     expect(check('no-native-select', `<SelectField value={sort} options={SORTS} />`)).toHaveLength(0);
     expect(check('no-native-select', `// was a <NativeSelect> until 2026-10-10\n<PropertyPicker name="Type" />`)).toHaveLength(0);

package/scripts/guardrailsEnforce.ts

@@ -2092,7 +2092,9 @@ const noSelectAsActionMenu: Rule = {
 // even the kit's frame (forge task 3097: desk had eight under `no-raw-inputs`, which no count of
 // NativeSelect could see) — in its two-sided ratchet, so the number only falls:
 // `SelectField` / `ComboboxField` for a field, `PropertyPicker` for a record's property pill,
-// `ChoiceMenu` to choose-and-act. A use that is genuinely right — a form on a phone where the OS
+// `ChoiceMenu` to choose-and-act. A `<datalist>` counts too (forge task 3602, the owner 2026-10-23:
+// a tag field's suggestions *"popped up light"* in dark mode) — `<input list>`'s dropdown is the
+// same OS list; `AutocompleteField` or `TagsInput` suggest in the page. A use that is genuinely right — a form on a phone where the OS
 // wheel IS the better control — says so on the line above:
 // `// guardrails-ignore no-native-select: <why>`.
 const NATIVE_SELECT_IGNORE_RE = /guardrails-ignore\s+no-native-select\s*:/;
@@ -2100,7 +2102,7 @@ const NATIVE_SELECT_IGNORE_RE = /guardrails-ignore\s+no-native-select\s*:/;
 const noNativeSelect: Rule = {
 	name: "no-native-select",
 	description:
-		"Owner, 2026-10-10: unstyled dropdowns break the app's cohesiveness. A `NativeSelect`'s (or a raw `<select>`'s) list is drawn by the OS, outside the page, where no stylesheet reaches it. Use `SelectField` / `ComboboxField` for a form field, `PropertyPicker` for a record's property (Type, Folder, Tags), or `ChoiceMenu` to choose-and-act. Where the OS picker is the better control, say why on the line above: `// guardrails-ignore no-native-select: <why>`.",
+		"Owner, 2026-10-10: unstyled dropdowns break the app's cohesiveness. A `NativeSelect`'s (or a raw `<select>`'s, or a `<datalist>`'s) list is drawn by the OS, outside the page, where no stylesheet reaches it. Use `SelectField` / `ComboboxField` for a form field, `AutocompleteField` / `TagsInput` for suggestions as you type, `PropertyPicker` for a record's property (Type, Folder, Tags), or `ChoiceMenu` to choose-and-act. Where the OS picker is the better control, say why on the line above: `// guardrails-ignore no-native-select: <why>`.",
 	check(filePath, source) {
 		const unix = filePath.replace(/\\/g, "/");
 		// The kit is held to its own law (forge task 3063: its DataTable filter builder and
@@ -2112,7 +2114,7 @@ const noNativeSelect: Rule = {
 		const scannable = blankComments(source);
 		const lines = source.split("\n");
 		const out: Violation[] = [];
-		for (const match of scannable.matchAll(/<(?:NativeSelect|select)\b/g)) {
+		for (const match of scannable.matchAll(/<(?:NativeSelect|select|datalist)\b/g)) {
 			const line = lineOf(source, match.index ?? 0);
 			if (NATIVE_SELECT_IGNORE_RE.test(lines[line - 1] ?? "") || NATIVE_SELECT_IGNORE_RE.test(blockAbove(lines, line))) continue;
 			out.push({ file: filePath, line, snippet: lines[line - 1]?.trim() ?? "" });

package/scripts/styleAreas.ts

@@ -181,6 +181,9 @@ export const AREAS: readonly Area[] = [
 			'components/IconButton.tsx',
 			'components/InfoHint.tsx',
 			'components/InfoHintImpl.tsx',
+			// TagsInput `import()`s it (forge task 3614) from seven areas' closures (lazyImportFault) — named
+			// here once, so whichever area reaches TagsInput, its suggestion list is styled.
+			'components/TagsInputSuggesting.tsx',
 			'components/Input.tsx',
 			'components/ListPanel.tsx',
 			'components/Menu.tsx',

package/src/react/activity-bar/activityBar.css

@@ -264,6 +264,11 @@
 	.cbab-slot {
 		inline-size: 44px;
 		block-size: 44px;
+	}
+
+	/* 12px centers the rail's OWN 20px glyph. A slot holds the consumer's control, which
+	   `max-inline-size: 100%` would squeeze to that 20px — it gets the whole 44 instead. */
+	.cbab-btn {
 		padding-inline: 12px;
 	}
 }

package/src/react/code-editor/markdownRules.spec.ts

@@ -6,8 +6,11 @@ import { ruleLines } from './markdownRules.js';
 
 function rules(doc: string, caret: number): number[] {
   const state = EditorState.create({ doc, selection: EditorSelection.cursor(caret), extensions: markdown() });
-  ensureSyntaxTree(state, state.doc.length, 5000);
-  return ruleLines(state, [{ from: 0, to: state.doc.length }]);
+  // The whole parse, handed over: the state's own tree is only what its 20 ms first pass reached —
+  // short of the rule under a loaded gate, and short of anything past the first 3000 characters.
+  const tree = ensureSyntaxTree(state, state.doc.length, 5000);
+  if (!tree) throw new Error('the markdown parse did not finish');
+  return ruleLines(state, [{ from: 0, to: state.doc.length }], tree);
 }
 
 describe('markdownRules — `---` drawn as a rule while writing (forge task 3184)', () => {
@@ -16,6 +19,11 @@ describe('markdownRules — `---` drawn as a rule while writing (forge task 3184
     expect(rules('***\n\n___', 0)).toEqual([5]);
   });
 
+  test('a rule past the first parse pass is found — the whole document is read, not its first 3000 characters', () => {
+    const filler = 'a line of prose\n\n'.repeat(250);
+    expect(rules(`${filler}---\n\ntwo`, 0)).toEqual([filler.length]);
+  });
+
   test('with the caret on it, the dashes show', () => {
     expect(rules('one\n\n---\n\ntwo', 7)).toEqual([]);
   });

package/src/react/code-editor/markdownRules.ts

@@ -11,10 +11,18 @@ import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate
  */
 const rule = Decoration.line({ class: 'cb-md-rule' });
 
-/** The line starts of every rule in the visible ranges, less any line a selection touches. */
-export function ruleLines(state: EditorState, ranges: readonly { from: number; to: number }[]): number[] {
+/**
+ * The line starts of every rule in the visible ranges, less any line a selection touches. `tree`
+ * is the state's own unless given: a caller that parsed further (`ensureSyntaxTree`) passes what
+ * it got, because that parse never writes back into the state — its tree stays the one the
+ * state's 20 ms first pass reached.
+ */
+export function ruleLines(
+  state: EditorState,
+  ranges: readonly { from: number; to: number }[],
+  tree: ReturnType<typeof syntaxTree> = syntaxTree(state),
+): number[] {
   const starts: number[] = [];
-  const tree = syntaxTree(state);
   for (const { from, to } of ranges) {
     tree.iterate({
       from,

package/src/react/components/Autocomplete.spec.tsx

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, mock, test } from 'bun:test';
 import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
-import { useState } from 'react';
+import { createRef, useState } from 'react';
 import { AutocompleteField } from './Autocomplete.js';
 
 afterEach(cleanup);
@@ -79,4 +79,58 @@ describe('AutocompleteField', () => {
     // Suggestions should be visible in the popup (portaled to document.body)
     expect(getByText('Apple')).not.toBeNull();
   });
+
+  // 🔴 Seen on music-stage, 2026-10-23: "zz" still offered every folder — the list drew the whole
+  // static array, never Base UI's filtered one (forge task 3602).
+  test('static suggestions narrow to what contains the typed text, in any case', () => {
+    const { container, queryByText } = render(<Controlled initial='AP' />);
+    const input = container.querySelector('input') as HTMLInputElement;
+    act(() => {
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+    });
+    expect(queryByText('Apple')).not.toBeNull();
+    expect(queryByText('Apricot')).not.toBeNull();
+    expect(queryByText('Banana')).toBeNull();
+    expect(queryByText('Cherry')).toBeNull();
+  });
+
+  test('inputRef is the input, so a form can focus the field it names as missing', () => {
+    const ref = createRef<HTMLInputElement>();
+    const { container } = render(<AutocompleteField inputRef={ref} suggestions={SUGGESTIONS} />);
+    expect(ref.current).toBe(container.querySelector('input'));
+  });
+
+  test('a field that is more than its query brings its own match', () => {
+    // A comma list: each suggestion is the whole next value, and only the LAST entry is the query.
+    const last = (text: string) => text.slice(text.lastIndexOf(',') + 1).trim().toLowerCase();
+    const { container, queryByText } = render(
+      <AutocompleteField
+        value='rock, an'
+        suggestions={['rock, trance', 'rock, ambient', 'rock, jazz']}
+        filter={(item, query) => last(item).includes(last(query))}
+      />,
+    );
+    act(() => {
+      fireEvent.keyDown(container.querySelector('input') as HTMLInputElement, { key: 'ArrowDown' });
+    });
+    expect(queryByText('rock, trance')).not.toBeNull();
+    expect(queryByText('rock, ambient')).toBeNull();
+    expect(queryByText('rock, jazz')).toBeNull();
+  });
+
+  test('loadSuggestions answers are drawn as given — the loader already searched', async () => {
+    const loadSuggestions = mock(async () => ['Zebra', 'Yak']);
+    function Async() {
+      const [value, setValue] = useState('qq');
+      return <AutocompleteField value={value} onChange={setValue} loadSuggestions={loadSuggestions} />;
+    }
+    const { container, queryByText } = render(<Async />);
+    await waitFor(() => expect(loadSuggestions).toHaveBeenCalled(), { timeout: 1000 });
+    const input = container.querySelector('input') as HTMLInputElement;
+    await act(async () => {
+      fireEvent.keyDown(input, { key: 'ArrowDown' });
+    });
+    await waitFor(() => expect(queryByText('Zebra')).not.toBeNull(), { timeout: 1000 });
+    expect(queryByText('Yak')).not.toBeNull();
+  });
 });

package/src/react/components/Autocomplete.tsx

@@ -2,12 +2,11 @@
 
 import { Autocomplete } from '@base-ui/react/autocomplete';
 import { ChevronDown, Loader2 } from 'lucide-react';
-import { type InputHTMLAttributes, type ReactNode, useCallback, useEffect, useState } from 'react';
+import { type InputHTMLAttributes, type ReactNode, type Ref, useCallback, useEffect, useState } from 'react';
 import { useDebouncedCallback } from '../hooks/useDebouncedCallback.js';
 import { cn } from '../lib/cn.js';
 import { type ControlSize, fieldControlClass } from '../lib/field.js';
-import { FLOATING_COLLISION_PADDING,
-  FLOATING_CONTENT_BASE, FLOATING_ITEM_BASE } from '../lib/floatingStyles.js';
+import { SuggestionList } from './suggestionList.js';
 
 export interface AutocompleteProps<S = string>
   extends Omit<
@@ -30,6 +29,13 @@ export interface AutocompleteProps<S = string>
   onBlur?: () => void;
   /** Static suggestion items shown in the dropdown. */
   suggestions?: S[];
+  /**
+   * Whether a static suggestion matches what is typed. Default: its text CONTAINS the typed text,
+   * any case (Base UI's own match). A field whose value is more than the query — a comma list
+   * where each suggestion completes the LAST entry — passes its own. `null` shows them as given.
+   * Never applied to {@link loadSuggestions}: the loader's answer already is the search.
+   */
+  filter?: ((item: S, query: string) => boolean) | null;
   /** Async fetch — called on every keystroke (debounced 250 ms).
    *  When provided, replaces the static `suggestions`. */
   loadSuggestions?: (query: string) => Promise<S[]>;
@@ -54,6 +60,8 @@ export interface AutocompleteProps<S = string>
   /** Height on the shared control-height scale (`--control-h-*`, task cbux-41).
    *  Default `md`. */
   size?: ControlSize;
+  /** The input element — to focus it from a form that names what is missing. */
+  inputRef?: Ref<HTMLInputElement>;
 }
 
 const DEBOUNCE_MS = 250;
@@ -74,6 +82,7 @@ export function AutocompleteField<S = string>({
   onChange,
   onBlur,
   suggestions = [],
+  filter,
   loadSuggestions,
   itemToString = (item) => String(item),
   renderSuggestion,
@@ -85,6 +94,7 @@ export function AutocompleteField<S = string>({
   'aria-describedby': ariaDescribedBy,
   className,
   size = 'md',
+  inputRef,
   ...rest
 }: AutocompleteProps<S>) {
   const isAsync = Boolean(loadSuggestions);
@@ -127,11 +137,15 @@ export function AutocompleteField<S = string>({
       itemToStringValue={itemToString}
       disabled={disabled}
       mode='list'
+      // Static suggestions narrow to what is typed (by default Base UI's own match: contains, any
+      // case, accents folded). A loader's answer is already the search — drawn as it came.
+      filter={isAsync ? null : filter}
       autoHighlight={false}
     >
       <Autocomplete.InputGroup className='relative flex items-center'>
         <Autocomplete.Input
           {...rest}
+          ref={inputRef}
           id={id}
           name={name}
           aria-invalid={ariaInvalid}
@@ -153,46 +167,7 @@ export function AutocompleteField<S = string>({
         </span>
       </Autocomplete.InputGroup>
 
-      <Autocomplete.Portal>
-        {/* 🔴 The z-index goes on the POSITIONER, not only the popup. Base UI's positioner is
-            the element that is `position: absolute` (with a transform); the popup inside it is
-            `position: static`, so the popup's own `z-[var(--z-popover)]` does nothing and the
-            list painted UNDER any sibling with a z-index — measured 2026-09-22 in the
-            binary-server inspector, a sticky table header (z-index 1) covering the second option
-            of an open MultiSelectField. */}
-        <Autocomplete.Positioner
-          sideOffset={4}
-          collisionPadding={FLOATING_COLLISION_PADDING}
-          className='z-[var(--z-popover)]'
-        >
-          <Autocomplete.Popup
-            className={cn(
-              FLOATING_CONTENT_BASE,
-              // guardrails-ignore no-raw-overflow: floating popover panel outside the page's ScrollArea, height-capped by max-h-64 — no keyboard-inset concern.
-              'max-h-64 min-w-[var(--anchor-width)] overflow-y-auto p-0 py-1',
-              'transition-[transform,opacity] duration-100',
-              'data-[starting-style]:scale-95 data-[starting-style]:opacity-0',
-              'data-[ending-style]:scale-95 data-[ending-style]:opacity-0',
-            )}
-          >
-            <Autocomplete.List>
-              {activeSuggestions.map((s, index) => (
-                <Autocomplete.Item
-                  key={itemToString(s)}
-                  value={s}
-                  index={index}
-                  className={cn(
-                    FLOATING_ITEM_BASE,
-                    'data-[highlighted]:bg-accent/10 data-[highlighted]:text-accent-strong',
-                  )}
-                >
-                  {renderSuggestion ? renderSuggestion(s) : itemToString(s)}
-                </Autocomplete.Item>
-              ))}
-            </Autocomplete.List>
-          </Autocomplete.Popup>
-        </Autocomplete.Positioner>
-      </Autocomplete.Portal>
+      <SuggestionList itemToString={itemToString} renderSuggestion={renderSuggestion} />
     </Autocomplete.Root>
   );
 }

package/src/react/components/Button.spec.tsx

@@ -35,6 +35,23 @@ describe('Button', () => {
     expect(cls).toContain('h-[var(--control-h-md)]'); // md, the shared control-height token
   });
 
+  test('🔴 a label never wraps inside the fixed control height — at every variant and size', () => {
+    for (const variant of ['primary', 'secondary', 'tertiary', 'destructive'] as const) {
+      for (const size of ['sm', 'md', 'lg'] as const) {
+        const { container, unmount } = render(<Button tooltip='Deploy now' variant={variant} size={size}>Deploy now</Button>);
+        expect(container.querySelector('button')?.className.split(/\s+/)).toContain('whitespace-nowrap');
+        unmount();
+      }
+    }
+    // A text link sits in a sentence and wraps with it — it has no fixed height to overflow.
+    const link = render(<Button tooltip='L' variant='link'>Use a recovery code instead</Button>);
+    expect(link.container.querySelector('button')?.className.split(/\s+/)).toContain('whitespace-normal');
+    expect(link.container.querySelector('button')?.className.split(/\s+/)).not.toContain('whitespace-nowrap');
+    link.unmount();
+    const { container } = render(<ButtonLink to='/x' tooltip='Open'>Open the deploy</ButtonLink>);
+    expect(container.querySelector('a')?.className.split(/\s+/)).toContain('whitespace-nowrap');
+  });
+
   test('a link is unpadded text at every size, so it lines up with the text around it (task 2466)', () => {
     for (const size of [undefined, 'sm', 'md', 'lg'] as const) {
       const { getByRole, unmount } = render(<Button tooltip='L' variant='link' size={size}>L</Button>);