@mitcsutt/kiln-ui 0.5.0 → 0.7.0

package/dist/components/display/CodeBlock/CodeBlock.js

@@ -1,85 +1,77 @@
 import { cx as e } from "../../../utils/cx.js";
 import { CheckIcon as t, CopyIcon as n } from "../../../icons/icons.js";
 import { Button as r } from "../../actions/Button/Button.js";
-import i from "./CodeBlock.module.js";
-import { forwardRef as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useClipboard as i } from "../../actions/CopyButton/useClipboard.js";
+import { trimTrailingNewlines as a } from "../../../utils/newlines.js";
+import o from "./CodeBlock.module.js";
+import { forwardRef as s, useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/display/CodeBlock/CodeBlock.tsx
-var f = a(function({ code: a, language: f, title: p, showLineNumbers: m = !1, highlightLines: h, copyable: g = !0, wrap: _ = !1, copyLabel: v = "Copy code", className: y, ...b }, x) {
-	let [S, C] = l("idle"), w = c(void 0), T = s(), E = a.replace(/\n+$/, ""), D = E.split("\n"), O = new Set(h), k = !!p || !!f || g;
-	o(() => () => {
-		clearTimeout(w.current);
-	}, []);
-	let A = async () => {
-		clearTimeout(w.current);
-		try {
-			await navigator.clipboard.writeText(E), C("copied");
-		} catch {
-			C("failed");
-		}
-		w.current = setTimeout(() => {
-			C("idle");
-		}, 2e3);
-	};
-	return /* @__PURE__ */ d("figure", {
+var d = s(function({ code: s, language: d, tokens: f, title: p, showLineNumbers: m = !1, highlightLines: h, copyable: g = !0, wrap: _ = !1, copyLabel: v = "Copy code", className: y, ...b }, x) {
+	let S = i({ timeout: 2e3 }), C = S.copied ? "copied" : S.error ? "failed" : "idle", w = c(), T = a(s), E = T.split("\n"), D = f?.length === E.length && f.every((e, t) => e.map((e) => e.content).join("") === E[t]) ? f : void 0, O = new Set(h), k = !!p || !!d || g;
+	return /* @__PURE__ */ u("figure", {
 		ref: x,
-		className: e(i.codeBlock, y),
+		className: e(o.codeBlock, y),
 		"data-kiln-component": "",
 		"data-wrap": _ || void 0,
 		"data-line-numbers": m || void 0,
-		"aria-labelledby": p ? T : void 0,
+		"aria-labelledby": p ? w : void 0,
 		...b,
 		children: [
-			k ? /* @__PURE__ */ d("figcaption", {
-				className: i.header,
+			k ? /* @__PURE__ */ u("figcaption", {
+				className: o.header,
 				children: [
-					p ? /* @__PURE__ */ u("span", {
-						id: T,
-						className: i.title,
+					p ? /* @__PURE__ */ l("span", {
+						id: w,
+						className: o.title,
 						children: p
 					}) : null,
-					f ? /* @__PURE__ */ u("span", {
-						className: i.language,
-						children: f
+					d ? /* @__PURE__ */ l("span", {
+						className: o.language,
+						children: d
 					}) : null,
-					g ? /* @__PURE__ */ u(r, {
+					g ? /* @__PURE__ */ l(r, {
 						variant: "ghost",
 						tone: "neutral",
 						size: "sm",
-						className: i.copy,
-						leadingIcon: u(S === "copied" ? t : n, {}),
+						className: o.copy,
+						leadingIcon: l(C === "copied" ? t : n, {}),
 						"aria-label": v,
 						onClick: () => {
-							A();
+							S.copy(T);
 						},
-						"data-state": S,
-						children: S === "copied" ? "Copied" : S === "failed" ? "Copy failed" : "Copy"
+						"data-state": C,
+						children: C === "copied" ? "Copied" : C === "failed" ? "Copy failed" : "Copy"
 					}) : null
 				]
 			}) : null,
-			/* @__PURE__ */ u("pre", {
-				className: i.pre,
+			/* @__PURE__ */ l("pre", {
+				className: o.pre,
 				tabIndex: 0,
-				children: /* @__PURE__ */ u("code", {
-					className: i.code,
-					children: D.map((e, t) => /* @__PURE__ */ d("span", {
-						className: i.line,
+				children: /* @__PURE__ */ l("code", {
+					className: o.code,
+					children: E.map((e, t) => /* @__PURE__ */ u("span", {
+						className: o.line,
 						"data-line": m ? t + 1 : void 0,
 						"data-highlighted": O.has(t + 1) || void 0,
-						children: [e, t < D.length - 1 ? "\n" : null]
+						children: [D?.[t] ? D[t].map((e, t) => e.type ? /* @__PURE__ */ l("span", {
+							className: o.token,
+							"data-token": e.type,
+							children: e.content
+						}, t) : e.content) : e, t < E.length - 1 ? "\n" : null]
 					}, t))
 				})
 			}),
-			g ? /* @__PURE__ */ u("span", {
-				className: i.visuallyHidden,
+			g ? /* @__PURE__ */ l("span", {
+				className: o.visuallyHidden,
 				role: "status",
 				"aria-live": "polite",
-				children: S === "copied" ? "Copied to clipboard" : S === "failed" ? "Copy failed" : ""
+				children: C === "copied" ? "Copied to clipboard" : C === "failed" ? "Copy failed" : ""
 			}) : null
 		]
 	});
 });
 //#endregion
-export { f as CodeBlock };
+export { d as CodeBlock };
 
 //# sourceMappingURL=CodeBlock.js.map

package/dist/components/display/CodeBlock/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","names":["styles","CodeBlock_module_default","CodeBlock","forwardRef","rest","copy","setCopy","useState","timer","useRef","captionId","useId","source","code","lines","highlighted","highlightLines","hasHeader","title","language","copyable","onCopy","cx","className","wrap","showLineNumbers","Button","jsx","CheckIcon","CopyIcon","copyLabel","i","line"],"sources":["../../../../src/components/display/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { CheckIcon, CopyIcon } from '#icons'\nimport { Button } from '#components/actions/Button'\nimport { cx } from '#utils/cx'\nimport styles from './CodeBlock.module.css'\n\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** The source, verbatim. Trailing newlines are trimmed. */\n  code: string\n  /** Shown as a label (\"TypeScript\", \"bash\"). No syntax highlighting — the code is the design. */\n  language?: string\n  /** Filename or caption shown in the header: `src/queries/keys.ts`. */\n  title?: ReactNode\n  /** Number the lines in a gutter (not copied with a selection). */\n  showLineNumbers?: boolean\n  /** 1-based line numbers to mark with the theme's highlight colour. */\n  highlightLines?: number[]\n  /** Show a copy button. Default `true`. */\n  copyable?: boolean\n  /** Wrap long lines instead of scrolling sideways. */\n  wrap?: boolean\n  /** Accessible name of the copy button. Default \"Copy code\". */\n  copyLabel?: string\n}\n\ntype CopyState = 'idle' | 'copied' | 'failed'\n\n/**\n * A block of source with an optional filename bar, line numbers, highlighted lines and a copy\n * button.\n *\n * @remarks\n * `CodeBlock` shows code: a snippet in an article, a command, a config example. It's a plain\n * surface with an optional title bar, never fake window chrome, and it has no syntax highlighting:\n * the code is the design. Every code sample in these docs is a `CodeBlock`.\n *\n * @privateRemarks\n * A block of source: a snippet in a blog post, a command in a README, a config example.\n * A plain surface with an optional filename bar — no fake window chrome.\n *\n * <CodeBlock title=\"queries/keys.ts\" language=\"TypeScript\" code={source} highlightLines={[3, 4]} />\n */\nexport const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language,\n    title,\n    showLineNumbers = false,\n    highlightLines,\n    copyable = true,\n    wrap = false,\n    copyLabel = 'Copy code',\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [copy, setCopy] = useState<CopyState>('idle')\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  const captionId = useId()\n  const source = code.replace(/\\n+$/, '')\n  const lines = source.split('\\n')\n  const highlighted = new Set(highlightLines)\n  const hasHeader = Boolean(title) || Boolean(language) || copyable\n\n  useEffect(\n    () => () => {\n      clearTimeout(timer.current)\n    },\n    [],\n  )\n\n  const onCopy = async () => {\n    clearTimeout(timer.current)\n    try {\n      await navigator.clipboard.writeText(source)\n      setCopy('copied')\n    } catch {\n      setCopy('failed')\n    }\n    timer.current = setTimeout(() => {\n      setCopy('idle')\n    }, 2000)\n  }\n\n  return (\n    <figure\n      ref={ref}\n      className={cx(styles.codeBlock, className)}\n      data-kiln-component=\"\"\n      data-wrap={wrap || undefined}\n      data-line-numbers={showLineNumbers || undefined}\n      aria-labelledby={title ? captionId : undefined}\n      {...rest}\n    >\n      {hasHeader ? (\n        <figcaption className={styles.header}>\n          {title ? (\n            <span id={captionId} className={styles.title}>\n              {title}\n            </span>\n          ) : null}\n          {language ? <span className={styles.language}>{language}</span> : null}\n          {copyable ? (\n            <Button\n              variant=\"ghost\"\n              tone=\"neutral\"\n              size=\"sm\"\n              className={styles.copy}\n              leadingIcon={copy === 'copied' ? <CheckIcon /> : <CopyIcon />}\n              aria-label={copyLabel}\n              onClick={() => {\n                void onCopy()\n              }}\n              data-state={copy}\n            >\n              {copy === 'copied' ? 'Copied' : copy === 'failed' ? 'Copy failed' : 'Copy'}\n            </Button>\n          ) : null}\n        </figcaption>\n      ) : null}\n      {/* A scrollable region must be reachable by keyboard. */}\n      <pre className={styles.pre} tabIndex={0}>\n        <code className={styles.code}>\n          {lines.map((line, i) => (\n            <span\n              key={i}\n              className={styles.line}\n              data-line={showLineNumbers ? i + 1 : undefined}\n              data-highlighted={highlighted.has(i + 1) || undefined}\n            >\n              {line}\n              {i < lines.length - 1 ? '\\n' : null}\n            </span>\n          ))}\n        </code>\n      </pre>\n      {copyable ? (\n        <span className={styles.visuallyHidden} role=\"status\" aria-live=\"polite\">\n          {copy === 'copied' ? 'Copied to clipboard' : copy === 'failed' ? 'Copy failed' : ''}\n        </span>\n      ) : null}\n    </figure>\n  )\n})\n"],"mappings":";;;;;;;AAkDA,IAAaE,IAAYC,EAAwC,SAC/D,EACE,SACA,aACA,UACA,qBAAkB,IAClB,mBACA,cAAW,IACX,UAAO,IACP,eAAY,aACZ,cACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAMC,KAAWC,EAAoB,MAAM,GAC5CC,IAAQC,EAAkD,KAAA,CAAS,GACnEC,IAAYC,EAAM,GAClBC,IAASC,EAAK,QAAQ,QAAQ,EAAE,GAChCC,IAAQF,EAAO,MAAM,IAAI,GACzBG,IAAc,IAAI,IAAIC,CAAc,GACpCC,IAAY,EAAQC,KAAU,EAAQC,KAAaC;CAEzD,cACc;EACV,aAAaZ,EAAM,OAAO;CAC5B,GACA,CAAC,CACH;CAEA,IAAMa,IAAS,YAAY;EACzB,aAAab,EAAM,OAAO;EAC1B,IAAI;GAEF,AADA,MAAM,UAAU,UAAU,UAAUI,CAAM,GAC1CN,EAAQ,QAAQ;EAClB,QAAQ;GACN,EAAQ,QAAQ;EAClB;EACA,EAAM,UAAU,iBAAiB;GAC/B,EAAQ,MAAM;EAChB,GAAG,GAAI;CACT;CAEA,OACE,kBAAC,UAAD;EACO;EACL,WAAWgB,EAAGtB,EAAO,WAAWuB,CAAS;EACzC,uBAAoB;EACpB,aAAWC,KAAQ,KAAA;EACnB,qBAAmBC,KAAmB,KAAA;EACtC,mBAAiBP,IAAQR,IAAY,KAAA;EACrC,GAAIN;EAPN,UAAA;GASGa,IACC,kBAAC,cAAD;IAAY,WAAWjB,EAAO;IAA9B,UAAA;KACGkB,IACC,kBAAC,QAAD;MAAM,IAAIR;MAAW,WAAWV,EAAO;MACpC,UAAAkB;KACG,CAAA,IACJ;KACHC,IAAW,kBAAC,QAAD;MAAM,WAAWnB,EAAO;MAAW,UAAAmB;KAAe,CAAA,IAAI;KACjEC,IACC,kBAACM,GAAD;MACE,SAAQ;MACR,MAAK;MACL,MAAK;MACL,WAAW1B,EAAO;MAClB,aAAiC2B,EAApBtB,MAAS,WAAYuB,IAAgBC,GAAjB,CAAY,CAAe;MAC5D,cAAYC;MACZ,eAAe;OACb,EAAY;MACd;MACA,cAAYzB;MAEX,UAAAA,MAAS,WAAW,WAAWA,MAAS,WAAW,gBAAgB;KAC9D,CAAA,IACN;IACM;GACV,CAAA,IAAA;GAEJ,kBAAC,OAAD;IAAK,WAAWL,EAAO;IAAK,UAAU;IACpC,UAAA,kBAAC,QAAD;KAAM,WAAWA,EAAO;KACrB,UAAAc,EAAM,KAAK,GAAM,MAChB,kBAAC,QAAD;MAEE,WAAWd,EAAO;MAClB,aAAWyB,IAAkBM,IAAI,IAAI,KAAA;MACrC,oBAAkBhB,EAAY,IAAIgB,IAAI,CAAC,KAAK,KAAA;MAJ9C,UAAA,CAMGC,GACAD,IAAIjB,EAAM,SAAS,IAAI,OAAO,IAC3B;KAPC,GAAAiB,CAOD,CACP;IACG,CAAA;GACH,CAAA;GACJX,IACC,kBAAC,QAAD;IAAM,WAAWpB,EAAO;IAAgB,MAAK;IAAS,aAAU;IAC7D,UAAAK,MAAS,WAAW,wBAAwBA,MAAS,WAAW,gBAAgB;GAC7E,CAAA,IACJ;EACE;;AAEZ,CAAC"}
+{"version":3,"file":"CodeBlock.js","names":["styles","CodeBlock_module_default","CodeBlock","forwardRef","rest","clipboard","useClipboard","copy","captionId","useId","source","trimTrailingNewlines","code","lines","lineTokens","tokens","line","token","i","highlighted","highlightLines","hasHeader","title","language","copyable","cx","className","wrap","showLineNumbers","Button","jsx","CheckIcon","CopyIcon","copyLabel","j"],"sources":["../../../../src/components/display/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react'\nimport { CheckIcon, CopyIcon } from '#icons'\nimport { Button } from '#components/actions/Button'\nimport { useClipboard } from '#components/actions/CopyButton'\nimport { cx } from '#utils/cx'\nimport { trimTrailingNewlines } from '#utils/newlines'\nimport styles from './CodeBlock.module.css'\n\n/**\n * What a piece of highlighted source is. Each kind is coloured from the theme's own tokens, so\n * highlighted code follows the theme and the colour mode.\n */\nexport type CodeTokenType =\n  | 'keyword'\n  | 'string'\n  | 'comment'\n  | 'constant'\n  | 'function'\n  | 'type'\n  | 'tag'\n  | 'attribute'\n  | 'punctuation'\n\n/** A run of source text and its kind. A token with no `type` is plain text. */\nexport interface CodeToken {\n  content: string\n  type?: CodeTokenType\n}\n\nexport interface CodeBlockProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** The source, verbatim. Trailing newlines are trimmed. */\n  code: string\n  /** Shown as a label (\"TypeScript\", \"bash\"). It doesn't turn on highlighting: `tokens` does. */\n  language?: string\n  /**\n   * Syntax highlighting for `code`: one array of tokens per line, as `highlight` from\n   * `@mitcsutt/kiln-ui/highlight` returns them. Without it, or when the tokens don't spell out\n   * `code` line for line (say, tokens from a previous `code`), the code is plain.\n   */\n  tokens?: CodeToken[][]\n  /** Filename or caption shown in the header: `src/queries/keys.ts`. */\n  title?: ReactNode\n  /** Number the lines in a gutter (not copied with a selection). */\n  showLineNumbers?: boolean\n  /** 1-based line numbers to mark with the theme's highlight colour. */\n  highlightLines?: number[]\n  /** Show a copy button. Default `true`. */\n  copyable?: boolean\n  /** Wrap long lines instead of scrolling sideways. */\n  wrap?: boolean\n  /** Accessible name of the copy button. Default \"Copy code\". */\n  copyLabel?: string\n}\n\n/**\n * A block of source with an optional filename bar, line numbers, highlighted lines and a copy\n * button.\n *\n * @remarks\n * `CodeBlock` shows code: a snippet in an article, a command, a config example. It's a plain\n * surface with an optional title bar, never fake window chrome. It's plain unless you pass\n * `tokens`: `highlight` from `@mitcsutt/kiln-ui/highlight` turns JavaScript, JSX, TypeScript and\n * TSX into tokens, coloured from the theme. Every code sample in these docs is a `CodeBlock`.\n *\n * ## Highlighting\n *\n * `highlight(code, language)` resolves to the tokens for `code`, or to `undefined` for a language\n * other than `js`, `jsx`, `ts` or `tsx` (or `javascript` and `typescript`), which `CodeBlock`\n * shows as plain code. It runs [Shiki](https://shiki.style), an optional peer dependency, so\n * install `shiki` to use it. The main `@mitcsutt/kiln-ui` entry never loads it.\n *\n * Keywords and tags take the accent, strings, constants, functions and types take the theme's\n * tones, and comments and punctuation are muted. A custom theme needs no code palette of its own.\n *\n * The tokens are plain data, so highlight wherever the code is ready. In a server component or\n * at build time, `await` it and pass the tokens to the client component that renders the\n * `CodeBlock`, and the browser downloads no highlighter. In the browser, call it in an effect, as\n * in the example above: Shiki and the grammar load on the first call.\n *\n * ```tsx\n * import { highlight } from '@mitcsutt/kiln-ui/highlight'\n *\n * export async function Snippet({ source }: { source: string }) {\n *   const tokens = await highlight(source, 'tsx')\n *   return <SnippetBlock code={source} tokens={tokens} />\n * }\n * ```\n *\n * @privateRemarks\n * A block of source: a snippet in a blog post, a command in a README, a config example.\n * A plain surface with an optional filename bar — no fake window chrome.\n *\n * <CodeBlock title=\"queries/keys.ts\" language=\"TypeScript\" code={source} highlightLines={[3, 4]} />\n */\nexport const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(function CodeBlock(\n  {\n    code,\n    language,\n    tokens,\n    title,\n    showLineNumbers = false,\n    highlightLines,\n    copyable = true,\n    wrap = false,\n    copyLabel = 'Copy code',\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const clipboard = useClipboard({ timeout: 2000 })\n  const copy = clipboard.copied ? 'copied' : clipboard.error ? 'failed' : 'idle'\n  const captionId = useId()\n  const source = trimTrailingNewlines(code)\n  const lines = source.split('\\n')\n  const lineTokens =\n    tokens?.length === lines.length &&\n    tokens.every((line, i) => line.map((token) => token.content).join('') === lines[i])\n      ? tokens\n      : undefined\n  const highlighted = new Set(highlightLines)\n  const hasHeader = Boolean(title) || Boolean(language) || copyable\n\n  return (\n    <figure\n      ref={ref}\n      className={cx(styles.codeBlock, className)}\n      data-kiln-component=\"\"\n      data-wrap={wrap || undefined}\n      data-line-numbers={showLineNumbers || undefined}\n      aria-labelledby={title ? captionId : undefined}\n      {...rest}\n    >\n      {hasHeader ? (\n        <figcaption className={styles.header}>\n          {title ? (\n            <span id={captionId} className={styles.title}>\n              {title}\n            </span>\n          ) : null}\n          {language ? <span className={styles.language}>{language}</span> : null}\n          {copyable ? (\n            <Button\n              variant=\"ghost\"\n              tone=\"neutral\"\n              size=\"sm\"\n              className={styles.copy}\n              leadingIcon={copy === 'copied' ? <CheckIcon /> : <CopyIcon />}\n              aria-label={copyLabel}\n              onClick={() => {\n                void clipboard.copy(source)\n              }}\n              data-state={copy}\n            >\n              {copy === 'copied' ? 'Copied' : copy === 'failed' ? 'Copy failed' : 'Copy'}\n            </Button>\n          ) : null}\n        </figcaption>\n      ) : null}\n      {/* A scrollable region must be reachable by keyboard. */}\n      <pre className={styles.pre} tabIndex={0}>\n        <code className={styles.code}>\n          {lines.map((line, i) => (\n            <span\n              key={i}\n              className={styles.line}\n              data-line={showLineNumbers ? i + 1 : undefined}\n              data-highlighted={highlighted.has(i + 1) || undefined}\n            >\n              {lineTokens?.[i]\n                ? lineTokens[i].map((token, j) =>\n                    token.type ? (\n                      <span key={j} className={styles.token} data-token={token.type}>\n                        {token.content}\n                      </span>\n                    ) : (\n                      token.content\n                    ),\n                  )\n                : line}\n              {i < lines.length - 1 ? '\\n' : null}\n            </span>\n          ))}\n        </code>\n      </pre>\n      {copyable ? (\n        <span className={styles.visuallyHidden} role=\"status\" aria-live=\"polite\">\n          {copy === 'copied' ? 'Copied to clipboard' : copy === 'failed' ? 'Copy failed' : ''}\n        </span>\n      ) : null}\n    </figure>\n  )\n})\n"],"mappings":";;;;;;;;;AA8FA,IAAaE,IAAYC,EAAwC,SAC/D,EACE,SACA,aACA,WACA,UACA,qBAAkB,IAClB,mBACA,cAAW,IACX,UAAO,IACP,eAAY,aACZ,cACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAYC,EAAa,EAAE,SAAS,IAAK,CAAC,GAC1CC,IAAOF,EAAU,SAAS,WAAWA,EAAU,QAAQ,WAAW,QAClEG,IAAYC,EAAM,GAClBC,IAASC,EAAqBC,CAAI,GAClCC,IAAQH,EAAO,MAAM,IAAI,GACzBI,IACJC,GAAQ,WAAWF,EAAM,UACzBE,EAAO,OAAO,GAAM,MAAMC,EAAK,KAAK,MAAUC,EAAM,OAAO,CAAC,CAAC,KAAK,EAAE,MAAMJ,EAAMK,EAAE,IAC9EH,IACA,KAAA,GACAI,IAAc,IAAI,IAAIC,CAAc,GACpCC,IAAY,EAAQC,KAAU,EAAQC,KAAaC;CAEzD,OACE,kBAAC,UAAD;EACO;EACL,WAAWC,EAAGzB,EAAO,WAAW0B,CAAS;EACzC,uBAAoB;EACpB,aAAWC,KAAQ,KAAA;EACnB,qBAAmBC,KAAmB,KAAA;EACtC,mBAAiBN,IAAQd,IAAY,KAAA;EACrC,GAAIJ;EAPN,UAAA;GASGiB,IACC,kBAAC,cAAD;IAAY,WAAWrB,EAAO;IAA9B,UAAA;KACGsB,IACC,kBAAC,QAAD;MAAM,IAAId;MAAW,WAAWR,EAAO;MACpC,UAAAsB;KACG,CAAA,IACJ;KACHC,IAAW,kBAAC,QAAD;MAAM,WAAWvB,EAAO;MAAW,UAAAuB;KAAe,CAAA,IAAI;KACjEC,IACC,kBAACK,GAAD;MACE,SAAQ;MACR,MAAK;MACL,MAAK;MACL,WAAW7B,EAAO;MAClB,aAAiC8B,EAApBvB,MAAS,WAAYwB,IAAgBC,GAAjB,CAAY,CAAe;MAC5D,cAAYC;MACZ,eAAe;OACb,EAAe,KAAKvB,CAAM;MAC5B;MACA,cAAYH;MAEX,UAAAA,MAAS,WAAW,WAAWA,MAAS,WAAW,gBAAgB;KAC9D,CAAA,IACN;IACM;GACV,CAAA,IAAA;GAEJ,kBAAC,OAAD;IAAK,WAAWP,EAAO;IAAK,UAAU;IACpC,UAAA,kBAAC,QAAD;KAAM,WAAWA,EAAO;KACrB,UAAAa,EAAM,KAAK,GAAM,MAChB,kBAAC,QAAD;MAEE,WAAWb,EAAO;MAClB,aAAW4B,IAAkBV,IAAI,IAAI,KAAA;MACrC,oBAAkBC,EAAY,IAAID,IAAI,CAAC,KAAK,KAAA;MAJ9C,UAAA,CAMGJ,IAAaI,KACVJ,EAAWI,EAAE,CAAC,KAAK,GAAO,MACxBD,EAAM,OACJ,kBAAC,QAAD;OAAc,WAAWjB,EAAO;OAAO,cAAYiB,EAAM;OACtD,UAAAA,EAAM;MACH,GAFKiB,CAEL,IAENjB,EAAM,OAEV,IACAD,GACHE,IAAIL,EAAM,SAAS,IAAI,OAAO,IAC3B;KAjBC,GAAAK,CAiBD,CACP;IACG,CAAA;GACH,CAAA;GACJM,IACC,kBAAC,QAAD;IAAM,WAAWxB,EAAO;IAAgB,MAAK;IAAS,aAAU;IAC7D,UAAAO,MAAS,WAAW,wBAAwBA,MAAS,WAAW,gBAAgB;GAC7E,CAAA,IACJ;EACE;;AAEZ,CAAC"}

package/dist/components/display/CodeBlock/CodeBlock.module.js

@@ -1,5 +1,5 @@
 //#region src/components/display/CodeBlock/CodeBlock.module.css
-var e = "kiln-CodeBlock__codeBlock", t = "kiln-CodeBlock__header", n = "kiln-CodeBlock__title", r = "kiln-CodeBlock__language", i = "kiln-CodeBlock__copy", a = "kiln-CodeBlock__pre", o = "kiln-CodeBlock__code", s = "kiln-CodeBlock__line", c = "kiln-CodeBlock__visuallyHidden", l = {
+var e = "kiln-CodeBlock__codeBlock", t = "kiln-CodeBlock__header", n = "kiln-CodeBlock__title", r = "kiln-CodeBlock__language", i = "kiln-CodeBlock__copy", a = "kiln-CodeBlock__pre", o = "kiln-CodeBlock__code", s = "kiln-CodeBlock__line", c = "kiln-CodeBlock__token", l = "kiln-CodeBlock__visuallyHidden", u = {
 	codeBlock: e,
 	header: t,
 	title: n,
@@ -8,9 +8,10 @@ var e = "kiln-CodeBlock__codeBlock", t = "kiln-CodeBlock__header", n = "kiln-Cod
 	pre: a,
 	code: o,
 	line: s,
-	visuallyHidden: c
+	token: c,
+	visuallyHidden: l
 };
 //#endregion
-export { o as code, e as codeBlock, i as copy, l as default, t as header, r as language, s as line, a as pre, n as title, c as visuallyHidden };
+export { o as code, e as codeBlock, i as copy, u as default, t as header, r as language, s as line, a as pre, n as title, c as token, l as visuallyHidden };
 
 //# sourceMappingURL=CodeBlock.module.js.map

package/dist/components/display/CodeBlock/CodeBlock.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.module.js","names":["codeBlock","header","title","language","copy","pre","code","line","visuallyHidden","CodeBlock_module_default"],"sources":["../../../../src/components/display/CodeBlock/CodeBlock.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --codeblock-bg          default var(--color-surface-sunken)\n *   --codeblock-radius      default var(--radius-surface)\n *   --codeblock-size        default var(--text-xs)\n *   --codeblock-highlight   highlighted line fill, default var(--color-highlight)\n *\n * One edge: a hairline. The header is separated by the same rule, not a fill.\n */\n/* Zero-specificity reset, so a surrounding flow (Prose, Stack) or a className can space it. */\n:where(.codeBlock) {\n  margin: 0;\n}\n.codeBlock {\n  --_pad: var(--space-4);\n\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  overflow: hidden;\n  border: var(--border-width) solid var(--color-line);\n  border-radius: var(--codeblock-radius, var(--radius-surface));\n  background: var(--codeblock-bg, var(--color-surface-sunken));\n  color: var(--color-ink);\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-block-size: calc(var(--control-sm) + var(--space-2));\n  padding-inline: var(--_pad) var(--space-2);\n  border-block-end: var(--border-width) solid var(--color-line);\n  font-family: var(--font-text);\n  font-size: var(--text-xs);\n  line-height: var(--leading-snug);\n}\n\n.title {\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--color-ink);\n  font-weight: var(--label-weight);\n}\n\n.language {\n  color: var(--color-ink-subtle);\n}\n.title + .language::before {\n  content: '·';\n  margin-inline-end: var(--space-3);\n}\n\n.copy {\n  margin-inline-start: auto;\n  color: var(--color-ink-muted);\n}\n.copy[data-state='copied'] {\n  color: var(--tone-positive-text);\n}\n.copy[data-state='failed'] {\n  color: var(--tone-critical-text);\n}\n\n.pre {\n  margin: 0;\n  padding-block: var(--space-3);\n  overflow-x: auto;\n  font-family: var(--font-mono);\n  font-stretch: var(--mono-stretch);\n  font-size: var(--codeblock-size, var(--text-xs));\n  font-variant-ligatures: none;\n  line-height: 1.7;\n  tab-size: 2;\n  white-space: pre;\n  scrollbar-width: thin;\n}\n.pre:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n}\n\n.code {\n  display: inline-block;\n  min-inline-size: 100%;\n  font: inherit;\n}\n\n.line {\n  display: block;\n  position: relative;\n  padding-inline: var(--_pad);\n}\n\n.codeBlock[data-line-numbers] .line {\n  padding-inline-start: calc(var(--_pad) + 4ch);\n}\n.codeBlock[data-line-numbers] .line::before {\n  content: attr(data-line);\n  position: absolute;\n  inset-inline-start: 0;\n  inline-size: calc(var(--_pad) + 2.5ch);\n  padding-inline-end: 1ch;\n  text-align: end;\n  color: var(--color-ink-subtle);\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n}\n\n.line[data-highlighted] {\n  background: var(--codeblock-highlight, var(--color-highlight));\n  color: var(--color-highlight-ink);\n}\n.line[data-highlighted]::before {\n  color: inherit;\n}\n\n.codeBlock[data-wrap] .pre {\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.codeBlock[data-wrap] .code {\n  display: block;\n}\n\n.visuallyHidden {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"CodeBlock.module.js","names":["codeBlock","header","title","language","copy","pre","code","line","token","visuallyHidden","CodeBlock_module_default"],"sources":["../../../../src/components/display/CodeBlock/CodeBlock.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --codeblock-bg          default var(--color-surface-sunken)\n *   --codeblock-radius      default var(--radius-surface)\n *   --codeblock-size        default var(--text-xs)\n *   --codeblock-highlight   highlighted line fill, default var(--color-highlight)\n *\n * One edge: a hairline. The header is separated by the same rule, not a fill.\n */\n/* Zero-specificity reset, so a surrounding flow (Prose, Stack) or a className can space it. */\n:where(.codeBlock) {\n  margin: 0;\n}\n.codeBlock {\n  --_pad: var(--space-4);\n\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  overflow: hidden;\n  border: var(--border-width) solid var(--color-line);\n  border-radius: var(--codeblock-radius, var(--radius-surface));\n  background: var(--codeblock-bg, var(--color-surface-sunken));\n  color: var(--color-ink);\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-block-size: calc(var(--control-sm) + var(--space-2));\n  padding-inline: var(--_pad) var(--space-2);\n  border-block-end: var(--border-width) solid var(--color-line);\n  font-family: var(--font-text);\n  font-size: var(--text-xs);\n  line-height: var(--leading-snug);\n}\n\n.title {\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--color-ink);\n  font-weight: var(--label-weight);\n}\n\n.language {\n  color: var(--color-ink-subtle);\n}\n.title + .language::before {\n  content: '·';\n  margin-inline-end: var(--space-3);\n}\n\n.copy {\n  margin-inline-start: auto;\n  color: var(--color-ink-muted);\n}\n.copy[data-state='copied'] {\n  color: var(--tone-positive-text);\n}\n.copy[data-state='failed'] {\n  color: var(--tone-critical-text);\n}\n\n.pre {\n  margin: 0;\n  padding-block: var(--space-3);\n  overflow-x: auto;\n  font-family: var(--font-mono);\n  font-stretch: var(--mono-stretch);\n  font-size: var(--codeblock-size, var(--text-xs));\n  font-variant-ligatures: none;\n  line-height: 1.7;\n  tab-size: 2;\n  white-space: pre;\n  scrollbar-width: thin;\n}\n.pre:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n}\n\n.code {\n  display: inline-block;\n  min-inline-size: 100%;\n  font: inherit;\n}\n\n.line {\n  display: block;\n  position: relative;\n  padding-inline: var(--_pad);\n}\n\n.codeBlock[data-line-numbers] .line {\n  padding-inline-start: calc(var(--_pad) + 4ch);\n}\n.codeBlock[data-line-numbers] .line::before {\n  content: attr(data-line);\n  position: absolute;\n  inset-inline-start: 0;\n  inline-size: calc(var(--_pad) + 2.5ch);\n  padding-inline-end: 1ch;\n  text-align: end;\n  color: var(--color-ink-subtle);\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n}\n\n/*\n * Highlighted tokens (the `tokens` prop) take the theme's own text colours, so a theme needs no\n * code palette of its own: keywords in the accent, strings, constants and names in the tones.\n */\n.token[data-token='keyword'],\n.token[data-token='tag'] {\n  color: var(--color-accent-text);\n}\n.token[data-token='string'] {\n  color: var(--tone-positive-text);\n}\n.token[data-token='constant'] {\n  color: var(--tone-caution-text);\n}\n.token[data-token='function'],\n.token[data-token='type'] {\n  color: var(--tone-info-text);\n}\n.token[data-token='attribute'],\n.token[data-token='punctuation'] {\n  color: var(--color-ink-muted);\n}\n.token[data-token='comment'] {\n  color: var(--color-ink-subtle);\n}\n\n.line[data-highlighted] {\n  background: var(--codeblock-highlight, var(--color-highlight));\n  color: var(--color-highlight-ink);\n}\n.line[data-highlighted]::before,\n.line[data-highlighted] .token {\n  color: inherit;\n}\n\n.codeBlock[data-wrap] .pre {\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.codeBlock[data-wrap] .code {\n  display: block;\n}\n\n.visuallyHidden {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n"],"mappings":""}

package/dist/components/display/CodeBlock/index.d.ts

@@ -1,2 +1,2 @@
 export { CodeBlock } from './CodeBlock.js';
-export type { CodeBlockProps } from './CodeBlock.js';
+export type { CodeBlockProps, CodeToken, CodeTokenType } from './CodeBlock.js';

package/dist/components/display/Swatch/Swatch.d.ts

@@ -0,0 +1,52 @@
+import { type HTMLAttributes } from 'react';
+import type { CategoryColor } from '../../../utils/tokens.js';
+/**
+ * A colour a swatch can show: a categorical slot (`1` to `8`, themed in light and dark), or any
+ * CSS colour string for a colour that comes from data, such as one a user picked.
+ */
+export type SwatchColor = CategoryColor | (string & {});
+export type SwatchSize = 'sm' | 'md' | 'lg';
+export interface SwatchProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color' | 'children'> {
+    /**
+     * The colour. Prefer a categorical slot (`1` to `8`): it follows the theme and the colour mode.
+     * A CSS colour string (`#7c3aed`, `oklch(…)`) is for colours that are data, and renders as given.
+     */
+    color: SwatchColor;
+    /**
+     * What the colour stands for ("Platform team"), when nothing next to the swatch says it. It
+     * names the swatch for screen readers. Without it the swatch is decorative and hidden from them.
+     */
+    label?: string;
+    /** Relative to the surrounding text: `sm`, `md` (default) or `lg`. */
+    size?: SwatchSize;
+}
+/** Whether `color` is a categorical slot rather than a CSS colour string. */
+export declare function isCategoryColor(color: SwatchColor): color is CategoryColor;
+/**
+ * A small mark in a colour that says who or what something is: a team, a label, a chart series.
+ *
+ * @remarks
+ * Most of the time you don't need `Swatch` itself: {@link Badge | Badge}, {@link Tag | Tag},
+ * {@link ToggleChip | ToggleChip} and {@link Indicator | Indicator} take a `swatch` prop that draws
+ * this mark for you, sized to their text. Use `Swatch` on its own where there's no host, such as a
+ * table cell or a legend you lay out yourself.
+ *
+ * A swatch takes the theme's chip radius, so it's round where chips are pills and square where
+ * they're square, and a hairline keeps a pale colour visible on any surface. It's sized in `em`,
+ * so it follows the text beside it.
+ *
+ * ## Categorical colour marks who, never how
+ *
+ * A swatch is identity: the same team, label or series in the same colour everywhere it
+ * appears. It's never status. For a state ("Overdue", "Live"), use a tone on a `Badge` or a
+ * `StatusDot`. Prefer the categorical slots `1` to `8`, which every theme sets for light and dark.
+ * Pass a CSS colour only when the colour is data, and give it a `label` or put its name beside
+ * it, because colour alone is not information.
+ *
+ * @privateRemarks
+ * The shared part behind every host's `swatch` prop (Badge, Tag, ToggleChip, Indicator), and the
+ * legend mark the charts package reuses, so a series looks the same in a chart, its legend and a
+ * filter chip. Category slots are `data-color`; a string colour is written inline as `--_swatch`,
+ * the same way ColorInput renders a raw colour.
+ */
+export declare const Swatch: import("react").ForwardRefExoticComponent<SwatchProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/display/Swatch/Swatch.js

@@ -0,0 +1,27 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t } from "../../../utils/responsive.js";
+import n from "./Swatch.module.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/display/Swatch/Swatch.tsx
+function a(e) {
+	return typeof e == "number";
+}
+var o = r(function({ color: r, label: o, size: s = "md", className: c, style: l, ...u }, d) {
+	let f = a(r);
+	return /* @__PURE__ */ i("span", {
+		ref: d,
+		className: e(n.swatch, c),
+		"data-color": f ? r : void 0,
+		"data-size": s,
+		style: t(f ? void 0 : { "--_swatch": r }, l),
+		role: o ? "img" : void 0,
+		"aria-label": o,
+		"aria-hidden": !o || void 0,
+		...u
+	});
+});
+//#endregion
+export { o as Swatch, a as isCategoryColor };
+
+//# sourceMappingURL=Swatch.js.map

package/dist/components/display/Swatch/Swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch.js","names":["styles","Swatch_module_default","isCategoryColor","color","Swatch","forwardRef","rest","category","cx","className","size","mergeStyles","style","label"],"sources":["../../../../src/components/display/Swatch/Swatch.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport type { CategoryColor } from '#utils/tokens'\nimport styles from './Swatch.module.css'\n\n/**\n * A colour a swatch can show: a categorical slot (`1` to `8`, themed in light and dark), or any\n * CSS colour string for a colour that comes from data, such as one a user picked.\n */\nexport type SwatchColor = CategoryColor | (string & {})\n\nexport type SwatchSize = 'sm' | 'md' | 'lg'\n\nexport interface SwatchProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color' | 'children'> {\n  /**\n   * The colour. Prefer a categorical slot (`1` to `8`): it follows the theme and the colour mode.\n   * A CSS colour string (`#7c3aed`, `oklch(…)`) is for colours that are data, and renders as given.\n   */\n  color: SwatchColor\n  /**\n   * What the colour stands for (\"Platform team\"), when nothing next to the swatch says it. It\n   * names the swatch for screen readers. Without it the swatch is decorative and hidden from them.\n   */\n  label?: string\n  /** Relative to the surrounding text: `sm`, `md` (default) or `lg`. */\n  size?: SwatchSize\n}\n\n/** Whether `color` is a categorical slot rather than a CSS colour string. */\nexport function isCategoryColor(color: SwatchColor): color is CategoryColor {\n  return typeof color === 'number'\n}\n\n/**\n * A small mark in a colour that says who or what something is: a team, a label, a chart series.\n *\n * @remarks\n * Most of the time you don't need `Swatch` itself: {@link Badge | Badge}, {@link Tag | Tag},\n * {@link ToggleChip | ToggleChip} and {@link Indicator | Indicator} take a `swatch` prop that draws\n * this mark for you, sized to their text. Use `Swatch` on its own where there's no host, such as a\n * table cell or a legend you lay out yourself.\n *\n * A swatch takes the theme's chip radius, so it's round where chips are pills and square where\n * they're square, and a hairline keeps a pale colour visible on any surface. It's sized in `em`,\n * so it follows the text beside it.\n *\n * ## Categorical colour marks who, never how\n *\n * A swatch is identity: the same team, label or series in the same colour everywhere it\n * appears. It's never status. For a state (\"Overdue\", \"Live\"), use a tone on a `Badge` or a\n * `StatusDot`. Prefer the categorical slots `1` to `8`, which every theme sets for light and dark.\n * Pass a CSS colour only when the colour is data, and give it a `label` or put its name beside\n * it, because colour alone is not information.\n *\n * @privateRemarks\n * The shared part behind every host's `swatch` prop (Badge, Tag, ToggleChip, Indicator), and the\n * legend mark the charts package reuses, so a series looks the same in a chart, its legend and a\n * filter chip. Category slots are `data-color`; a string colour is written inline as `--_swatch`,\n * the same way ColorInput renders a raw colour.\n */\nexport const Swatch = forwardRef<HTMLSpanElement, SwatchProps>(function Swatch(\n  { color, label, size = 'md', className, style, ...rest },\n  ref,\n) {\n  const category = isCategoryColor(color)\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.swatch, className)}\n      data-color={category ? color : undefined}\n      data-size={size}\n      style={mergeStyles(category ? undefined : ({ '--_swatch': color } as CSSProperties), style)}\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;AA8BA,SAAgBE,EAAgB,GAA4C;CAC1E,OAAO,OAAOC,KAAU;AAC1B;AA6BA,IAAaC,IAASC,EAAyC,SAC7D,EAAE,UAAO,UAAO,UAAO,MAAM,cAAW,UAAO,GAAGC,KAClD,GACA;CACA,IAAMC,IAAWL,EAAgBC,CAAK;CACtC,OACE,kBAAC,QAAD;EACO;EACL,WAAWK,EAAGR,EAAO,QAAQS,CAAS;EACtC,cAAYF,IAAWJ,IAAQ,KAAA;EAC/B,aAAWO;EACX,OAAOC,EAAYJ,IAAW,KAAA,IAAa,EAAE,aAAaJ,EAAM,GAAqBS,CAAK;EAC1F,MAAMC,IAAQ,QAAQ,KAAA;EACtB,cAAYA;EACZ,eAAa,MAAQ,KAAA;EACrB,GAAIP;CACL,CAAA;AAEL,CAAC"}

package/dist/components/display/Swatch/Swatch.module.js

@@ -0,0 +1,6 @@
+//#region src/components/display/Swatch/Swatch.module.css
+var e = "kiln-Swatch__swatch", t = { swatch: e };
+//#endregion
+export { t as default, e as swatch };
+
+//# sourceMappingURL=Swatch.module.js.map

package/dist/components/display/Swatch/Swatch.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch.module.js","names":["swatch","Swatch_module_default"],"sources":["../../../../src/components/display/Swatch/Swatch.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --swatch-radius   default var(--radius-chip)\n *   --swatch-ring     the hairline that keeps a pale colour visible,\n *                     default color-mix(in oklch, var(--color-ink) 22%, transparent)\n *\n * The fill is a categorical slot (data-color) or a colour from data, written inline as\n * --_swatch. Sized in em, so it follows its host's text.\n */\n.swatch {\n  --_swatch: var(--color-ink-subtle);\n  --_size: 0.75em;\n\n  display: inline-block;\n  flex: none;\n  inline-size: var(--_size);\n  block-size: var(--_size);\n  border-radius: var(--swatch-radius, var(--radius-chip));\n  background-color: var(--_swatch);\n  box-shadow: inset 0 0 0 1px\n    var(--swatch-ring, color-mix(in oklch, var(--color-ink) 22%, transparent));\n  vertical-align: middle;\n}\n\n.swatch[data-size='sm'] {\n  --_size: 0.625em;\n}\n.swatch[data-size='lg'] {\n  --_size: 1em;\n}\n\n.swatch[data-color='1'] {\n  --_swatch: var(--color-cat-1);\n}\n.swatch[data-color='2'] {\n  --_swatch: var(--color-cat-2);\n}\n.swatch[data-color='3'] {\n  --_swatch: var(--color-cat-3);\n}\n.swatch[data-color='4'] {\n  --_swatch: var(--color-cat-4);\n}\n.swatch[data-color='5'] {\n  --_swatch: var(--color-cat-5);\n}\n.swatch[data-color='6'] {\n  --_swatch: var(--color-cat-6);\n}\n.swatch[data-color='7'] {\n  --_swatch: var(--color-cat-7);\n}\n.swatch[data-color='8'] {\n  --_swatch: var(--color-cat-8);\n}\n\n/* Windows high contrast drops backgrounds: keep the mark as an outline. */\n@media (forced-colors: active) {\n  .swatch {\n    border: 1px solid CanvasText;\n  }\n}\n"],"mappings":""}

package/dist/components/display/Swatch/index.d.ts

@@ -0,0 +1,2 @@
+export { Swatch, isCategoryColor } from './Swatch.js';
+export type { SwatchProps, SwatchColor, SwatchSize } from './Swatch.js';

package/dist/components/display/Tag/Tag.d.ts

@@ -1,10 +1,17 @@
 import { type HTMLAttributes, type MouseEvent } from 'react';
+import { type SwatchColor } from '../Swatch/index.js';
 /** Categorical colour slot → `--color-cat-N`. */
 export type TagColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 export type TagSize = 'sm' | 'md';
 export interface TagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** A categorical colour (category, person, topic). Omit for a neutral tag. */
     color?: TagColor;
+    /**
+     * A leading colour swatch on a quiet tag, for a colour that belongs to the thing it labels: a
+     * label a user coloured, a series in a chart. A categorical slot (`1` to `8`) or a CSS colour.
+     * Use `color` instead to fill the whole tag with a categorical colour.
+     */
+    swatch?: SwatchColor;
     /** `md` (default), or `sm` for dense lists of many tags. */
     size?: TagSize;
     /** Renders a remove button after the label. Not rendered when `asChild`. */

package/dist/components/display/Tag/Tag.js

@@ -1,37 +1,42 @@
 import { cx as e } from "../../../utils/cx.js";
 import { CloseIcon as t } from "../../../icons/icons.js";
-import n from "./Tag.module.js";
-import { Children as r, forwardRef as i, isValidElement as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Slot as c } from "radix-ui";
+import { Swatch as n } from "../Swatch/Swatch.js";
+import r from "./Tag.module.js";
+import { Children as i, forwardRef as a, isValidElement as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Slot as l } from "radix-ui";
 //#region src/components/display/Tag/Tag.tsx
-var l = i(function({ color: r, size: i = "md", onRemove: a, removeLabel: l, asChild: u = !1, className: d, children: f, ...p }, m) {
-	let h = u ? c.Root : "span", g = !!a && !u, _ = l ?? (typeof f == "string" ? `Remove ${f}` : "Remove");
-	return /* @__PURE__ */ s(h, {
-		ref: m,
-		className: e(n.tag, d),
-		"data-color": r,
-		"data-size": i,
-		"data-removable": g || void 0,
-		...p,
-		children: [/* @__PURE__ */ o(c.Slottable, { children: f }), g ? /* @__PURE__ */ o("button", {
-			type: "button",
-			className: n.remove,
-			"aria-label": _,
-			onClick: a,
-			children: /* @__PURE__ */ o(t, {})
-		}) : null]
+var u = a(function({ color: i, swatch: a, size: o = "md", onRemove: u, removeLabel: d, asChild: f = !1, className: p, children: m, ...h }, g) {
+	let _ = f ? l.Root : "span", v = !!u && !f, y = d ?? (typeof m == "string" ? `Remove ${m}` : "Remove");
+	return /* @__PURE__ */ c(_, {
+		ref: g,
+		className: e(r.tag, p),
+		"data-color": i,
+		"data-size": o,
+		"data-removable": v || void 0,
+		...h,
+		children: [
+			a === void 0 ? null : /* @__PURE__ */ s(n, { color: a }),
+			/* @__PURE__ */ s(l.Slottable, { children: m }),
+			v ? /* @__PURE__ */ s("button", {
+				type: "button",
+				className: r.remove,
+				"aria-label": y,
+				onClick: u,
+				children: /* @__PURE__ */ s(t, {})
+			}) : null
+		]
 	});
-}), u = i(function({ className: t, children: i, ...s }, c) {
-	return /* @__PURE__ */ o("ul", {
+}), d = a(function({ className: t, children: n, ...a }, c) {
+	return /* @__PURE__ */ s("ul", {
 		ref: c,
 		role: "list",
-		className: e(n.list, t),
-		...s,
-		children: r.map(i, (e) => a(e) || typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ o("li", { children: e }, a(e) ? e.key : void 0) : null)
+		className: e(r.list, t),
+		...a,
+		children: i.map(n, (e) => o(e) || typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ s("li", { children: e }, o(e) ? e.key : void 0) : null)
 	});
 });
 //#endregion
-export { l as Tag, u as TagList };
+export { u as Tag, d as TagList };
 
 //# sourceMappingURL=Tag.js.map

package/dist/components/display/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["styles","Tag_module_default","Tag","forwardRef","rest","Comp","asChild","Slot","canRemove","onRemove","label","removeLabel","children","cx","className","color","size","CloseIcon","TagList","Children","isValidElement","child"],"sources":["../../../../src/components/display/Tag/Tag.tsx"],"sourcesContent":["import { Children, forwardRef, isValidElement, type HTMLAttributes, type MouseEvent } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { CloseIcon } from '#icons'\nimport styles from './Tag.module.css'\n\n/** Categorical colour slot → `--color-cat-N`. */\nexport type TagColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8\nexport type TagSize = 'sm' | 'md'\n\nexport interface TagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** A categorical colour (category, person, topic). Omit for a neutral tag. */\n  color?: TagColor\n  /** `md` (default), or `sm` for dense lists of many tags. */\n  size?: TagSize\n  /** Renders a remove button after the label. Not rendered when `asChild`. */\n  onRemove?: (event: MouseEvent<HTMLButtonElement>) => void\n  /** Accessible name for the remove button. Default `Remove <label>` for text labels. */\n  removeLabel?: string\n  /** Render the single child (e.g. a filter link) as the tag. Incompatible with `onRemove`. */\n  asChild?: boolean\n}\n\n/**\n * Quiet metadata, like a category, a facility or a group, in a wrapping list that can be edited.\n *\n * @remarks\n * A `Tag` labels a thing with metadata, and a `TagList` lays several out as a real list that\n * wraps. Tags are quieter than {@link Badge | badges}, which are for status.\n *\n * @privateRemarks\n * Quiet metadata: a category, a stack item, a group. Quieter than `Badge`, which is\n * for status. Group several in a `TagList`.\n */\nexport const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n  { color, size = 'md', onRemove, removeLabel, asChild = false, className, children, ...rest },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'span'\n  const canRemove = Boolean(onRemove) && !asChild\n  const label = removeLabel ?? (typeof children === 'string' ? `Remove ${children}` : 'Remove')\n  return (\n    <Comp\n      ref={ref}\n      className={cx(styles.tag, className)}\n      data-color={color}\n      data-size={size}\n      data-removable={canRemove || undefined}\n      {...rest}\n    >\n      <Slot.Slottable>{children}</Slot.Slottable>\n      {canRemove ? (\n        <button type=\"button\" className={styles.remove} aria-label={label} onClick={onRemove}>\n          <CloseIcon />\n        </button>\n      ) : null}\n    </Comp>\n  )\n})\n\nexport type TagListProps = HTMLAttributes<HTMLUListElement>\n\n/** A wrapping list of tags. Each child is wrapped in an `<li>`. */\nexport const TagList = forwardRef<HTMLUListElement, TagListProps>(function TagList(\n  { className, children, ...rest },\n  ref,\n) {\n  return (\n    <ul ref={ref} role=\"list\" className={cx(styles.list, className)} {...rest}>\n      {Children.map(children, (child) =>\n        isValidElement(child) || typeof child === 'string' || typeof child === 'number' ? (\n          <li key={isValidElement(child) ? child.key : undefined}>{child}</li>\n        ) : null,\n      )}\n    </ul>\n  )\n})\n"],"mappings":";;;;;;;AAkCA,IAAaE,IAAMC,EAAsC,SACvD,EAAE,UAAO,UAAO,MAAM,aAAU,gBAAa,aAAU,IAAO,cAAW,aAAU,GAAGC,KACtF,GACA;CACA,IAAMC,IAAOC,IAAUC,EAAK,OAAO,QAC7BC,IAAY,EAAQC,KAAa,CAACH,GAClCI,IAAQC,MAAgB,OAAOC,KAAa,WAAW,UAAUA,MAAa;CACpF,OACE,kBAACP,GAAD;EACO;EACL,WAAWQ,EAAGb,EAAO,KAAKc,CAAS;EACnC,cAAYC;EACZ,aAAWC;EACX,kBAAgBR,KAAa,KAAA;EAC7B,GAAIJ;EANN,UAAA,CAQE,kBAACG,EAAK,WAAN,EAAiB,YAAyB,CAAA,GACzCC,IACC,kBAAC,UAAD;GAAQ,MAAK;GAAS,WAAWR,EAAO;GAAQ,cAAYU;GAAO,SAASD;GAC1E,UAAA,kBAACQ,GAAD,CAAY,CAAA;EACN,CAAA,IACN,IACA;;AAEV,CAAC,GAKYC,IAAUf,EAA2C,SAChE,EAAE,cAAW,aAAU,GAAGC,KAC1B,GACA;CACA,OACE,kBAAC,MAAD;EAAS;EAAK,MAAK;EAAO,WAAWS,EAAGb,EAAO,MAAMc,CAAS;EAAG,GAAIV;EAClE,UAAAe,EAAS,IAAIP,IAAW,MACvBQ,EAAeC,CAAK,KAAK,OAAOA,KAAU,YAAY,OAAOA,KAAU,WACrE,kBAAC,MAAD,EAAA,UAAyDA,EAAU,GAA1DD,EAAeC,CAAK,IAAIA,EAAM,MAAM,KAAA,CAAsB,IACjE,IACN;CACE,CAAA;AAER,CAAC"}
+{"version":3,"file":"Tag.js","names":["styles","Tag_module_default","Tag","forwardRef","rest","Comp","asChild","Slot","canRemove","onRemove","label","removeLabel","children","cx","className","color","size","swatch","Swatch","CloseIcon","TagList","Children","isValidElement","child"],"sources":["../../../../src/components/display/Tag/Tag.tsx"],"sourcesContent":["import { Children, forwardRef, isValidElement, type HTMLAttributes, type MouseEvent } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { CloseIcon } from '#icons'\nimport { Swatch, type SwatchColor } from '#components/display/Swatch'\nimport styles from './Tag.module.css'\n\n/** Categorical colour slot → `--color-cat-N`. */\nexport type TagColor = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8\nexport type TagSize = 'sm' | 'md'\n\nexport interface TagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** A categorical colour (category, person, topic). Omit for a neutral tag. */\n  color?: TagColor\n  /**\n   * A leading colour swatch on a quiet tag, for a colour that belongs to the thing it labels: a\n   * label a user coloured, a series in a chart. A categorical slot (`1` to `8`) or a CSS colour.\n   * Use `color` instead to fill the whole tag with a categorical colour.\n   */\n  swatch?: SwatchColor\n  /** `md` (default), or `sm` for dense lists of many tags. */\n  size?: TagSize\n  /** Renders a remove button after the label. Not rendered when `asChild`. */\n  onRemove?: (event: MouseEvent<HTMLButtonElement>) => void\n  /** Accessible name for the remove button. Default `Remove <label>` for text labels. */\n  removeLabel?: string\n  /** Render the single child (e.g. a filter link) as the tag. Incompatible with `onRemove`. */\n  asChild?: boolean\n}\n\n/**\n * Quiet metadata, like a category, a facility or a group, in a wrapping list that can be edited.\n *\n * @remarks\n * A `Tag` labels a thing with metadata, and a `TagList` lays several out as a real list that\n * wraps. Tags are quieter than {@link Badge | badges}, which are for status.\n *\n * @privateRemarks\n * Quiet metadata: a category, a stack item, a group. Quieter than `Badge`, which is\n * for status. Group several in a `TagList`.\n */\nexport const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n  {\n    color,\n    swatch,\n    size = 'md',\n    onRemove,\n    removeLabel,\n    asChild = false,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'span'\n  const canRemove = Boolean(onRemove) && !asChild\n  const label = removeLabel ?? (typeof children === 'string' ? `Remove ${children}` : 'Remove')\n  return (\n    <Comp\n      ref={ref}\n      className={cx(styles.tag, className)}\n      data-color={color}\n      data-size={size}\n      data-removable={canRemove || undefined}\n      {...rest}\n    >\n      {swatch !== undefined ? <Swatch color={swatch} /> : null}\n      <Slot.Slottable>{children}</Slot.Slottable>\n      {canRemove ? (\n        <button type=\"button\" className={styles.remove} aria-label={label} onClick={onRemove}>\n          <CloseIcon />\n        </button>\n      ) : null}\n    </Comp>\n  )\n})\n\nexport type TagListProps = HTMLAttributes<HTMLUListElement>\n\n/** A wrapping list of tags. Each child is wrapped in an `<li>`. */\nexport const TagList = forwardRef<HTMLUListElement, TagListProps>(function TagList(\n  { className, children, ...rest },\n  ref,\n) {\n  return (\n    <ul ref={ref} role=\"list\" className={cx(styles.list, className)} {...rest}>\n      {Children.map(children, (child) =>\n        isValidElement(child) || typeof child === 'string' || typeof child === 'number' ? (\n          <li key={isValidElement(child) ? child.key : undefined}>{child}</li>\n        ) : null,\n      )}\n    </ul>\n  )\n})\n"],"mappings":";;;;;;;;AAyCA,IAAaE,IAAMC,EAAsC,SACvD,EACE,UACA,WACA,UAAO,MACP,aACA,gBACA,aAAU,IACV,cACA,aACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAOC,IAAUC,EAAK,OAAO,QAC7BC,IAAY,EAAQC,KAAa,CAACH,GAClCI,IAAQC,MAAgB,OAAOC,KAAa,WAAW,UAAUA,MAAa;CACpF,OACE,kBAACP,GAAD;EACO;EACL,WAAWQ,EAAGb,EAAO,KAAKc,CAAS;EACnC,cAAYC;EACZ,aAAWC;EACX,kBAAgBR,KAAa,KAAA;EAC7B,GAAIJ;EANN,UAAA;GAQGa,MAAW,KAAA,IAAwC,OAA5B,kBAACC,GAAD,EAAQ,OAAOD,EAAS,CAAA;GAChD,kBAACV,EAAK,WAAN,EAAiB,YAAyB,CAAA;GACzCC,IACC,kBAAC,UAAD;IAAQ,MAAK;IAAS,WAAWR,EAAO;IAAQ,cAAYU;IAAO,SAASD;IAC1E,UAAA,kBAACU,GAAD,CAAY,CAAA;GACN,CAAA,IACN;EACA;;AAEV,CAAC,GAKYC,IAAUjB,EAA2C,SAChE,EAAE,cAAW,aAAU,GAAGC,KAC1B,GACA;CACA,OACE,kBAAC,MAAD;EAAS;EAAK,MAAK;EAAO,WAAWS,EAAGb,EAAO,MAAMc,CAAS;EAAG,GAAIV;EAClE,UAAAiB,EAAS,IAAIT,IAAW,MACvBU,EAAeC,CAAK,KAAK,OAAOA,KAAU,YAAY,OAAOA,KAAU,WACrE,kBAAC,MAAD,EAAA,UAAyDA,EAAU,GAA1DD,EAAeC,CAAK,IAAIA,EAAM,MAAM,KAAA,CAAsB,IACjE,IACN;CACE,CAAA;AAER,CAAC"}

package/dist/components/feedback/Indicator/Indicator.d.ts

@@ -0,0 +1,74 @@
+import { type HTMLAttributes, type ReactElement } from 'react';
+import { type Space, type Tone } from '../../../utils/tokens.js';
+import { type SwatchColor } from '../../display/Swatch/index.js';
+export type IndicatorPosition = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+export type IndicatorShape = 'rect' | 'round' | 'avatar';
+export interface IndicatorProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {
+    /**
+     * The element the mark is pinned to: an `IconButton`, an `Avatar`, a link. It must accept
+     * `aria-describedby`, which carries `label`. Omit it to show the mark on its own, in the flow.
+     */
+    children?: ReactElement;
+    /**
+     * What the mark means, said in full: "3 unread messages", "Waiting for your answer". It's added
+     * to the child's accessible description, so the child is announced as "Inbox, 3 unread messages"
+     * rather than a bare number. Required, because a dot or a number alone is not information.
+     */
+    label: string;
+    /** A number to show. Without it the mark is a dot. */
+    count?: number;
+    /** The largest count shown in full. Above it the mark reads "99+". Default `99`. */
+    max?: number;
+    /** Show the mark when `count` is `0`. Hidden by default, since nothing is waiting. */
+    showZero?: boolean;
+    /** Hide the mark (and its description) without unmounting the child. */
+    invisible?: boolean;
+    /** Colour of the mark, from the shared tone set. Default `accent`. */
+    tone?: Tone;
+    /**
+     * Draw the mark as a colour swatch dot instead: identity, like a team's colour on an avatar,
+     * never status. A categorical slot (`1` to `8`) or a CSS colour from data. `count` and `tone`
+     * don't apply.
+     */
+    swatch?: SwatchColor;
+    /** A slow ring swells out of the mark, for something in progress. It stills under reduced motion. */
+    processing?: boolean;
+    /** Which corner, in the reading direction: `top-end` (default) is top right in English. */
+    position?: IndicatorPosition;
+    /**
+     * The child's outline, so the mark sits on its edge rather than in the empty corner of its box.
+     * `rect` (default) for square-cornered children, `round` for circles (a round `IconButton`),
+     * `avatar` to follow the theme's avatar radius.
+     */
+    shape?: IndicatorShape;
+    /** Move the mark in toward the child's centre by a space step, for a child with an empty edge. */
+    offset?: Space;
+}
+/**
+ * A count or a dot pinned to the corner of another element: unread messages on a button, a
+ * waiting dot on an avatar.
+ *
+ * @remarks
+ * `Indicator` wraps one element and places a small mark on its edge. With `count` it's a number,
+ * capped at `max` ("99+"), and hidden at zero unless you pass `showZero`. Without it, it's a dot.
+ * `invisible` hides the mark without moving or remounting the child.
+ *
+ * The mark is hidden from screen readers. What it means is `label`, which is added to the
+ * child's accessible description, so give the child its own name (an `IconButton`'s `label`, an
+ * `Avatar`'s `name`) and write `label` as the rest of the sentence.
+ *
+ * `position` is logical, so `top-end` is the top left in a right-to-left page. `shape` keeps the
+ * mark on the outline of a round child instead of floating in the corner of its box, and `offset`
+ * moves it in toward a child whose visible edge is inside its box, like a ghost `IconButton`.
+ *
+ * ## When it changes
+ *
+ * An `Indicator` doesn't announce changes: a count that speaks every time it ticks is noise.
+ * Where a change matters, such as a reply arriving, announce it where it happens. `processing`
+ * pulses a ring for something under way, and stills under reduced motion.
+ *
+ * @privateRemarks
+ * The tone colours match StatusDot and Badge's solid fill, the pulse is LiveIndicator's, and a
+ * `swatch` mark is the shared Swatch part, so the dots in the system stay one family.
+ */
+export declare const Indicator: import("react").ForwardRefExoticComponent<IndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/feedback/Indicator/Indicator.js

@@ -0,0 +1,50 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t } from "../../../utils/responsive.js";
+import { space as n } from "../../../utils/tokens.js";
+import { joinIds as r } from "../../inputs/internal/refs.js";
+import { Swatch as i } from "../../display/Swatch/Swatch.js";
+import a from "./Indicator.module.js";
+import { cloneElement as o, forwardRef as s, isValidElement as c, useId as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/feedback/Indicator/Indicator.tsx
+var f = (e, t) => e > t ? `${String(t)}+` : String(e), p = s(function({ children: s, label: p, count: m, max: h = 99, showZero: g = !1, invisible: _ = !1, tone: v = "accent", swatch: y, processing: b = !1, position: x = "top-end", shape: S = "rect", offset: C, className: w, style: T, ...E }, D) {
+	let O = l(), k = y === void 0 && m !== void 0, A = !_ && !(k && m === 0 && !g), j = c(s), M = A ? y === void 0 ? /* @__PURE__ */ u("span", {
+		className: a.mark,
+		"data-kind": k ? "count" : "dot",
+		"data-tone": v,
+		"data-processing": b || void 0,
+		"aria-hidden": "true",
+		children: k ? f(m, h) : null
+	}) : /* @__PURE__ */ u("span", {
+		className: a.mark,
+		"data-kind": "swatch",
+		"data-processing": b || void 0,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ u(i, {
+			color: y,
+			className: a.fill
+		})
+	}) : null;
+	return /* @__PURE__ */ d("span", {
+		ref: D,
+		className: e(a.indicator, w),
+		"data-position": x,
+		"data-shape": S,
+		"data-pinned": j || void 0,
+		style: t(C ? { "--_offset": n(C) } : void 0, T),
+		...E,
+		children: [
+			j ? o(s, { "aria-describedby": r(s.props["aria-describedby"], A ? O : void 0) }) : null,
+			M,
+			A ? /* @__PURE__ */ u("span", {
+				id: O,
+				className: a.label,
+				children: p
+			}) : null
+		]
+	});
+});
+//#endregion
+export { p as Indicator };
+
+//# sourceMappingURL=Indicator.js.map

package/dist/components/feedback/Indicator/Indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","names":["styles","Indicator_module_default","formatCount","count","max","Indicator","forwardRef","rest","labelId","useId","hasCount","swatch","shown","invisible","showZero","pinned","isValidElement","children","mark","tone","processing","Swatch","cx","className","position","shape","mergeStyles","offset","space","style","cloneElement","joinIds","label"],"sources":["../../../../src/components/feedback/Indicator/Indicator.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useId,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactElement,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport { space, type Space, type Tone } from '#utils/tokens'\nimport { joinIds } from '#components/inputs/internal/refs'\nimport { Swatch, type SwatchColor } from '#components/display/Swatch'\nimport styles from './Indicator.module.css'\n\nexport type IndicatorPosition = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'\nexport type IndicatorShape = 'rect' | 'round' | 'avatar'\n\nexport interface IndicatorProps extends Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  'children' | 'color'\n> {\n  /**\n   * The element the mark is pinned to: an `IconButton`, an `Avatar`, a link. It must accept\n   * `aria-describedby`, which carries `label`. Omit it to show the mark on its own, in the flow.\n   */\n  children?: ReactElement\n  /**\n   * What the mark means, said in full: \"3 unread messages\", \"Waiting for your answer\". It's added\n   * to the child's accessible description, so the child is announced as \"Inbox, 3 unread messages\"\n   * rather than a bare number. Required, because a dot or a number alone is not information.\n   */\n  label: string\n  /** A number to show. Without it the mark is a dot. */\n  count?: number\n  /** The largest count shown in full. Above it the mark reads \"99+\". Default `99`. */\n  max?: number\n  /** Show the mark when `count` is `0`. Hidden by default, since nothing is waiting. */\n  showZero?: boolean\n  /** Hide the mark (and its description) without unmounting the child. */\n  invisible?: boolean\n  /** Colour of the mark, from the shared tone set. Default `accent`. */\n  tone?: Tone\n  /**\n   * Draw the mark as a colour swatch dot instead: identity, like a team's colour on an avatar,\n   * never status. A categorical slot (`1` to `8`) or a CSS colour from data. `count` and `tone`\n   * don't apply.\n   */\n  swatch?: SwatchColor\n  /** A slow ring swells out of the mark, for something in progress. It stills under reduced motion. */\n  processing?: boolean\n  /** Which corner, in the reading direction: `top-end` (default) is top right in English. */\n  position?: IndicatorPosition\n  /**\n   * The child's outline, so the mark sits on its edge rather than in the empty corner of its box.\n   * `rect` (default) for square-cornered children, `round` for circles (a round `IconButton`),\n   * `avatar` to follow the theme's avatar radius.\n   */\n  shape?: IndicatorShape\n  /** Move the mark in toward the child's centre by a space step, for a child with an empty edge. */\n  offset?: Space\n}\n\nconst formatCount = (count: number, max: number) =>\n  count > max ? `${String(max)}+` : String(count)\n\n/**\n * A count or a dot pinned to the corner of another element: unread messages on a button, a\n * waiting dot on an avatar.\n *\n * @remarks\n * `Indicator` wraps one element and places a small mark on its edge. With `count` it's a number,\n * capped at `max` (\"99+\"), and hidden at zero unless you pass `showZero`. Without it, it's a dot.\n * `invisible` hides the mark without moving or remounting the child.\n *\n * The mark is hidden from screen readers. What it means is `label`, which is added to the\n * child's accessible description, so give the child its own name (an `IconButton`'s `label`, an\n * `Avatar`'s `name`) and write `label` as the rest of the sentence.\n *\n * `position` is logical, so `top-end` is the top left in a right-to-left page. `shape` keeps the\n * mark on the outline of a round child instead of floating in the corner of its box, and `offset`\n * moves it in toward a child whose visible edge is inside its box, like a ghost `IconButton`.\n *\n * ## When it changes\n *\n * An `Indicator` doesn't announce changes: a count that speaks every time it ticks is noise.\n * Where a change matters, such as a reply arriving, announce it where it happens. `processing`\n * pulses a ring for something under way, and stills under reduced motion.\n *\n * @privateRemarks\n * The tone colours match StatusDot and Badge's solid fill, the pulse is LiveIndicator's, and a\n * `swatch` mark is the shared Swatch part, so the dots in the system stay one family.\n */\nexport const Indicator = forwardRef<HTMLSpanElement, IndicatorProps>(function Indicator(\n  {\n    children,\n    label,\n    count,\n    max = 99,\n    showZero = false,\n    invisible = false,\n    tone = 'accent',\n    swatch,\n    processing = false,\n    position = 'top-end',\n    shape = 'rect',\n    offset,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const labelId = useId()\n  const hasCount = swatch === undefined && count !== undefined\n  const shown = !invisible && !(hasCount && count === 0 && !showZero)\n  const pinned = isValidElement<{ 'aria-describedby'?: string }>(children)\n\n  const mark = shown ? (\n    swatch !== undefined ? (\n      <span\n        className={styles.mark}\n        data-kind=\"swatch\"\n        data-processing={processing || undefined}\n        aria-hidden=\"true\"\n      >\n        <Swatch color={swatch} className={styles.fill} />\n      </span>\n    ) : (\n      <span\n        className={styles.mark}\n        data-kind={hasCount ? 'count' : 'dot'}\n        data-tone={tone}\n        data-processing={processing || undefined}\n        aria-hidden=\"true\"\n      >\n        {hasCount ? formatCount(count, max) : null}\n      </span>\n    )\n  ) : null\n\n  return (\n    <span\n      ref={ref}\n      className={cx(styles.indicator, className)}\n      data-position={position}\n      data-shape={shape}\n      data-pinned={pinned || undefined}\n      style={mergeStyles(\n        offset ? ({ '--_offset': space(offset) } as CSSProperties) : undefined,\n        style,\n      )}\n      {...rest}\n    >\n      {pinned\n        ? cloneElement(children, {\n            'aria-describedby': joinIds(\n              children.props['aria-describedby'],\n              shown ? labelId : undefined,\n            ),\n          })\n        : null}\n      {mark}\n      {shown ? (\n        <span id={labelId} className={styles.label}>\n          {label}\n        </span>\n      ) : null}\n    </span>\n  )\n})\n"],"mappings":";;;;;;;;;AAgEA,IAAME,KAAe,GAAe,MAClCC,IAAQC,IAAM,GAAG,OAAOA,CAAG,EAAE,KAAK,OAAOD,CAAK,GA6BnCE,IAAYC,EAA4C,SACnE,EACE,aACA,UACA,UACA,SAAM,IACN,cAAW,IACX,eAAY,IACZ,UAAO,UACP,WACA,gBAAa,IACb,cAAW,WACX,WAAQ,QACR,WACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAUC,EAAM,GAChBC,IAAWC,MAAW,KAAA,KAAaR,MAAU,KAAA,GAC7CS,IAAQ,CAACC,KAAa,EAAEH,KAAYP,MAAU,KAAK,CAACW,IACpDC,IAASC,EAAgDC,CAAQ,GAEjEC,IAAON,IACXD,MAAW,KAAA,IAUT,kBAAC,QAAD;EACE,WAAWX,EAAO;EAClB,aAAWU,IAAW,UAAU;EAChC,aAAWS;EACX,mBAAiBC,KAAc,KAAA;EAC/B,eAAY;EAEX,UAAAV,IAAWR,EAAYC,GAAOC,CAAG,IAAI;CAClC,CAAA,IAjBN,kBAAC,QAAD;EACE,WAAWJ,EAAO;EAClB,aAAU;EACV,mBAAiBoB,KAAc,KAAA;EAC/B,eAAY;EAEZ,UAAA,kBAACC,GAAD;GAAQ,OAAOV;GAAQ,WAAWX,EAAO;EAAO,CAAA;CAC5C,CAAA,IAYN;CAEJ,OACE,kBAAC,QAAD;EACO;EACL,WAAWsB,EAAGtB,EAAO,WAAWuB,CAAS;EACzC,iBAAeC;EACf,cAAYC;EACZ,eAAaV,KAAU,KAAA;EACvB,OAAOW,EACLC,IAAU,EAAE,aAAaC,EAAMD,CAAM,EAAE,IAAsB,KAAA,GAC7DE,CACF;EACA,GAAItB;EAVN,UAAA;GAYGQ,IACGe,EAAab,GAAU,EACrB,oBAAoBc,EAClBd,EAAS,MAAM,qBACfL,IAAQJ,IAAU,KAAA,CACpB,EACF,CAAC,IACD;GACHU;GACAN,IACC,kBAAC,QAAD;IAAM,IAAIJ;IAAS,WAAWR,EAAO;IAClC,UAAAgC;GACG,CAAA,IACJ;EACA;;AAEV,CAAC"}