@charcuterie/ui 3.8.1 → 3.10.0

package/README.md

@@ -48,6 +48,16 @@ Moving a card takes **no drag-and-drop dependency**: one handle per card, a `Men
 other lanes as the primary path, Pointer-Event dragging at 1.4 KB gzip beside it
 ([decision](../../docs/decisions/2026-08-19-the-board-owns-the-move-and-takes-no-drag-and-drop-dependency.md)).
 
+**`BadgeButton` is a `Badge` you can press**, and it came from a consumer rather than from a
+plan: QueuePilot has six pill-shaped controls — per-entry setting tags, an Edit chip, two
+start-point chips, a group chip, a pool's Exclude chip — that were hand-rolled
+`<button className="badge …">` because `Badge` is a `<span>`. A sibling component, exactly
+as `ButtonLink` is to `Button`: one paint through `useBadgeShape`, compared as **computed**
+styles in the test, and a real `<button>` for focus, Enter, Space, `:disabled` and a role a
+screen reader announces. `onClick` is required, so a pill nobody can press is a `Badge` by
+construction
+([decision](../../docs/decisions/2026-08-22-a-pressable-badge-is-a-sibling-component-not-a-prop.md)).
+
 **The unified app shell adds four**: `Shell`, `Header`, `Rail`, `Main` — the fleet's largest
 single duplication, where ten of twelve UI repos hand-roll the page chrome and three of them
 have a file named `AppShell.tsx` (two of those headers are a *byte-identical* class string,

package/dist/Badge/Badge.d.ts

@@ -1,41 +1,6 @@
-import type { CategoricalIndex, IntentName } from "@charcuterie/tokens";
 import type { ComponentPropsWithRef, ReactNode } from "react";
-import type { BadgeSize } from "../controlStyles.ts";
-import type { IntentAppearance } from "../intentStyles.ts";
-export type BadgeProps = ComponentPropsWithRef<"span"> & {
-    appearance?: Exclude<IntentAppearance, "ghost">;
-    /**
-     * A numbered, **non-semantic** colour: 1–10, no meaning attached.
-     *
-     * For a badge whose colour the user picked — a Docket label, a
-     * project, a chart series — where `intent` would be a lie. A
-     * "Homelab" label is not a `danger`, and the palette is curated
-     * and contrast-gated in both schemes precisely so the user cannot
-     * pick one that is unreadable. `getCategoricalIndex(key)` from
-     * `@charcuterie/tokens` is the stable fallback for a row nobody
-     * has chosen a colour for yet.
-     *
-     * Mutually exclusive with `intent` **in the type**: a badge is one
-     * colour, and passing both is a question with no answer rather
-     * than a precedence rule to remember.
-     */
-    categorical?: CategoricalIndex;
-    children: ReactNode;
-    icon?: ReactNode;
-    intent?: IntentName;
-    /**
-     * What happens when the label is wider than the space it is given.
-     *
-     *  - `truncate` — one line, capped at the container, ellipsis. The
-     *    default, because a status pill that changes its row's height
-     *    when a message gets longer breaks the table it sits in.
-     *  - `wrap` — the pill grows taller and shows everything. For the
-     *    kiosk and any touch context, where the hover readout that
-     *    `truncate` relies on does not exist.
-     */
-    overflow?: "truncate" | "wrap";
-    size?: BadgeSize;
-} & ({
+import type { BadgeShapeProps } from "./useBadgeShape.tsx";
+export type BadgeProps = ComponentPropsWithRef<"span"> & BadgeShapeProps & {} & ({
     categorical?: never;
 } | {
     intent?: never;

package/dist/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,UAAU,EACX,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAK1D,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAA;IAC/C;;;;;;;;;;;;;;OAcG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAA;CAQjB,GAAG,CAAC;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,CAAA;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,KAAK,GAAI,qGAWnB,UAAU,KAAG,SAiEf,CAAA"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAG1D,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,MAAM,CAAC,GACpD,eAAe,GAAG,EAQjB,GAAG,CAAC;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,CAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,KAAK,GAAI,qGAWnB,UAAU,KAAG,SAsBf,CAAA"}

package/dist/Badge/Badge.js

@@ -1,9 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CATEGORICAL_APPEARANCE_CLASS } from "../categoricalStyles.js";
-import { BADGE_SIZE_CLASS } from "../controlStyles.js";
-import { INTENT_APPEARANCE_CLASS } from "../intentStyles.js";
-import { toClassName } from "../toClassName.js";
-import { useIsTextClipped } from "./useIsTextClipped.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBadgeShape } from "./useBadgeShape.js";
 /**
  * Four repos, and rip-deck declares the **identical** `TONE_CLASS`
  * map twice — `VerdictBadge.tsx` and `TowerAlerts.tsx`, same five
@@ -44,29 +40,18 @@ import { useIsTextClipped } from "./useIsTextClipped.js";
  * across the next cell. `max-inline-size: 100%` is what stops it, and
  * `overflow` is what happens next.
  */
-export const Badge = ({ appearance = "soft", categorical, children, className, icon, intent = "neutral", overflow = "truncate", size = "md", title, ...spanProps }) => {
-    const [labelRef, clippedText] = useIsTextClipped();
-    return (_jsxs("span", { ...spanProps, className: toClassName("inline-flex shrink-0 items-center rounded-full border font-medium", 
-        // The cap. Without it every other rule here is decoration.
-        "max-w-full", overflow === "wrap"
-            ? // A stadium end-cap on a three-line box reads as a
-                // rendering fault rather than a badge, so the wrapping
-                // pill relaxes to a rounded rectangle.
-                "rounded-2xl"
-            : "rounded-full", BADGE_SIZE_CLASS[size], 
-        // A ternary rather than a merged map: the two are indexed
-        // by different keys, and `undefined` is the only honest
-        // discriminant once the type has already refused the case
-        // where both arrive.
-        categorical === undefined
-            ? INTENT_APPEARANCE_CLASS[intent][appearance]
-            : CATEGORICAL_APPEARANCE_CLASS[categorical][appearance], className), 
-        // Only when something is actually hidden. A tooltip on every
-        // short pill in a bay list is noise, and a `title` that
-        // duplicates fully-visible text is a screen-reader duplicate
-        // for no gain.
-        title: title ?? clippedText, children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "contents shrink-0", children: icon })) : null, _jsx("span", { className: overflow === "wrap"
-                    ? "min-w-0"
-                    : "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", ref: labelRef, children: children })] }));
+export const Badge = ({ appearance, categorical, children, className, icon, intent, overflow, size, title, ...spanProps }) => {
+    const shape = useBadgeShape({
+        appearance,
+        categorical,
+        children,
+        className,
+        icon,
+        intent,
+        overflow,
+        size,
+        title,
+    });
+    return (_jsx("span", { ...spanProps, className: shape.className, title: shape.title, children: shape.content }));
 };
 //# sourceMappingURL=Badge.js.map

package/dist/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AA4CxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,UAAU,GAAG,MAAM,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,GAAG,SAAS,EAClB,QAAQ,GAAG,UAAU,EACrB,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,SAAS,EACD,EAAa,EAAE;IAC1B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,gBAAgB,EAAE,CAAA;IAElD,OAAO,CACL,mBACM,SAAS,EACb,SAAS,EAAE,WAAW,CACpB,mEAAmE;QACnE,2DAA2D;QAC3D,YAAY,EACZ,QAAQ,KAAK,MAAM;YACjB,CAAC,CAAC,mDAAmD;gBACnD,uDAAuD;gBACvD,uCAAuC;gBACvC,aAAa;YACf,CAAC,CAAC,cAAc,EAClB,gBAAgB,CAAC,IAAI,CAAC;QACtB,0DAA0D;QAC1D,wDAAwD;QACxD,0DAA0D;QAC1D,qBAAqB;QACrB,WAAW,KAAK,SAAS;YACvB,CAAC,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC;YAC7C,CAAC,CAAC,4BAA4B,CAAC,WAAW,CAAC,CACvC,UAAU,CACX,EACL,SAAS,CACV;QACD,6DAA6D;QAC7D,wDAAwD;QACxD,6DAA6D;QAC7D,eAAe;QACf,KAAK,EAAE,KAAK,IAAI,WAAW,aAE1B,IAAI,CAAC,CAAC,CAAC,CACN,8BACc,MAAM,EAClB,SAAS,EAAC,mBAAmB,YAE5B,IAAI,GACA,CACR,CAAC,CAAC,CAAC,IAAI,EAYR,eACE,SAAS,EACP,QAAQ,KAAK,MAAM;oBACjB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,yDAAyD,EAE/D,GAAG,EAAE,QAAQ,YAEZ,QAAQ,GACJ,IACF,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAA;AAanD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,UAAU,EACV,WAAW,EACX,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,GAAG,SAAS,EACD,EAAa,EAAE;IAC1B,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,UAAU;QACV,WAAW;QACX,QAAQ;QACR,SAAS;QACT,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,IAAI;QACJ,KAAK;KACN,CAAC,CAAA;IAEF,OAAO,CACL,kBACM,SAAS,EACb,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,OAAO,GACT,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/Badge/useBadgeShape.d.ts

@@ -0,0 +1,57 @@
+import type { CategoricalIndex, IntentName } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+import type { BadgeSize } from "../controlStyles.ts";
+import type { IntentAppearance } from "../intentStyles.ts";
+/**
+ * The visual half of a badge, shared by the two elements that wear
+ * it.
+ *
+ * `Badge` is a `<span>` and `BadgeButton` is a `<button>`, and the
+ * pill is supposed to be indistinguishable between them — so the
+ * class list, the icon slot, the truncation and the
+ * only-when-clipped `title` are computed **here**, once, exactly as
+ * `Button` and `ButtonLink` both call `getControlClassName`. A
+ * second copy of this arithmetic is how the two drift: the wrapping
+ * pill's `rounded-2xl` and the label's `min-w-0` are each one line,
+ * and each is load-bearing.
+ */
+export type BadgeShapeProps = {
+    appearance?: Exclude<IntentAppearance, "ghost">;
+    /**
+     * A numbered, **non-semantic** colour: 1–10, no meaning attached.
+     *
+     * For a badge whose colour the user picked — a Docket label, a
+     * project, a chart series — where `intent` would be a lie.
+     * `getCategoricalIndex(key)` from `@charcuterie/tokens` is the
+     * stable fallback for a row nobody has chosen a colour for yet.
+     *
+     * Mutually exclusive with `intent` **in the type**: a badge is one
+     * colour, and passing both is a question with no answer rather
+     * than a precedence rule to remember.
+     */
+    categorical?: CategoricalIndex;
+    children: ReactNode;
+    icon?: ReactNode;
+    intent?: IntentName;
+    /**
+     * What happens when the label is wider than the space it is given.
+     *
+     *  - `truncate` — one line, capped at the container, ellipsis. The
+     *    default, because a status pill that changes its row's height
+     *    when a message gets longer breaks the table it sits in.
+     *  - `wrap` — the pill grows taller and shows everything. For the
+     *    kiosk and any touch context, where the hover readout that
+     *    `truncate` relies on does not exist.
+     */
+    overflow?: "truncate" | "wrap";
+    size?: BadgeSize;
+};
+export declare const useBadgeShape: ({ appearance, categorical, children, className, icon, intent, overflow, size, title, }: BadgeShapeProps & {
+    className?: string;
+    title?: string;
+}) => {
+    className: string;
+    content: ReactNode;
+    title?: string;
+};
+//# sourceMappingURL=useBadgeShape.d.ts.map

package/dist/Badge/useBadgeShape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBadgeShape.d.ts","sourceRoot":"","sources":["../../src/Badge/useBadgeShape.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,UAAU,EACX,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAK1D;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAA;IAC/C;;;;;;;;;;;OAWG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,wFAU3B,eAAe,GAAG;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,KAAG;IACF,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CAkEf,CAAA"}

package/dist/Badge/useBadgeShape.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CATEGORICAL_APPEARANCE_CLASS } from "../categoricalStyles.js";
+import { BADGE_SIZE_CLASS } from "../controlStyles.js";
+import { INTENT_APPEARANCE_CLASS } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+import { useIsTextClipped } from "./useIsTextClipped.js";
+export const useBadgeShape = ({ appearance = "soft", categorical, children, className, icon, intent = "neutral", overflow = "truncate", size = "md", title, }) => {
+    const [labelRef, clippedText] = useIsTextClipped();
+    return {
+        className: toClassName("inline-flex shrink-0 items-center border font-medium", 
+        // The cap. Without it every other rule here is decoration.
+        "max-w-full", overflow === "wrap"
+            ? // A stadium end-cap on a three-line box reads as a
+                // rendering fault rather than a badge, so the wrapping
+                // pill relaxes to a rounded rectangle.
+                "rounded-2xl"
+            : "rounded-full", BADGE_SIZE_CLASS[size], 
+        // A ternary rather than a merged map: the two are indexed
+        // by different keys, and `undefined` is the only honest
+        // discriminant once the type has already refused the case
+        // where both arrive.
+        categorical === undefined
+            ? INTENT_APPEARANCE_CLASS[intent][appearance]
+            : CATEGORICAL_APPEARANCE_CLASS[categorical][appearance], className),
+        content: (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { "aria-hidden": "true", className: "contents shrink-0", children: icon })) : null, _jsx("span", { className: overflow === "wrap"
+                        ? "min-w-0"
+                        : "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", ref: labelRef, children: children })] })),
+        // Only when something is actually hidden. A tooltip on every
+        // short pill in a bay list is noise, and a `title` that
+        // duplicates fully-visible text is a screen-reader duplicate
+        // for no gain.
+        title: title ?? clippedText,
+    };
+};
+//# sourceMappingURL=useBadgeShape.js.map

package/dist/Badge/useBadgeShape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBadgeShape.js","sourceRoot":"","sources":["../../src/Badge/useBadgeShape.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AA+CxD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,UAAU,GAAG,MAAM,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,GAAG,SAAS,EAClB,QAAQ,GAAG,UAAU,EACrB,IAAI,GAAG,IAAI,EACX,KAAK,GAIN,EAIC,EAAE;IACF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,gBAAgB,EAAE,CAAA;IAElD,OAAO;QACL,SAAS,EAAE,WAAW,CACpB,sDAAsD;QACtD,2DAA2D;QAC3D,YAAY,EACZ,QAAQ,KAAK,MAAM;YACjB,CAAC,CAAC,mDAAmD;gBACnD,uDAAuD;gBACvD,uCAAuC;gBACvC,aAAa;YACf,CAAC,CAAC,cAAc,EAClB,gBAAgB,CAAC,IAAI,CAAC;QACtB,0DAA0D;QAC1D,wDAAwD;QACxD,0DAA0D;QAC1D,qBAAqB;QACrB,WAAW,KAAK,SAAS;YACvB,CAAC,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC;YAC7C,CAAC,CAAC,4BAA4B,CAAC,WAAW,CAAC,CACvC,UAAU,CACX,EACL,SAAS,CACV;QACD,OAAO,EAAE,CACP,8BACG,IAAI,CAAC,CAAC,CAAC,CACN,8BACc,MAAM,EAClB,SAAS,EAAC,mBAAmB,YAE5B,IAAI,GACA,CACR,CAAC,CAAC,CAAC,IAAI,EAYR,eACE,SAAS,EACP,QAAQ,KAAK,MAAM;wBACjB,CAAC,CAAC,SAAS;wBACX,CAAC,CAAC,yDAAyD,EAE/D,GAAG,EAAE,QAAQ,YAEZ,QAAQ,GACJ,IACN,CACJ;QACD,6DAA6D;QAC7D,wDAAwD;QACxD,6DAA6D;QAC7D,eAAe;QACf,KAAK,EAAE,KAAK,IAAI,WAAW;KAC5B,CAAA;AACH,CAAC,CAAA"}

package/dist/BadgeButton/BadgeButton.d.ts

@@ -0,0 +1,59 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { BadgeShapeProps } from "../Badge/useBadgeShape.tsx";
+export type BadgeButtonProps = Omit<ComponentPropsWithRef<"button">, "disabled"> & BadgeShapeProps & {
+    /**
+     * Required, and that is the component's argument in one line: a
+     * pill nobody can press is a `Badge`, and a pill that looks
+     * pressable and is not is the defect this exists to stop.
+     */
+    onClick: NonNullable<ComponentPropsWithRef<"button">["onClick"]>;
+    /**
+     * `isDisabled`, not `disabled` — the same prop `Button` keeps
+     * instead of the native one, so a control's disabled state is
+     * spelled one way across the library.
+     */
+    isDisabled?: boolean;
+} & ({
+    categorical?: never;
+} | {
+    intent?: never;
+});
+/**
+ * A badge you can press.
+ *
+ * A sibling component rather than a prop, exactly as `ButtonLink` is
+ * to `Button`: the paint is shared (both call `useBadgeShape`, so
+ * there is one class list and `BadgeButton.test.tsx` compares the
+ * two elements' *computed* styles rather than trusting that), and
+ * what differs is the element and everything the platform hangs off
+ * it.
+ *
+ * **Why not `asChild`, and why not `Badge` growing an `onClick`.**
+ * This library has no polymorphism pattern and has not needed one;
+ * adding it here would mean every future component answering "can it
+ * be something else?" instead of "what is it?". And an element type
+ * that changes as a *side effect* of passing a handler is a footgun
+ * with no error: forget the handler and a control silently ships as
+ * a `<span>` — not focusable, not in the tab order, invisible to
+ * `getByRole("button")` and to every agent driving the app.
+ *
+ * **What the element buys, and none of it is paint.** Focus, the tab
+ * order, Enter and Space, `:disabled`, form participation, and a
+ * `button` role a screen reader announces as pressable. QueuePilot
+ * had six pills doing all of this with a hand-rolled
+ * `<button className="badge …">`, which is where this came from —
+ * six chips that open an editor, change a start point, or drop a
+ * title from a pool.
+ *
+ * **`type="button"` by default.** These chips sit inside forms —
+ * QueuePilot's entry sheet is one — and the platform's default of
+ * `submit` would make a "change the start point" chip save the whole
+ * dialog. Overridable, because a badge-shaped submit is a real thing
+ * and the default is a safe floor rather than a ban.
+ *
+ * **`ghost` is still excluded**, inherited from `Badge`: a pill that
+ * paints nothing until hovered has no pill left, and a control that
+ * only advertises itself on hover cannot be found by touch.
+ */
+export declare const BadgeButton: ({ appearance, categorical, children, className, icon, intent, isDisabled, overflow, size, title, type, ...buttonProps }: BadgeButtonProps) => ReactNode;
+//# sourceMappingURL=BadgeButton.d.ts.map

package/dist/BadgeButton/BadgeButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeButton.d.ts","sourceRoot":"","sources":["../../src/BadgeButton/BadgeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAUjE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,CACX,GACC,eAAe,GAAG;IAChB;;;;OAIG;IACH,OAAO,EAAE,WAAW,CAClB,qBAAqB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAC3C,CAAA;IACD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CAKrB,GAAG,CAAC;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,CAAA;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,WAAW,GAAI,yHAazB,gBAAgB,KAAG,SAsCrB,CAAA"}

package/dist/BadgeButton/BadgeButton.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBadgeShape } from "../Badge/useBadgeShape.js";
+import { CATEGORICAL_HOVER_CLASS } from "../categoricalStyles.js";
+import { DISABLED_CLASS, FOCUS_RING_CLASS, INTENT_HOVER_CLASS, } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+/**
+ * A badge you can press.
+ *
+ * A sibling component rather than a prop, exactly as `ButtonLink` is
+ * to `Button`: the paint is shared (both call `useBadgeShape`, so
+ * there is one class list and `BadgeButton.test.tsx` compares the
+ * two elements' *computed* styles rather than trusting that), and
+ * what differs is the element and everything the platform hangs off
+ * it.
+ *
+ * **Why not `asChild`, and why not `Badge` growing an `onClick`.**
+ * This library has no polymorphism pattern and has not needed one;
+ * adding it here would mean every future component answering "can it
+ * be something else?" instead of "what is it?". And an element type
+ * that changes as a *side effect* of passing a handler is a footgun
+ * with no error: forget the handler and a control silently ships as
+ * a `<span>` — not focusable, not in the tab order, invisible to
+ * `getByRole("button")` and to every agent driving the app.
+ *
+ * **What the element buys, and none of it is paint.** Focus, the tab
+ * order, Enter and Space, `:disabled`, form participation, and a
+ * `button` role a screen reader announces as pressable. QueuePilot
+ * had six pills doing all of this with a hand-rolled
+ * `<button className="badge …">`, which is where this came from —
+ * six chips that open an editor, change a start point, or drop a
+ * title from a pool.
+ *
+ * **`type="button"` by default.** These chips sit inside forms —
+ * QueuePilot's entry sheet is one — and the platform's default of
+ * `submit` would make a "change the start point" chip save the whole
+ * dialog. Overridable, because a badge-shaped submit is a real thing
+ * and the default is a safe floor rather than a ban.
+ *
+ * **`ghost` is still excluded**, inherited from `Badge`: a pill that
+ * paints nothing until hovered has no pill left, and a control that
+ * only advertises itself on hover cannot be found by touch.
+ */
+export const BadgeButton = ({ appearance = "soft", categorical, children, className, icon, intent = "neutral", isDisabled = false, overflow, size, title, type = "button", ...buttonProps }) => {
+    const shape = useBadgeShape({
+        appearance,
+        categorical,
+        children,
+        icon,
+        intent,
+        overflow,
+        size,
+        title,
+    });
+    return (_jsx("button", { ...buttonProps, className: toClassName(shape.className, "cursor-pointer", 
+        // The three states the `<span>` has no business carrying,
+        // keyed the same way the appearance above was.
+        categorical === undefined
+            ? INTENT_HOVER_CLASS[intent][appearance]
+            : CATEGORICAL_HOVER_CLASS[categorical][appearance], FOCUS_RING_CLASS, DISABLED_CLASS, 
+        // Last, so a caller's layout beats the defaults above — the
+        // same order `getControlClassName` uses.
+        className), disabled: isDisabled, title: shape.title, type: type, children: shape.content }));
+};
+//# sourceMappingURL=BadgeButton.js.map

package/dist/BadgeButton/BadgeButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeButton.js","sourceRoot":"","sources":["../../src/BadgeButton/BadgeButton.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA4B,CAAA;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAA;AACjE,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AA2B/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,UAAU,GAAG,MAAM,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,GAAG,SAAS,EAClB,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,GAAG,WAAW,EACG,EAAa,EAAE;IAChC,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,UAAU;QACV,WAAW;QACX,QAAQ;QACR,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,IAAI;QACJ,KAAK;KACN,CAAC,CAAA;IAEF,OAAO,CACL,oBACM,WAAW,EACf,SAAS,EAAE,WAAW,CACpB,KAAK,CAAC,SAAS,EACf,gBAAgB;QAChB,0DAA0D;QAC1D,+CAA+C;QAC/C,WAAW,KAAK,SAAS;YACvB,CAAC,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC;YACxC,CAAC,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAClC,UAAU,CACX,EACL,gBAAgB,EAChB,cAAc;QACd,4DAA4D;QAC5D,yCAAyC;QACzC,SAAS,CACV,EACD,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAE,IAAI,YAET,KAAK,CAAC,OAAO,GACP,CACV,CAAA;AACH,CAAC,CAAA"}

package/dist/Slider/Slider.d.ts

@@ -0,0 +1,85 @@
+import type { IntentName } from "@charcuterie/tokens";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export type SliderSize = "lg" | "md" | "sm";
+export type SliderProps = Omit<ComponentPropsWithRef<"div">, "children" | "defaultValue" | "onChange"> & {
+    intent?: IntentName;
+    isDisabled?: boolean;
+    isLabelVisible?: boolean;
+    /**
+     * Read-only in the `aria-readonly` sense: focusable, full contrast,
+     * announced as unchangeable. A media scrubber for a stream with no
+     * seekable range is this, not `isDisabled` — the position is still
+     * worth reading.
+     */
+    isReadOnly?: boolean;
+    isValueShown?: boolean;
+    /** Required. A slider with no name is an unlabelled number. */
+    label: string;
+    /**
+     * PageUp / PageDown. Defaults to ten steps, which is the APG's
+     * suggestion and the only sensible answer that does not need the
+     * caller to know the range.
+     */
+    largeStep?: number;
+    max?: number;
+    min?: number;
+    /**
+     * Fires on every movement — each arrow key, and each pointer sample
+     * while dragging. Use it to paint. See `onChangeEnd` for committing.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Fires once, when the interaction ends: pointer release, or key up.
+     *
+     * This exists because the expensive consumer of a slider is almost
+     * never the paint. A seek scrubber that issued its network call from
+     * `onChange` would send one request per pointer sample and arrive at
+     * the right offset last, after a queue of stale ones.
+     */
+    onChangeEnd?: (value: number) => void;
+    size?: SliderSize;
+    step?: number;
+    value?: number;
+    /**
+     * How the value reads aloud and, when `isValueShown`, on screen.
+     * Without it a scrubber announces "1274", which is a number of
+     * seconds nobody has.
+     */
+    valueFormat?: (value: number) => string;
+};
+/**
+ * A single-value range control: the thing `<input type="range">` is,
+ * without the OS painting it.
+ *
+ * The fleet had no way to ask for a value along a range, so QueuePilot's
+ * Now-playing bar could not have a scrubber
+ * ([decision](../../../../docs/decisions/2026-08-22-the-slider-is-a-div-with-role-slider-not-an-input-range.md)).
+ * `ProgressBar` looks like the answer and is not: it is output, it takes
+ * no input, and `role="progressbar"` tells assistive technology exactly
+ * that.
+ *
+ * ## Why a `div` and not `<input type="range">`
+ *
+ * The same reason `Select` is deprecated. A range input's thumb and
+ * track are UA pseudo-elements — `::-webkit-slider-thumb`,
+ * `::-moz-range-track` — and they are not one surface: the two engines
+ * disagree about which of them the track's fill even belongs to, so a
+ * token-styled range is two stylesheets that drift. Windows paints its
+ * own. `role="slider"` on a focusable `div` is the APG's own pattern,
+ * gets the same AT support, and every pixel of it is ours.
+ *
+ * ## Drag does not commit
+ *
+ * `onChange` fires per movement, `onChangeEnd` once on release. Both are
+ * optional and the component is fully controlled through `value`, so a
+ * caller that wants the simple thing passes `onChange` alone and a
+ * caller with a network call behind it splits them.
+ *
+ * While dragging, the component holds the value locally and paints from
+ * that rather than from the `value` prop. Without it a controlled
+ * scrubber whose owner only commits `onChangeEnd` would render the thumb
+ * pinned under the finger at the old position — the drag would look
+ * broken while behaving correctly.
+ */
+export declare const Slider: ({ className, intent, isDisabled, isLabelVisible, isReadOnly, isValueShown, label, largeStep, max, min, onChange, onChangeEnd, size, step, value, valueFormat, ...divProps }: SliderProps) => ReactNode;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/Slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EACV,qBAAqB,EAGrB,SAAS,EACV,MAAM,OAAO,CAAA;AAgBd,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,GAAG,cAAc,GAAG,UAAU,CACzC,GAAG;IACF,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACxC,CAAA;AAqBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,MAAM,GAAI,6KAkBpB,WAAW,KAAG,SAyQhB,CAAA"}