@riverbankcms/sdk 0.111.0 → 0.119.0

package/dist/server/theme-bridge.mjs

@@ -58,111 +58,6 @@ const mediaSchema = z.object({
 	transform: transformSchema.optional()
 });
 //#endregion
-//#region ../theme-core/src/buttons/effectClassification.ts
-/**
-* Exhaustive live policy for every registered effect id.
-*
-* The resolver consumes the transition payload directly, so adding an effect
-* cannot update classification without also defining its runtime behavior.
-*/
-const BUTTON_EFFECT_POLICIES = {
-	"darken-background": {
-		classification: "colour-transition",
-		transition: {
-			kind: "adjust-shade",
-			direction: "darker"
-		}
-	},
-	"lighten-background": {
-		classification: "colour-transition",
-		transition: {
-			kind: "adjust-shade",
-			direction: "lighter"
-		}
-	},
-	"background-on-hover": {
-		classification: "colour-transition",
-		transition: { kind: "replace-background" }
-	},
-	"background-on-hover-alpha": {
-		classification: "unsupported-colour",
-		reason: "alpha_requires_surface"
-	},
-	"fade-background": {
-		classification: "unsupported-colour",
-		reason: "changes_element_opacity"
-	},
-	"opacity-reduce": {
-		classification: "unsupported-colour",
-		reason: "changes_element_opacity"
-	},
-	"gradient-text": {
-		classification: "unsupported-colour",
-		reason: "changes_foreground"
-	},
-	"text-color-change": {
-		classification: "unsupported-colour",
-		reason: "changes_foreground"
-	},
-	"border-color-change": {
-		classification: "unsupported-colour",
-		reason: "changes_border"
-	},
-	"aurora-glow": {
-		classification: "unsupported-background-overlay",
-		reason: "unresolved_background_overlay"
-	},
-	"cosmic-stardust": {
-		classification: "unsupported-background-overlay",
-		reason: "unresolved_background_overlay"
-	},
-	"gradient-border-fill": {
-		classification: "unsupported-background-overlay",
-		reason: "unresolved_background_overlay"
-	},
-	"animated-gradient-border-fill": {
-		classification: "unsupported-background-overlay",
-		reason: "unresolved_background_overlay"
-	},
-	"nav-underline": {
-		classification: "not-button",
-		reason: "not_button_effect"
-	},
-	"nav-frosted-base": {
-		classification: "not-button",
-		reason: "not_button_effect"
-	},
-	"nav-frosted-hover": {
-		classification: "not-button",
-		reason: "not_button_effect"
-	},
-	"nav-frosted-active": {
-		classification: "not-button",
-		reason: "not_button_effect"
-	},
-	"animated-gradient": { classification: "non-colour" },
-	"border-glow": { classification: "non-colour" },
-	"drop-shadow": { classification: "non-colour" },
-	"inner-shadow": { classification: "non-colour" },
-	"neumorphic-shadow": { classification: "non-colour" },
-	"outer-glow": { classification: "non-colour" },
-	"retro-3d-shadow": { classification: "non-colour" },
-	"scale-up": { classification: "non-colour" },
-	"scale-down": { classification: "non-colour" },
-	lift: { classification: "non-colour" },
-	"press-down": { classification: "non-colour" },
-	pop: { classification: "non-colour" },
-	"border-bottom-grow": { classification: "non-colour" },
-	"sketchy-border": { classification: "non-colour" },
-	"pulse-animation": { classification: "non-colour" }
-};
-function getButtonEffectPolicy(effectId) {
-	return Object.prototype.hasOwnProperty.call(BUTTON_EFFECT_POLICIES, effectId) ? BUTTON_EFFECT_POLICIES[effectId] : null;
-}
-function classifyButtonEffectId(effectId) {
-	return getButtonEffectPolicy(effectId)?.classification ?? "unknown";
-}
-//#endregion
 //#region ../theme-core/src/tokens/colorTokenParts.ts
 function parseOpacityPercent(source) {
 	const trimmed = source.trim();
@@ -316,6 +211,13 @@ const VARIANT_ROLES = [
 	"tertiary",
 	"accent"
 ];
+/**
+* Canonical persisted/CSS-safe button variant identifier.
+*
+* IDs become class selectors, so keep the contract deliberately narrower than
+* an arbitrary string and shared with every authoring/runtime boundary.
+*/
+const buttonVariantIdSchema = z$1.string().min(1).max(50).regex(/^[a-z0-9-]+$/, "Button variant IDs may contain lowercase letters, numbers, and hyphens only");
 function parseOpaqueButtonColourToken(value) {
 	const token = parseThemeColorToken(value);
 	if (token === null) return null;
@@ -330,6 +232,109 @@ const opaqueButtonColourTokenSchema = themeColorTokenSchema.refine((value) => pa
 	if (token === null) throw new Error("Invariant: opaque button token passed its schema");
 	return token;
 });
+const buttonShadeAmountSchema = z$1.number().finite().min(0).max(900).multipleOf(100);
+const buttonShadowIntensitySchema = z$1.enum([
+	"subtle",
+	"medium",
+	"strong"
+]);
+/**
+* The complete persisted button-effect contract.
+*
+* Navigation has its own generic interactive-effect model. Button variants use
+* this closed union so unsupported effect IDs, unknown option keys, and unsafe
+* CSS values cannot become representable after the schema boundary.
+*/
+const buttonEffectApplicationSchema = z$1.discriminatedUnion("effectId", [
+	z$1.strictObject({
+		effectId: z$1.literal("darken-background"),
+		options: z$1.strictObject({ amount: buttonShadeAmountSchema.optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("lighten-background"),
+		options: z$1.strictObject({ amount: buttonShadeAmountSchema.optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("background-on-hover"),
+		options: z$1.strictObject({ colorToken: opaqueButtonColourTokenSchema.optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("animated-gradient"),
+		options: z$1.strictObject({ direction: z$1.enum(["horizontal", "vertical"]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("drop-shadow"),
+		options: z$1.strictObject({ intensity: buttonShadowIntensitySchema.optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("inner-shadow"),
+		options: z$1.strictObject({}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("neumorphic-shadow"),
+		options: z$1.strictObject({
+			mode: z$1.enum(["raised", "pressed"]).optional(),
+			intensity: buttonShadowIntensitySchema.optional()
+		}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("retro-3d-shadow"),
+		options: z$1.strictObject({}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("scale-up"),
+		options: z$1.strictObject({ scale: z$1.enum([
+			"1.02",
+			"1.03",
+			"1.05",
+			"1.10"
+		]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("scale-down"),
+		options: z$1.strictObject({ scale: z$1.enum([
+			"0.90",
+			"0.95",
+			"0.97",
+			"0.98"
+		]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("lift"),
+		options: z$1.strictObject({ amount: z$1.enum([
+			"0.25",
+			"0.5",
+			"1"
+		]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("press-down"),
+		options: z$1.strictObject({}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("pop"),
+		options: z$1.strictObject({ intensity: z$1.enum([
+			"subtle",
+			"medium",
+			"dramatic"
+		]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("border-bottom-grow"),
+		options: z$1.strictObject({
+			height: z$1.union([z$1.literal(1), z$1.literal(2)]).optional(),
+			origin: z$1.enum([
+				"left",
+				"center",
+				"right"
+			]).optional()
+		}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("sketchy-border"),
+		options: z$1.strictObject({ intensity: buttonShadowIntensitySchema.optional() }).optional()
+	})
+]);
 const cornerStyleSchema = z$1.enum([
 	"square",
 	"rounded",
@@ -364,13 +369,7 @@ const hoverTransformSchema = z$1.enum([
 	"scale",
 	"press"
 ]);
-const hoverColorSchema = z$1.enum([
-	"none",
-	"brighten",
-	"darken",
-	"saturate",
-	"token"
-]);
+z$1.enum(["none", "token"]);
 const buttonPaddingPresetSchema = z$1.enum([
 	"compact",
 	"default",
@@ -431,7 +430,7 @@ const buttonSizesSchema = z$1.object({
 	lg,
 	xl: xl ?? lg
 }));
-const canonicalButtonGlobalSettingsSchema = z$1.object({
+const buttonGlobalSettingsBaseSchema = z$1.strictObject({
 	cornerStyle: cornerStyleSchema,
 	cornerRadius: z$1.number().min(0).max(24).optional(),
 	/**
@@ -444,30 +443,23 @@ const canonicalButtonGlobalSettingsSchema = z$1.object({
 	shadow: shadowSizeSchema.optional(),
 	textTransform: textTransformSchema,
 	fontWeight: fontWeightSchema,
-	/**
-	* @deprecated Set per-variant via `variant.border.widthClass` instead.
-	* Schema field is preserved so existing presets parse; the value is unread
-	* by the current generator and will be removed once the legacy
-	* `primitives/content/components/Button.tsx` slot exports are deleted.
-	*/
-	borderWidth: z$1.union([
-		z$1.literal(1),
-		z$1.literal(2),
-		z$1.literal(3)
-	]),
 	typography: buttonTypographySchema.optional(),
 	fontSize: z$1.string().optional(),
 	letterSpacing: letterSpacingSchema.optional(),
 	italic: z$1.boolean().optional(),
 	paddingPreset: buttonPaddingPresetSchema.optional(),
 	hoverTransform: hoverTransformSchema,
-	hoverColor: hoverColorSchema,
-	hoverColorToken: opaqueButtonColourTokenSchema.optional(),
 	gradientStyle: gradientStyleSchema.optional(),
 	gradientAngle: z$1.number().min(0).max(360).optional(),
 	gradientSharpness: gradientSharpnessSchema.optional()
 });
-const buttonGlobalSettingsSchema = z$1.preprocess(normalizeLegacyButtonGlobalInput, canonicalButtonGlobalSettingsSchema);
+const buttonGlobalSettingsSchema = z$1.discriminatedUnion("hoverColor", [buttonGlobalSettingsBaseSchema.extend({
+	hoverColor: z$1.literal("none"),
+	hoverColorToken: z$1.never().optional()
+}), buttonGlobalSettingsBaseSchema.extend({
+	hoverColor: z$1.literal("token"),
+	hoverColorToken: opaqueButtonColourTokenSchema
+})]);
 const gradientDirectionSchema$1 = z$1.enum([
 	"to-r",
 	"to-l",
@@ -479,11 +471,11 @@ const gradientDirectionSchema$1 = z$1.enum([
 	"to-bl"
 ]);
 const buttonColourTreatmentSchema = z$1.discriminatedUnion("type", [
-	z$1.object({
+	z$1.strictObject({
 		type: z$1.literal("solid"),
 		colorToken: opaqueButtonColourTokenSchema
 	}),
-	z$1.object({
+	z$1.strictObject({
 		type: z$1.literal("gradient"),
 		stops: z$1.array(opaqueButtonColourTokenSchema).min(2).transform((stops) => {
 			const [first, second, ...rest] = stops;
@@ -497,19 +489,15 @@ const buttonColourTreatmentSchema = z$1.discriminatedUnion("type", [
 		direction: gradientDirectionSchema$1,
 		foregroundToken: opaqueButtonColourTokenSchema
 	}),
-	z$1.object({
+	z$1.strictObject({
 		type: z$1.literal("surface"),
 		role: z$1.literal("link")
 	})
 ]);
 const buttonBackgroundSchema = buttonColourTreatmentSchema;
-const effectApplicationSchema$1 = z$1.object({
-	effectId: z$1.string(),
-	options: z$1.record(z$1.string(), z$1.json()).optional()
-});
-const buttonBorderSchema = z$1.object({ widthClass: z$1.string() });
-const buttonVariantAffordanceSchema = z$1.object({ iconId: z$1.string().min(1) });
-const variantShadowSchema = z$1.object({
+const buttonBorderSchema = z$1.strictObject({ widthClass: z$1.string() });
+const buttonVariantAffordanceSchema = z$1.strictObject({ iconId: z$1.string().min(1) });
+const variantShadowSchema = z$1.strictObject({
 	elevation: z$1.enum([
 		"none",
 		"low",
@@ -522,13 +510,13 @@ const variantShadowSchema = z$1.object({
 		"hard"
 	]).nullable(),
 	position: z$1.enum(["bottom", "bottom-right"]).default("bottom"),
-	colorToken: themeColorTokenSchema.optional()
+	colorToken: opaqueButtonColourTokenSchema.optional()
 });
-const variantEffectsSchema = z$1.object({
-	base: z$1.array(effectApplicationSchema$1).optional(),
-	hover: z$1.array(effectApplicationSchema$1).optional(),
-	active: z$1.array(effectApplicationSchema$1).optional(),
-	focus: z$1.array(effectApplicationSchema$1).optional()
+const variantEffectsSchema = z$1.strictObject({
+	base: z$1.array(buttonEffectApplicationSchema).optional(),
+	hover: z$1.array(buttonEffectApplicationSchema).optional(),
+	active: z$1.array(buttonEffectApplicationSchema).optional(),
+	focus: z$1.array(buttonEffectApplicationSchema).optional()
 });
 /**
 * Per-variant size overrides schema — every entry is optional.
@@ -549,8 +537,8 @@ const variantSizeOverridesSchema = z$1.object({
 * default (e.g. link-style variants declaring zero horizontal padding at
 * every size).
 */
-const canonicalButtonVariantSchema = z$1.object({
-	id: z$1.string(),
+const buttonVariantSchema = z$1.strictObject({
+	id: buttonVariantIdSchema,
 	name: z$1.string().min(1).max(20),
 	enabled: z$1.boolean(),
 	priority: prioritySchema,
@@ -564,176 +552,25 @@ const canonicalButtonVariantSchema = z$1.object({
 	sizes: variantSizeOverridesSchema.optional(),
 	affordance: buttonVariantAffordanceSchema.optional()
 });
-/**
-* Temporary persisted-theme admission boundary for issue #1206.
-*
-* Production inventory on 2026-07-22 found 22 rows using the old independent
-* `textColorToken`/border colour shape. New source and all downstream code use
-* only the canonical relationship. Delete this preprocessor after the reviewed
-* production rewrite reports zero legacy rows.
-*/
-const buttonVariantSchema = z$1.preprocess(normalizeLegacyButtonVariantInput, canonicalButtonVariantSchema);
-const buttonSystemSchema = z$1.object({
+const buttonSystemSchema = z$1.strictObject({
 	global: buttonGlobalSettingsSchema,
 	variants: z$1.array(buttonVariantSchema).min(1).max(6),
 	sizes: buttonSizesSchema.optional()
-});
-function normalizeLegacyButtonVariantInput(input) {
-	if (!isUnknownRecord(input)) return input;
-	const background = input.background;
-	if (!isUnknownRecord(background)) return input;
-	if (!(background.type === "transparent" || Object.prototype.hasOwnProperty.call(input, "textColorToken") || isUnknownRecord(input.border) && Object.prototype.hasOwnProperty.call(input.border, "colorToken") || hasLegacyButtonEffects(input.effects) || hasLegacyAlphaToken(input, background))) return input;
-	const { textColorToken, ...withoutLegacyText } = input;
-	const normalizedBorder = isUnknownRecord(input.border) && typeof input.border.widthClass === "string" ? { widthClass: input.border.widthClass } : input.border;
-	const normalizedAffordance = isUnknownRecord(input.affordance) && typeof input.affordance.iconId === "string" ? { iconId: input.affordance.iconId } : input.affordance;
-	const normalizedEffects = normalizeLegacyButtonEffects(input.effects, background.type);
-	const hoverBackgroundToken = stripLegacyTokenAlpha(input.hoverBackgroundToken);
-	if (background.type === "transparent") return {
-		...withoutLegacyText,
-		background: {
-			type: "surface",
-			role: "link"
-		},
-		border: normalizedBorder,
-		affordance: normalizedAffordance,
-		effects: normalizedEffects,
-		hoverBackgroundToken
-	};
-	if (background.type === "gradient") {
-		const stops = Array.isArray(background.stops) ? background.stops.map(stripLegacyTokenAlpha) : background.stops;
-		return {
-			...withoutLegacyText,
-			background: {
-				...background,
-				stops,
-				foregroundToken: stripLegacyTokenAlpha(background.foregroundToken ?? textColorToken)
-			},
-			border: normalizedBorder,
-			affordance: normalizedAffordance,
-			effects: normalizedEffects,
-			hoverBackgroundToken
-		};
-	}
-	return {
-		...withoutLegacyText,
-		background: background.type === "solid" ? {
-			...background,
-			colorToken: stripLegacyTokenAlpha(background.colorToken)
-		} : background,
-		border: normalizedBorder,
-		affordance: normalizedAffordance,
-		effects: normalizedEffects,
-		hoverBackgroundToken
-	};
-}
-function normalizeLegacyButtonGlobalInput(input) {
-	if (!isUnknownRecord(input)) return input;
-	const hoverColorToken = stripLegacyTokenAlpha(input.hoverColorToken);
-	return hoverColorToken === input.hoverColorToken ? input : {
-		...input,
-		hoverColorToken
-	};
-}
-function hasLegacyAlphaToken(input, background) {
-	const stops = isUnknownArray(background.stops) ? background.stops : [];
-	return [
-		input.hoverBackgroundToken,
-		background.colorToken,
-		background.foregroundToken,
-		...stops
-	].some((token) => stripLegacyTokenAlpha(token) !== token);
-}
-function stripLegacyTokenAlpha(value) {
-	if (typeof value !== "string") return value;
-	const slashIndex = value.indexOf("/");
-	return slashIndex < 0 ? value : value.slice(0, slashIndex);
-}
-function hasLegacyButtonEffects(input) {
-	if (!isUnknownRecord(input)) return false;
-	return [
-		"base",
-		"hover",
-		"active",
-		"focus"
-	].some((state) => {
-		const effects = input[state];
-		return Array.isArray(effects) && effects.some((effect) => {
-			if (!isUnknownRecord(effect) || typeof effect.effectId !== "string") return true;
-			const classification = classifyButtonEffectId(effect.effectId);
-			if (classification !== "colour-transition" && classification !== "non-colour") return true;
-			return effect.effectId === "background-on-hover" && isUnknownRecord(effect.options) && stripLegacyTokenAlpha(effect.options.colorToken) !== effect.options.colorToken;
+}).superRefine((system, ctx) => {
+	const seen = /* @__PURE__ */ new Set();
+	system.variants.forEach((variant, index) => {
+		if (seen.has(variant.id)) ctx.addIssue({
+			code: "custom",
+			path: [
+				"variants",
+				index,
+				"id"
+			],
+			message: `Duplicate button variant ID: ${variant.id}`
 		});
+		seen.add(variant.id);
 	});
-}
-function normalizeLegacyButtonEffects(input, backgroundType) {
-	if (!isUnknownRecord(input)) return input;
-	const normalized = {};
-	for (const state of [
-		"base",
-		"hover",
-		"active",
-		"focus"
-	]) {
-		const effects = input[state];
-		if (!Array.isArray(effects)) continue;
-		const safeEffects = effects.flatMap((effect) => {
-			if (!isUnknownRecord(effect) || typeof effect.effectId !== "string") return [];
-			const classification = classifyButtonEffectId(effect.effectId);
-			if (classification === "non-colour") return [effect];
-			if (classification !== "colour-transition") return [];
-			if (effect.effectId === "background-on-hover") {
-				const options = isUnknownRecord(effect.options) ? effect.options : null;
-				const colorToken = options === null ? null : parseOpaqueButtonColourToken(stripLegacyTokenAlpha(options.colorToken));
-				return colorToken === null ? [] : [{
-					...effect,
-					options: {
-						...options,
-						colorToken
-					}
-				}];
-			}
-			if (backgroundType !== "solid") return [];
-			const rawAmount = isUnknownRecord(effect.options) ? effect.options.amount : void 0;
-			const amount = typeof rawAmount === "number" && rawAmount > 0 ? Math.max(100, Math.round(rawAmount / 100) * 100) : 100;
-			return [{
-				...effect,
-				options: {
-					...isUnknownRecord(effect.options) ? effect.options : {},
-					amount
-				}
-			}];
-		});
-		if (safeEffects.length > 0) normalized[state] = safeEffects;
-	}
-	return Object.keys(normalized).length === 0 ? void 0 : normalized;
-}
-function isUnknownRecord(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function isUnknownArray(value) {
-	return Array.isArray(value);
-}
-//#endregion
-//#region ../theme-core/src/buttons/constants.ts
-/**
-* Shared constants for button CSS generation
-*
-* These mappings convert Tailwind-style tokens to actual CSS values.
-* Centralized here to eliminate duplication across multiple files.
-*/
-/**
-* Map Tailwind-style gradient direction tokens to CSS gradient directions
-*/
-const GRADIENT_DIRECTION_MAP$1 = {
-	"to-r": "to right",
-	"to-l": "to left",
-	"to-t": "to top",
-	"to-b": "to bottom",
-	"to-br": "to bottom right",
-	"to-bl": "to bottom left",
-	"to-tr": "to top right",
-	"to-tl": "to top left"
-};
+});
 //#endregion
 //#region ../theme-core/src/palette/utils/colorConversion.ts
 function hexToRgb(hex) {
@@ -860,21 +697,163 @@ function requireSurfaceColorValue(role, value) {
 function completeSurfaceForegrounds(input) {
 	const text = requireSurfaceColorValue("text", input.text);
 	return {
-		text,
-		heading: input.heading === void 0 ? text : requireSurfaceColorValue("heading", input.heading),
-		link: input.link === void 0 ? text : requireSurfaceColorValue("link", input.link),
-		supporting: input.supporting === void 0 ? text : requireSurfaceColorValue("supporting", input.supporting)
+		text,
+		heading: input.heading === void 0 ? text : requireSurfaceColorValue("heading", input.heading),
+		link: input.link === void 0 ? text : requireSurfaceColorValue("link", input.link),
+		supporting: input.supporting === void 0 ? text : requireSurfaceColorValue("supporting", input.supporting)
+	};
+}
+function surfaceForegroundValue(role, outsideProviderFallback = DEFAULT_ROLE_FALLBACKS[role]) {
+	const roleVariable = SURFACE_FOREGROUND_CSS_VARS[role];
+	const fallback = requireSurfaceColorValue("fallback", outsideProviderFallback);
+	if (role === "text") return `var(${roleVariable}, ${fallback})`;
+	return `var(${roleVariable}, var(${SURFACE_FOREGROUND_CSS_VARS.text}, ${fallback}))`;
+}
+function surfaceForegroundDeclarations(input) {
+	const foregrounds = completeSurfaceForegrounds(input);
+	return [`color: ${foregrounds.text}`, ...SURFACE_FOREGROUND_ROLES.map((role) => `${SURFACE_FOREGROUND_CSS_VARS[role]}: ${foregrounds[role]}`)];
+}
+//#endregion
+//#region ../theme-core/src/buttons/constants.ts
+/**
+* Shared constants for button CSS generation
+*
+* These mappings convert Tailwind-style tokens to actual CSS values.
+* Centralized here to eliminate duplication across multiple files.
+*/
+/**
+* Map Tailwind-style gradient direction tokens to CSS gradient directions
+*/
+const GRADIENT_DIRECTION_MAP$1 = {
+	"to-r": "to right",
+	"to-l": "to left",
+	"to-t": "to top",
+	"to-b": "to bottom",
+	"to-br": "to bottom right",
+	"to-bl": "to bottom left",
+	"to-tr": "to top right",
+	"to-tl": "to top left"
+};
+//#endregion
+//#region ../theme-core/src/buttons/effectClassification.ts
+/**
+* Exhaustive live policy for every registered effect id.
+*
+* The resolver consumes the transition payload directly, so adding an effect
+* cannot update classification without also defining its runtime behavior.
+*/
+const BUTTON_EFFECT_POLICIES = {
+	"darken-background": {
+		classification: "colour-transition",
+		transition: {
+			kind: "adjust-shade",
+			direction: "darker"
+		}
+	},
+	"lighten-background": {
+		classification: "colour-transition",
+		transition: {
+			kind: "adjust-shade",
+			direction: "lighter"
+		}
+	},
+	"background-on-hover": {
+		classification: "colour-transition",
+		transition: { kind: "replace-background" }
+	},
+	"background-on-hover-alpha": {
+		classification: "unsupported-colour",
+		reason: "alpha_requires_surface"
+	},
+	"fade-background": {
+		classification: "unsupported-colour",
+		reason: "changes_element_opacity"
+	},
+	"opacity-reduce": {
+		classification: "unsupported-colour",
+		reason: "changes_element_opacity"
+	},
+	"gradient-text": {
+		classification: "unsupported-colour",
+		reason: "changes_foreground"
+	},
+	"text-color-change": {
+		classification: "unsupported-colour",
+		reason: "changes_foreground"
+	},
+	"border-color-change": {
+		classification: "unsupported-colour",
+		reason: "changes_border"
+	},
+	"aurora-glow": {
+		classification: "unsupported-background-overlay",
+		reason: "unresolved_background_overlay"
+	},
+	"cosmic-stardust": {
+		classification: "unsupported-background-overlay",
+		reason: "unresolved_background_overlay"
+	},
+	"gradient-border-fill": {
+		classification: "unsupported-background-overlay",
+		reason: "unresolved_background_overlay"
+	},
+	"animated-gradient-border-fill": {
+		classification: "unsupported-background-overlay",
+		reason: "unresolved_background_overlay"
+	},
+	"nav-underline": {
+		classification: "not-button",
+		reason: "not_button_effect"
+	},
+	"nav-frosted-base": {
+		classification: "not-button",
+		reason: "not_button_effect"
+	},
+	"nav-frosted-hover": {
+		classification: "not-button",
+		reason: "not_button_effect"
+	},
+	"nav-frosted-active": {
+		classification: "not-button",
+		reason: "not_button_effect"
+	},
+	"animated-gradient": { classification: "non-colour" },
+	"border-glow": {
+		classification: "unsupported-colour",
+		reason: "changes_shadow_colour"
+	},
+	"drop-shadow": { classification: "decorative-colour" },
+	"inner-shadow": { classification: "decorative-colour" },
+	"neumorphic-shadow": { classification: "decorative-colour" },
+	"outer-glow": {
+		classification: "unsupported-colour",
+		reason: "changes_shadow_colour"
+	},
+	"retro-3d-shadow": { classification: "decorative-colour" },
+	"scale-up": { classification: "non-colour" },
+	"scale-down": { classification: "non-colour" },
+	lift: { classification: "non-colour" },
+	"press-down": { classification: "non-colour" },
+	pop: { classification: "non-colour" },
+	"border-bottom-grow": { classification: "non-colour" },
+	"sketchy-border": { classification: "decorative-colour" },
+	"pulse-animation": {
+		classification: "unsupported-colour",
+		reason: "changes_element_opacity"
+	}
+};
+function validateButtonEffectOptions(effect) {
+	const parsed = buttonEffectApplicationSchema.safeParse(effect);
+	if (parsed.success) return { ok: true };
+	const firstIssue = parsed.error.issues[0];
+	const firstPathPart = firstIssue?.path[firstIssue.path.length - 1];
+	return {
+		ok: false,
+		option: (firstIssue?.code === "unrecognized_keys" ? firstIssue.keys[0] : void 0) ?? (typeof firstPathPart === "string" ? firstPathPart : "options")
 	};
 }
-function surfaceForegroundValue(role, outsideProviderFallback = DEFAULT_ROLE_FALLBACKS[role]) {
-	const roleVariable = SURFACE_FOREGROUND_CSS_VARS[role];
-	const fallback = requireSurfaceColorValue("fallback", outsideProviderFallback);
-	if (role === "text") return `var(${roleVariable}, ${fallback})`;
-	return `var(${roleVariable}, var(${SURFACE_FOREGROUND_CSS_VARS.text}, ${fallback}))`;
-}
-function surfaceForegroundDeclarations(input) {
-	const foregrounds = completeSurfaceForegrounds(input);
-	return [`color: ${foregrounds.text}`, ...SURFACE_FOREGROUND_ROLES.map((role) => `${SURFACE_FOREGROUND_CSS_VARS[role]}: ${foregrounds[role]}`)];
+function getButtonEffectPolicy(effectId) {
+	return Object.prototype.hasOwnProperty.call(BUTTON_EFFECT_POLICIES, effectId) ? BUTTON_EFFECT_POLICIES[effectId] : null;
 }
 //#endregion
 //#region ../theme-core/src/buttons/resolveButtonColourStates.ts
@@ -967,15 +946,17 @@ function applyColourEffects(input) {
 	for (const effect of input.effects ?? []) {
 		const policy = getButtonEffectPolicy(effect.effectId);
 		if (policy === null) return unknownEffect(input, effect);
+		if (policy.classification === "unsupported-colour" || policy.classification === "unsupported-background-overlay" || policy.classification === "not-button") return unsupportedEffect(input, effect, policy.reason);
+		const options = validateButtonEffectOptions(effect);
+		if (!options.ok) return invalidEffectOption(input, effect, options.option);
 		switch (policy.classification) {
 			case "non-colour":
+			case "decorative-colour":
 				nonColourEffects.push(effect);
 				break;
-			case "unsupported-colour":
-			case "unsupported-background-overlay":
-			case "not-button": return unsupportedEffect(input, effect, policy.reason);
 			case "colour-transition":
 				if (policy.transition.kind === "adjust-shade") {
+					if (effect.effectId !== "darken-background" && effect.effectId !== "lighten-background") return unknownEffect(input, effect);
 					if (treatment.type !== "solid") return inapplicableEffect(input, effect, treatment);
 					const amount = readShadeAmount(effect);
 					if (amount === null) return invalidEffectOption(input, effect, "amount");
@@ -987,7 +968,8 @@ function applyColourEffects(input) {
 					break;
 				}
 				if (policy.transition.kind === "replace-background") {
-					const colorToken = readOpaqueToken(effect, "colorToken", "neutral-800");
+					if (effect.effectId !== "background-on-hover") return unknownEffect(input, effect);
+					const colorToken = readOpaqueToken(effect);
 					if (colorToken === null) return invalidEffectOption(input, effect, "colorToken");
 					treatment = {
 						type: "solid",
@@ -1179,8 +1161,8 @@ function readShadeAmount(effect) {
 	const value = effect.options?.amount ?? 100;
 	return typeof value === "number" && Number.isFinite(value) && value >= 0 && value % 100 === 0 ? value : null;
 }
-function readOpaqueToken(effect, key, fallback) {
-	return parseOpaqueButtonColourToken(effect.options?.[key] ?? fallback);
+function readOpaqueToken(effect) {
+	return parseOpaqueButtonColourToken(effect.options?.colorToken ?? "neutral-800");
 }
 function unsupportedEffect(input, effect, reason) {
 	return {
@@ -1436,7 +1418,6 @@ const quietArrowRecipe = defineButtonStyleRecipe({
 			cornerStyle: "rounded",
 			textTransform: "uppercase",
 			fontWeight: 500,
-			borderWidth: 1,
 			typography: "body",
 			fontSize: "text-sm",
 			letterSpacing: "loose",
@@ -1500,7 +1481,7 @@ const quietArrowRecipe = defineButtonStyleRecipe({
 					affordance: { iconId: "ArrowRight" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surfaceAlt" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surfaceAlt") }
 					}] }
 				}
 			},
@@ -1611,7 +1592,6 @@ const softPillRecipe = defineStaticButtonStyleRecipe({
 			shadow: "low",
 			textTransform: "none",
 			fontWeight: 500,
-			borderWidth: 2,
 			hoverTransform: "lift",
 			hoverColor: "none"
 		},
@@ -1630,10 +1610,7 @@ const softPillRecipe = defineStaticButtonStyleRecipe({
 						position: "bottom"
 					},
 					effects: {
-						hover: [{
-							effectId: "lift",
-							options: { translateY: "-1px" }
-						}],
+						hover: [{ effectId: "lift" }],
 						active: [{
 							effectId: "scale-down",
 							options: { scale: "0.98" }
@@ -1652,7 +1629,7 @@ const softPillRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border-2" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -1667,7 +1644,7 @@ const softPillRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -1681,7 +1658,7 @@ const softPillRecipe = defineStaticButtonStyleRecipe({
 					borderRadius: "rounded-full",
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -1711,7 +1688,6 @@ const earthPillRecipe = defineStaticButtonStyleRecipe({
 			shadow: "low",
 			textTransform: "none",
 			fontWeight: 500,
-			borderWidth: 1,
 			hoverTransform: "lift",
 			hoverColor: "none",
 			typography: "body",
@@ -1747,12 +1723,9 @@ const earthPillRecipe = defineStaticButtonStyleRecipe({
 						position: "bottom"
 					},
 					effects: {
-						hover: [{
-							effectId: "lift",
-							options: { translateY: "-1px" }
-						}, {
+						hover: [{ effectId: "lift" }, {
 							effectId: "background-on-hover",
-							options: { colorToken: "accent" }
+							options: { colorToken: unsafeAsOpaqueButtonColourToken("accent") }
 						}],
 						active: [{
 							effectId: "scale-down",
@@ -1772,7 +1745,7 @@ const earthPillRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "muted" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("muted") }
 					}] }
 				}
 			},
@@ -1787,7 +1760,7 @@ const earthPillRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surfaceAlt" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surfaceAlt") }
 					}] }
 				}
 			},
@@ -1847,7 +1820,6 @@ const confidentChipRecipe = defineStaticButtonStyleRecipe({
 			shadow: "medium",
 			textTransform: "none",
 			fontWeight: 600,
-			borderWidth: 1,
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
@@ -1888,7 +1860,7 @@ const confidentChipRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "background" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("background") }
 					}] }
 				}
 			},
@@ -1903,7 +1875,7 @@ const confidentChipRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -1917,7 +1889,7 @@ const confidentChipRecipe = defineStaticButtonStyleRecipe({
 					borderRadius: "rounded-md",
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -1952,7 +1924,6 @@ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
 			cornerStyle: "square",
 			textTransform: "none",
 			fontWeight: 500,
-			borderWidth: 1,
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
@@ -1970,7 +1941,6 @@ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
 						effectId: "border-bottom-grow",
 						options: {
 							height: 2,
-							colorToken: "text",
 							origin: "left"
 						}
 					}] }
@@ -1989,7 +1959,6 @@ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
 						effectId: "border-bottom-grow",
 						options: {
 							height: 1,
-							colorToken: "mutedText",
 							origin: "left"
 						}
 					}] }
@@ -2008,7 +1977,6 @@ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
 						effectId: "border-bottom-grow",
 						options: {
 							height: 1,
-							colorToken: "accent",
 							origin: "left"
 						}
 					}] }
@@ -2032,7 +2000,6 @@ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
 					effectId: "border-bottom-grow",
 					options: {
 						height: 2,
-						colorToken: "accent",
 						origin: "left"
 					}
 				}] } }
@@ -2054,7 +2021,6 @@ const pebbleRecipe = defineStaticButtonStyleRecipe({
 			cornerStyle: "pill",
 			textTransform: "none",
 			fontWeight: 500,
-			borderWidth: 2,
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
@@ -2099,7 +2065,7 @@ const pebbleRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border-2" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "accent" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("accent") }
 					}] }
 				}
 			},
@@ -2114,7 +2080,7 @@ const pebbleRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -2169,7 +2135,6 @@ const brushedWashRecipe = defineStaticButtonStyleRecipe({
 			shadow: "low",
 			textTransform: "none",
 			fontWeight: 500,
-			borderWidth: 1,
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
@@ -2234,7 +2199,7 @@ const brushedWashRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -2248,7 +2213,7 @@ const brushedWashRecipe = defineStaticButtonStyleRecipe({
 					borderRadius: "rounded-lg",
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -2277,7 +2242,6 @@ const inkStampRecipe = defineStaticButtonStyleRecipe({
 			cornerStyle: "rounded",
 			textTransform: "uppercase",
 			fontWeight: 600,
-			borderWidth: 1,
 			hoverTransform: "none",
 			hoverColor: "none",
 			letterSpacing: "loose"
@@ -2335,7 +2299,7 @@ const inkStampRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border-2" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -2350,7 +2314,7 @@ const inkStampRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border-2" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -2384,7 +2348,6 @@ const inkStampRecipe = defineStaticButtonStyleRecipe({
 						effectId: "border-bottom-grow",
 						options: {
 							height: 1,
-							colorToken: "accent",
 							origin: "left"
 						}
 					}] }
@@ -2415,7 +2378,6 @@ const flatInkRecipe = defineStaticButtonStyleRecipe({
 			cornerStyle: "rounded",
 			textTransform: "none",
 			fontWeight: 600,
-			borderWidth: 1,
 			typography: "body",
 			letterSpacing: "tight",
 			paddingPreset: "default",
@@ -2447,12 +2409,9 @@ const flatInkRecipe = defineStaticButtonStyleRecipe({
 					},
 					borderRadius: "rounded-lg",
 					affordance: { iconId: "ArrowRight" },
-					effects: { hover: [{
-						effectId: "lift",
-						options: { translateY: "-2px" }
-					}, {
+					effects: { hover: [{ effectId: "lift" }, {
 						effectId: "background-on-hover",
-						options: { colorToken: "secondary" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("secondary") }
 					}] }
 				}
 			},
@@ -2465,12 +2424,9 @@ const flatInkRecipe = defineStaticButtonStyleRecipe({
 					},
 					borderRadius: "rounded-lg",
 					border: { widthClass: "border" },
-					effects: { hover: [{
-						effectId: "lift",
-						options: { translateY: "-2px" }
-					}, {
+					effects: { hover: [{ effectId: "lift" }, {
 						effectId: "background-on-hover",
-						options: { colorToken: "surfaceAlt" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surfaceAlt") }
 					}] }
 				}
 			},
@@ -2483,12 +2439,9 @@ const flatInkRecipe = defineStaticButtonStyleRecipe({
 					},
 					borderRadius: "rounded-lg",
 					border: { widthClass: "border" },
-					effects: { hover: [{
-						effectId: "lift",
-						options: { translateY: "-2px" }
-					}, {
+					effects: { hover: [{ effectId: "lift" }, {
 						effectId: "background-on-hover",
-						options: { colorToken: "surfaceAlt" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surfaceAlt") }
 					}] }
 				}
 			},
@@ -2500,10 +2453,7 @@ const flatInkRecipe = defineStaticButtonStyleRecipe({
 						role: "link"
 					},
 					borderRadius: "rounded-lg",
-					effects: { hover: [{
-						effectId: "lift",
-						options: { translateY: "-2px" }
-					}] }
+					effects: { hover: [{ effectId: "lift" }] }
 				}
 			},
 			accent: {
@@ -2515,10 +2465,7 @@ const flatInkRecipe = defineStaticButtonStyleRecipe({
 					},
 					borderRadius: "rounded-lg",
 					affordance: { iconId: "ArrowRight" },
-					effects: { hover: [{
-						effectId: "lift",
-						options: { translateY: "-2px" }
-					}] }
+					effects: { hover: [{ effectId: "lift" }] }
 				}
 			}
 		}
@@ -2539,9 +2486,8 @@ const showtimePillRecipe = defineStaticButtonStyleRecipe({
 			shadow: "low",
 			textTransform: "uppercase",
 			fontWeight: 700,
-			borderWidth: 2,
 			hoverTransform: "lift",
-			hoverColor: "darken",
+			hoverColor: "none",
 			typography: "body",
 			paddingPreset: "spacious",
 			italic: false
@@ -2599,7 +2545,7 @@ const showtimePillRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border-2" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "background" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("background") }
 					}] }
 				}
 			},
@@ -2613,7 +2559,7 @@ const showtimePillRecipe = defineStaticButtonStyleRecipe({
 					borderRadius: "rounded-full",
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -2648,7 +2594,6 @@ const joyStampRecipe = defineStaticButtonStyleRecipe({
 			typography: "heading",
 			fontWeight: 700,
 			fontSize: "text-lg",
-			borderWidth: 2,
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
@@ -2683,7 +2628,7 @@ const joyStampRecipe = defineStaticButtonStyleRecipe({
 						elevation: "high",
 						softness: "hard",
 						position: "bottom-right",
-						colorToken: "text"
+						colorToken: unsafeAsOpaqueButtonColourToken("text")
 					},
 					effects: { hover: [{ effectId: "press-down" }] }
 				}
@@ -2701,7 +2646,7 @@ const joyStampRecipe = defineStaticButtonStyleRecipe({
 						elevation: "high",
 						softness: "hard",
 						position: "bottom-right",
-						colorToken: "secondary"
+						colorToken: unsafeAsOpaqueButtonColourToken("secondary")
 					},
 					effects: { hover: [{ effectId: "press-down" }] }
 				}
@@ -2746,7 +2691,6 @@ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
 			cornerStyle: "rounded",
 			textTransform: "uppercase",
 			fontWeight: 600,
-			borderWidth: 1,
 			hoverTransform: "none",
 			hoverColor: "none",
 			letterSpacing: "loose"
@@ -2782,7 +2726,7 @@ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
 					effects: {
 						hover: [{
 							effectId: "background-on-hover",
-							options: { colorToken: "primary-100" }
+							options: { colorToken: unsafeAsOpaqueButtonColourToken("primary-100") }
 						}],
 						active: [{
 							effectId: "scale-down",
@@ -2802,7 +2746,7 @@ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -2817,7 +2761,7 @@ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "muted" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("muted") }
 					}] }
 				}
 			},
@@ -2851,7 +2795,6 @@ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
 						effectId: "border-bottom-grow",
 						options: {
 							height: 1,
-							colorToken: "accent",
 							origin: "left"
 						}
 					}] }
@@ -2939,118 +2882,6 @@ function presetCategory(recipe) {
 	}
 }
 //#endregion
-//#region ../theme-core/src/buttons/core.ts
-const CORNER_RADIUS_MAP$2 = {
-	square: "0",
-	soft: "0.375rem",
-	rounded: "0.5rem",
-	pill: "9999px"
-};
-const BORDER_WIDTH_MAP$2 = {
-	none: "0",
-	thin: "1px",
-	medium: "2px",
-	thick: "4px"
-};
-const SHADOW_VALUES$2 = {
-	none: "none",
-	low: "0 1px 2px rgba(0,0,0,0.06)",
-	medium: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
-	high: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)"
-};
-const RESOLVER_GLOBAL = {
-	cornerStyle: "rounded",
-	textTransform: "none",
-	fontWeight: 500,
-	borderWidth: 1,
-	hoverTransform: "none",
-	hoverColor: "none"
-};
-function generateButtonCoreCss(scopeId, variants, settings, palette) {
-	return variants.map((variant) => generateVariantCss$1(scopeId, variant, settings, palette)).join("\n\n");
-}
-function generateVariantCss$1(scopeId, variant, settings, palette) {
-	const borderWidth = BORDER_WIDTH_MAP$2[variant.borderWidth ?? "none"];
-	const result = compileButtonColourStates({
-		variant: {
-			id: variant.id,
-			name: variant.id,
-			enabled: true,
-			priority: 1,
-			background: variant.treatment,
-			...borderWidth === "0" ? {} : { border: { widthClass: borderWidth } }
-		},
-		global: RESOLVER_GLOBAL,
-		palette
-	});
-	if (!result.ok) throw new Error(`[ThemeBridge] ${formatButtonColourContractError(result.error)}`);
-	const selector = `:where([data-theme-scope="${scopeId}"]) .button-${variant.id}`;
-	return [
-		rule(selector, [
-			...borderWidth === "0" ? ["padding: 0.5rem 1rem;"] : [
-				`padding-top: calc(0.5rem - ${borderWidth});`,
-				`padding-bottom: calc(0.5rem - ${borderWidth});`,
-				`padding-left: calc(1rem - ${borderWidth});`,
-				`padding-right: calc(1rem - ${borderWidth});`
-			],
-			`font-weight: ${settings.fontWeight ?? 500};`,
-			...settings.textTransform && settings.textTransform !== "none" ? [`text-transform: ${settings.textTransform};`] : [],
-			"cursor: pointer;",
-			"transition: all 200ms ease-in-out;",
-			"display: inline-flex;",
-			"align-items: center;",
-			"justify-content: center;",
-			`border-radius: ${CORNER_RADIUS_MAP$2[settings.corners]};`,
-			`box-shadow: ${SHADOW_VALUES$2[settings.shadow]};`,
-			...declarationStrings(resolvedButtonColourDeclarations(result.states.base)),
-			borderWidth === "0" ? "border: none;" : `border: ${borderWidth} solid currentColor;`
-		]),
-		rule(`${selector}:hover`, declarationStrings(resolvedButtonColourDeclarations(result.states.hover))),
-		rule(`${selector}:active`, [...declarationStrings(resolvedButtonColourDeclarations(result.states.active)), "transform: scale(0.98);"]),
-		rule(`${selector}:focus-visible`, declarationStrings(resolvedButtonFocusDeclarations(result.focusIndicator))),
-		rule(`${selector}:disabled,\n${selector}:disabled:hover,\n${selector}:disabled:active`, [...declarationStrings(resolvedButtonColourDeclarations(result.states.disabled)), ...declarationStrings(RESOLVED_BUTTON_DISABLED_DECLARATIONS)])
-	].join("\n\n");
-}
-function declarationStrings(declarations) {
-	return declarations.map(([property, value]) => `${property}: ${value};`);
-}
-function rule(selector, declarations) {
-	return `${selector} {\n  ${declarations.join("\n  ")}\n}`;
-}
-function getDefaultButtonVariants() {
-	return [
-		{
-			id: "primary",
-			treatment: {
-				type: "solid",
-				colorToken: unsafeAsOpaqueButtonColourToken("primary")
-			}
-		},
-		{
-			id: "secondary",
-			treatment: {
-				type: "solid",
-				colorToken: unsafeAsOpaqueButtonColourToken("secondary")
-			}
-		},
-		{
-			id: "outline",
-			treatment: {
-				type: "surface",
-				role: "link"
-			},
-			borderWidth: "thin"
-		},
-		{
-			id: "ghost",
-			treatment: {
-				type: "surface",
-				role: "link"
-			}
-		}
-	];
-}
-//#endregion
 //#region ../theme-core/src/cards/types.ts
 const cardVariantRoleValues = ["default", "alternative"];
 const boxlessCardVariantValue = "none";
@@ -3169,13 +3000,13 @@ const cardSystemSchema = z$1.object({ variants: z$1.array(cardVariantSchema).min
 * Pure functions for generating card CSS without requiring the full Theme type.
 * Used by both the full CMS theme system and the SDK theme bridge.
 */
-const CORNER_RADIUS_MAP$1 = {
+const CORNER_RADIUS_MAP$2 = {
 	square: "0",
 	soft: "0.5rem",
 	rounded: "1rem",
 	pill: "1.5rem"
 };
-const BORDER_WIDTH_MAP$1 = {
+const BORDER_WIDTH_MAP$2 = {
 	none: "0",
 	thin: "1px",
 	medium: "2px",
@@ -3205,7 +3036,7 @@ const ACCENT_EDGE_SIDE_MAP = {
 * unspecified corner from the global corners setting.
 */
 function resolveCornerRadiiCss(cornerRadii, fallback) {
-	const fallbackValue = CORNER_RADIUS_MAP$1[fallback];
+	const fallbackValue = CORNER_RADIUS_MAP$2[fallback];
 	const at = (value) => value ? PER_CORNER_RADIUS_MAP[value] : fallbackValue;
 	return `${at(cornerRadii.topLeft)} ${at(cornerRadii.topRight)} ${at(cornerRadii.bottomRight)} ${at(cornerRadii.bottomLeft)}`;
 }
@@ -3219,7 +3050,7 @@ const GRADIENT_DIRECTION_MAP = {
 	"to-br": "to bottom right",
 	"to-bl": "to bottom left"
 };
-const SHADOW_VALUES$1 = {
+const SHADOW_VALUES$2 = {
 	none: "none",
 	low: "0 1px 2px rgba(0,0,0,0.06)",
 	medium: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
@@ -3247,7 +3078,7 @@ const SPACING_MAP = {
 function generateCardCoreCss(scopeId, variants, settings) {
 	const cssChunks = [];
 	for (const variant of variants) {
-		const css = generateVariantCss(scopeId, variant, settings);
+		const css = generateVariantCss$1(scopeId, variant, settings);
 		cssChunks.push(css);
 	}
 	return cssChunks.join("\n\n");
@@ -3257,7 +3088,7 @@ function generateCardCoreCss(scopeId, variants, settings) {
 *
 * Selectors use :where() for zero specificity, allowing site styles to override easily.
 */
-function generateVariantCss(scopeId, variant, settings) {
+function generateVariantCss$1(scopeId, variant, settings) {
 	const containerSelector = `:where([data-theme-scope="${scopeId}"]) .card-${variant.id}`;
 	const mediaSelector = `${containerSelector} .card-media`;
 	const contentSelector = `${containerSelector} .card-content`;
@@ -3283,16 +3114,16 @@ function generateVariantCss(scopeId, variant, settings) {
 		containerRules.push("border: 0");
 		containerRules.push(`${side}: ${width} solid rgb(var(--tb-${variant.accentEdge.colorToken}))`);
 	} else {
-		const borderWidth = variant.borderWidth ? BORDER_WIDTH_MAP$1[variant.borderWidth] : variant.borderToken ? BORDER_WIDTH_MAP$1[settings.borderWidth] : "0";
+		const borderWidth = variant.borderWidth ? BORDER_WIDTH_MAP$2[variant.borderWidth] : variant.borderToken ? BORDER_WIDTH_MAP$2[settings.borderWidth] : "0";
 		if (variant.borderToken && borderWidth !== "0") containerRules.push(`border: ${borderWidth} solid rgb(var(--tb-${variant.borderToken}))`);
 	}
-	containerRules.push(`border-radius: ${variant.cornerRadii ? resolveCornerRadiiCss(variant.cornerRadii, settings.corners) : CORNER_RADIUS_MAP$1[settings.corners]}`);
-	if (settings.shadow !== "none") containerRules.push(`box-shadow: ${SHADOW_VALUES$1[settings.shadow]}`);
+	containerRules.push(`border-radius: ${variant.cornerRadii ? resolveCornerRadiiCss(variant.cornerRadii, settings.corners) : CORNER_RADIUS_MAP$2[settings.corners]}`);
+	if (settings.shadow !== "none") containerRules.push(`box-shadow: ${SHADOW_VALUES$2[settings.shadow]}`);
 	containerRules.push("display: flex");
 	containerRules.push("flex-direction: column");
 	containerRules.push("position: relative");
 	containerRules.push("overflow: visible");
-	const mediaRadius = CORNER_RADIUS_MAP$1[settings.corners];
+	const mediaRadius = CORNER_RADIUS_MAP$2[settings.corners];
 	const mediaRules = [`border-top-left-radius: ${mediaRadius}`, `border-top-right-radius: ${mediaRadius}`];
 	const contentRules = [`padding: ${SPACING_MAP[variant.spacing]}`];
 	return [
@@ -24814,6 +24645,123 @@ function ThemeScopeCore({ cssVars, buttonCss, headerCss, footerCss, cardCss, acc
 	});
 }
 //#endregion
+//#region ../theme-core/src/buttons/core.ts
+const CORNER_RADIUS_MAP$1 = {
+	square: "0",
+	soft: "0.375rem",
+	rounded: "0.5rem",
+	pill: "9999px"
+};
+const BORDER_WIDTH_MAP$1 = {
+	none: "0",
+	thin: "1px",
+	medium: "2px",
+	thick: "4px"
+};
+const SHADOW_VALUES$1 = {
+	none: "none",
+	low: "0 1px 2px rgba(0,0,0,0.06)",
+	medium: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
+	high: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)"
+};
+const RESOLVER_GLOBAL = {
+	cornerStyle: "rounded",
+	textTransform: "none",
+	fontWeight: 500,
+	hoverTransform: "none",
+	hoverColor: "none"
+};
+function generateButtonCoreCss(scopeId, variants, settings, palette) {
+	const seenIds = /* @__PURE__ */ new Set();
+	for (const variant of variants) {
+		if (!buttonVariantIdSchema.safeParse(variant.id).success) throw new Error(`[ThemeBridge] Invalid button variant ID: ${variant.id}`);
+		if (seenIds.has(variant.id)) throw new Error(`[ThemeBridge] Duplicate button variant ID: ${variant.id}`);
+		seenIds.add(variant.id);
+	}
+	return variants.map((variant) => generateVariantCss(scopeId, variant, settings, palette)).join("\n\n");
+}
+function generateVariantCss(scopeId, variant, settings, palette) {
+	const borderWidth = BORDER_WIDTH_MAP$1[variant.borderWidth ?? "none"];
+	const result = compileButtonColourStates({
+		variant: {
+			id: variant.id,
+			name: variant.id,
+			enabled: true,
+			priority: 1,
+			background: variant.treatment,
+			...borderWidth === "0" ? {} : { border: { widthClass: borderWidth } }
+		},
+		global: RESOLVER_GLOBAL,
+		palette
+	});
+	if (!result.ok) throw new Error(`[ThemeBridge] ${formatButtonColourContractError(result.error)}`);
+	const selector = `:where([data-theme-scope="${scopeId}"]) .button-${variant.id}`;
+	return [
+		rule(selector, [
+			...borderWidth === "0" ? ["padding: 0.5rem 1rem;"] : [
+				`padding-top: calc(0.5rem - ${borderWidth});`,
+				`padding-bottom: calc(0.5rem - ${borderWidth});`,
+				`padding-left: calc(1rem - ${borderWidth});`,
+				`padding-right: calc(1rem - ${borderWidth});`
+			],
+			`font-weight: ${settings.fontWeight ?? 500};`,
+			...settings.textTransform && settings.textTransform !== "none" ? [`text-transform: ${settings.textTransform};`] : [],
+			"cursor: pointer;",
+			"transition: all 200ms ease-in-out;",
+			"display: inline-flex;",
+			"align-items: center;",
+			"justify-content: center;",
+			`border-radius: ${CORNER_RADIUS_MAP$1[settings.corners]};`,
+			`box-shadow: ${SHADOW_VALUES$1[settings.shadow]};`,
+			...declarationStrings(resolvedButtonColourDeclarations(result.states.base)),
+			borderWidth === "0" ? "border: none;" : `border: ${borderWidth} solid currentColor;`
+		]),
+		rule(`${selector}:hover`, declarationStrings(resolvedButtonColourDeclarations(result.states.hover))),
+		rule(`${selector}:active`, [...declarationStrings(resolvedButtonColourDeclarations(result.states.active)), "transform: scale(0.98);"]),
+		rule(`${selector}:focus-visible`, declarationStrings(resolvedButtonFocusDeclarations(result.focusIndicator))),
+		rule(`${selector}:disabled,\n${selector}:disabled:hover,\n${selector}:disabled:active`, [...declarationStrings(resolvedButtonColourDeclarations(result.states.disabled)), ...declarationStrings(RESOLVED_BUTTON_DISABLED_DECLARATIONS)])
+	].join("\n\n");
+}
+function declarationStrings(declarations) {
+	return declarations.map(([property, value]) => `${property}: ${value};`);
+}
+function rule(selector, declarations) {
+	return `${selector} {\n  ${declarations.join("\n  ")}\n}`;
+}
+function getDefaultButtonVariants() {
+	return [
+		{
+			id: "primary",
+			treatment: {
+				type: "solid",
+				colorToken: unsafeAsOpaqueButtonColourToken("primary")
+			}
+		},
+		{
+			id: "secondary",
+			treatment: {
+				type: "solid",
+				colorToken: unsafeAsOpaqueButtonColourToken("secondary")
+			}
+		},
+		{
+			id: "outline",
+			treatment: {
+				type: "surface",
+				role: "link"
+			},
+			borderWidth: "thin"
+		},
+		{
+			id: "ghost",
+			treatment: {
+				type: "surface",
+				role: "link"
+			}
+		}
+	];
+}
+//#endregion
 //#region ../theme-core/src/inputs/core.ts
 const CORNER_RADIUS_MAP = {
 	square: "0",
@@ -25420,7 +25368,6 @@ function generateButtonsCss(config, corners, shadows) {
 	const settings = {
 		corners,
 		shadow: shadows,
-		borderWidth: "thin",
 		fontWeight: 500,
 		textTransform: "none"
 	};