More flexible bleeds in tekst and subtree

src/back/jdd-components/subtree/subtree.css

@@ -115,3 +115,12 @@
 		}
 	}
 }
+
+.grid-layout-main > .subtree:not(.subtree--bleed-none) {
+	display: grid !important;
+	grid-template-columns: subgrid;
+
+	& > * {
+		grid-column: content;
+	}
+}

src/back/jdd-components/tekst/tekst.css

@@ -11,6 +11,14 @@
 		font-size: 20px;
 	}
 
+	&.tekst--bleed-none {
+		grid-column: content !important;
+	}
+
+	&.tekst--bleed-bleed {
+		grid-column: bleed !important;
+	}
+
 	p {
 		margin: 0;
 	}

src/back/jdd-components/tekst/tekst.jdd.tsx

@@ -17,6 +17,7 @@ const component_arguments = {
 	size: new ComponentArguments.Enum(["small", "normal", "large"]).setDefaultValue(
 		"normal"
 	),
+	bleed: new ComponentArguments.Enum(["none", "bleed"]).setDefaultValue("none"),
 	content: new ComponentArguments.Markdown(),
 	side_content: new ComponentArguments.NestedComponent(),
 } as const;
@@ -42,7 +43,7 @@ export class Tekst extends Component<typeof component_arguments> {
 	}
 
 	toHTML({
-		args: { color, content, side_content, size },
+		args: { color, content, side_content, size, bleed },
 		classes,
 		jdd_context,
 		index,
@@ -55,6 +56,7 @@ export class Tekst extends Component<typeof component_arguments> {
 					...classes,
 					`tekst--color-${color}`,
 					`tekst--size-${size}`,
+					`tekst--bleed-${bleed}`,
 				]}
 				style={`--jdd-index: ${index}`}
 			>