@riverbankcms/sdk 0.125.0 → 0.127.0

package/dist/server/theme-bridge.mjs

@@ -195,6 +195,177 @@ function parseThemeColorToken(value) {
 }
 const themeColorTokenSchema = z$1.string().min(1).refine((value) => Boolean(isThemeColorToken(value)), "Expected a known Theme V2 color token");
 //#endregion
+//#region ../theme-core/src/palette/colors.ts
+const HEX_COLOR_REGEX = /^#[0-9a-f]{6}$/;
+const NORMALIZABLE_HEX_REGEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+const THEME_PALETTE_COLOR_ORDER = [
+	"primary",
+	"secondary",
+	"accent",
+	"success",
+	"warning",
+	"destructive",
+	"background",
+	"surface",
+	"surfaceAlt",
+	"muted",
+	"text",
+	"primaryForeground",
+	"border"
+];
+const hexColorSchema = z$1.string().regex(HEX_COLOR_REGEX, "Hex must be #RRGGBB (lowercase)").transform((value) => value);
+const paletteModeSchema = z$1.enum(["light", "dark"]);
+const PALETTE_VALUE_KEY_PREFIX = "palette-value:v1|";
+z$1.string().regex(/^[0-9a-f]{64}$/, "Palette hash must be a lowercase SHA-256 value").transform((value) => value);
+const paletteColorsSchema = z$1.object({
+	primary: hexColorSchema,
+	primaryForeground: hexColorSchema,
+	secondary: hexColorSchema,
+	accent: hexColorSchema,
+	success: hexColorSchema,
+	warning: hexColorSchema,
+	destructive: hexColorSchema,
+	background: hexColorSchema,
+	surface: hexColorSchema,
+	surfaceAlt: hexColorSchema,
+	muted: hexColorSchema,
+	text: hexColorSchema,
+	border: hexColorSchema
+}).strict().transform((value) => value);
+function normalizePaletteHex(value) {
+	if (!NORMALIZABLE_HEX_REGEX.test(value)) return null;
+	const normalized = value.toLowerCase();
+	if (normalized.length === 7) return normalized;
+	const triplet = normalized.slice(1);
+	const red = triplet.charAt(0);
+	const green = triplet.charAt(1);
+	const blue = triplet.charAt(2);
+	return `#${red}${red}${green}${green}${blue}${blue}`;
+}
+function paletteColorsFromEntries(entries) {
+	const values = {};
+	for (const entry of entries) {
+		const parsedRole = paletteTokenNameSchema.safeParse(entry.name);
+		if (!parsedRole.success) return {
+			ok: false,
+			error: {
+				kind: "unknown-role",
+				role: entry.name
+			}
+		};
+		const role = parsedRole.data;
+		if (values[role] !== void 0) return {
+			ok: false,
+			error: {
+				kind: "duplicate-role",
+				role
+			}
+		};
+		const hex = normalizePaletteHex(entry.hex);
+		if (!hex) return {
+			ok: false,
+			error: {
+				kind: "invalid-color",
+				role,
+				value: entry.hex
+			}
+		};
+		values[role] = hex;
+	}
+	const missing = PALETTE_TOKEN_NAMES.filter((role) => values[role] === void 0);
+	if (missing.length > 0) return {
+		ok: false,
+		error: {
+			kind: "missing-roles",
+			roles: missing
+		}
+	};
+	return {
+		ok: true,
+		colors: paletteColorsSchema.parse(values)
+	};
+}
+function requirePaletteColorsFromEntries(entries) {
+	const result = paletteColorsFromEntries(entries);
+	if (result.ok) return result.colors;
+	throw new Error(`Invalid complete palette: ${result.error.kind}`);
+}
+function paletteColorEntries(colors) {
+	return THEME_PALETTE_COLOR_ORDER.map((name) => ({
+		name,
+		hex: colors[name]
+	}));
+}
+function paletteColorFingerprint(colors) {
+	return PALETTE_TOKEN_NAMES.map((name) => `${name}:${colors[name]}`).join("|");
+}
+function canonicalPaletteHashInput(colors, mode) {
+	return `${mode}|${paletteColorFingerprint(colors)}`;
+}
+/**
+* Stable curated-catalogue identity. Do not reorder roles: the order comes
+* from PALETTE_TOKEN_NAMES through canonicalPaletteHashInput.
+*/
+function paletteValueKey(colors, mode) {
+	return `${PALETTE_VALUE_KEY_PREFIX}${canonicalPaletteHashInput(colors, mode)}`;
+}
+/** Parses only the exact v1 canonical form emitted by paletteValueKey. */
+function parsePaletteValueKey(value) {
+	if (typeof value !== "string" || !value.startsWith(PALETTE_VALUE_KEY_PREFIX)) return null;
+	const [rawMode, ...rawRoles] = value.slice(17).split("|");
+	const mode = paletteModeSchema.safeParse(rawMode);
+	if (!mode.success || rawRoles.length !== PALETTE_TOKEN_NAMES.length) return null;
+	const colors = paletteColorsFromEntries(rawRoles.map((roleValue) => {
+		const separator = roleValue.indexOf(":");
+		return separator === -1 ? {
+			name: "",
+			hex: ""
+		} : {
+			name: roleValue.slice(0, separator),
+			hex: roleValue.slice(separator + 1)
+		};
+	}));
+	if (!colors.ok || paletteValueKey(colors.colors, mode.data) !== value) return null;
+	return value;
+}
+const paletteValueKeySchema = z$1.string().transform((value, ctx) => {
+	const parsed = parsePaletteValueKey(value);
+	if (parsed) return parsed;
+	ctx.addIssue({
+		code: "custom",
+		message: "Invalid canonical palette value key"
+	});
+	return z$1.NEVER;
+});
+//#endregion
+//#region ../theme-core/src/palette/schema.ts
+const colourHexString = z$1.string().regex(/^#([0-9A-Fa-f]{3}){1,2}$/);
+const paletteColorSchema = z$1.object({
+	name: z$1.string().min(1),
+	hex: colourHexString
+});
+const paletteMetaSchema = z$1.object({ mode: z$1.enum(["light", "dark"]) });
+const paletteSchema = z$1.object({
+	colors: z$1.array(paletteColorSchema),
+	meta: paletteMetaSchema
+}).transform((palette, ctx) => {
+	const colors = paletteColorsFromEntries(palette.colors);
+	if (!colors.ok) {
+		ctx.addIssue({
+			code: "custom",
+			message: `Invalid complete palette: ${colors.error.kind}`
+		});
+		return z$1.NEVER;
+	}
+	return {
+		colors: paletteColorEntries(colors.colors).map(({ name, hex }) => ({
+			name: String(name),
+			hex: String(hex)
+		})),
+		meta: palette.meta
+	};
+});
+//#endregion
 //#region ../theme-core/src/buttons/types.ts
 /**
 * Standard semantic variant roles a theme exposes.
@@ -207,8 +378,6 @@ const VARIANT_ROLES = [
 	"secondary",
 	"outline",
 	"ghost",
-	"link",
-	"tertiary",
 	"accent"
 ];
 /**
@@ -217,7 +386,7 @@ const VARIANT_ROLES = [
 * 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");
+const buttonVariantIdSchema = z$1.string().min(1).max(50).regex(/^[a-z0-9-]+$/, "Button variant IDs may contain lowercase letters, numbers, and hyphens only").refine((value) => value !== "link" && value !== "tertiary", { message: "Retired button role IDs are not valid variant IDs" });
 function parseOpaqueButtonColourToken(value) {
 	const token = parseThemeColorToken(value);
 	if (token === null) return null;
@@ -1217,6 +1386,59 @@ function interpolateHex(startHex, endHex, position) {
 	const channel = (from, to) => Math.round(from + (to - from) * position).toString(16).padStart(2, "0");
 	return `#${channel(start.r, end.r)}${channel(start.g, end.g)}${channel(start.b, end.b)}`;
 }
+shadeBackgroundEffect({
+	id: "darken-background",
+	name: "Darken on Hover",
+	description: "Darkens the background color on hover",
+	label: "Darken Amount (shade step)",
+	shadeDirection: 1
+});
+shadeBackgroundEffect({
+	id: "lighten-background",
+	name: "Lighten on Hover",
+	description: "Lightens the background color on hover",
+	label: "Lighten Amount (shade step)",
+	shadeDirection: -1
+});
+function shadeBackgroundEffect(config) {
+	return {
+		id: config.id,
+		name: config.name,
+		description: config.description,
+		category: "background",
+		pseudoElement: "none",
+		applicableTo: ["button"],
+		customizableOption: {
+			name: "amount",
+			type: "select",
+			label: config.label,
+			default: 100,
+			options: [
+				0,
+				100,
+				200,
+				300,
+				400,
+				500,
+				600,
+				700,
+				800,
+				900
+			]
+		},
+		isApplicable: (buttonConfig) => buttonConfig.background.type === "solid",
+		generateCSS: ({ themeId, variantId, options, tokens, buttonConfig }) => {
+			if (buttonConfig.background.type !== "solid") return "";
+			const amount = (options.amount || 100) * config.shadeDirection;
+			const baseToken = buttonConfig.background.colorToken ?? "primary-500";
+			return `
+      :where([data-theme-scope="${themeId}"]) .${variantId}:hover {
+        background-color: ${tokens.getColor(tokens.adjustShade(baseToken, amount))};
+      }
+    `;
+		}
+	};
+}
 //#endregion
 //#region ../theme-core/src/buttons/resolvedButtonCss.ts
 /**
@@ -4086,6 +4308,60 @@ function cssVarValue(token) {
 * palette context and happens in `parseThemeColorReference`.
 */
 const tokenOrCssColorValueSchema = z$1.string();
+const BREAKPOINT_LG = 1024;
+const BREAKPOINT_XL = 1280;
+const BREAKPOINT_LG_DOWN = BREAKPOINT_LG - 1;
+function mqUp(px) {
+	return `(min-width: ${px}px)`;
+}
+function mqDown(px) {
+	return `(max-width: ${px}px)`;
+}
+function mqBetween(minPx, maxPx) {
+	return `${mqUp(minPx)} and ${mqDown(maxPx)}`;
+}
+mqUp(640);
+mqUp(768);
+mqUp(BREAKPOINT_LG);
+mqUp(BREAKPOINT_XL);
+mqDown(639);
+mqDown(767);
+mqDown(BREAKPOINT_LG_DOWN);
+mqBetween(640, BREAKPOINT_LG_DOWN);
+mqDown(640);
+mqDown(768);
+//#endregion
+//#region ../theme-core/src/header/scrollTreatment.ts
+const headerScrollTreatmentSchema = z$1.discriminatedUnion("kind", [z$1.object({
+	kind: z$1.literal("contrast-glass"),
+	backgroundTone: z$1.enum(["light", "dark"])
+})]).optional();
+//#endregion
+//#region ../theme-core/src/header/containerSchema.ts
+const headerContainerSchema = z$1.object({
+	rounded: z$1.enum([
+		"none",
+		"sm",
+		"md",
+		"lg",
+		"xl",
+		"2xl"
+	]).default("xl"),
+	border: z$1.boolean().default(true),
+	shadow: z$1.boolean().default(true),
+	padding: z$1.enum([
+		"sm",
+		"md",
+		"lg"
+	]).default("md"),
+	tint: z$1.string().nullable().optional(),
+	opacity: z$1.number().min(0).max(1).default(.12)
+}).optional();
+const headerInteractionPaletteSchema = z$1.enum([
+	"primary",
+	"secondary",
+	"accent"
+]);
 //#endregion
 //#region ../theme-core/src/schema.ts
 const axesSchema = z$1.object({
@@ -4116,16 +4392,6 @@ const axesSchema = z$1.object({
 		"expressive"
 	])
 });
-const colourHexString = z$1.string().regex(/^#([0-9A-Fa-f]{3}){1,2}$/);
-const paletteColorSchema = z$1.object({
-	name: z$1.string().min(1),
-	hex: colourHexString
-});
-const paletteMetaSchema = z$1.object({ mode: z$1.enum(["light", "dark"]) });
-const paletteSchema = z$1.object({
-	colors: z$1.array(paletteColorSchema),
-	meta: paletteMetaSchema
-});
 const typographyStyleSchema = z$1.object({
 	family: z$1.string().min(1),
 	weight: z$1.enum([
@@ -4505,25 +4771,6 @@ const navFontWeight = z$1.enum([
 ]);
 const headerMaxWidth = z$1.enum(["container", "full"]);
 const headerBarFrame = z$1.enum(["full-bleed", "inset-shell"]);
-const headerContainerSchema = z$1.object({
-	rounded: z$1.enum([
-		"none",
-		"sm",
-		"md",
-		"lg",
-		"xl",
-		"2xl"
-	]).default("xl"),
-	border: z$1.boolean().default(true),
-	shadow: z$1.boolean().default(true),
-	padding: z$1.enum([
-		"sm",
-		"md",
-		"lg"
-	]).default("md"),
-	tint: z$1.string().nullable().optional(),
-	opacity: z$1.number().min(0).max(1).default(.12)
-}).optional();
 const headerBorderSchema = componentBorderSchema.extend({ position: z$1.enum([
 	"bottom",
 	"top",
@@ -4650,6 +4897,7 @@ const headerSchema = z$1.object({
 	shrinkOnScroll: z$1.boolean(),
 	maxWidth: headerMaxWidth,
 	barFrame: headerBarFrame.optional(),
+	scrollTreatment: headerScrollTreatmentSchema,
 	logoOverride: mediaSchema.nullable().optional(),
 	background: headerBackgroundSchema.default({
 		type: "color",
@@ -4662,6 +4910,7 @@ const headerSchema = z$1.object({
 	navFontRole: z$1.enum(["body", "heading"]).optional(),
 	navTypography: z$1.enum(["body", "heading"]).optional(),
 	navTextSize: navLinkStyleSchema.shape.textSize,
+	interactionPalette: headerInteractionPaletteSchema.optional(),
 	navPlacement: z$1.enum(["end", "center"]).optional(),
 	container: headerContainerSchema,
 	border: headerBorderSchema,
@@ -5030,128 +5279,6 @@ function generateShadowCssVars(theme) {
 	};
 }
 //#endregion
-//#region ../theme-core/src/palette/colors.ts
-const HEX_COLOR_REGEX = /^#[0-9a-f]{6}$/;
-const NORMALIZABLE_HEX_REGEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
-const hexColorSchema = z$1.string().regex(HEX_COLOR_REGEX, "Hex must be #RRGGBB (lowercase)").transform((value) => value);
-const paletteModeSchema = z$1.enum(["light", "dark"]);
-const PALETTE_VALUE_KEY_PREFIX = "palette-value:v1|";
-z$1.string().regex(/^[0-9a-f]{64}$/, "Palette hash must be a lowercase SHA-256 value").transform((value) => value);
-const paletteColorsSchema = z$1.object({
-	primary: hexColorSchema,
-	primaryForeground: hexColorSchema,
-	secondary: hexColorSchema,
-	accent: hexColorSchema,
-	success: hexColorSchema,
-	warning: hexColorSchema,
-	destructive: hexColorSchema,
-	background: hexColorSchema,
-	surface: hexColorSchema,
-	surfaceAlt: hexColorSchema,
-	muted: hexColorSchema,
-	text: hexColorSchema,
-	border: hexColorSchema
-}).strict().transform((value) => value);
-function normalizePaletteHex(value) {
-	if (!NORMALIZABLE_HEX_REGEX.test(value)) return null;
-	const normalized = value.toLowerCase();
-	if (normalized.length === 7) return normalized;
-	const triplet = normalized.slice(1);
-	const red = triplet.charAt(0);
-	const green = triplet.charAt(1);
-	const blue = triplet.charAt(2);
-	return `#${red}${red}${green}${green}${blue}${blue}`;
-}
-function paletteColorsFromEntries(entries) {
-	const values = {};
-	for (const entry of entries) {
-		const parsedRole = paletteTokenNameSchema.safeParse(entry.name);
-		if (!parsedRole.success) return {
-			ok: false,
-			error: {
-				kind: "unknown-role",
-				role: entry.name
-			}
-		};
-		const role = parsedRole.data;
-		if (values[role] !== void 0) return {
-			ok: false,
-			error: {
-				kind: "duplicate-role",
-				role
-			}
-		};
-		const hex = normalizePaletteHex(entry.hex);
-		if (!hex) return {
-			ok: false,
-			error: {
-				kind: "invalid-color",
-				role,
-				value: entry.hex
-			}
-		};
-		values[role] = hex;
-	}
-	const missing = PALETTE_TOKEN_NAMES.filter((role) => values[role] === void 0);
-	if (missing.length > 0) return {
-		ok: false,
-		error: {
-			kind: "missing-roles",
-			roles: missing
-		}
-	};
-	return {
-		ok: true,
-		colors: paletteColorsSchema.parse(values)
-	};
-}
-function requirePaletteColorsFromEntries(entries) {
-	const result = paletteColorsFromEntries(entries);
-	if (result.ok) return result.colors;
-	throw new Error(`Invalid complete palette: ${result.error.kind}`);
-}
-function paletteColorFingerprint(colors) {
-	return PALETTE_TOKEN_NAMES.map((name) => `${name}:${colors[name]}`).join("|");
-}
-function canonicalPaletteHashInput(colors, mode) {
-	return `${mode}|${paletteColorFingerprint(colors)}`;
-}
-/**
-* The shared TypeScript/SQL protocol. Do not reorder roles: the order comes
-* from PALETTE_TOKEN_NAMES through canonicalPaletteHashInput.
-*/
-function paletteValueKey(colors, mode) {
-	return `${PALETTE_VALUE_KEY_PREFIX}${canonicalPaletteHashInput(colors, mode)}`;
-}
-/** Parses only the exact v1 canonical form emitted by paletteValueKey. */
-function parsePaletteValueKey(value) {
-	if (typeof value !== "string" || !value.startsWith(PALETTE_VALUE_KEY_PREFIX)) return null;
-	const [rawMode, ...rawRoles] = value.slice(17).split("|");
-	const mode = paletteModeSchema.safeParse(rawMode);
-	if (!mode.success || rawRoles.length !== PALETTE_TOKEN_NAMES.length) return null;
-	const colors = paletteColorsFromEntries(rawRoles.map((roleValue) => {
-		const separator = roleValue.indexOf(":");
-		return separator === -1 ? {
-			name: "",
-			hex: ""
-		} : {
-			name: roleValue.slice(0, separator),
-			hex: roleValue.slice(separator + 1)
-		};
-	}));
-	if (!colors.ok || paletteValueKey(colors.colors, mode.data) !== value) return null;
-	return value;
-}
-const paletteValueKeySchema = z$1.string().transform((value, ctx) => {
-	const parsed = parsePaletteValueKey(value);
-	if (parsed) return parsed;
-	ctx.addIssue({
-		code: "custom",
-		message: "Invalid canonical palette value key"
-	});
-	return z$1.NEVER;
-});
-//#endregion
 //#region ../theme-core/src/site-styles/styleTags.ts
 /**
 * Descriptive style-axis metadata for button personalities and palette
@@ -6443,13 +6570,6 @@ const warmDarkKirtanGold = defineCuratedPalette({
 });
 //#endregion
 //#region ../theme-core/src/palette/curated/index.ts
-/**
-* Curated palette library.
-*
-* Authoring keys are readable source aliases. Value keys are derived from the
-* complete mode and semantic colours and are the only curated identity used at
-* persistence and runtime boundaries.
-*/
 function admitCuratedPaletteDefinition(definition) {
 	return {
 		...definition,
@@ -6476,11 +6596,8 @@ const curatedPalettes = [
 	admitCuratedPaletteDefinition(warmDarkEmber),
 	admitCuratedPaletteDefinition(warmDarkKirtanGold)
 ];
-const curatedPalettesByValueKey = new Map(curatedPalettes.map((palette) => [palette.valueKey, palette]));
+new Map(curatedPalettes.map((palette) => [palette.valueKey, palette]));
 const curatedPalettesByAuthoringKey = new Map(curatedPalettes.map((palette) => [palette.authoringKey, palette]));
-function findCuratedPalette(valueKey) {
-	return curatedPalettesByValueKey.get(valueKey);
-}
 function findCuratedPaletteByAuthoringKey(authoringKey) {
 	return curatedPalettesByAuthoringKey.get(authoringKey);
 }
@@ -6489,25 +6606,6 @@ function requireCuratedPaletteValueKey(authoringKey) {
 	if (!palette) throw new Error(`Unknown curated palette authoring key "${authoringKey}"`);
 	return palette.valueKey;
 }
-z$1.string().transform((value, ctx) => {
-	const valueKey = parsePaletteValueKey(value);
-	if (!valueKey) {
-		ctx.addIssue({
-			code: "custom",
-			message: "Invalid canonical palette value key"
-		});
-		return z$1.NEVER;
-	}
-	const palette = findCuratedPalette(valueKey);
-	if (!palette) {
-		ctx.addIssue({
-			code: "custom",
-			message: "Unknown curated palette value key"
-		});
-		return z$1.NEVER;
-	}
-	return palette.valueKey;
-});
 //#endregion
 //#region ../theme-core/src/accordions/siteStyleDefaults.ts
 /**
@@ -7120,6 +7218,38 @@ function resolveHeaderCtaVariant(theme, treatment) {
 	}
 }
 //#endregion
+//#region ../theme-core/src/site-styles/lookOptionGroups.ts
+function defineLookOptionGroup(group) {
+	defaultOption(group);
+	return group;
+}
+function defaultOption(group) {
+	const option = group.options.find((candidate) => candidate.id === group.defaultOptionId);
+	if (option) return option;
+	throw new Error(`Look option group "${group.id}" defaults to missing option "${group.defaultOptionId}".`);
+}
+//#endregion
+//#region ../theme-core/src/site-styles/headerInteractionPalette.ts
+const clearSplitInteractionPalette = defineLookOptionGroup({
+	id: "interaction-palette",
+	label: "Hover colour",
+	defaultOptionId: "accent",
+	options: [
+		{
+			id: "accent",
+			label: "Accent"
+		},
+		{
+			id: "primary",
+			label: "Primary"
+		},
+		{
+			id: "secondary",
+			label: "Secondary"
+		}
+	]
+});
+//#endregion
 //#region ../theme-core/src/site-styles/headerLooks.ts
 function asHeaderLookId(value) {
 	return value;
@@ -7253,7 +7383,7 @@ const overlayLogoAccommodations = [
 * optional nested styling fields that would otherwise leak from another Look.
 */
 function baseHeader(theme) {
-	const { navLinkStyle: _navLinkStyle, navFontRole: _navFontRole, navTypography: _navTypography, navTextSize: _navTextSize, dropdownStyle: _dropdownStyle, ctaVariant: _ctaVariant, navContainer: _navContainer, container: _container, shadow: _shadow, logo: _logo, logoText: _logoText, border: _border, ...header } = theme.header;
+	const { navLinkStyle: _navLinkStyle, navFontRole: _navFontRole, navTypography: _navTypography, navTextSize: _navTextSize, interactionPalette: _interactionPalette, dropdownStyle: _dropdownStyle, ctaVariant: _ctaVariant, navContainer: _navContainer, container: _container, shadow: _shadow, logo: _logo, logoText: _logoText, border: _border, ...header } = theme.header;
 	return {
 		...header,
 		navContainer: {
@@ -7268,7 +7398,6 @@ const headerLayoutCatalog = defineExactCatalog()([
 		id: asHeaderLayoutId("classic"),
 		label: "Classic",
 		description: "Logo and navigation in one practical horizontal row.",
-		structure: "inline-classic",
 		variant: "classic",
 		defaultPositioning: "sticky",
 		shrinkOnScroll: false
@@ -7277,7 +7406,6 @@ const headerLayoutCatalog = defineExactCatalog()([
 		id: asHeaderLayoutId("centered"),
 		label: "Centered",
 		description: "Logo centered above a balanced navigation row.",
-		structure: "centered-stack",
 		variant: "centered",
 		defaultPositioning: "static",
 		shrinkOnScroll: false,
@@ -7293,7 +7421,6 @@ const headerLayoutCatalog = defineExactCatalog()([
 		id: asHeaderLayoutId("floating"),
 		label: "Floating",
 		description: "Detached header chrome that sits over the opening section.",
-		structure: "floating-shell",
 		variant: "floating",
 		defaultPositioning: "sticky",
 		shrinkOnScroll: true,
@@ -7455,10 +7582,13 @@ const headerStyleCatalog = defineExactCatalog()([
 		label: "Clear Split",
 		description: "Floating logo with transparent navigation and no shared shell.",
 		supportedLayoutIds: supportedLayouts(["floating"]),
-		navInteraction: "color-change",
+		navInteraction: "pill-background",
 		surface: "floating",
-		defaultDepth: "none",
+		defaultDepth: "line",
 		navTypography: "plain",
+		openingForegroundTarget: "all",
+		scrollTreatment: "contrast-glass",
+		interactionPalette: clearSplitInteractionPalette,
 		moods: ["editorial", "calm"]
 	},
 	{
@@ -7481,6 +7611,7 @@ const headerStyleCatalog = defineExactCatalog()([
 		surface: "floating",
 		defaultDepth: "shadow",
 		navTypography: "quiet-caps",
+		openingForegroundTarget: "brand-only",
 		moods: ["expressive"]
 	},
 	{
@@ -7492,6 +7623,7 @@ const headerStyleCatalog = defineExactCatalog()([
 		surface: "floating",
 		defaultDepth: "shadow",
 		navTypography: "heading",
+		openingForegroundTarget: "brand-only",
 		moods: ["calm", "editorial"]
 	}
 ]);
@@ -7993,13 +8125,6 @@ const headerLookCatalog = defineExactCatalog()([
 	{
 		id: asHeaderLookId("clean-base"),
 		label: "Clean base",
-		visualTreatment: "solid-neutral",
-		layoutBehavior: "sticky",
-		configuration: {
-			structure: "inline-classic",
-			treatment: "solid-neutral",
-			behavior: "sticky"
-		},
 		openingRequirement: "none",
 		logoAccommodations: inlineClassicLogoAccommodations,
 		compile: cleanBaseHeader
@@ -8007,13 +8132,6 @@ const headerLookCatalog = defineExactCatalog()([
 	{
 		id: asHeaderLookId("classic-centered-nav"),
 		label: "Centered nav",
-		visualTreatment: "solid-neutral",
-		layoutBehavior: "sticky",
-		configuration: {
-			structure: "inline-classic",
-			treatment: "solid-neutral",
-			behavior: "sticky"
-		},
 		openingRequirement: "none",
 		maxRecommendedNavItems: 6,
 		logoAccommodations: inlineClassicLogoAccommodations,
@@ -8022,13 +8140,6 @@ const headerLookCatalog = defineExactCatalog()([
 	{
 		id: asHeaderLookId("brand-solid"),
 		label: "Brand solid",
-		visualTreatment: "solid-brand",
-		layoutBehavior: "sticky-shrink",
-		configuration: {
-			structure: "inline-classic",
-			treatment: "solid-brand",
-			behavior: "sticky-shrink"
-		},
 		openingRequirement: "none",
 		logoAccommodations: inlineClassicLogoAccommodations,
 		compile: solidBrandHeader
@@ -8036,13 +8147,6 @@ const headerLookCatalog = defineExactCatalog()([
 	{
 		id: asHeaderLookId("serif-line"),
 		label: "Serif line",
-		visualTreatment: "light-serif",
-		layoutBehavior: "sticky",
-		configuration: {
-			structure: "centered-stack",
-			treatment: "light-serif",
-			behavior: "sticky"
-		},
 		openingRequirement: "none",
 		maxRecommendedNavItems: 6,
 		logoAccommodations: centeredLogoAccommodations,
@@ -8051,13 +8155,6 @@ const headerLookCatalog = defineExactCatalog()([
 	{
 		id: asHeaderLookId("centered-calm"),
 		label: "Centered calm",
-		visualTreatment: "light-serif",
-		layoutBehavior: "normal-flow",
-		configuration: {
-			structure: "centered-stack",
-			treatment: "light-serif",
-			behavior: "normal-flow"
-		},
 		openingRequirement: "none",
 		maxRecommendedNavItems: 5,
 		logoAccommodations: centeredLogoAccommodations,
@@ -8066,13 +8163,6 @@ const headerLookCatalog = defineExactCatalog()([
 	{
 		id: asHeaderLookId("practical-utility"),
 		label: "Practical utility",
-		visualTreatment: "solid-neutral",
-		layoutBehavior: "sticky-shrink",
-		configuration: {
-			structure: "inline-classic",
-			treatment: "solid-neutral",
-			behavior: "sticky-shrink"
-		},
 		openingRequirement: "none",
 		requiresProminentCta: true,
 		logoAccommodations: inlineClassicLogoAccommodations,
@@ -8081,13 +8171,6 @@ const headerLookCatalog = defineExactCatalog()([
 	{
 		id: asHeaderLookId("minimal-transparent"),
 		label: "Minimal transparent",
-		visualTreatment: "minimal-transparent",
-		layoutBehavior: "normal-flow",
-		configuration: {
-			structure: "inline-classic",
-			treatment: "minimal-transparent",
-			behavior: "normal-flow"
-		},
 		openingRequirement: "reserved-space-ok",
 		logoAccommodations: inlineClassicLogoAccommodations,
 		compile: minimalTransparentHeader
@@ -8095,13 +8178,6 @@ const headerLookCatalog = defineExactCatalog()([
 	{
 		id: asHeaderLookId("transparent-overlay"),
 		label: "Transparent overlay",
-		visualTreatment: "transparent-overlay",
-		layoutBehavior: "fixed-overlay",
-		configuration: {
-			structure: "inline-classic",
-			treatment: "transparent-overlay",
-			behavior: "fixed-overlay"
-		},
 		openingRequirement: "requires-image-hero-with-contrast-overlay",
 		maxRecommendedNavItems: 5,
 		logoAccommodations: overlayLogoAccommodations,
@@ -8110,24 +8186,13 @@ const headerLookCatalog = defineExactCatalog()([
 	{
 		id: asHeaderLookId("floating-glass"),
 		label: "Floating glass",
-		visualTreatment: "floating-glass",
-		layoutBehavior: "fixed-floating",
-		configuration: {
-			structure: "floating-shell",
-			treatment: "floating-glass",
-			behavior: "fixed-floating"
-		},
 		openingRequirement: "requires-image-hero-with-contrast-overlay",
 		maxRecommendedNavItems: 5,
 		logoAccommodations: overlayLogoAccommodations,
 		compile: floatingGlassHeader
 	}
 ]);
-new Set(headerLookCatalog.map((look) => headerConfigurationKey(look.configuration)));
 new Map(headerLookCatalog.map((look) => [look.id, look]));
-function headerConfigurationKey(configuration) {
-	return `${configuration.structure}:${configuration.treatment}:${configuration.behavior}`;
-}
 //#endregion
 //#region ../theme-core/src/site-styles/footerLooks.ts
 function asFooterLookId(value) {
@@ -10695,28 +10760,6 @@ const curatedSiteStyles = [
 	})
 ];
 new Map(curatedSiteStyles.map((style) => [style.id, style]));
-const BREAKPOINT_LG = 1024;
-const BREAKPOINT_XL = 1280;
-const BREAKPOINT_LG_DOWN = BREAKPOINT_LG - 1;
-function mqUp(px) {
-	return `(min-width: ${px}px)`;
-}
-function mqDown(px) {
-	return `(max-width: ${px}px)`;
-}
-function mqBetween(minPx, maxPx) {
-	return `${mqUp(minPx)} and ${mqDown(maxPx)}`;
-}
-mqUp(640);
-mqUp(768);
-mqUp(BREAKPOINT_LG);
-mqUp(BREAKPOINT_XL);
-mqDown(639);
-mqDown(767);
-mqDown(BREAKPOINT_LG_DOWN);
-mqBetween(640, BREAKPOINT_LG_DOWN);
-mqDown(640);
-mqDown(768);
 svgDataUrl("<svg viewBox='0 0 1440 72' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M0 72V46C130 55 260 24 420 30C590 36 690 62 860 42C1035 21 1160 47 1305 36C1365 31 1415 33 1440 38V72H0Z' fill='white'/></svg>");
 svgDataUrl("<svg viewBox='0 0 1440 72' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M0 72V42C120 24 240 24 360 42C480 60 600 60 720 42C840 24 960 24 1080 42C1200 60 1320 60 1440 42V72H0Z' fill='white'/></svg>");
 svgDataUrl("<svg viewBox='0 0 1440 72' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M0 72V43C180 32 300 32 480 43C660 54 780 54 960 43C1140 32 1260 32 1440 43V72H0Z' fill='white'/></svg>");