Add crooked and frame variants to background wrapper

src/back/jdd-components/background-wrapper/background-wrapper.css

@@ -7,6 +7,18 @@
 
 	padding: var(--vertical-padding) 0;
 
+	&.background-wrapper--bleed-none {
+		grid-column: content !important;
+	}
+
+	&.background-wrapper--bleed-bleed {
+		grid-column: bleed !important;
+	}
+
+	&.background-wrapper--bleed-screen {
+		grid-column: 1/-1 !important;
+	}
+
 	&.background-wrapper--padding-no {
 		padding: 0;
 	}
@@ -37,4 +49,28 @@
 		color: var(--color-brand-text-on-accent2);
 		--color-brand-text-fg: var(--color-brand-text-on-accent2);
 	}
+
+	&.background-wrapper--frame1 {
+		border: 16px dashed var(--color-brand-accent);
+		background-color: color-mix(
+			in srgb,
+			var(--color-brand-accent) 20%,
+			transparent 80%
+		);
+		--color-brand-text-bg: transparent;
+	}
+
+	&.background-wrapper--frame2 {
+		border: 16px dashed var(--color-brand-accent2);
+		background-color: color-mix(
+			in srgb,
+			var(--color-brand-accent2) 20%,
+			transparent 80%
+		);
+		--color-brand-text-bg: transparent;
+	}
+
+	&.background-wrapper--crooked {
+		transform: scale(1.05) rotate(-2deg);
+	}
 }

src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx

@@ -6,7 +6,7 @@ import type {
 } from "@sealcode/jdd";
 import { Component, ComponentArguments } from "@sealcode/jdd";
 
-export const background_variants = ["variant1", "variant2"];
+export const background_variants = ["variant1", "variant2", "frame1", "frame2"];
 
 const component_arguments = {
 	variant: new ComponentArguments.Enum(background_variants),
@@ -14,6 +14,10 @@ const component_arguments = {
 	padding: new ComponentArguments.Boolean(),
 	big_padding: new ComponentArguments.Boolean(),
 	margin: new ComponentArguments.Boolean(),
+	bleed: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue(
+		"screen"
+	),
+	crooked: new ComponentArguments.Boolean().setDefaultValue(false),
 	content: new ComponentArguments.NestedComponent(),
 } as const;
 
@@ -31,7 +35,16 @@ export class BackgroundWrapper extends Component<typeof component_arguments> {
 	}
 
 	async toHTML({
-		args: { variant, content, grow_to_screen_height, padding, margin, big_padding },
+		args: {
+			variant,
+			content,
+			grow_to_screen_height,
+			padding,
+			margin,
+			big_padding,
+			bleed,
+			crooked,
+		},
 		classes,
 		jdd_context,
 	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
@@ -40,10 +53,12 @@ export class BackgroundWrapper extends Component<typeof component_arguments> {
 				class={[
 					"background-wrapper",
 					`background-wrapper--${variant}`,
+					`background-wrapper--bleed-${bleed}`,
 					`background-wrapper--padding-${padding ? "yes" : "no"}`,
 					`background-wrapper--big-padding-${big_padding ? "yes" : "no"}`,
 					{
 						"background-wrapper--grow-height": grow_to_screen_height,
+						"background-wrapper--crooked": crooked,
 						"jdd-no-gap": !margin,
 					},
 					...classes,