Add heading alignment

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

@@ -1,4 +1,6 @@
 .heading {
+	text-wrap: pretty;
+	text-wrap: balance;
 	& > * {
 		margin-top: 0;
 		margin-bottom: 0;
@@ -24,6 +26,18 @@
 		font-size: 64px;
 	}
 
+	&.heading--align-left {
+		text-align: left;
+	}
+
+	&.heading--align-right {
+		text-align: right;
+	}
+
+	&.heading--align-center {
+		text-align: center;
+	}
+
 	&.heading--color-normal {
 		color: var(--color-brand-text-fg);
 	}

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

@@ -18,6 +18,9 @@ const component_arguments = {
 		"large",
 		"extra_large",
 	]).setDefaultValue("medium"),
+	align: new ComponentArguments.Enum(["left", "right", "center"]).setDefaultValue(
+		"left"
+	),
 	color: new ComponentArguments.Enum(["normal", "accent1", "accent2"]).setDefaultValue(
 		"normal"
 	),
@@ -30,7 +33,7 @@ export class Heading extends Component<typeof component_arguments> {
 	}
 
 	async toHTML({
-		args: { title, level, font_size, color },
+		args: { title, level, font_size, color, align },
 		classes,
 	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
 		return (
@@ -39,6 +42,7 @@ export class Heading extends Component<typeof component_arguments> {
 					"heading",
 					`heading--font-size-${font_size}`,
 					`heading--color-${color}`,
+					`heading--align-${align}`,
 					...classes,
 				]}
 			>