Configurable bleed for buttons

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

@@ -25,6 +25,18 @@
 		gap: 24px;
 	}
 
+	&.buttons--bleed-none {
+		grid-column: content !important;
+	}
+
+	&.buttons--bleed-bleed {
+		grid-column: bleed !important;
+	}
+
+	&.buttons--bleed-screen {
+		grid-column: 1/-1 !important;
+	}
+
 	.button {
 		margin: 0;
 	}

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

@@ -6,6 +6,9 @@ import { button, button_variants } from "src/back/elements/button.js";
 const component_arguments = {
 	mode: new ComponentArguments.Enum(["column", "row"]),
 	gap: new ComponentArguments.Enum(["none", "narrow", "medium", "wide"]),
+	bleed: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue(
+		"none"
+	),
 	buttons: new ComponentArguments.List(
 		new ComponentArguments.Structured({
 			variant: new ComponentArguments.Enum(button_variants),
@@ -21,7 +24,7 @@ export class Buttons extends Component<typeof component_arguments> {
 	}
 
 	async toHTML({
-		args: { buttons, mode, gap },
+		args: { buttons, mode, gap, bleed },
 		classes,
 	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
 		return (
@@ -30,6 +33,7 @@ export class Buttons extends Component<typeof component_arguments> {
 					"buttons",
 					`buttons--mode-${mode}`,
 					`buttons--gap-${gap}`,
+					`buttons--bleed-${bleed}`,
 					...classes,
 				]}
 			>