@charcuterie/ui 3.9.0 → 3.11.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,
@@ -136,6 +146,7 @@ an hour of confusion.
 | Type | `text-sm`/`text-md`/`text-lg`, which are **ours**: `theme.css` bridges `--text-*` onto the density-scaled `--font-size-*` |
 | Motion | `styles.css`, at `--duration-loop-*`, switched off under `prefers-reduced-motion` |
 | Scrollbar | `styles.css` — add `charcuterie-scrollbar` to any scrolling element for a token-tinted bar (rounded thumb on Chromium/Safari; thin standard match on Firefox) that flips with `[data-scheme]` |
+| Accent edge | `Card/cardAccentEdge.ts` — `<Card accentEdge={{ categorical }} \| {{ color }}>` draws a bar down the leading edge from a pseudo-element that **inherits the card's radius**. A border cannot follow a corner, which is why three apps had a square bar on a round card |
 | State | `@charcuterie/logic` — `useUniqueId` for label wiring, `useStatus` for `MediaTile`'s three image states |
 
 **Class names are never interpolated.** `` `bg-intent-${intent}-solid` `` generates nothing

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/Card/Card.d.ts

@@ -1,8 +1,19 @@
 import type { ElevationStep, SurfaceRole } from "@charcuterie/tokens";
 import type { ComponentPropsWithRef, ReactNode } from "react";
+import type { CardAccentEdge } from "./cardAccentEdge.ts";
 export type CardSurface = Extract<SurfaceRole, "base" | "raised" | "sunken">;
 export type CardPadding = "lg" | "md" | "none" | "sm";
 export type CardProps = ComponentPropsWithRef<"section"> & {
+    /**
+     * A coloured bar down the leading edge, following the card's own
+     * corners.
+     *
+     * `{ categorical: 3 }` for a colour a user picked; `{ color }`
+     * for one an app computed — a hue hashed from a repo's name, say,
+     * where ten indices are not enough. See `cardAccentEdge.ts` for
+     * why it is a pseudo-element and not a border.
+     */
+    accentEdge?: CardAccentEdge;
     /** Buttons or a badge, laid out beside the heading. */
     actions?: ReactNode;
     elevation?: ElevationStep;
@@ -40,5 +51,5 @@ export declare const ELEVATION_CLASS: Record<ElevationStep, string>;
  * because a card wrapping a poster grid genuinely has none, which is
  * a layout fact rather than a density one.
  */
-export declare const Card: ({ actions, children, className, elevation, footer, heading, headingLevel, padding, surface, ...sectionProps }: CardProps) => ReactNode;
+export declare const Card: ({ accentEdge, actions, children, className, elevation, footer, heading, headingLevel, padding, style, surface, ...sectionProps }: CardProps) => ReactNode;
 //# sourceMappingURL=Card.d.ts.map

package/dist/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAId,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,WAAW,EACX,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAC7B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAErD,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,SAAS,CAAC,GAAG;IACzD,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA;AAQD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAClC,aAAa,EACb,MAAM,CAMP,CAAA;AASD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAAI,+GAWlB,SAAS,KAAG,SAkDd,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAMzD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,WAAW,EACX,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAC7B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAErD,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,SAAS,CAAC,GAAG;IACzD;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA;AAQD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAClC,aAAa,EACb,MAAM,CAMP,CAAA;AASD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAAI,kIAalB,SAAS,KAAG,SAmEd,CAAA"}

package/dist/Card/Card.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUniqueId } from "@charcuterie/logic";
 import { toClassName } from "../toClassName.js";
+import { getAccentEdgeClassName, getAccentEdgeStyle, } from "./cardAccentEdge.js";
 const SURFACE_CLASS = {
     base: "bg-surface-base",
     raised: "bg-surface-raised",
@@ -45,8 +46,17 @@ const PADDING_CLASS = {
  * because a card wrapping a poster grid genuinely has none, which is
  * a layout fact rather than a density one.
  */
-export const Card = ({ actions, children, className, elevation = "low", footer, heading, headingLevel = 2, padding = "md", surface = "raised", ...sectionProps }) => {
+export const Card = ({ accentEdge, actions, children, className, elevation = "low", footer, heading, headingLevel = 2, padding = "md", style, surface = "raised", ...sectionProps }) => {
     const headingId = useUniqueId();
+    // The caller's own `style` wins. An accent colour is one custom
+    // property, and silently dropping whatever else the call site set
+    // would be a worse trade than letting it override this one.
+    const accentEdgeStyle = accentEdge == null
+        ? undefined
+        : getAccentEdgeStyle(accentEdge);
+    const mergedStyle = accentEdgeStyle == null
+        ? style
+        : { ...accentEdgeStyle, ...style };
     const Heading = `h${headingLevel}`;
     return (_jsxs("section", { ...sectionProps, "aria-labelledby": heading ? headingId : undefined, className: toClassName(
         // `@container` here, not on a wrapper, is what lets the
@@ -54,6 +64,8 @@ export const Card = ({ actions, children, className, elevation = "low", footer,
         // a card in a sidebar and the same card full-bleed are the
         // case a media query cannot tell apart, and the fleet's
         // poster grids get it wrong at intermediate widths today.
-        "@container flex flex-col gap-3 rounded-lg border border-border-subtle text-content-primary", SURFACE_CLASS[surface], ELEVATION_CLASS[elevation], PADDING_CLASS[padding], className), children: [heading || actions ? (_jsxs("header", { className: "flex flex-col gap-2 cq-sm:flex-row cq-sm:items-start cq-sm:justify-between", children: [heading ? (_jsx(Heading, { className: "font-semibold text-md leading-tight", id: headingId, children: heading })) : null, actions ? (_jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })) : null] })) : null, children, footer ? (_jsx("footer", { className: "border-t border-border-subtle pt-3 text-content-secondary text-sm", children: footer })) : null] }));
+        "@container flex flex-col gap-3 rounded-lg border border-border-subtle text-content-primary", SURFACE_CLASS[surface], ELEVATION_CLASS[elevation], PADDING_CLASS[padding], accentEdge == null
+            ? undefined
+            : getAccentEdgeClassName(accentEdge), className), style: mergedStyle, children: [heading || actions ? (_jsxs("header", { className: "flex flex-col gap-2 cq-sm:flex-row cq-sm:items-start cq-sm:justify-between", children: [heading ? (_jsx(Heading, { className: "font-semibold text-md leading-tight", id: headingId, children: heading })) : null, actions ? (_jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })) : null] })) : null, children, footer ? (_jsx("footer", { className: "border-t border-border-subtle pt-3 text-content-secondary text-sm", children: footer })) : null] }));
 };
 //# sourceMappingURL=Card.js.map

package/dist/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAUhD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAoB/C,MAAM,aAAa,GAAgC;IACjD,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE,mBAAmB;IAC3B,MAAM,EAAE,mBAAmB;CAC5B,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAGxB;IACF,IAAI,EAAE,aAAa;IACnB,GAAG,EAAE,YAAY;IACjB,MAAM,EAAE,eAAe;IACvB,IAAI,EAAE,aAAa;CACpB,CAAA;AAED,MAAM,aAAa,GAAgC;IACjD,IAAI,EAAE,KAAK;IACX,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;CACV,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,MAAM,EACN,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,QAAQ,EAClB,GAAG,YAAY,EACL,EAAa,EAAE;IACzB,MAAM,SAAS,GAAG,WAAW,EAAE,CAAA;IAE/B,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAA;IAE3C,OAAO,CACL,sBACM,YAAY,qBACC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAChD,SAAS,EAAE,WAAW;QACpB,wDAAwD;QACxD,2DAA2D;QAC3D,2DAA2D;QAC3D,wDAAwD;QACxD,0DAA0D;QAC1D,4FAA4F,EAC5F,aAAa,CAAC,OAAO,CAAC,EACtB,eAAe,CAAC,SAAS,CAAC,EAC1B,aAAa,CAAC,OAAO,CAAC,EACtB,SAAS,CACV,aAEA,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CACpB,kBAAQ,SAAS,EAAC,4EAA4E,aAC3F,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,IACN,SAAS,EAAC,qCAAqC,EAC/C,EAAE,EAAE,SAAS,YAEZ,OAAO,GACA,CACX,CAAC,CAAC,CAAC,IAAI,EAEP,OAAO,CAAC,CAAC,CAAC,CACT,cAAK,SAAS,EAAC,kCAAkC,YAC9C,OAAO,GACJ,CACP,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAC,CAAC,CAAC,IAAI,EAEP,QAAQ,EAER,MAAM,CAAC,CAAC,CAAC,CACR,iBAAQ,SAAS,EAAC,mEAAmE,YAClF,MAAM,GACA,CACV,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAUhD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EACL,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,qBAAqB,CAAA;AA8B5B,MAAM,aAAa,GAAgC;IACjD,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE,mBAAmB;IAC3B,MAAM,EAAE,mBAAmB;CAC5B,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAGxB;IACF,IAAI,EAAE,aAAa;IACnB,GAAG,EAAE,YAAY;IACjB,MAAM,EAAE,eAAe;IACvB,IAAI,EAAE,aAAa;CACpB,CAAA;AAED,MAAM,aAAa,GAAgC;IACjD,IAAI,EAAE,KAAK;IACX,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;CACV,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,UAAU,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,MAAM,EACN,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,OAAO,GAAG,IAAI,EACd,KAAK,EACL,OAAO,GAAG,QAAQ,EAClB,GAAG,YAAY,EACL,EAAa,EAAE;IACzB,MAAM,SAAS,GAAG,WAAW,EAAE,CAAA;IAE/B,gEAAgE;IAChE,kEAAkE;IAClE,4DAA4D;IAC5D,MAAM,eAAe,GACnB,UAAU,IAAI,IAAI;QAChB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAA;IAEpC,MAAM,WAAW,GACf,eAAe,IAAI,IAAI;QACrB,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE,CAAA;IAEtC,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAA;IAE3C,OAAO,CACL,sBACM,YAAY,qBACC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAChD,SAAS,EAAE,WAAW;QACpB,wDAAwD;QACxD,2DAA2D;QAC3D,2DAA2D;QAC3D,wDAAwD;QACxD,0DAA0D;QAC1D,4FAA4F,EAC5F,aAAa,CAAC,OAAO,CAAC,EACtB,eAAe,CAAC,SAAS,CAAC,EAC1B,aAAa,CAAC,OAAO,CAAC,EACtB,UAAU,IAAI,IAAI;YAChB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,sBAAsB,CAAC,UAAU,CAAC,EACtC,SAAS,CACV,EACD,KAAK,EAAE,WAAW,aAEjB,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CACpB,kBAAQ,SAAS,EAAC,4EAA4E,aAC3F,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,IACN,SAAS,EAAC,qCAAqC,EAC/C,EAAE,EAAE,SAAS,YAEZ,OAAO,GACA,CACX,CAAC,CAAC,CAAC,IAAI,EAEP,OAAO,CAAC,CAAC,CAAC,CACT,cAAK,SAAS,EAAC,kCAAkC,YAC9C,OAAO,GACJ,CACP,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAC,CAAC,CAAC,IAAI,EAEP,QAAQ,EAER,MAAM,CAAC,CAAC,CAAC,CACR,iBAAQ,SAAS,EAAC,mEAAmE,YAClF,MAAM,GACA,CACV,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/Card/cardAccentEdge.d.ts

@@ -0,0 +1,101 @@
+/**
+ * A coloured bar down a card's leading edge — and the reason it is
+ * a pseudo-element rather than a border.
+ *
+ * Three apps had grown this shape independently and all three drew
+ * it as a straight border beside a rounded box, so the bar ran past
+ * the curve and stopped square while the card it belonged to was
+ * round. Folio put `border-inline-start` on a WRAPPER around the
+ * card; mail-sifter puts `borderInlineStartWidth: 4` on a
+ * `rounded-xl` anchor; spoolbuddy writes `rounded-lg border-l-3`.
+ * A border is painted on the border box, so none of them can follow
+ * a corner — the notch is not a bug in any one app, it is what that
+ * technique does.
+ *
+ * A pseudo-element overlays the card and takes
+ * `border-radius: inherit`, so the bar follows whatever radius the
+ * card already has and nobody states a radius twice.
+ *
+ * ⚠️ **The shadow goes on the pseudo-element, never on the card.**
+ * `Card` carries `shadow-low` from the elevation scale, and an app
+ * stylesheet is unlayered while Tailwind's utilities sit in
+ * `@layer utilities` — so a `box-shadow` written at the call site
+ * outranks the utility and takes the card's elevation away with it.
+ * That is not hypothetical; it is the version of this fix that was
+ * written first.
+ *
+ * ⚠️ **Not a 3px-wide pseudo-element with a rounded leading edge.**
+ * A `border-radius` of `0.5rem` on a 3px-wide box is clamped by the
+ * browser to fit, so it caps the bar instead of following the
+ * card's curve.
+ *
+ * ⚠️ **`box-shadow` has no logical form**, so the offset is
+ * physical and the `rtl:` variant is what carries the bar to the
+ * other side. A single `inset 3px` would put it on the left of an
+ * Arabic page, which is the trailing edge there.
+ */
+import type { CategoricalIndex } from "@charcuterie/tokens";
+/**
+ * Which colour the bar takes.
+ *
+ * Two arms, because the fleet has two answers and neither is wrong.
+ * Docket picks a **categorical index** — a colour a user chose for
+ * a project, from the ten-wide contrast-audited family. Folio and
+ * mail-sifter derive a **hue from a name hash**, so a repo added
+ * tomorrow already has a colour and nobody maintains a palette;
+ * that is 360 answers, not ten, and it cannot be an index.
+ *
+ * `intent` is deliberately absent. An intent is a claim the design
+ * system makes — `danger` says what happens if you press the thing
+ * — and no card in this fleet wants its edge to make one. When one
+ * does, that is a third arm and a decision record, not a guess
+ * made here.
+ */
+export type CardAccentEdge = {
+    categorical: CategoricalIndex;
+    color?: never;
+} | {
+    categorical?: never;
+    color: string;
+};
+/**
+ * The custom property an explicit colour is threaded through.
+ *
+ * A property rather than an inline `box-shadow`, because the shadow
+ * string has to stay a COMPLETE literal in the source for Tailwind
+ * to generate it at all. One literal reading one variable covers
+ * every colour an app can compute; interpolating the colour into
+ * the class name would generate nothing, paint nothing, and report
+ * nothing.
+ */
+export declare const ACCENT_EDGE_COLOR_PROPERTY = "--charcuterie-accent-edge";
+/**
+ * The overlay itself. Colour arrives separately.
+ *
+ * `pointer-events: none` is load-bearing rather than tidy: this box
+ * covers the whole card, including every link and button in it.
+ */
+export declare const ACCENT_EDGE_BASE_CLASS = "relative before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:content-['']";
+/**
+ * Ten indices, written out in full, for the reason
+ * `categoricalStyles.ts` opens with: Tailwind scans source text for
+ * COMPLETE class strings, so a template literal generates nothing
+ * at all and the bar renders invisible with no error and no failing
+ * test. `tailwindCandidates.test.ts` compiles every literal in this
+ * package through the real Tailwind, which is the something that
+ * checks.
+ */
+export declare const ACCENT_EDGE_CATEGORICAL_CLASS: Record<CategoricalIndex, string>;
+/** The same bar, reading the caller's own colour. */
+export declare const ACCENT_EDGE_COLOR_CLASS = "before:shadow-[inset_3px_0_0_var(--charcuterie-accent-edge)] rtl:before:shadow-[inset_-3px_0_0_var(--charcuterie-accent-edge)]";
+export declare const getAccentEdgeClassName: (accentEdge: CardAccentEdge) => string;
+/**
+ * The inline style an explicit colour needs, and nothing when the
+ * colour came from an index.
+ *
+ * Returns `undefined` rather than `{}` so a card with a categorical
+ * edge and no `style` of its own renders no `style` attribute at
+ * all.
+ */
+export declare const getAccentEdgeStyle: (accentEdge: CardAccentEdge) => Record<string, string> | undefined;
+//# sourceMappingURL=cardAccentEdge.d.ts.map

package/dist/Card/cardAccentEdge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardAccentEdge.d.ts","sourceRoot":"","sources":["../../src/Card/cardAccentEdge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAE3D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,cAAc,GACtB;IAAE,WAAW,EAAE,gBAAgB,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAChD;IAAE,WAAW,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE1C;;;;;;;;;GASG;AACH,eAAO,MAAM,0BAA0B,8BACV,CAAA;AAE7B;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,oHACgF,CAAA;AAEnH;;;;;;;;GAQG;AACH,eAAO,MAAM,6BAA6B,EAAE,MAAM,CAChD,gBAAgB,EAChB,MAAM,CAYP,CAAA;AAED,qDAAqD;AACrD,eAAO,MAAM,uBAAuB,mIAC8F,CAAA;AAElI,eAAO,MAAM,sBAAsB,GACjC,YAAY,cAAc,KACzB,MAOC,CAAA;AAEJ;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,GAC7B,YAAY,cAAc,KACzB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAG4B,CAAA"}