From 6115354ca8cd2a4105c014365320af811ad9c279 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sat, 30 Mar 2024 19:33:23 +0100
Subject: [PATCH] Add row forms

Closes #70.
---
 examples/index.html          | 14 ++++++++++++++
 src/rulesets/base.less       | 23 +++++++++++++++++++++++
 src/selectorsets/module.less |  3 +++
 src/selectorsets/root.less   |  3 +++
 4 files changed, 43 insertions(+)

diff --git a/examples/index.html b/examples/index.html
index ae00d7d..e6e01a0 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -1922,6 +1922,20 @@ <h4>
 					</form>
 				</section>
 			</div>
+			<section class="panel box" id="panel-form-row">
+				<h3>
+					Row form
+				</h3>
+				<p>
+					A <dfn id="dfn-form-row">row form</dfn> is a <b>block form</b> aligning elements to a single horizontal row.
+				</p>
+				<form class="panel form-row">
+					<span>Login</span>
+					<input type="text" placeholder="Username">
+					<input type="password" placeholder="Password">
+					<input type="submit" value="Login">
+				</form>
+			</section>
 		</main>
 		<footer>
 			<p>
diff --git a/src/rulesets/base.less b/src/rulesets/base.less
index 1a14161..e63582d 100644
--- a/src/rulesets/base.less
+++ b/src/rulesets/base.less
@@ -883,6 +883,29 @@
 		}
 	}
 
+	@{form-row} {
+		display: flex;
+		flex-direction: row;
+
+		> @{all} {
+			flex-basis: 100%;
+			flex-shrink: 1;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		> @{form-row-text} {
+			flex-basis: unset;
+			flex-shrink: 0;
+			flex-grow: 1;
+			text-align: right;
+			margin: auto 0;
+
+			.use-font-group(label);
+			.map-hsl-group(current; primary);
+		}
+	}
+
 	//</editor-fold>
 
 	/// ===== Text =====
diff --git a/src/selectorsets/module.less b/src/selectorsets/module.less
index 62aeaa1..a9d9f00 100644
--- a/src/selectorsets/module.less
+++ b/src/selectorsets/module.less
@@ -111,6 +111,9 @@
 @form-flex-content: ~":where(.form-flex-content)";
 @form-flex-choice: ~":where(.form-flex-choice)";
 
+@form-row: ~":where(.form-row)";
+@form-row-text: ~":where(.form-row-text)";
+
 @text-anchor: ~":where(.text-anchor)";
 @text-idiomatic: ~":where(.text-idiomatic)";
 @text-emphasis: ~":where(.text-emphasis)";
diff --git a/src/selectorsets/root.less b/src/selectorsets/root.less
index 7d7d613..bc7cb02 100644
--- a/src/selectorsets/root.less
+++ b/src/selectorsets/root.less
@@ -111,6 +111,9 @@
 @form-flex-content: ~':where(.form-flex-content, p)';
 @form-flex-choice: ~':where(.form-flex-choice, label)';
 
+@form-row: ~":where(.form-row)";
+@form-row-text: ~":where(.form-row-text, span, label)";
+
 @text-anchor: ~":where(a)";
 @text-idiomatic: ~":where(i)";
 @text-emphasis: ~":where(em)";