@charcuterie/ui 2.16.0 → 2.18.0

package/dist/Checkbox/Checkbox.d.ts

@@ -34,6 +34,25 @@ export type CheckboxProps = {
     label: ReactNode;
     onChange?: (isChecked: boolean) => void;
     size?: ControlSize;
+    /**
+     * The `<input>`'s `value` attribute — which member of a group this
+     * box IS, as opposed to whether it is ticked.
+     *
+     * A lone boolean does not need this. A GROUP does: the browser
+     * submits `name=value` for each ticked box in a form, and, more
+     * relevantly here, a group is normally read back with one query —
+     * `[...root.querySelectorAll("input")].filter(i => i.checked)
+     * .map(i => i.value)`. Without a `value` every box in the group
+     * reports the string `"on"` and the read is useless, which is why
+     * queuepilot's library and ratings pickers were still hand-rolling
+     * a raw `<input type="checkbox">` rather than adopting this
+     * component.
+     *
+     * Passed straight through and otherwise inert. It is NOT the
+     * checked state and does not become one: `isChecked` still seeds
+     * the box, and `onChange` still reports a boolean.
+     */
+    value?: string;
 };
 /**
  * A single boolean, on or off, that owns nothing but itself.
@@ -64,5 +83,5 @@ export type CheckboxProps = {
  * `<input>`'s job. `isChecked` seeds the first paint and nothing
  * after.
  */
-export declare const Checkbox: ({ className, id, isChecked, isDisabled, isReadOnly, label, onChange, size, }: CheckboxProps) => ReactNode;
+export declare const Checkbox: ({ className, id, isChecked, isDisabled, isReadOnly, label, onChange, size, value, }: CheckboxProps) => ReactNode;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,OAAO,CAAA;AAKnD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,GAAI,8EAStB,aAAa,KAAG,SA0GlB,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,OAAO,CAAA;AAKnD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB;;;;;;;;;;;;;;;;;OAiBG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,GAAI,qFAUtB,aAAa,KAAG,SA2GlB,CAAA"}

package/dist/Checkbox/Checkbox.js

@@ -45,7 +45,7 @@ const TEXT_SIZE_CLASS = {
  * `<input>`'s job. `isChecked` seeds the first paint and nothing
  * after.
  */
-export const Checkbox = ({ className, id, isChecked = false, isDisabled = false, isReadOnly = false, label, onChange, size = "md", }) => (_jsxs("label", { className: toClassName("inline-flex items-center gap-2 text-content-secondary select-none", TEXT_SIZE_CLASS[size], 
+export const Checkbox = ({ className, id, isChecked = false, isDisabled = false, isReadOnly = false, label, onChange, size = "md", value, }) => (_jsxs("label", { className: toClassName("inline-flex items-center gap-2 text-content-secondary select-none", TEXT_SIZE_CLASS[size], 
     // One cursor, chosen by state — two cursor utilities of the same
     // specificity do not resolve by class-list order.
     isDisabled
@@ -99,7 +99,7 @@ export const Checkbox = ({ className, id, isChecked = false, isDisabled = false,
                         if (isReadOnly && keyEvent.key === " ") {
                             keyEvent.preventDefault();
                         }
-                    }, type: "checkbox" }), _jsx("svg", { "aria-hidden": "true", className: toClassName("pointer-events-none invisible absolute peer-checked:visible", 
+                    }, type: "checkbox", value: value }), _jsx("svg", { "aria-hidden": "true", className: toClassName("pointer-events-none invisible absolute peer-checked:visible", 
                     // Matches whichever fill the box wears, so the tick keeps its
                     // guaranteed on-solid contrast in either intent.
                     isReadOnly

package/dist/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}

package/dist/MediaTile/MediaTile.d.ts

@@ -13,6 +13,14 @@ export type MediaTileProps = Omit<ComponentPropsWithRef<"figure">, "children"> &
     /** Shown in place of the image when it fails. */
     fallback?: ReactNode;
     href?: string;
+    /**
+     * Makes the tile a button. Hover, focus-visible and
+     * `cursor-pointer` come with it — wrapping `MediaTile` in a
+     * bare `<button>` is how a poster ends up with a text cursor
+     * and no hover at all. `href` wins if both are set.
+     */
+    isDisabled?: boolean;
+    onClick?: ComponentPropsWithRef<"button">["onClick"];
     src?: string;
     subtitle?: ReactNode;
     title: string;
@@ -42,5 +50,5 @@ export type MediaTileProps = Omit<ComponentPropsWithRef<"figure">, "children"> &
  * `useState<string>`, which is what makes `loaded → error`
  * impossible instead of merely unlikely — see `mediaStatus.ts`.
  */
-export declare const MediaTile: ({ alt, aspectRatio, badge, className, fallback, href, src, subtitle, title, ...figureProps }: MediaTileProps) => ReactNode;
+export declare const MediaTile: ({ alt, aspectRatio, badge, className, fallback, href, isDisabled, onClick, src, subtitle, title, ...figureProps }: MediaTileProps) => ReactNode;
 //# sourceMappingURL=MediaTile.d.ts.map

package/dist/MediaTile/MediaTile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaTile.d.ts","sourceRoot":"","sources":["../../src/MediaTile/MediaTile.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAOd,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE1D,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,CACX,GAAG;IACF;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,SAAS,GAAI,8FAWvB,cAAc,KAAG,SAoJnB,CAAA"}
+{"version":3,"file":"MediaTile.d.ts","sourceRoot":"","sources":["../../src/MediaTile/MediaTile.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAOd,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE1D,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,CACX,GAAG;IACF;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAA;IACpD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAkBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,SAAS,GAAI,mHAavB,cAAc,KAAG,SA2KnB,CAAA"}

package/dist/MediaTile/MediaTile.js

@@ -4,6 +4,12 @@ import { useEffect, useRef } from "react";
 import { Skeleton } from "../Skeleton/Skeleton.js";
 import { toClassName } from "../toClassName.js";
 import { mediaTransitions } from "./mediaStatus.js";
+/**
+ * Shared by the link and the button. A wrapped `<button
+ * className="block">` does not get these, which is why a
+ * Collection thumbnail looked inert under the pointer.
+ */
+const INTERACTIVE_CLASS = "group flex cursor-pointer flex-col rounded-md outline-offset-2 hover:opacity-90 focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-focus-ring";
 const RATIO_CLASS = {
     // 2:3 is the standard poster trim, which is what Plex, Kavita, and
     // every physical sleeve in the collection actually are.
@@ -36,7 +42,7 @@ const RATIO_CLASS = {
  * `useState<string>`, which is what makes `loaded → error`
  * impossible instead of merely unlikely — see `mediaStatus.ts`.
  */
-export const MediaTile = ({ alt, aspectRatio = "poster", badge, className, fallback, href, src, subtitle, title, ...figureProps }) => {
+export const MediaTile = ({ alt, aspectRatio = "poster", badge, className, fallback, href, isDisabled = false, onClick, src, subtitle, title, ...figureProps }) => {
     const imageRef = useRef(null);
     const { can, reset, status, transitionTo } = useStatus({
         initialState: "loading",
@@ -62,7 +68,7 @@ export const MediaTile = ({ alt, aspectRatio = "poster", badge, className, fallb
             transitionTo("error");
         }
     }, [can, reset, transitionTo]);
-    const media = (_jsxs("div", { className: toClassName("relative overflow-hidden rounded-md bg-surface-sunken", RATIO_CLASS[aspectRatio]), children: [status === "error" ? (_jsx("div", { "aria-label": alt, className: "flex size-full flex-col items-center justify-center gap-1 p-2 text-center text-content-muted text-xs", role: "img", children: fallback ?? _jsx("span", { children: "Image unavailable" }) })) : (_jsxs(_Fragment, { children: [status === "loading" ? (_jsx(Skeleton, { className: "absolute inset-0 size-full" })) : null, _jsx("img", { alt: href ? "" : alt, className: toClassName("size-full object-cover transition-opacity duration-(--duration-normal) ease-standard", status === "loaded"
+    const media = (_jsxs("div", { className: toClassName("relative overflow-hidden rounded-md bg-surface-sunken", RATIO_CLASS[aspectRatio]), children: [status === "error" ? (_jsx("div", { "aria-label": alt, className: "flex size-full flex-col items-center justify-center gap-1 p-2 text-center text-content-muted text-xs", role: "img", children: fallback ?? _jsx("span", { children: "Image unavailable" }) })) : (_jsxs(_Fragment, { children: [status === "loading" ? (_jsx(Skeleton, { className: "absolute inset-0 size-full" })) : null, _jsx("img", { alt: href || onClick ? "" : alt, className: toClassName("size-full object-cover transition-opacity duration-(--duration-normal) ease-standard", status === "loaded"
                             ? "opacity-100"
                             : "opacity-0"), decoding: "async", loading: "lazy", onError: () => {
                             if (can("error")) {
@@ -73,7 +79,13 @@ export const MediaTile = ({ alt, aspectRatio = "poster", badge, className, fallb
                                 transitionTo("loaded");
                             }
                         }, ref: imageRef, src: src })] })), badge ? (_jsx("div", { className: "absolute top-2 start-2", children: badge })) : null] }));
-    const caption = (_jsxs("figcaption", { className: "flex flex-col gap-0.5 pt-2", children: [_jsx("span", { className: "truncate font-medium text-content-primary text-sm cq-sm:text-md", children: title }), subtitle ? (_jsx("span", { className: "truncate text-content-muted text-xs", children: subtitle })) : null] }));
-    return (_jsx("figure", { ...figureProps, className: toClassName("@container flex flex-col", className), children: href ? (_jsxs("a", { "aria-label": title, className: "group flex flex-col rounded-md outline-offset-2 hover:opacity-90 focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-focus-ring", href: href, children: [media, caption] })) : (_jsxs(_Fragment, { children: [media, caption] })) }));
+    const caption = title === "" ? null : (_jsxs("figcaption", { className: "flex flex-col gap-0.5 pt-2", children: [_jsx("span", { className: "truncate font-medium text-content-primary text-sm cq-sm:text-md", children: title }), subtitle ? (_jsx("span", { className: "truncate text-content-muted text-xs", children: subtitle })) : null] }));
+    // An empty `title` is how a tile sits next to a name the
+    // parent already printed. The control still needs a name, so
+    // the alt is the fallback — wrapping it in a nameless
+    // `<button>` was how Collection's cover thumbnail became
+    // unfindable as well as un-hoverable.
+    const accessibleName = title === "" ? alt : title;
+    return (_jsx("figure", { ...figureProps, className: toClassName("@container flex flex-col", className), children: href ? (_jsxs("a", { "aria-label": accessibleName, className: INTERACTIVE_CLASS, href: href, children: [media, caption] })) : onClick ? (_jsxs("button", { "aria-label": accessibleName, className: toClassName(INTERACTIVE_CLASS, "w-full border-0 bg-transparent p-0 text-start disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50"), disabled: isDisabled, onClick: onClick, type: "button", children: [media, caption] })) : (_jsxs(_Fragment, { children: [media, caption] })) }));
 };
 //# sourceMappingURL=MediaTile.js.map

package/dist/MediaTile/MediaTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaTile.js","sourceRoot":"","sources":["../../src/MediaTile/MediaTile.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MediaTile.js","sourceRoot":"","sources":["../../src/MediaTile/MediaTile.tsx"],"names":[],"mappings":"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"}

package/package.json

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

package/src/Checkbox/Checkbox.mdx

@@ -62,6 +62,30 @@ is a control every consumer has to hold it for.
   here and change elsewhere, not an actionable accent. It announces `aria-readonly`, and
   the toggle is blocked on both pointer and `Space`.
 
+## A group of boxes needs `value`
+
+`value` is the `<input>`'s `value` attribute: **which member of a group** this box is, as
+opposed to whether it is ticked. A lone boolean should omit it.
+
+A group needs it, because a group is read back with one query over its container rather
+than by keeping a callback's worth of state per box:
+
+```ts
+const chosen = [...group.querySelectorAll<HTMLInputElement>("input[type=checkbox]")]
+  .filter((input) => input.checked)
+  .map((input) => input.value)
+```
+
+Without a `value` every box in the group answers the UA default `"on"`, so that read
+returns N copies of one meaningless string. This is why queuepilot's library and ratings
+pickers were still hand-rolling a raw `<input type="checkbox">` instead of using this
+component — the component was correct and simply could not express the case.
+
+It is passed straight through and is otherwise inert: it is **not** the checked state and
+does not become one. `isChecked` still seeds the box, `onChange` still reports a boolean.
+
+<Canvas of={CheckboxStories.WithValues} />
+
 ## Checkbox or `Switch`
 
 Same state kind, different meaning. A checkbox is a value you **submit** — "delete

package/src/Checkbox/Checkbox.stories.tsx

@@ -120,3 +120,45 @@ export const AllStates: Story = {
 export const Interactive: Story = {
   args: { label: "Delete originals after import" },
 }
+
+/**
+ * `value` names which member of a group a box IS — not whether it is
+ * ticked. It matters as soon as there is more than one box: a group is
+ * read back with a single query over its container, and without a
+ * `value` every box in it answers `"on"`.
+ *
+ * ```ts
+ * const chosen = [...group.querySelectorAll("input")]
+ *   .filter((input) => input.checked)
+ *   .map((input) => input.value)
+ * ```
+ *
+ * A lone boolean needs none of this and should omit the prop.
+ */
+export const WithValues: Story = {
+  args: { label: "Anime" },
+  render: (controlProps) => (
+    <StorySection title="A library picker: each box carries the id the caller will read back, and the checked ones are the answer.">
+      <StoryGrid columns={2}>
+        {[
+          { id: "11", isChosen: true, title: "Anime" },
+          { id: "1", isChosen: false, title: "Movies" },
+          { id: "15", isChosen: true, title: "Shorts" },
+          { id: "2", isChosen: false, title: "Shows" },
+        ].map((library) => (
+          <StoryCell
+            key={library.id}
+            label={`value="${library.id}"`}
+          >
+            <Checkbox
+              {...controlProps}
+              isChecked={library.isChosen}
+              label={library.title}
+              value={library.id}
+            />
+          </StoryCell>
+        ))}
+      </StoryGrid>
+    </StorySection>
+  ),
+}

package/src/Checkbox/Checkbox.test.tsx

@@ -7,7 +7,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Checkbox.stories.tsx"
 
-const { AllStates, Default, Interactive } =
+const { AllStates, Default, Interactive, WithValues } =
   composeStories(stories)
 
 test("it is a checkbox a screen reader can name", async () => {
@@ -107,3 +107,54 @@ test("a read-only box is announced and cannot be toggled", async () => {
 
   await expectNoAxeViolations(canvasElement)
 })
+
+test("value names the member, and a group reads back the ticked ones", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(WithValues)
+
+  // The prop is the `<input>`'s `value` and nothing else — it must not
+  // touch the checked state, which `isChecked` still owns alone.
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Anime",
+      role: "checkbox",
+    }),
+  ).toHaveAttribute("value", "11")
+
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Movies",
+      role: "checkbox",
+    }),
+  ).not.toBeChecked()
+
+  // The read this prop exists for. Without a `value` every box here
+  // answers the UA default `"on"` and the result is four copies of one
+  // meaningless string, which is why a group could not use this
+  // component at all before.
+  const chosen = [
+    ...canvasElement.querySelectorAll<HTMLInputElement>(
+      "input[type=checkbox]",
+    ),
+  ]
+    .filter((input) => input.checked)
+    .map((input) => input.value)
+
+  await expect(chosen).toEqual(["11", "15"])
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("a box with no value stays out of the way", async () => {
+  const { canvas } = await mountStory(Default)
+
+  // `value` is optional and a lone boolean should omit it. React drops
+  // an `undefined` attribute entirely rather than writing an empty
+  // string, so the DOM looks exactly as it did before the prop existed.
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Delete originals after import",
+      role: "checkbox",
+    }),
+  ).not.toHaveAttribute("value")
+})

package/src/Checkbox/Checkbox.tsx

@@ -38,6 +38,25 @@ export type CheckboxProps = {
   label: ReactNode
   onChange?: (isChecked: boolean) => void
   size?: ControlSize
+  /**
+   * The `<input>`'s `value` attribute — which member of a group this
+   * box IS, as opposed to whether it is ticked.
+   *
+   * A lone boolean does not need this. A GROUP does: the browser
+   * submits `name=value` for each ticked box in a form, and, more
+   * relevantly here, a group is normally read back with one query —
+   * `[...root.querySelectorAll("input")].filter(i => i.checked)
+   * .map(i => i.value)`. Without a `value` every box in the group
+   * reports the string `"on"` and the read is useless, which is why
+   * queuepilot's library and ratings pickers were still hand-rolling
+   * a raw `<input type="checkbox">` rather than adopting this
+   * component.
+   *
+   * Passed straight through and otherwise inert. It is NOT the
+   * checked state and does not become one: `isChecked` still seeds
+   * the box, and `onChange` still reports a boolean.
+   */
+  value?: string
 }
 
 const BOX_SIZE_CLASS: Record<ControlSize, string> = {
@@ -96,6 +115,7 @@ export const Checkbox = ({
   label,
   onChange,
   size = "md",
+  value,
 }: CheckboxProps): ReactNode => (
   <label
     className={toClassName(
@@ -176,6 +196,7 @@ export const Checkbox = ({
           }
         }}
         type="checkbox"
+        value={value}
       />
 
       <svg

package/src/Field/Field.mdx

@@ -27,6 +27,12 @@ in one place and cannot be spelled twice.
 
 <Canvas of={FieldStories.Default} />
 
+`Field` is also how a `Picker` (or `Button`, or `Select`) sits next to
+its label **without butting against the last word**. Those controls are
+flush — no outer margin — on purpose. The stacked `gap-1.5` here is the
+gutter. An inline label + trigger is a row with `gap-*`, not a margin
+on the control. See [Picker](../Picker/Picker.mdx#the-trigger-is-flush--the-parent-owns-the-gap).
+
 ## Props
 
 <Controls />

package/src/MediaTile/MediaTile.mdx

@@ -40,10 +40,15 @@ carries, and for the same reason.
 
 ## Names
 
-`alt` is required. When `href` is set, the link carries `aria-label={title}` and the image
-goes `alt=""` — an agent writing `getByRole("link", { name: "Blade Runner" })` should not
-have to know whether a subtitle happened to be rendered, and two names for one link is a
-screen reader reading it twice.
+`alt` is required. When `href` or `onClick` is set, the control carries
+`aria-label={title}` (or `alt` if `title` is empty) and the image goes `alt=""` — an agent
+writing `getByRole("link", { name: "Blade Runner" })` or `getByRole("button", { name: "Change cover for Blade Runner" })`
+should not have to know whether a subtitle happened to be rendered, and two names for one
+control is a screen reader reading it twice.
+
+`onClick` is the button form of that same chrome: pointer cursor, hover fade, focus-visible
+ring. Do not wrap `MediaTile` in a bare `<button>` — Tailwind's preflight leaves a text
+cursor and no hover, which is how a Collection thumbnail looked inert.
 
 The caption's type steps up past `--cq-sm`, so a tile in a dense 8-across grid and the same
 tile in a 3-across one are both legible.

package/src/MediaTile/MediaTile.stories.tsx

@@ -209,3 +209,17 @@ export const Interactive: Story = {
     title: "Blade Runner",
   },
 }
+
+/**
+ * Same chrome as the link — pointer, hover fade, focus ring —
+ * as a button. Wrapping the tile in a bare `<button>` is how a
+ * Collection thumbnail ended up with a text cursor.
+ */
+export const InteractiveButton: Story = {
+  args: {
+    alt: "Change cover for Blade Runner",
+    onClick: () => undefined,
+    src: toPosterSrc("Blade Runner"),
+    title: "",
+  },
+}

package/src/MediaTile/MediaTile.test.tsx

@@ -6,7 +6,8 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./MediaTile.stories.tsx"
 
-const { Default, Interactive } = composeStories(stories)
+const { Default, Interactive, InteractiveButton } =
+  composeStories(stories)
 
 test("an unlinked tile's poster carries the name", async () => {
   const { canvas } = await mountStory(Default)
@@ -39,3 +40,18 @@ test("a linked tile is one link named for its title", async () => {
   // for one link is a screen reader reading it twice.
   await expect(canvas.queryAllByRole("img")).toHaveLength(0)
 })
+
+test("a clickable tile is one button with a pointer cursor", async () => {
+  const { canvas } = await mountStory(InteractiveButton)
+
+  const button = expectAgentDrivable(canvas, {
+    name: "Change cover for Blade Runner",
+    role: "button",
+  })
+
+  await expect(button).toHaveStyle({ cursor: "pointer" })
+
+  await userEvent.tab()
+
+  await expect(button).toHaveFocus()
+})

package/src/MediaTile/MediaTile.tsx

@@ -27,11 +27,27 @@ export type MediaTileProps = Omit<
   /** Shown in place of the image when it fails. */
   fallback?: ReactNode
   href?: string
+  /**
+   * Makes the tile a button. Hover, focus-visible and
+   * `cursor-pointer` come with it — wrapping `MediaTile` in a
+   * bare `<button>` is how a poster ends up with a text cursor
+   * and no hover at all. `href` wins if both are set.
+   */
+  isDisabled?: boolean
+  onClick?: ComponentPropsWithRef<"button">["onClick"]
   src?: string
   subtitle?: ReactNode
   title: string
 }
 
+/**
+ * Shared by the link and the button. A wrapped `<button
+ * className="block">` does not get these, which is why a
+ * Collection thumbnail looked inert under the pointer.
+ */
+const INTERACTIVE_CLASS =
+  "group flex cursor-pointer flex-col rounded-md outline-offset-2 hover:opacity-90 focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-focus-ring"
+
 const RATIO_CLASS: Record<MediaTileRatio, string> = {
   // 2:3 is the standard poster trim, which is what Plex, Kavita, and
   // every physical sleeve in the collection actually are.
@@ -72,6 +88,8 @@ export const MediaTile = ({
   className,
   fallback,
   href,
+  isDisabled = false,
+  onClick,
   src,
   subtitle,
   title,
@@ -144,7 +162,7 @@ export const MediaTile = ({
           ) : null}
 
           <img
-            alt={href ? "" : alt}
+            alt={href || onClick ? "" : alt}
             className={toClassName(
               "size-full object-cover transition-opacity duration-(--duration-normal) ease-standard",
               status === "loaded"
@@ -177,19 +195,27 @@ export const MediaTile = ({
     </div>
   )
 
-  const caption = (
-    <figcaption className="flex flex-col gap-0.5 pt-2">
-      <span className="truncate font-medium text-content-primary text-sm cq-sm:text-md">
-        {title}
-      </span>
-
-      {subtitle ? (
-        <span className="truncate text-content-muted text-xs">
-          {subtitle}
+  const caption =
+    title === "" ? null : (
+      <figcaption className="flex flex-col gap-0.5 pt-2">
+        <span className="truncate font-medium text-content-primary text-sm cq-sm:text-md">
+          {title}
         </span>
-      ) : null}
-    </figcaption>
-  )
+
+        {subtitle ? (
+          <span className="truncate text-content-muted text-xs">
+            {subtitle}
+          </span>
+        ) : null}
+      </figcaption>
+    )
+
+  // An empty `title` is how a tile sits next to a name the
+  // parent already printed. The control still needs a name, so
+  // the alt is the fallback — wrapping it in a nameless
+  // `<button>` was how Collection's cover thumbnail became
+  // unfindable as well as un-hoverable.
+  const accessibleName = title === "" ? alt : title
 
   return (
     <figure
@@ -207,14 +233,29 @@ export const MediaTile = ({
         // The `<img>` inside goes `alt=""` for the same reason: two
         // names for one link is a screen reader reading it twice.
         <a
-          aria-label={title}
-          className="group flex flex-col rounded-md outline-offset-2 hover:opacity-90 focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-focus-ring"
+          aria-label={accessibleName}
+          className={INTERACTIVE_CLASS}
           href={href}
         >
           {media}
 
           {caption}
         </a>
+      ) : onClick ? (
+        <button
+          aria-label={accessibleName}
+          className={toClassName(
+            INTERACTIVE_CLASS,
+            "w-full border-0 bg-transparent p-0 text-start disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50",
+          )}
+          disabled={isDisabled}
+          onClick={onClick}
+          type="button"
+        >
+          {media}
+
+          {caption}
+        </button>
       ) : (
         <>
           {media}

package/src/Picker/Picker.mdx

@@ -46,6 +46,37 @@ text of the whole node.
 
 <Canvas of={PickerStories.AllStates} />
 
+## The trigger is flush — the parent owns the gap
+
+`Picker` is a `Button`. It has **no outer margin**. Next to a text
+label it sits hard against the last word, which is how queuepilot's
+"Chapters queued per turn" landed flush on the `[2 Default]` trigger,
+and why that same app already had a one-off `#setmodal .fieldselect {
+margin-left: 10px }` for the *other* inline pickers.
+
+Do not put the gutter on `Picker`. A control that ships its own
+margin is a control that fights `Field` (`flex flex-col gap-1.5`) and
+every toolbar row. The parent that decided to sit text next to a
+trigger also owns the space:
+
+```tsx
+{/* stacked — this is Field's job */}
+<Field label="Chapters queued per turn" description="…">
+  <Picker label="Chapters queued per turn" … />
+</Field>
+
+{/* inline — the row owns the gap */}
+<span className="inline-flex items-center gap-2.5">
+  Chapters queued per turn
+  <Picker label="Chapters queued per turn" … />
+</span>
+```
+
+The same rule is `Button`, `Select`, and a `Listbox` trigger. They are
+all flush; they are all the same trap.
+
+<Canvas of={PickerStories.NextToText} />
+
 ## `id` does not survive; `data-testid` does
 
 `useAnchoredOverlay` overwrites the trigger's `id` with a generated one so the portalled

package/src/Picker/Picker.stories.tsx

@@ -12,6 +12,7 @@ import {
   StoryRow,
   StorySection,
 } from "../board.storyHelpers.tsx"
+import { Field } from "../Field/Field.tsx"
 import type { PickerOption } from "./Picker.tsx"
 import { Picker } from "./Picker.tsx"
 
@@ -182,3 +183,76 @@ export const Interactive: Story = {
     />
   ),
 }
+
+const COUNTS: PickerOption[] = [
+  { label: "1", value: "1" },
+  {
+    label: (
+      <span className="flex items-center gap-2">
+        <span>2</span>
+        <Badge intent="neutral" size="sm">
+          Default
+        </Badge>
+      </span>
+    ),
+    textValue: "2 Default",
+    value: "2",
+  },
+  { label: "Custom…", value: "custom" },
+]
+
+/**
+ * The trigger has no outer margin. Sitting it next to a label without
+ * a parent gap is the flush-against-the-word bug; `Field` or an
+ * `inline-flex gap-*` row is the parent owning the gutter.
+ */
+export const NextToText: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <StorySection title="Flush — the parent gave it no gap">
+        <StoryRow>
+          <span>
+            Chapters queued per turn{" "}
+            <Picker
+              label="Flush count"
+              onChange={() => undefined}
+              options={COUNTS}
+              size="sm"
+              value="2"
+            />
+          </span>
+        </StoryRow>
+      </StorySection>
+      <StorySection title="Inline — the row owns the gap">
+        <StoryRow>
+          <span className="inline-flex items-center gap-2.5">
+            Chapters queued per turn
+            <Picker
+              label="Inline count"
+              onChange={() => undefined}
+              options={COUNTS}
+              size="sm"
+              value="2"
+            />
+          </span>
+        </StoryRow>
+      </StorySection>
+      <StorySection title="Stacked — Field owns the gap">
+        <StoryRow>
+          <Field
+            description="How long this entry’s turn is when the queue reaches it."
+            label="Chapters queued per turn"
+          >
+            <Picker
+              label="Stacked count"
+              onChange={() => undefined}
+              options={COUNTS}
+              size="sm"
+              value="2"
+            />
+          </Field>
+        </StoryRow>
+      </StorySection>
+    </div>
+  ),
+}

package/src/Picker/Picker.test.tsx

@@ -7,7 +7,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Picker.stories.tsx"
 
-const { AllStates, Default, Interactive } =
+const { AllStates, Default, Interactive, NextToText } =
   composeStories(stories)
 
 test("the trigger's accessible name carries the current value", async () => {
@@ -83,6 +83,18 @@ test("a disabled picker does not open", async () => {
   )
 })
 
+test("an inline picker next to a label is still named and has no axe issues", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(NextToText)
+
+  expectAgentDrivable(canvas, {
+    name: "Inline count: 2 Default",
+    role: "button",
+  })
+
+  await expectNoAxeViolations(canvasElement)
+})
+
 test("a rich option label keeps a plain-string trigger via textValue", async () => {
   const { canvas, canvasElement } =
     await mountStory(AllStates)