@uncinq/css-components 1.27.2 → 1.27.4

package/css/components/form.css

@@ -1,4 +1,17 @@
 /* components/form.css */
+/*
+ * .form — responsive grid of one or two columns, and its layout helpers.
+ *
+ * Structure:
+ *   form.form[.is-submitting|.is-success|.has-error]
+ *     p.required         (meaning of the asterisk, before the first field: RGAA 11.10)
+ *     div[.full]*        (fields)
+ *     .alert[hidden]     (answer of an async submission)
+ *     div.actions        (submit, legal)
+ *
+ * States, set by the script that submits the form asynchronously:
+ * .is-submitting, .is-success (only the .alert remains), .has-error
+ */
 @layer components {
   .form {
     display: grid;
@@ -14,10 +27,18 @@
     }
 
     .actions,
-    .full {
+    .alert,
+    .full,
+    .required {
       grid-column: 1 / -1;
     }
-    
+
+    /* Aligned with the labels, whatever the alignment of the container */
+    .required {
+      margin-block: 0;
+      text-align: start;
+    }
+
     .actions {
       align-items: start;
       display: flex;
@@ -28,6 +49,15 @@
       }
     }
 
+    &.is-submitting {
+      cursor: progress;
+    }
+
+    /* Once sent, only the answer remains (direct children only, so that the
+       content of the .alert stays) */
+    &.is-success > :not(.alert) {
+      display: none;
+    }
   }
 
   .form-check {

package/css/components/media.css

@@ -41,6 +41,18 @@
     }
   }
 
+  .media-contain {
+    img {
+      object-fit: contain;
+    }
+  }
+
+  .media-cover {
+    img {
+      object-fit: cover;
+    }
+  }
+
   .media-icon {
     --media-ratio: none;
     --media-color-background: transparent;

package/docs/forms/form.md

@@ -55,15 +55,38 @@ Change the floor with `--form-col-min-width`. Raising it past 50% forces a singl
 | `.full` | Spans both columns, `grid-column: 1 / -1` |
 | `.actions` | Spans both columns and stacks its children vertically |
 | `.help` | Help text under a field |
+| `.required` | Spans both columns, aligned to the start, no block margin |
+| `.alert` | Spans both columns |
 
 `.actions` is a column flex container aligned to the start, with `--gap` between its children and their block margins flattened. So a submit button, a consent line and a legal note stack in the order written without fighting each other's margins.
 
 `.help` reads `--help-*` for colour, size, weight, margin and alignment. Pair it with `aria-describedby`, or it is seen and never announced.
 
+`.required` is the line explaining the asterisk of the required fields. Put it before the first field: the RGAA wants the meaning of a non-textual indication such as `*` given before its first use, visually and in the source order. It stays aligned with the labels even in a centred container.
+
+## Async submission
+
+A script that submits the form without leaving the page shows its answer in an `.alert` placed among the fields, `hidden` until then, and sets these states on the form:
+
+| State | Effect |
+| --- | --- |
+| `.is-submitting` | `cursor: progress` while the request runs |
+| `.is-success` | Hides every direct child but the `.alert`, so only the answer remains |
+| `.has-error` | No rule: the fields stay, the `.alert` (e.g. `.alert-danger`) carries the error |
+
+```html
+<form class="form is-success">
+  <p class="required">* Required fields</p>
+  <div>…</div>
+  <p class="alert alert-success" role="status" tabindex="-1">Thank you!</p>
+  <div class="actions">…</div>
+</form>
+```
+
 ## Field spacing
 
 Both axes use `--gap`, the same token the grid uses for its column calculation. That is why the two-column cap subtracts `var(--gap) / 2`: the track width and the gutter come from one value, so changing it cannot desynchronise them.
 
 ## Controls are not styled here
 
-Inputs, selects, textareas and their focus and invalid states come from [css-base](../../../css-base/base/form/), applied to the native elements. This file adds layout and nothing else, which is why a form built without `.form` still looks right, it is simply stacked.
+Inputs, selects, textareas and their focus and invalid states come from [css-base](../../../css-base/base/form/), applied to the native elements. This file adds layout and the submission states, nothing else, which is why a form built without `.form` still looks right, it is simply stacked.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinq/css-components",
-  "version": "1.27.2",
+  "version": "1.27.4",
   "description": "Framework-agnostic CSS component implementations.",
   "license": "MIT",
   "repository": {