@burtson-labs/ui 0.10.1 → 0.12.0

package/dist/tokens.js

@@ -27,6 +27,8 @@ var light = {
 	"warning-foreground": "#ffffff",
 	info: "#2563eb",
 	"info-foreground": "#ffffff",
+	recording: "#d6293e",
+	"recording-foreground": "#ffffff",
 	border: "#e5dfe8",
 	"border-strong": "#cfc5d5",
 	input: "#d8cfdd",
@@ -64,6 +66,8 @@ var dark = {
 	"warning-foreground": "#201304",
 	info: "#6ea8ff",
 	"info-foreground": "#071226",
+	recording: "#f2616d",
+	"recording-foreground": "#1b090b",
 	border: "#2a2732",
 	"border-strong": "#403a49",
 	input: "#34303d",
@@ -142,17 +146,109 @@ var motion = {
 		}
 	}
 };
+/**
+* Motion timing for code that animates outside CSS (MUI transitions, JS
+* animation). Things leave faster than they arrive; `emphasis` is for
+* surfaces that change the layout (drawers, dialogs, expanding panels).
+*/
+var duration = {
+	fast: 120,
+	standard: 180,
+	emphasis: 240,
+	exit: 140
+};
+var easing = {
+	standard: "cubic-bezier(0.2, 0, 0, 1)",
+	emphasized: "cubic-bezier(0.16, 1, 0.3, 1)",
+	exit: "cubic-bezier(0.4, 0, 1, 1)"
+};
+/** Named elevation levels over the shadow scale: 0 flat, 1 resting control, 2 card, 3 floating. */
+var elevation = {
+	0: "none",
+	1: shadow.xs,
+	2: shadow.sm,
+	3: shadow.md
+};
+function parseHex(hex) {
+	const h = hex.replace("#", "").trim();
+	const full = h.length === 3 ? [...h].map((c) => c + c).join("") : h.slice(0, 6);
+	if (!/^[0-9a-f]{6}$/i.test(full)) throw new Error(`Not a hex colour: ${hex}`);
+	return [
+		0,
+		2,
+		4
+	].map((i) => parseInt(full.slice(i, i + 2), 16));
+}
+var toHex = (rgb) => "#" + rgb.map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("");
+/** Mix `a` toward `b` by `t` (0 = a, 1 = b), in sRGB. */
+function mix(a, b, t) {
+	const x = parseHex(a);
+	const y = parseHex(b);
+	return toHex([
+		0,
+		1,
+		2
+	].map((i) => x[i] + (y[i] - x[i]) * t));
+}
+function luminance(hex) {
+	const c = parseHex(hex).map((v) => {
+		const s = v / 255;
+		return s <= .03928 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * c[0] + .7152 * c[1] + .0722 * c[2];
+}
+/** WCAG contrast ratio between two hex colours. */
+function contrast(a, b) {
+	const [hi, lo] = [luminance(a), luminance(b)].sort((m, n) => n - m);
+	return (hi + .05) / (lo + .05);
+}
+/** Step `color` toward `target` until it reaches `ratio` against `against`. */
+function ensureContrast(color, against, ratio, target) {
+	let c = color;
+	for (let i = 0; i < 20 && contrast(c, against) < ratio; i++) c = mix(c, target, .1);
+	return c;
+}
+/**
+* Brand tokens for any accent colour, kept legible: the primary fill always
+* carries its foreground at 4.5:1, and the brand colour used for links, focus
+* and selected text reads at 4.5:1 on the page background. Tenants and skins
+* choose an accent; they never choose the contrast.
+*/
+function accentTokens(accent, mode) {
+	const p = mode === "dark" ? dark : light;
+	const white = "#ffffff";
+	const onFill = contrast(accent, white) >= contrast(accent, "#111111") ? white : "#111111";
+	const primary = onFill === white ? ensureContrast(accent, white, 4.5, "#000000") : ensureContrast(accent, "#111111", 4.5, white);
+	const brand = mode === "dark" ? ensureContrast(mix(accent, white, .12), p.background, 4.5, white) : ensureContrast(accent, p.background, 4.5, "#000000");
+	const brandHover = mode === "dark" ? mix(brand, white, .18) : mix(brand, "#000000", .14);
+	const soft = mode === "dark" ? mix(p.background, accent, .16) : mix(white, accent, .1);
+	const softFg = mode === "dark" ? mix(accent, white, .72) : mix(accent, "#000000", .55);
+	return {
+		primary,
+		"primary-foreground": onFill,
+		brand,
+		"brand-hover": brandHover,
+		"brand-soft": soft,
+		"brand-soft-foreground": ensureContrast(softFg, soft, 4.5, mode === "dark" ? white : "#000000"),
+		accent: soft,
+		"accent-foreground": ensureContrast(softFg, soft, 4.5, mode === "dark" ? white : "#000000"),
+		ring: brand
+	};
+}
 var tokens = {
 	brand,
 	light,
 	dark,
 	radius,
 	shadow,
+	elevation,
 	motion,
+	duration,
+	easing,
 	fontSans,
 	fontMono
 };
 //#endregion
-export { brand, dark, tokens as default, tokens, fontMono, fontSans, light, motion, radius, shadow };
+export { accentTokens, brand, contrast, dark, tokens as default, tokens, duration, easing, elevation, fontMono, fontSans, light, mix, motion, radius, shadow };
 
 //# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":[],"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * Burtson UI design tokens. This file is the single source for colour, radius,\n * shadow and type: `scripts/theme.mjs` writes src/styles/theme.css from it, and the\n * MUI adapter (`@burtson-labs/ui/mui`) builds its palette from it, so Tailwind\n * apps and MUI apps render the same brand.\n *\n * Burtson's design language: technical, quiet, precise. Purple (`brand`) is a\n * signal colour for selection, focus, primary actions and small accents, not a\n * panel fill. Dark is a first-class palette, not an inversion of light. The\n * base colour names stay registry-compatible, so source copied into an app\n * keeps working.\n */\n\nexport type ColorToken =\n  | 'background'\n  | 'foreground'\n  | 'surface'\n  | 'surface-raised'\n  | 'surface-muted'\n  | 'card'\n  | 'card-foreground'\n  | 'popover'\n  | 'popover-foreground'\n  | 'primary'\n  | 'primary-foreground'\n  | 'secondary'\n  | 'secondary-foreground'\n  | 'muted'\n  | 'muted-foreground'\n  | 'accent'\n  | 'accent-foreground'\n  | 'destructive'\n  | 'destructive-foreground'\n  | 'success'\n  | 'success-foreground'\n  | 'warning'\n  | 'warning-foreground'\n  | 'info'\n  | 'info-foreground'\n  | 'border'\n  | 'border-strong'\n  | 'input'\n  | 'ring'\n  | 'brand'\n  | 'brand-hover'\n  | 'brand-soft'\n  | 'brand-soft-foreground'\n  | 'code'\n  | 'code-foreground';\n\nexport type Palette = Record<ColorToken, string>;\n\n/** Burtson Labs purple. Use as signal, not wallpaper. */\nexport const brand = '#a60ee5';\n\nexport const light: Palette = {\n  background: '#fbfafc',\n  foreground: '#17131c',\n  surface: '#ffffff',\n  'surface-raised': '#ffffff',\n  'surface-muted': '#f7f4f9',\n  card: '#ffffff',\n  'card-foreground': '#17131c',\n  popover: '#ffffff',\n  'popover-foreground': '#17131c',\n  primary: '#8f0bc7',\n  'primary-foreground': '#ffffff',\n  secondary: '#f1edf4',\n  'secondary-foreground': '#29212f',\n  muted: '#f4f1f6',\n  'muted-foreground': '#6c6472',\n  accent: '#f3e7fb',\n  'accent-foreground': '#561071',\n  destructive: '#c92d3f',\n  'destructive-foreground': '#ffffff',\n  success: '#0e7a56',\n  'success-foreground': '#ffffff',\n  warning: '#9b5c08',\n  'warning-foreground': '#ffffff',\n  info: '#2563eb',\n  'info-foreground': '#ffffff',\n  border: '#e5dfe8',\n  'border-strong': '#cfc5d5',\n  input: '#d8cfdd',\n  ring: '#a60ee5',\n  brand: '#a60ee5',\n  'brand-hover': '#8f0bc7',\n  'brand-soft': '#f5e8fc',\n  'brand-soft-foreground': '#5b1476',\n  code: '#18141d',\n  'code-foreground': '#f5f0f7',\n};\n\nexport const dark: Palette = {\n  background: '#0d0d12',\n  foreground: '#f2eef5',\n  surface: '#121218',\n  'surface-raised': '#18171f',\n  'surface-muted': '#17151c',\n  card: '#14131a',\n  'card-foreground': '#f2eef5',\n  popover: '#18171f',\n  'popover-foreground': '#f2eef5',\n  primary: '#8f0bc7',\n  'primary-foreground': '#ffffff',\n  secondary: '#211e28',\n  'secondary-foreground': '#e7e0eb',\n  muted: '#1b1921',\n  'muted-foreground': '#a49ca9',\n  accent: '#291734',\n  'accent-foreground': '#efd7fa',\n  destructive: '#ef5b65',\n  'destructive-foreground': '#1b090b',\n  success: '#36c58d',\n  'success-foreground': '#07160f',\n  warning: '#f3b24c',\n  'warning-foreground': '#201304',\n  info: '#6ea8ff',\n  'info-foreground': '#071226',\n  border: '#2a2732',\n  'border-strong': '#403a49',\n  input: '#34303d',\n  ring: '#c65ef1',\n  brand: '#c65ef1',\n  'brand-hover': '#d384f3',\n  'brand-soft': '#291734',\n  'brand-soft-foreground': '#efd7fa',\n  code: '#09090d',\n  'code-foreground': '#f5f0f7',\n};\n\nexport const radius = {\n  xs: '0.375rem',\n  sm: '0.5rem',\n  md: '0.625rem',\n  lg: '0.75rem',\n  xl: '1rem',\n  full: '9999px',\n} as const;\n\nexport const shadow = {\n  xs: '0 1px 2px rgb(10 8 14 / 0.05)',\n  sm: '0 1px 3px rgb(10 8 14 / 0.08), 0 1px 2px rgb(10 8 14 / 0.05)',\n  md: '0 10px 30px rgb(10 8 14 / 0.10), 0 2px 8px rgb(10 8 14 / 0.06)',\n  focus: '0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent)',\n} as const;\n\nexport const fontSans =\n  'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif';\nexport const fontMono =\n  '\"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace';\n\n/**\n * Motion. Surfaces enter from where they come from: popovers and menus slide a\n * few pixels from their trigger side (--bl-tx/--bl-ty, set per side by the\n * component), dialogs zoom slightly, sheets glide in with a drawer ease, and\n * everything leaves faster than it arrived. prefers-reduced-motion turns all\n * of it off (theme.css).\n */\nexport const motion = {\n  animations: {\n    in: 'bl-in 200ms cubic-bezier(0.16, 1, 0.3, 1)',\n    out: 'bl-out 140ms cubic-bezier(0.4, 0, 1, 1) forwards',\n    'fade-in': 'bl-fade-in 200ms ease-out',\n    'fade-out': 'bl-fade-out 150ms ease-in forwards',\n    'sheet-in': 'bl-sheet-in 340ms cubic-bezier(0.32, 0.72, 0, 1)',\n    'sheet-out': 'bl-sheet-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards',\n    'accordion-down': 'bl-accordion-down 200ms cubic-bezier(0.16, 1, 0.3, 1)',\n    'accordion-up': 'bl-accordion-up 160ms ease-out',\n    'collapsible-down': 'bl-collapsible-down 200ms cubic-bezier(0.16, 1, 0.3, 1)',\n    'collapsible-up': 'bl-collapsible-up 160ms ease-out',\n  },\n  keyframes: {\n    'bl-in': {\n      from: {\n        opacity: '0',\n        transform: 'translate3d(var(--bl-tx, 0), var(--bl-ty, 0), 0) scale(var(--bl-scale, 0.96))',\n      },\n    },\n    'bl-out': {\n      to: {\n        opacity: '0',\n        transform: 'translate3d(var(--bl-tx, 0), var(--bl-ty, 0), 0) scale(var(--bl-scale, 0.96))',\n      },\n    },\n    'bl-fade-in': { from: { opacity: '0' } },\n    'bl-fade-out': { to: { opacity: '0' } },\n    'bl-sheet-in': {\n      from: { transform: 'translate3d(var(--bl-sheet-x, 100%), var(--bl-sheet-y, 0), 0)' },\n    },\n    'bl-sheet-out': {\n      to: { transform: 'translate3d(var(--bl-sheet-x, 100%), var(--bl-sheet-y, 0), 0)' },\n    },\n    'bl-accordion-down': {\n      from: { height: '0' },\n      to: { height: 'var(--radix-accordion-content-height)' },\n    },\n    'bl-accordion-up': {\n      from: { height: 'var(--radix-accordion-content-height)' },\n      to: { height: '0' },\n    },\n    'bl-collapsible-down': {\n      from: { height: '0' },\n      to: { height: 'var(--radix-collapsible-content-height)' },\n    },\n    'bl-collapsible-up': {\n      from: { height: 'var(--radix-collapsible-content-height)' },\n      to: { height: '0' },\n    },\n  },\n} as const;\n\nexport const tokens = { brand, light, dark, radius, shadow, motion, fontSans, fontMono } as const;\nexport default tokens;\n"],"mappings":";;AAqDA,IAAa,QAAQ;AAErB,IAAa,QAAiB;CAC5B,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,kBAAkB;CAClB,iBAAiB;CACjB,MAAM;CACN,mBAAmB;CACnB,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,WAAW;CACX,wBAAwB;CACxB,OAAO;CACP,oBAAoB;CACpB,QAAQ;CACR,qBAAqB;CACrB,aAAa;CACb,0BAA0B;CAC1B,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,MAAM;CACN,mBAAmB;CACnB,QAAQ;CACR,iBAAiB;CACjB,OAAO;CACP,MAAM;CACN,OAAO;CACP,eAAe;CACf,cAAc;CACd,yBAAyB;CACzB,MAAM;CACN,mBAAmB;AACrB;AAEA,IAAa,OAAgB;CAC3B,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,kBAAkB;CAClB,iBAAiB;CACjB,MAAM;CACN,mBAAmB;CACnB,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,WAAW;CACX,wBAAwB;CACxB,OAAO;CACP,oBAAoB;CACpB,QAAQ;CACR,qBAAqB;CACrB,aAAa;CACb,0BAA0B;CAC1B,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,MAAM;CACN,mBAAmB;CACnB,QAAQ;CACR,iBAAiB;CACjB,OAAO;CACP,MAAM;CACN,OAAO;CACP,eAAe;CACf,cAAc;CACd,yBAAyB;CACzB,MAAM;CACN,mBAAmB;AACrB;AAEA,IAAa,SAAS;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,IAAa,SAAS;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,IAAa,WACX;AACF,IAAa,WACX;;;;;;;;AASF,IAAa,SAAS;CACpB,YAAY;EACV,IAAI;EACJ,KAAK;EACL,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,gBAAgB;EAChB,oBAAoB;EACpB,kBAAkB;CACpB;CACA,WAAW;EACT,SAAS,EACP,MAAM;GACJ,SAAS;GACT,WAAW;EACb,EACF;EACA,UAAU,EACR,IAAI;GACF,SAAS;GACT,WAAW;EACb,EACF;EACA,cAAc,EAAE,MAAM,EAAE,SAAS,IAAI,EAAE;EACvC,eAAe,EAAE,IAAI,EAAE,SAAS,IAAI,EAAE;EACtC,eAAe,EACb,MAAM,EAAE,WAAW,gEAAgE,EACrF;EACA,gBAAgB,EACd,IAAI,EAAE,WAAW,gEAAgE,EACnF;EACA,qBAAqB;GACnB,MAAM,EAAE,QAAQ,IAAI;GACpB,IAAI,EAAE,QAAQ,wCAAwC;EACxD;EACA,mBAAmB;GACjB,MAAM,EAAE,QAAQ,wCAAwC;GACxD,IAAI,EAAE,QAAQ,IAAI;EACpB;EACA,uBAAuB;GACrB,MAAM,EAAE,QAAQ,IAAI;GACpB,IAAI,EAAE,QAAQ,0CAA0C;EAC1D;EACA,qBAAqB;GACnB,MAAM,EAAE,QAAQ,0CAA0C;GAC1D,IAAI,EAAE,QAAQ,IAAI;EACpB;CACF;AACF;AAEA,IAAa,SAAS;CAAE;CAAO;CAAO;CAAM;CAAQ;CAAQ;CAAQ;CAAU;AAAS"}
+{"version":3,"file":"tokens.js","names":[],"sources":["../src/tokens.ts"],"sourcesContent":["/**\n * Burtson UI design tokens. This file is the single source for colour, radius,\n * shadow and type: `scripts/theme.mjs` writes src/styles/theme.css from it, and the\n * MUI adapter (`@burtson-labs/ui/mui`) builds its palette from it, so Tailwind\n * apps and MUI apps render the same brand.\n *\n * Burtson's design language: technical, quiet, precise. Purple (`brand`) is a\n * signal colour for selection, focus, primary actions and small accents, not a\n * panel fill. Dark is a first-class palette, not an inversion of light. The\n * base colour names stay registry-compatible, so source copied into an app\n * keeps working.\n */\n\nexport type ColorToken =\n  | 'background'\n  | 'foreground'\n  | 'surface'\n  | 'surface-raised'\n  | 'surface-muted'\n  | 'card'\n  | 'card-foreground'\n  | 'popover'\n  | 'popover-foreground'\n  | 'primary'\n  | 'primary-foreground'\n  | 'secondary'\n  | 'secondary-foreground'\n  | 'muted'\n  | 'muted-foreground'\n  | 'accent'\n  | 'accent-foreground'\n  | 'destructive'\n  | 'destructive-foreground'\n  | 'success'\n  | 'success-foreground'\n  | 'warning'\n  | 'warning-foreground'\n  | 'info'\n  | 'info-foreground'\n  | 'recording'\n  | 'recording-foreground'\n  | 'border'\n  | 'border-strong'\n  | 'input'\n  | 'ring'\n  | 'brand'\n  | 'brand-hover'\n  | 'brand-soft'\n  | 'brand-soft-foreground'\n  | 'code'\n  | 'code-foreground';\n\nexport type Palette = Record<ColorToken, string>;\n\n/** Burtson Labs purple. Use as signal, not wallpaper. */\nexport const brand = '#a60ee5';\n\nexport const light: Palette = {\n  background: '#fbfafc',\n  foreground: '#17131c',\n  surface: '#ffffff',\n  'surface-raised': '#ffffff',\n  'surface-muted': '#f7f4f9',\n  card: '#ffffff',\n  'card-foreground': '#17131c',\n  popover: '#ffffff',\n  'popover-foreground': '#17131c',\n  primary: '#8f0bc7',\n  'primary-foreground': '#ffffff',\n  secondary: '#f1edf4',\n  'secondary-foreground': '#29212f',\n  muted: '#f4f1f6',\n  'muted-foreground': '#6c6472',\n  accent: '#f3e7fb',\n  'accent-foreground': '#561071',\n  destructive: '#c92d3f',\n  'destructive-foreground': '#ffffff',\n  success: '#0e7a56',\n  'success-foreground': '#ffffff',\n  warning: '#9b5c08',\n  'warning-foreground': '#ffffff',\n  info: '#2563eb',\n  'info-foreground': '#ffffff',\n  // Live microphone capture. Red by convention, but its own token: recording\n  // is a state, not an error, and apps can retint it without touching errors.\n  recording: '#d6293e',\n  'recording-foreground': '#ffffff',\n  border: '#e5dfe8',\n  'border-strong': '#cfc5d5',\n  input: '#d8cfdd',\n  ring: '#a60ee5',\n  brand: '#a60ee5',\n  'brand-hover': '#8f0bc7',\n  'brand-soft': '#f5e8fc',\n  'brand-soft-foreground': '#5b1476',\n  code: '#18141d',\n  'code-foreground': '#f5f0f7',\n};\n\nexport const dark: Palette = {\n  background: '#0d0d12',\n  foreground: '#f2eef5',\n  surface: '#121218',\n  'surface-raised': '#18171f',\n  'surface-muted': '#17151c',\n  card: '#14131a',\n  'card-foreground': '#f2eef5',\n  popover: '#18171f',\n  'popover-foreground': '#f2eef5',\n  primary: '#8f0bc7',\n  'primary-foreground': '#ffffff',\n  secondary: '#211e28',\n  'secondary-foreground': '#e7e0eb',\n  muted: '#1b1921',\n  'muted-foreground': '#a49ca9',\n  accent: '#291734',\n  'accent-foreground': '#efd7fa',\n  destructive: '#ef5b65',\n  'destructive-foreground': '#1b090b',\n  success: '#36c58d',\n  'success-foreground': '#07160f',\n  warning: '#f3b24c',\n  'warning-foreground': '#201304',\n  info: '#6ea8ff',\n  'info-foreground': '#071226',\n  recording: '#f2616d',\n  'recording-foreground': '#1b090b',\n  border: '#2a2732',\n  'border-strong': '#403a49',\n  input: '#34303d',\n  ring: '#c65ef1',\n  brand: '#c65ef1',\n  'brand-hover': '#d384f3',\n  'brand-soft': '#291734',\n  'brand-soft-foreground': '#efd7fa',\n  code: '#09090d',\n  'code-foreground': '#f5f0f7',\n};\n\nexport const radius = {\n  xs: '0.375rem',\n  sm: '0.5rem',\n  md: '0.625rem',\n  lg: '0.75rem',\n  xl: '1rem',\n  full: '9999px',\n} as const;\n\nexport const shadow = {\n  xs: '0 1px 2px rgb(10 8 14 / 0.05)',\n  sm: '0 1px 3px rgb(10 8 14 / 0.08), 0 1px 2px rgb(10 8 14 / 0.05)',\n  md: '0 10px 30px rgb(10 8 14 / 0.10), 0 2px 8px rgb(10 8 14 / 0.06)',\n  focus: '0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent)',\n} as const;\n\nexport const fontSans =\n  'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif';\nexport const fontMono =\n  '\"JetBrains Mono\", \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace';\n\n/**\n * Motion. Surfaces enter from where they come from: popovers and menus slide a\n * few pixels from their trigger side (--bl-tx/--bl-ty, set per side by the\n * component), dialogs zoom slightly, sheets glide in with a drawer ease, and\n * everything leaves faster than it arrived. prefers-reduced-motion turns all\n * of it off (theme.css).\n */\nexport const motion = {\n  animations: {\n    in: 'bl-in 200ms cubic-bezier(0.16, 1, 0.3, 1)',\n    out: 'bl-out 140ms cubic-bezier(0.4, 0, 1, 1) forwards',\n    'fade-in': 'bl-fade-in 200ms ease-out',\n    'fade-out': 'bl-fade-out 150ms ease-in forwards',\n    'sheet-in': 'bl-sheet-in 340ms cubic-bezier(0.32, 0.72, 0, 1)',\n    'sheet-out': 'bl-sheet-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards',\n    'accordion-down': 'bl-accordion-down 200ms cubic-bezier(0.16, 1, 0.3, 1)',\n    'accordion-up': 'bl-accordion-up 160ms ease-out',\n    'collapsible-down': 'bl-collapsible-down 200ms cubic-bezier(0.16, 1, 0.3, 1)',\n    'collapsible-up': 'bl-collapsible-up 160ms ease-out',\n  },\n  keyframes: {\n    'bl-in': {\n      from: {\n        opacity: '0',\n        transform: 'translate3d(var(--bl-tx, 0), var(--bl-ty, 0), 0) scale(var(--bl-scale, 0.96))',\n      },\n    },\n    'bl-out': {\n      to: {\n        opacity: '0',\n        transform: 'translate3d(var(--bl-tx, 0), var(--bl-ty, 0), 0) scale(var(--bl-scale, 0.96))',\n      },\n    },\n    'bl-fade-in': { from: { opacity: '0' } },\n    'bl-fade-out': { to: { opacity: '0' } },\n    'bl-sheet-in': {\n      from: { transform: 'translate3d(var(--bl-sheet-x, 100%), var(--bl-sheet-y, 0), 0)' },\n    },\n    'bl-sheet-out': {\n      to: { transform: 'translate3d(var(--bl-sheet-x, 100%), var(--bl-sheet-y, 0), 0)' },\n    },\n    'bl-accordion-down': {\n      from: { height: '0' },\n      to: { height: 'var(--radix-accordion-content-height)' },\n    },\n    'bl-accordion-up': {\n      from: { height: 'var(--radix-accordion-content-height)' },\n      to: { height: '0' },\n    },\n    'bl-collapsible-down': {\n      from: { height: '0' },\n      to: { height: 'var(--radix-collapsible-content-height)' },\n    },\n    'bl-collapsible-up': {\n      from: { height: 'var(--radix-collapsible-content-height)' },\n      to: { height: '0' },\n    },\n  },\n} as const;\n\n/**\n * Motion timing for code that animates outside CSS (MUI transitions, JS\n * animation). Things leave faster than they arrive; `emphasis` is for\n * surfaces that change the layout (drawers, dialogs, expanding panels).\n */\nexport const duration = { fast: 120, standard: 180, emphasis: 240, exit: 140 } as const;\nexport const easing = {\n  standard: 'cubic-bezier(0.2, 0, 0, 1)',\n  emphasized: 'cubic-bezier(0.16, 1, 0.3, 1)',\n  exit: 'cubic-bezier(0.4, 0, 1, 1)',\n} as const;\n\n/** Named elevation levels over the shadow scale: 0 flat, 1 resting control, 2 card, 3 floating. */\nexport const elevation = { 0: 'none', 1: shadow.xs, 2: shadow.sm, 3: shadow.md } as const;\n\n// ─── Accent ────────────────────────────────────────────────────────────────\n\nexport type AccentTokens = Pick<\n  Palette,\n  | 'primary'\n  | 'primary-foreground'\n  | 'brand'\n  | 'brand-hover'\n  | 'brand-soft'\n  | 'brand-soft-foreground'\n  | 'accent'\n  | 'accent-foreground'\n  | 'ring'\n>;\n\ntype Rgb = [number, number, number];\n\nfunction parseHex(hex: string): Rgb {\n  const h = hex.replace('#', '').trim();\n  const full = h.length === 3 ? [...h].map((c) => c + c).join('') : h.slice(0, 6);\n  if (!/^[0-9a-f]{6}$/i.test(full)) throw new Error(`Not a hex colour: ${hex}`);\n  return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16)) as Rgb;\n}\n\nconst toHex = (rgb: Rgb) =>\n  '#' +\n  rgb\n    .map((v) =>\n      Math.round(Math.max(0, Math.min(255, v)))\n        .toString(16)\n        .padStart(2, '0'),\n    )\n    .join('');\n\n/** Mix `a` toward `b` by `t` (0 = a, 1 = b), in sRGB. */\nexport function mix(a: string, b: string, t: number): string {\n  const x = parseHex(a);\n  const y = parseHex(b);\n  return toHex([0, 1, 2].map((i) => x[i]! + (y[i]! - x[i]!) * t) as Rgb);\n}\n\nfunction luminance(hex: string): number {\n  const c = parseHex(hex).map((v) => {\n    const s = v / 255;\n    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * c[0]! + 0.7152 * c[1]! + 0.0722 * c[2]!;\n}\n\n/** WCAG contrast ratio between two hex colours. */\nexport function contrast(a: string, b: string): number {\n  const [hi, lo] = [luminance(a), luminance(b)].sort((m, n) => n - m) as [number, number];\n  return (hi + 0.05) / (lo + 0.05);\n}\n\n/** Step `color` toward `target` until it reaches `ratio` against `against`. */\nfunction ensureContrast(color: string, against: string, ratio: number, target: string): string {\n  let c = color;\n  for (let i = 0; i < 20 && contrast(c, against) < ratio; i++) c = mix(c, target, 0.1);\n  return c;\n}\n\n/**\n * Brand tokens for any accent colour, kept legible: the primary fill always\n * carries its foreground at 4.5:1, and the brand colour used for links, focus\n * and selected text reads at 4.5:1 on the page background. Tenants and skins\n * choose an accent; they never choose the contrast.\n */\nexport function accentTokens(accent: string, mode: 'light' | 'dark'): AccentTokens {\n  const p = mode === 'dark' ? dark : light;\n  const white = '#ffffff';\n  // A dark foreground on light fills (yellow, cyan) instead of forcing white.\n  const onFill = contrast(accent, white) >= contrast(accent, '#111111') ? white : '#111111';\n  const primary =\n    onFill === white\n      ? ensureContrast(accent, white, 4.5, '#000000')\n      : ensureContrast(accent, '#111111', 4.5, white);\n  const brand =\n    mode === 'dark'\n      ? ensureContrast(mix(accent, white, 0.12), p.background, 4.5, white)\n      : ensureContrast(accent, p.background, 4.5, '#000000');\n  const brandHover = mode === 'dark' ? mix(brand, white, 0.18) : mix(brand, '#000000', 0.14);\n  const soft = mode === 'dark' ? mix(p.background, accent, 0.16) : mix(white, accent, 0.1);\n  const softFg = mode === 'dark' ? mix(accent, white, 0.72) : mix(accent, '#000000', 0.55);\n  return {\n    primary,\n    'primary-foreground': onFill,\n    brand,\n    'brand-hover': brandHover,\n    'brand-soft': soft,\n    'brand-soft-foreground': ensureContrast(softFg, soft, 4.5, mode === 'dark' ? white : '#000000'),\n    accent: soft,\n    'accent-foreground': ensureContrast(softFg, soft, 4.5, mode === 'dark' ? white : '#000000'),\n    ring: brand,\n  };\n}\n\nexport const tokens = {\n  brand,\n  light,\n  dark,\n  radius,\n  shadow,\n  elevation,\n  motion,\n  duration,\n  easing,\n  fontSans,\n  fontMono,\n} as const;\nexport default tokens;\n"],"mappings":";;AAuDA,IAAa,QAAQ;AAErB,IAAa,QAAiB;CAC5B,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,kBAAkB;CAClB,iBAAiB;CACjB,MAAM;CACN,mBAAmB;CACnB,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,WAAW;CACX,wBAAwB;CACxB,OAAO;CACP,oBAAoB;CACpB,QAAQ;CACR,qBAAqB;CACrB,aAAa;CACb,0BAA0B;CAC1B,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,MAAM;CACN,mBAAmB;CAGnB,WAAW;CACX,wBAAwB;CACxB,QAAQ;CACR,iBAAiB;CACjB,OAAO;CACP,MAAM;CACN,OAAO;CACP,eAAe;CACf,cAAc;CACd,yBAAyB;CACzB,MAAM;CACN,mBAAmB;AACrB;AAEA,IAAa,OAAgB;CAC3B,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,kBAAkB;CAClB,iBAAiB;CACjB,MAAM;CACN,mBAAmB;CACnB,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,WAAW;CACX,wBAAwB;CACxB,OAAO;CACP,oBAAoB;CACpB,QAAQ;CACR,qBAAqB;CACrB,aAAa;CACb,0BAA0B;CAC1B,SAAS;CACT,sBAAsB;CACtB,SAAS;CACT,sBAAsB;CACtB,MAAM;CACN,mBAAmB;CACnB,WAAW;CACX,wBAAwB;CACxB,QAAQ;CACR,iBAAiB;CACjB,OAAO;CACP,MAAM;CACN,OAAO;CACP,eAAe;CACf,cAAc;CACd,yBAAyB;CACzB,MAAM;CACN,mBAAmB;AACrB;AAEA,IAAa,SAAS;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,IAAa,SAAS;CACpB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,IAAa,WACX;AACF,IAAa,WACX;;;;;;;;AASF,IAAa,SAAS;CACpB,YAAY;EACV,IAAI;EACJ,KAAK;EACL,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,aAAa;EACb,kBAAkB;EAClB,gBAAgB;EAChB,oBAAoB;EACpB,kBAAkB;CACpB;CACA,WAAW;EACT,SAAS,EACP,MAAM;GACJ,SAAS;GACT,WAAW;EACb,EACF;EACA,UAAU,EACR,IAAI;GACF,SAAS;GACT,WAAW;EACb,EACF;EACA,cAAc,EAAE,MAAM,EAAE,SAAS,IAAI,EAAE;EACvC,eAAe,EAAE,IAAI,EAAE,SAAS,IAAI,EAAE;EACtC,eAAe,EACb,MAAM,EAAE,WAAW,gEAAgE,EACrF;EACA,gBAAgB,EACd,IAAI,EAAE,WAAW,gEAAgE,EACnF;EACA,qBAAqB;GACnB,MAAM,EAAE,QAAQ,IAAI;GACpB,IAAI,EAAE,QAAQ,wCAAwC;EACxD;EACA,mBAAmB;GACjB,MAAM,EAAE,QAAQ,wCAAwC;GACxD,IAAI,EAAE,QAAQ,IAAI;EACpB;EACA,uBAAuB;GACrB,MAAM,EAAE,QAAQ,IAAI;GACpB,IAAI,EAAE,QAAQ,0CAA0C;EAC1D;EACA,qBAAqB;GACnB,MAAM,EAAE,QAAQ,0CAA0C;GAC1D,IAAI,EAAE,QAAQ,IAAI;EACpB;CACF;AACF;;;;;;AAOA,IAAa,WAAW;CAAE,MAAM;CAAK,UAAU;CAAK,UAAU;CAAK,MAAM;AAAI;AAC7E,IAAa,SAAS;CACpB,UAAU;CACV,YAAY;CACZ,MAAM;AACR;;AAGA,IAAa,YAAY;CAAE,GAAG;CAAQ,GAAG,OAAO;CAAI,GAAG,OAAO;CAAI,GAAG,OAAO;AAAG;AAmB/E,SAAS,SAAS,KAAkB;CAClC,MAAM,IAAI,IAAI,QAAQ,KAAK,EAAE,CAAC,CAAC,KAAK;CACpC,MAAM,OAAO,EAAE,WAAW,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,MAAM,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;CAC9E,IAAI,CAAC,iBAAiB,KAAK,IAAI,GAAG,MAAM,IAAI,MAAM,qBAAqB,KAAK;CAC5E,OAAO;EAAC;EAAG;EAAG;CAAC,CAAC,CAAC,KAAK,MAAM,SAAS,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;AAChE;AAEA,IAAM,SAAS,QACb,MACA,IACG,KAAK,MACJ,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CACtC,SAAS,EAAE,CAAC,CACZ,SAAS,GAAG,GAAG,CACpB,CAAC,CACA,KAAK,EAAE;;AAGZ,SAAgB,IAAI,GAAW,GAAW,GAAmB;CAC3D,MAAM,IAAI,SAAS,CAAC;CACpB,MAAM,IAAI,SAAS,CAAC;CACpB,OAAO,MAAM;EAAC;EAAG;EAAG;CAAC,CAAC,CAAC,KAAK,MAAM,EAAE,MAAO,EAAE,KAAM,EAAE,MAAO,CAAC,CAAQ;AACvE;AAEA,SAAS,UAAU,KAAqB;CACtC,MAAM,IAAI,SAAS,GAAG,CAAC,CAAC,KAAK,MAAM;EACjC,MAAM,IAAI,IAAI;EACd,OAAO,KAAK,SAAU,IAAI,UAAU,IAAI,QAAS,UAAU;CAC7D,CAAC;CACD,OAAO,QAAS,EAAE,KAAM,QAAS,EAAE,KAAM,QAAS,EAAE;AACtD;;AAGA,SAAgB,SAAS,GAAW,GAAmB;CACrD,MAAM,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC;CAClE,QAAQ,KAAK,QAAS,KAAK;AAC7B;;AAGA,SAAS,eAAe,OAAe,SAAiB,OAAe,QAAwB;CAC7F,IAAI,IAAI;CACR,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,SAAS,GAAG,OAAO,IAAI,OAAO,KAAK,IAAI,IAAI,GAAG,QAAQ,EAAG;CACnF,OAAO;AACT;;;;;;;AAQA,SAAgB,aAAa,QAAgB,MAAsC;CACjF,MAAM,IAAI,SAAS,SAAS,OAAO;CACnC,MAAM,QAAQ;CAEd,MAAM,SAAS,SAAS,QAAQ,KAAK,KAAK,SAAS,QAAQ,SAAS,IAAI,QAAQ;CAChF,MAAM,UACJ,WAAW,QACP,eAAe,QAAQ,OAAO,KAAK,SAAS,IAC5C,eAAe,QAAQ,WAAW,KAAK,KAAK;CAClD,MAAM,QACJ,SAAS,SACL,eAAe,IAAI,QAAQ,OAAO,GAAI,GAAG,EAAE,YAAY,KAAK,KAAK,IACjE,eAAe,QAAQ,EAAE,YAAY,KAAK,SAAS;CACzD,MAAM,aAAa,SAAS,SAAS,IAAI,OAAO,OAAO,GAAI,IAAI,IAAI,OAAO,WAAW,GAAI;CACzF,MAAM,OAAO,SAAS,SAAS,IAAI,EAAE,YAAY,QAAQ,GAAI,IAAI,IAAI,OAAO,QAAQ,EAAG;CACvF,MAAM,SAAS,SAAS,SAAS,IAAI,QAAQ,OAAO,GAAI,IAAI,IAAI,QAAQ,WAAW,GAAI;CACvF,OAAO;EACL;EACA,sBAAsB;EACtB;EACA,eAAe;EACf,cAAc;EACd,yBAAyB,eAAe,QAAQ,MAAM,KAAK,SAAS,SAAS,QAAQ,SAAS;EAC9F,QAAQ;EACR,qBAAqB,eAAe,QAAQ,MAAM,KAAK,SAAS,SAAS,QAAQ,SAAS;EAC1F,MAAM;CACR;AACF;AAEA,IAAa,SAAS;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burtson-labs/ui",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "description": "React components for Burtson Labs products: Radix accessibility, Tailwind v4 styling, Burtson Icons. Install the package or copy the source.",
   "license": "MIT",
   "author": {