@charcuterie/ui 2.2.0 → 2.4.0

package/dist/Select/Select.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CONTROL_SIZE_CLASS, MIN_TOUCH_TARGET_CLASS, } from "../controlStyles.js";
+import { CONTROL_SIZE_CLASS } from "../controlStyles.js";
 import { DISABLED_CLASS, FOCUS_RING_CLASS, } from "../intentStyles.js";
 import { toClassName } from "../toClassName.js";
 const getIsGroup = (item) => "options" in item;
@@ -44,7 +44,13 @@ export const Select = ({ className, isDisabled = false, label, onChange, options
             // cell. A `<select>`'s own arrow is what `appearance-none`
             // removes, and forgetting to put one back leaves a control
             // that looks exactly like a text input.
-            "pe-9", CONTROL_SIZE_CLASS[size], MIN_TOUCH_TARGET_CLASS, "hover:border-border-strong", FOCUS_RING_CLASS, DISABLED_CLASS, className), defaultValue: value ??
+            "pe-9", 
+            // Height comes from the shared control-size/density system ONLY —
+            // no per-component touch-target floor. Touch is the density axis's
+            // job (`[data-density]` scales `--control-height-*` past 44px on a
+            // kiosk), so forcing 44px here made Select taller than Button et al.
+            // at desktop density. See the controls-share-one-height decision.
+            CONTROL_SIZE_CLASS[size], "hover:border-border-strong", FOCUS_RING_CLASS, DISABLED_CLASS, className), defaultValue: value ??
                 (placeholder === undefined ? undefined : ""), disabled: isDisabled, onChange: (changeEvent) => {
                 onChange?.(changeEvent.currentTarget.value);
             }, children: [placeholder === undefined ? null : (_jsx("option", { disabled: true, value: "", children: placeholder })), options.map((item) => getIsGroup(item) ? (_jsx("optgroup", { label: item.label, children: item.options.map((option) => (_jsx("option", { disabled: option.isDisabled, value: option.value, children: option.label }, option.value))) }, item.label)) : (_jsx("option", { disabled: item.isDisabled, value: item.value, children: item.label }, item.value)))] }), _jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute end-3 size-4 text-content-secondary", fill: "none", focusable: false, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.75, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }));

package/dist/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":";AAOA,OAAO,EACL,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,cAAc,EACd,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAgE/C,MAAM,UAAU,GAAG,CACjB,IAAgB,EACW,EAAE,CAAC,SAAS,IAAI,IAAI,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,WAAW,EACF,EAAa,EAAE,CAAC,CAC5B,eAAK,SAAS,EAAC,0CAA0C,aACvD,qBACM,WAAW,gBACH,KAAK,EACjB,SAAS,EAAE,WAAW,CACpB,iLAAiL;YACjL,0DAA0D;YAC1D,2DAA2D;YAC3D,2DAA2D;YAC3D,wCAAwC;YACxC,MAAM,EACN,kBAAkB,CAAC,IAAI,CAAC,EACxB,sBAAsB,EACtB,4BAA4B,EAC5B,gBAAgB,EAChB,cAAc,EACd,SAAS,CACV,EACD,YAAY,EACV,KAAK;gBACL,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAE9C,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CACR,WAA2C,EAC3C,EAAE;gBACF,QAAQ,EAAE,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;YAC7C,CAAC,aAEA,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,iBAAQ,QAAQ,QAAC,KAAK,EAAC,EAAE,YACtB,WAAW,GACL,CACV,EAEA,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACpB,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACjB,mBAA2B,KAAK,EAAE,IAAI,CAAC,KAAK,YACzC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,iBACE,QAAQ,EAAE,MAAM,CAAC,UAAU,EAE3B,KAAK,EAAE,MAAM,CAAC,KAAK,YAElB,MAAM,CAAC,KAAK,IAHR,MAAM,CAAC,KAAK,CAIV,CACV,CAAC,IATW,IAAI,CAAC,KAAK,CAUd,CACZ,CAAC,CAAC,CAAC,CACF,iBACE,QAAQ,EAAE,IAAI,CAAC,UAAU,EAEzB,KAAK,EAAE,IAAI,CAAC,KAAK,YAEhB,IAAI,CAAC,KAAK,IAHN,IAAI,CAAC,KAAK,CAIR,CACV,CACF,IACM,EAET,6BAGc,MAAM,EAClB,SAAS,EAAC,kEAAkE,EAC5E,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,YAElC,eAAM,CAAC,EAAC,cAAc,GAAG,GACrB,IACF,CACP,CAAA"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EACL,cAAc,EACd,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAgE/C,MAAM,UAAU,GAAG,CACjB,IAAgB,EACW,EAAE,CAAC,SAAS,IAAI,IAAI,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,WAAW,EACF,EAAa,EAAE,CAAC,CAC5B,eAAK,SAAS,EAAC,0CAA0C,aACvD,qBACM,WAAW,gBACH,KAAK,EACjB,SAAS,EAAE,WAAW,CACpB,iLAAiL;YACjL,0DAA0D;YAC1D,2DAA2D;YAC3D,2DAA2D;YAC3D,wCAAwC;YACxC,MAAM;YACN,kEAAkE;YAClE,mEAAmE;YACnE,mEAAmE;YACnE,qEAAqE;YACrE,kEAAkE;YAClE,kBAAkB,CAAC,IAAI,CAAC,EACxB,4BAA4B,EAC5B,gBAAgB,EAChB,cAAc,EACd,SAAS,CACV,EACD,YAAY,EACV,KAAK;gBACL,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAE9C,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CACR,WAA2C,EAC3C,EAAE;gBACF,QAAQ,EAAE,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;YAC7C,CAAC,aAEA,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,iBAAQ,QAAQ,QAAC,KAAK,EAAC,EAAE,YACtB,WAAW,GACL,CACV,EAEA,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACpB,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACjB,mBAA2B,KAAK,EAAE,IAAI,CAAC,KAAK,YACzC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,iBACE,QAAQ,EAAE,MAAM,CAAC,UAAU,EAE3B,KAAK,EAAE,MAAM,CAAC,KAAK,YAElB,MAAM,CAAC,KAAK,IAHR,MAAM,CAAC,KAAK,CAIV,CACV,CAAC,IATW,IAAI,CAAC,KAAK,CAUd,CACZ,CAAC,CAAC,CAAC,CACF,iBACE,QAAQ,EAAE,IAAI,CAAC,UAAU,EAEzB,KAAK,EAAE,IAAI,CAAC,KAAK,YAEhB,IAAI,CAAC,KAAK,IAHN,IAAI,CAAC,KAAK,CAIR,CACV,CACF,IACM,EAET,6BAGc,MAAM,EAClB,SAAS,EAAC,kEAAkE,EAC5E,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,YAElC,eAAM,CAAC,EAAC,cAAc,GAAG,GACrB,IACF,CACP,CAAA"}

package/dist/controlStyles.d.ts

@@ -28,6 +28,14 @@ export declare const ICON_CONTROL_SIZE_CLASS: Record<ControlSize, string>;
  * density — a finger does not get smaller because the list is
  * dense — so this is opt-in per control rather than baked into the
  * size classes, which would make `compact` a lie.
+ *
+ * **Do NOT add this to a control that shares a form row** (`Button`,
+ * `Select`, a `Listbox`/`Combobox` trigger, `SegmentedControl`, …). It
+ * overrides the shared `CONTROL_SIZE_CLASS` height and makes that one
+ * control taller than its neighbours at desktop density — touch sizing is
+ * the density axis's job. Reserve this for a genuinely standalone tap
+ * target. See
+ * `docs/decisions/2026-08-05-controls-share-one-height-no-per-component-touch-floor.md`.
  */
 export declare const MIN_TOUCH_TARGET_CLASS = "min-h-(--control-min-touch-target) min-w-(--control-min-touch-target)";
 /**

package/dist/controlStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controlStyles.d.ts","sourceRoot":"","sources":["../src/controlStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAEtD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,0EACsC,CAAA;AAEzE;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;CAGnB,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAErD,eAAO,MAAM,cAAc;;;;CAIjB,CAAA;AAEV,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,WAAW,EACX,MAAM,CAKP,CAAA"}
+{"version":3,"file":"controlStyles.d.ts","sourceRoot":"","sources":["../src/controlStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAEtD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB,0EACsC,CAAA;AAEzE;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;CAGnB,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAErD,eAAO,MAAM,cAAc;;;;CAIjB,CAAA;AAEV,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,WAAW,EACX,MAAM,CAKP,CAAA"}

package/dist/controlStyles.js

@@ -35,6 +35,14 @@ export const ICON_CONTROL_SIZE_CLASS = {
  * density — a finger does not get smaller because the list is
  * dense — so this is opt-in per control rather than baked into the
  * size classes, which would make `compact` a lie.
+ *
+ * **Do NOT add this to a control that shares a form row** (`Button`,
+ * `Select`, a `Listbox`/`Combobox` trigger, `SegmentedControl`, …). It
+ * overrides the shared `CONTROL_SIZE_CLASS` height and makes that one
+ * control taller than its neighbours at desktop density — touch sizing is
+ * the density axis's job. Reserve this for a genuinely standalone tap
+ * target. See
+ * `docs/decisions/2026-08-05-controls-share-one-height-no-per-component-touch-floor.md`.
  */
 export const MIN_TOUCH_TARGET_CLASS = "min-h-(--control-min-touch-target) min-w-(--control-min-touch-target)";
 /**

package/dist/controlStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"controlStyles.js","sourceRoot":"","sources":["../src/controlStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,MAAM,CAAC,MAAM,kBAAkB,GAG3B;IACF,EAAE,EAAE,yFAAyF;IAC7F,EAAE,EAAE,yFAAyF;IAC7F,EAAE,EAAE,yFAAyF;CAC9F,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAGhC;IACF,EAAE,EAAE,yCAAyC;IAC7C,EAAE,EAAE,yCAAyC;IAC7C,EAAE,EAAE,yCAAyC;CAC9C,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GACjC,uEAAuE,CAAA;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,EAAE,EAAE,2BAA2B;IAC/B,EAAE,EAAE,6BAA6B;CACzB,CAAA;AAIV,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,UAAU;CACN,CAAA;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAG3B;IACF,EAAE,EAAE,mBAAmB;IACvB,EAAE,EAAE,iBAAiB;IACrB,EAAE,EAAE,iBAAiB;CACtB,CAAA"}
+{"version":3,"file":"controlStyles.js","sourceRoot":"","sources":["../src/controlStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,MAAM,CAAC,MAAM,kBAAkB,GAG3B;IACF,EAAE,EAAE,yFAAyF;IAC7F,EAAE,EAAE,yFAAyF;IAC7F,EAAE,EAAE,yFAAyF;CAC9F,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAGhC;IACF,EAAE,EAAE,yCAAyC;IAC7C,EAAE,EAAE,yCAAyC;IAC7C,EAAE,EAAE,yCAAyC;CAC9C,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,sBAAsB,GACjC,uEAAuE,CAAA;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,EAAE,EAAE,2BAA2B;IAC/B,EAAE,EAAE,6BAA6B;CACzB,CAAA;AAIV,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,UAAU;CACN,CAAA;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAG3B;IACF,EAAE,EAAE,mBAAmB;IACvB,EAAE,EAAE,iBAAiB;IACrB,EAAE,EAAE,iBAAiB;CACtB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@charcuterie/logic": "1.1.0",
-    "@charcuterie/tokens": "1.1.1",
+    "@charcuterie/tokens": "1.1.2",
     "@floating-ui/react": "^0.27.20",
     "@tanstack/react-virtual": "^3.13.12"
   },

package/src/Combobox/Combobox.mdx

@@ -58,6 +58,36 @@ removable chips rather than filling the input, and keeps the popup open.
 
 <Canvas of={ComboboxStories.AllStates} />
 
+## Attached input & drill-down
+
+Supply `inputRef` and Combobox stops rendering its own input: it anchors a **list-only**
+popup to the consumer's `<input>`, mirrors the combobox ARIA (`role`, `aria-controls`,
+`aria-activedescendant`) onto it, and drives arrows/Enter/Tab/Escape off it while focus
+stays put. Use it when the field is **both the value and the query** — a path field whose
+text you type *and* filter by, the shape `PathPicker` needs.
+
+The consumer owns the input's `value`/`onChange` (wire them to the controlled `query`,
+which is then required) **and** `isVisible`. Because of that, **a select does not
+auto-dismiss** in this mode: `onSelect` fires and the consumer decides what happens next —
+append the folder and leave `isVisible` on to drill deeper (the popup re-queries from the
+new path and stays open), or call its own `close()` to finish. Enter and Tab both accept
+the active option; Escape closes outright. Single-select only (`isMultiple` is classic-mode
+only, and it stays the only mode that keeps the popup open on a normal select).
+
+```tsx
+<input ref={inputRef} value={path} onChange={(e) => setPath(e.target.value)} />
+<Combobox
+  inputRef={inputRef}
+  isVisible={isVisible}
+  query={path}
+  options={folders}                 // pre-filtered by the trailing segment
+  onSelect={(name) => setPath(`${parentPath}${name}/`)}  // drills; stays open
+  onDismiss={() => setIsVisible(false)}
+/>
+```
+
+<Canvas of={ComboboxStories.AttachedInputDrillDown} />
+
 ## Virtualization, and why `aria-setsize` is not optional
 
 Above ~100 options (or with `isVirtualized`), the list is windowed with

package/src/Combobox/Combobox.stories.tsx

@@ -1,7 +1,7 @@
 import { useVisibility } from "@charcuterie/logic"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
-import { useState } from "react"
+import { useRef, useState } from "react"
 
 import { Button } from "../Button/Button.tsx"
 import type { ListboxItem } from "../Listbox/Listbox.tsx"
@@ -153,10 +153,11 @@ export const AllStates: Story = {
 }
 
 /**
- * Multi-select renders the chosen values as removable chips rather
- * than filling the input, with a sticky footer hint — the
- * `LanguageCodeField` and `LinkPicker` shapes. `isCreatable` lets Enter
- * commit the raw query.
+ * Multi-select renders the chosen values as an always-visible row of
+ * removable chips **above the trigger** — they stay on screen after the
+ * popup closes, and each carries its option's human label (not its raw
+ * value) and an ✕ to remove it. The `LanguageCodeField` and `LinkPicker`
+ * shapes. `isCreatable` lets Enter commit the raw query.
  */
 export const AllVariants: Story = {
   args: {
@@ -227,6 +228,150 @@ export const Interactive: Story = {
  * first option to the first enabled one — and Enter must never commit the
  * disabled value.
  */
+// A tiny in-memory directory tree for the attached-input demo: keys are
+// parent paths (with trailing slash), values their child folders.
+const TREE: Record<string, string[]> = {
+  "/": ["apps", "config", "media"],
+  "/apps/": ["mux-magic", "charcuterie"],
+  "/config/": ["hosts", "secrets"],
+  "/media/": ["movies", "music"],
+}
+
+const AttachedInputHarness = (): ReactNode => {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const [value, setValue] = useState("/")
+
+  const [isVisible, setIsVisible] = useState(true)
+
+  const lastSlash = value.lastIndexOf("/")
+
+  const parentPath = value.slice(0, lastSlash + 1) || "/"
+
+  const tail = value.slice(lastSlash + 1)
+
+  const options: ListboxItem[] = (TREE[parentPath] ?? [])
+    .filter((name) => name.startsWith(tail))
+    .map((name) => ({
+      label: `📁 ${name}`,
+      textValue: name,
+      value: name,
+    }))
+
+  return (
+    <>
+      <input
+        aria-label="Path"
+        className="w-80 rounded-md border border-border-default bg-surface-raised px-2 py-1.5 font-mono text-content-primary text-sm outline-none"
+        onChange={(changeEvent) => {
+          setValue(changeEvent.target.value)
+
+          setIsVisible(true)
+        }}
+        ref={inputRef}
+        value={value}
+      />
+
+      <Combobox
+        emptyLabel="No matching entries."
+        inputRef={inputRef}
+        isVisible={isVisible}
+        onDismiss={() => {
+          setIsVisible(false)
+        }}
+        onSelect={(name) => {
+          // Drill in: append the picked folder + separator. The changed
+          // query refetches the new directory; the popup stays open
+          // because we never flip `isVisible`.
+          setValue(`${parentPath}${name}/`)
+        }}
+        options={options}
+        query={value}
+      />
+    </>
+  )
+}
+
+/**
+ * Attached-input mode: the consumer renders its own `<input>` (both the
+ * committed value and the query) and Combobox anchors a list-only popup
+ * to it. Type a path; picking a folder appends it and re-queries that
+ * folder's children **without closing** — a shell-style drill-down. This
+ * is `PathPicker`'s shape.
+ */
+export const AttachedInputDrillDown: Story = {
+  args: {
+    inputRef: { current: null },
+    isVisible: true,
+    onDismiss: () => {},
+    onSelect: () => {},
+    options: [],
+    query: "/",
+  },
+  render: () => <AttachedInputHarness />,
+}
+
+// Long, space-separated names — the real-world case (a media library of
+// long folder names) the short demo tree does not show.
+const LONG_OPTIONS: ListboxItem[] = [
+  "Armored Trooper Votoms - Brilliantly Shining Heresy [anidb-7910]",
+  "Armored Trooper Votoms - Case;Irvine [anidb-7911]",
+  "Armored Trooper Votoms - Chirico's Return [anidb-1234]",
+  "Armored Trooper Votoms - Deadworld Sunsa [anidb-5678]",
+  "Armored Trooper Votoms - Pailsen Files - The Movie [anidb-9012]",
+].map((name) => ({
+  label: `📁 ${name}`,
+  textValue: name,
+  value: name,
+}))
+
+const LongOptionsHarness = (): ReactNode => {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const [isVisible, setIsVisible] = useState(true)
+
+  return (
+    <>
+      <input
+        aria-label="Path"
+        className="w-80 rounded-md border border-border-default bg-surface-raised px-2 py-1.5 font-mono text-content-primary text-sm outline-none"
+        readOnly
+        ref={inputRef}
+        value="/media/Media-Storage/Anime/"
+      />
+
+      <Combobox
+        emptyLabel="No matching entries."
+        inputRef={inputRef}
+        isVisible={isVisible}
+        onDismiss={() => {
+          setIsVisible(false)
+        }}
+        onSelect={() => {}}
+        options={LONG_OPTIONS}
+        query="/media/Media-Storage/Anime/"
+      />
+    </>
+  )
+}
+
+/**
+ * How the attached-input popup handles **long option labels** — a media
+ * library of long folder names, the case the short drill-down demo hides.
+ * Shows how the panel sizes and how each option row treats overflow.
+ */
+export const AttachedInputLongOptions: Story = {
+  args: {
+    inputRef: { current: null },
+    isVisible: true,
+    onDismiss: () => {},
+    onSelect: () => {},
+    options: LONG_OPTIONS,
+    query: "/media/Media-Storage/Anime/",
+  },
+  render: () => <LongOptionsHarness />,
+}
+
 export const DisabledFirstOption: Story = {
   args: {
     isVisible: false,

package/src/Combobox/Combobox.test.tsx

@@ -9,6 +9,7 @@ import * as stories from "./Combobox.stories.tsx"
 
 const {
   AllVariants,
+  AttachedInputDrillDown,
   Default,
   DisabledFirstOption,
   Interactive,
@@ -224,8 +225,10 @@ test("removing a chip reports the removal through onSelect", async () => {
     ).toBeInTheDocument()
   })
 
+  // The chip's face and accessible name are the option's human label,
+  // not its `value` — "English", not "eng".
   await userEvent.click(
-    body.getByRole("button", { name: "Remove eng" }),
+    body.getByRole("button", { name: "Remove English" }),
   )
 
   // The removal flowed back through `onSelect`, so the parent cleared it
@@ -269,6 +272,122 @@ test("a disabled first option is skipped, never active or committed", async () =
   ).toBeInTheDocument()
 })
 
+test("attached mode: the consumer input is the combobox and options are shown", async () => {
+  const { body, canvas } = await mountStory(
+    AttachedInputDrillDown,
+  )
+
+  const input = canvas.getByLabelText("Path")
+
+  // The a11y is mirrored onto the consumer's own input.
+  await waitFor(() => {
+    expect(input).toHaveAttribute("role", "combobox")
+  })
+
+  await expect(input).toHaveAttribute(
+    "aria-autocomplete",
+    "list",
+  )
+
+  const listbox = body.getByRole("listbox")
+
+  await expect(input).toHaveAttribute(
+    "aria-controls",
+    listbox.id,
+  )
+
+  // The three top-level folders, from the pre-filtered options.
+  await expect(body.getAllByRole("option")).toHaveLength(3)
+
+  await expectNoAxeViolations(listbox)
+})
+
+test("attached mode: selecting a folder drills in and keeps the popup open", async () => {
+  const { body, canvas } = await mountStory(
+    AttachedInputDrillDown,
+  )
+
+  const input = canvas.getByLabelText("Path")
+
+  await userEvent.click(input)
+
+  await waitFor(() => {
+    expect(input).toHaveFocus()
+  })
+
+  // Enter commits the active option ("apps") — but does not close.
+  await userEvent.keyboard("{Enter}")
+
+  await waitFor(() => {
+    expect(
+      body.getByRole("option", { name: /mux-magic/ }),
+    ).toBeInTheDocument()
+  })
+
+  // The field drilled in, the popup is still open, and focus never left.
+  await expect(input).toHaveValue("/apps/")
+
+  await expect(
+    body.getByRole("listbox"),
+  ).toBeInTheDocument()
+
+  await expect(input).toHaveFocus()
+})
+
+test("attached mode: Tab also accepts the active option and drills", async () => {
+  const { body, canvas } = await mountStory(
+    AttachedInputDrillDown,
+  )
+
+  const input = canvas.getByLabelText("Path")
+
+  await userEvent.click(input)
+
+  await waitFor(() => {
+    expect(input).toHaveFocus()
+  })
+
+  await userEvent.keyboard("{Tab}")
+
+  await waitFor(() => {
+    expect(input).toHaveValue("/apps/")
+  })
+
+  // Tab drilled rather than moving focus out; the popup stays open.
+  await expect(
+    body.getByRole("listbox"),
+  ).toBeInTheDocument()
+
+  await expect(input).toHaveFocus()
+})
+
+test("attached mode: Escape closes the popup outright", async () => {
+  const { body, canvas } = await mountStory(
+    AttachedInputDrillDown,
+  )
+
+  const input = canvas.getByLabelText("Path")
+
+  await userEvent.click(input)
+
+  await waitFor(() => {
+    expect(input).toHaveFocus()
+  })
+
+  await userEvent.keyboard("{Escape}")
+
+  await waitFor(() => {
+    expect(body.queryByRole("listbox")).toBeNull()
+  })
+
+  // The consumer's input persists (Combobox never rendered it); it just
+  // reports itself collapsed.
+  await expect(input).toHaveAttribute(
+    "aria-expanded",
+    "false",
+  )
+})
+
 test("a windowed list carries aria-setsize and aria-posinset", async () => {
   const { body } = await mountStory(Virtualized)