@nldd/design-system 0.8.82 → 0.8.84

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"modal-dialog.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.ts"],"names":[],"mappings":"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"}

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,yBA+F7B,CAAC"}
+{"version":3,"file":"modal-dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,yBAsG7B,CAAC"}

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js

@@ -27,6 +27,13 @@ export const modalDialogStyles = css `
 	/* # Block */
 
 	.modal-dialog {
+		/* Where the app's layout context ends, as in nldd-sheet: the dialog scrolls
+		   itself and starts at its own top edge, so anything inside it stops
+		   following the app's scroll mode and its layer offsets. */
+		--context-scroll-mode: nested;
+		--context-layer-top: 0px;
+		--context-layer-bottom: 0px;
+
 		box-sizing: border-box;
 		outline: none;
 		border: none;

package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;IAahC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;uBAwBC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D3B,CAAC"}
+{"version":3,"file":"modal-dialog.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;IAahC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA+BC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D3B,CAAC"}

package/dist/components/status-and-feedback/notification/notification-region.js

@@ -2,7 +2,7 @@
  * The one place every notification ends up, wherever a consumer wrote it.
  *
  * It exists because a notification cannot answer the three questions that decide
- * its behaviour on its own: where it sits in the stack, how deep it is buried,
+ * its behavior on its own: where it sits in the stack, how deep it is buried,
  * and whether it is the one that should be counting down. All three are
  * properties of the group. The region owns the group, so it owns the answers.
  *

package/dist/components/status-and-feedback/status-bar/status-bar.d.ts

@@ -1,41 +1,42 @@
 /**
  * NLDD Design System Status Bar Component (Lit + TypeScript)
  *
- * Een smalle, paginabrede statusbalk (24px) met een diepe achtergrondkleur
- * per variant. Gebruik voor persistente systeemtoestand: een storing, gepland
- * onderhoud, een conceptweergave of een lopende opname. De balk toont bewust
- * geen icoon en ondersteunt alleen tekst — de tekst zelf moet de status
- * benoemen ("Storing: …", "Gepland onderhoud …"), zodat de betekenis niet
- * alleen uit kleur volgt (WCAG 1.4.1).
+ * A narrow, page-wide status bar (24px) with a deep background color per
+ * variant. Use it for persistent system state: an outage, planned maintenance,
+ * a draft view or a recording in progress. The bar deliberately shows no icon
+ * and supports text only. The text itself has to name the status ("Storing: …",
+ * "Gepland onderhoud …"), so the meaning does not follow from color alone
+ * (WCAG 1.4.1).
  *
- * Houd de tekst kort: de balk toont één regel en kapt af met ellipsis, zeker
- * op smallere schermen. Bij een lang bericht met veel informatie hoort alleen
- * de kern in de balk; verwijs voor de rest naar een losse pagina of sheet
- * (bijvoorbeeld via `href` of `button`) waar de gebruiker verder kan lezen.
+ * Keep the text short: the bar shows one line and truncates with an ellipsis,
+ * certainly on narrower screens. For a long message with a lot of information
+ * only the essence belongs in the bar. Point to a separate page or sheet for
+ * the rest (through `href` or `button`, for instance), where the user can read
+ * on.
  *
- * De hele balk kan klikbaar zijn: zet `href` (rendert een `<a>`) of `button`
- * (rendert een `<button>`; luister naar het native `click` event). Zonder
- * beide is de balk statisch. Bij interactie verschijnt een chevron als
- * affordance. Maximaal één actie per balk; meerdere acties of links in
- * lopende tekst horen in nldd-banner.
+ * The whole bar can be clickable: set `href` (renders an `<a>`) or `button`
+ * (renders a `<button>`; listen for the native `click` event). Without either
+ * the bar is static. On interaction a chevron appears as an affordance. One
+ * action per bar at most; several actions, or links in running text, belong in
+ * nldd-banner.
  *
  * ## ARIA
- * role en aria-live worden automatisch gezet op basis van de variant:
- * - critical → role="alert" (impliceert aria-live="assertive"; onderbreekt de screen reader)
- * - overige  → role="status" aria-live="polite"
- * Niet overschrijfbaar — is een rustiger component nodig, kies dan een ander.
- * Gebruik `critical` alleen voor een echte noodsituatie: role="alert" onderbreekt
- * de screen reader bij élke wijziging van de inhoud, dus plaats er geen tekst in
- * die regelmatig verandert (zoals een aftellende timer).
+ * role and aria-live are set automatically from the variant:
+ * - critical → role="alert" (implies aria-live="assertive"; interrupts the screen reader)
+ * - others   → role="status" aria-live="polite"
+ * Not overridable. If you need a quieter component, pick a different one. Use
+ * `critical` only for a real emergency: role="alert" interrupts the screen
+ * reader on every change of the content, so do not put text in it that changes
+ * regularly (a counting-down timer, for example).
  *
  * @element nldd-status-bar
  *
- * @attr {'neutral'|'accent'|'success'|'warning'|'critical'} variant - Kleur van de balk (standaard: 'neutral')
- * @attr {string} text - De statustekst (één regel; afgekapt met ellipsis)
- * @attr {string} href - Maakt de hele balk een link (rendert een <a>)
- * @attr {string} target - Link target (bijv. '_blank'); alleen gebruikt bij href
- * @attr {string} rel - Link rel; standaard 'noopener noreferrer' bij target='_blank'
- * @attr {boolean} button - Maakt de hele balk een button; genegeerd als href is gezet
+ * @attr {'neutral'|'accent'|'success'|'warning'|'critical'} variant - Color of the bar (default: 'neutral')
+ * @attr {string} text - The status text (one line; truncated with an ellipsis)
+ * @attr {string} href - Makes the whole bar a link (renders an <a>)
+ * @attr {string} target - Link target (e.g. '_blank'); only used with href
+ * @attr {string} rel - Link rel; defaults to 'noopener noreferrer' with target='_blank'
+ * @attr {boolean} button - Makes the whole bar a button; ignored when href is set
  */
 import { LitElement } from 'lit';
 import '../../content/icon/icon.js';

package/dist/components/status-and-feedback/status-bar/status-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,4BAA4B,CAAC;AAEpC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEzF,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAGzC,OAAO,EAAE,gBAAgB,CAAa;IAGtC,IAAI,SAAM;IAGV,IAAI,SAAM;IAEV,+DAA+D;IAE/D,MAAM,SAAM;IAEZ,sDAAsD;IAEtD,GAAG,SAAM;IAGT,MAAM,UAAS;IAEN,iBAAiB,IAAI,IAAI;IAYlC,+EAA+E;IAC/E,YAAY,IAAI,MAAM;IAKb,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,oBAAoB;IAmBnB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}
+{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,4BAA4B,CAAC;AAEpC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEzF,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAAmB;IAGzC,OAAO,EAAE,gBAAgB,CAAa;IAGtC,IAAI,SAAM;IAGV,IAAI,SAAM;IAEV,+DAA+D;IAE/D,MAAM,SAAM;IAEZ,sDAAsD;IAEtD,GAAG,SAAM;IAGT,MAAM,UAAS;IAEN,iBAAiB,IAAI,IAAI;IAYlC,+EAA+E;IAC/E,YAAY,IAAI,MAAM;IAKb,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,oBAAoB;IAmBnB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}

package/dist/components/status-and-feedback/status-bar/status-bar.js

@@ -7,41 +7,42 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /**
  * NLDD Design System Status Bar Component (Lit + TypeScript)
  *
- * Een smalle, paginabrede statusbalk (24px) met een diepe achtergrondkleur
- * per variant. Gebruik voor persistente systeemtoestand: een storing, gepland
- * onderhoud, een conceptweergave of een lopende opname. De balk toont bewust
- * geen icoon en ondersteunt alleen tekst — de tekst zelf moet de status
- * benoemen ("Storing: …", "Gepland onderhoud …"), zodat de betekenis niet
- * alleen uit kleur volgt (WCAG 1.4.1).
+ * A narrow, page-wide status bar (24px) with a deep background color per
+ * variant. Use it for persistent system state: an outage, planned maintenance,
+ * a draft view or a recording in progress. The bar deliberately shows no icon
+ * and supports text only. The text itself has to name the status ("Storing: …",
+ * "Gepland onderhoud …"), so the meaning does not follow from color alone
+ * (WCAG 1.4.1).
  *
- * Houd de tekst kort: de balk toont één regel en kapt af met ellipsis, zeker
- * op smallere schermen. Bij een lang bericht met veel informatie hoort alleen
- * de kern in de balk; verwijs voor de rest naar een losse pagina of sheet
- * (bijvoorbeeld via `href` of `button`) waar de gebruiker verder kan lezen.
+ * Keep the text short: the bar shows one line and truncates with an ellipsis,
+ * certainly on narrower screens. For a long message with a lot of information
+ * only the essence belongs in the bar. Point to a separate page or sheet for
+ * the rest (through `href` or `button`, for instance), where the user can read
+ * on.
  *
- * De hele balk kan klikbaar zijn: zet `href` (rendert een `<a>`) of `button`
- * (rendert een `<button>`; luister naar het native `click` event). Zonder
- * beide is de balk statisch. Bij interactie verschijnt een chevron als
- * affordance. Maximaal één actie per balk; meerdere acties of links in
- * lopende tekst horen in nldd-banner.
+ * The whole bar can be clickable: set `href` (renders an `<a>`) or `button`
+ * (renders a `<button>`; listen for the native `click` event). Without either
+ * the bar is static. On interaction a chevron appears as an affordance. One
+ * action per bar at most; several actions, or links in running text, belong in
+ * nldd-banner.
  *
  * ## ARIA
- * role en aria-live worden automatisch gezet op basis van de variant:
- * - critical → role="alert" (impliceert aria-live="assertive"; onderbreekt de screen reader)
- * - overige  → role="status" aria-live="polite"
- * Niet overschrijfbaar — is een rustiger component nodig, kies dan een ander.
- * Gebruik `critical` alleen voor een echte noodsituatie: role="alert" onderbreekt
- * de screen reader bij élke wijziging van de inhoud, dus plaats er geen tekst in
- * die regelmatig verandert (zoals een aftellende timer).
+ * role and aria-live are set automatically from the variant:
+ * - critical → role="alert" (implies aria-live="assertive"; interrupts the screen reader)
+ * - others   → role="status" aria-live="polite"
+ * Not overridable. If you need a quieter component, pick a different one. Use
+ * `critical` only for a real emergency: role="alert" interrupts the screen
+ * reader on every change of the content, so do not put text in it that changes
+ * regularly (a counting-down timer, for example).
  *
  * @element nldd-status-bar
  *
- * @attr {'neutral'|'accent'|'success'|'warning'|'critical'} variant - Kleur van de balk (standaard: 'neutral')
- * @attr {string} text - De statustekst (één regel; afgekapt met ellipsis)
- * @attr {string} href - Maakt de hele balk een link (rendert een <a>)
- * @attr {string} target - Link target (bijv. '_blank'); alleen gebruikt bij href
- * @attr {string} rel - Link rel; standaard 'noopener noreferrer' bij target='_blank'
- * @attr {boolean} button - Maakt de hele balk een button; genegeerd als href is gezet
+ * @attr {'neutral'|'accent'|'success'|'warning'|'critical'} variant - Color of the bar (default: 'neutral')
+ * @attr {string} text - The status text (one line; truncated with an ellipsis)
+ * @attr {string} href - Makes the whole bar a link (renders an <a>)
+ * @attr {string} target - Link target (e.g. '_blank'); only used with href
+ * @attr {string} rel - Link rel; defaults to 'noopener noreferrer' with target='_blank'
+ * @attr {boolean} button - Makes the whole bar a button; ignored when href is set
  */
 import { LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';

package/dist/components/status-and-feedback/status-bar/status-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-bar.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"status-bar.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/status-bar/status-bar.ts"],"names":[],"mappings":"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"}

package/dist/components/status-and-feedback/step-indicator/step-indicator.styles.js

@@ -22,7 +22,7 @@ export const stepIndicatorStyles = css `
 		--_track-thickness: var(--primitives-space-2);
 		--_marker-z-index: 1;
 		--_marker-corner-radius: var(--primitives-corner-radius-full);
-		--_ring-thickness: var(--primitives-space-2);
+		--_ring-thickness: var(--semantics-surfaces-ring-thickness);
 		--_ring-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
 		--_marker-content-color: var(--semantics-content-secondary-color);
 		--_progress-content-color: var(--semantics-content-contrast-color);

package/dist/components/{visibility-mixin-GxbwkBb1.js → visibility-mixin-vbfhyo7f.js}

@@ -1,4 +1,4 @@
-import { t as __decorate } from "./decorate-BKn10QQi.js";
+import { t as __decorate } from "./decorate-lwt_OrAG.js";
 import { t as breakpoints } from "./breakpoints-CkxsiRgH.js";
 import { property } from "lit/decorators.js";
 //#region src/utilities/visibility-mixin.ts

package/dist/components/{with-translations-DzAdFTK8.js → with-translations-CqUV9S5g.js}

@@ -1,4 +1,4 @@
-import { t as __decorate } from "./decorate-BKn10QQi.js";
+import { t as __decorate } from "./decorate-lwt_OrAG.js";
 import { property } from "lit/decorators.js";
 //#region src/utilities/with-translations.ts
 /**

package/dist/css/form-section.css

@@ -1,54 +1,29 @@
-/* Form-section: light-DOM grouping wrapper.
-
-   nldd-form-section bouwt z'n eigen DOM-structuur in light DOM (geen
-   shadow), zodat NVDA + Firefox de native <fieldset> + <legend> als
-   group-label betrouwbaar aankondigen voor de slotted controls.
-
-   Structuur na connectedCallback:
-     <nldd-form-section>
-       <fieldset class="form-section">
-         <legend class="form-section__header">
-           <span class="form-section__title">Title</span>
-           <span class="form-section__subtitle">Subtitle</span>
-         </legend>
-         <div class="form-section__main">
-           [user's children]
-         </div>
-       </fieldset>
-     </nldd-form-section>
-
-   Form-fields die als directe children meegegeven worden, worden in
-   .form-section__main geplaatst (zie form-section.ts).
-*/
-
-
-/* # Host
-   Top + bottom dividers + padding voor vertical rhythm.
-   Suppression: :first-child, :last-child, en sibling-section
-   (om dubbele lijnen te voorkomen). */
+/* # Host */
 
 nldd-form-section {
 	display: block;
 	box-sizing: border-box;
-	border-top: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
-	border-bottom: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
-	padding-top: var(--semantics-forms-gap);
-	padding-bottom: var(--semantics-forms-gap);
 }
 
 nldd-form-section[hidden] {
 	display: none;
 }
 
-nldd-form-section:first-child,
-nldd-form-section + nldd-form-section {
-	border-top: none;
-	padding-top: 0;
+/* A margin and not padding, so it collapses with the gap the form puts under
+   the previous child: 16 and 24 next to each other are 24, not 40. Padding
+   collapses with nothing and would have made it 32. */
+
+nldd-form > form > nldd-form-section:not(:first-child) {
+	margin-block-start: var(--semantics-forms-sections-gap);
 }
 
-nldd-form-section:last-child {
-	border-bottom: none;
-	padding-bottom: 0;
+/* The :has() guard also settles the cascade: a physical margin-bottom and a
+   logical margin-block-end for the same side are decided on declaration order,
+   not specificity, so without it the outcome would depend on the load order of
+   the files. */
+
+nldd-form > form > nldd-form-section:has(~ *:not([hidden]):not([type='hidden'])) {
+	margin-block-end: var(--semantics-forms-sections-gap);
 }
 
 
@@ -100,19 +75,26 @@ nldd-form-section .form-section__subtitle {
 
 /* # Main — gets margin-top to separate from header. When no header is
    rendered (no text + no supporting-text), main is the first child of
-   the fieldset and the margin collapses via :first-child. */
+   the fieldset and the margin collapses via :first-child.
+
+   Closer to the heading than a section stands to what came before it: the
+   heading belongs to what is under it, and the same distance on both sides
+   would leave it floating between the two. */
 
 nldd-form-section > fieldset.form-section > .form-section__main {
 	display: block;
-	margin-top: var(--semantics-forms-gap);
+	margin-top: var(--primitives-space-8);
 }
 
 nldd-form-section > fieldset.form-section > .form-section__main:first-child {
 	margin-top: 0;
 }
 
-/* Form-fields binnen .form-section__main krijgen hun spacing via form.css's
-   `nldd-form nldd-form-field + nldd-form-field` rule (incl. tighter @media
-   varianten voor top-aligned). Mixed content (form-fields + paragraphs etc.)
-   wordt niet automatisch gespaceerd — gebruik nldd-rich-text of eigen
-   spacing-CSS voor die zeldzame gevallen. */
+/* # Vertical rhythm within a section
+
+   Same rule and same reason as in form.css: the gap hangs on the bottom, and
+   the :has() guard keeps a trailing gap off the last visible child. */
+
+nldd-form-section .form-section__main > *:has(~ *:not([hidden]):not([type='hidden'])) {
+	margin-bottom: var(--semantics-forms-fields-gap);
+}

package/dist/css/form.css

@@ -19,20 +19,14 @@ nldd-form > form {
    children are all hidden. */
 
 nldd-form > form > *:has(~ *:not([hidden]):not([type='hidden'])) {
-	margin-bottom: var(--semantics-forms-gap);
+	margin-bottom: var(--semantics-forms-fields-gap);
 }
 
-nldd-form nldd-form-field:has(+ nldd-form-field):has(~ *:not([hidden]):not([type='hidden'])) {
-	@container (max-width: 640px) {
-		margin-bottom: var(--semantics-forms-gap-tight);
-	}
-	@container (min-width: 641px) {
-		margin-bottom: var(--semantics-forms-gap);
-	}
-}
+/* A margin, so it collapses with the one the rhythm above puts under the last
+   child: 16 and 24 next to each other are 24, not 40. Here rather than on the
+   component's own :host, because a consumer reset overrides a host declaration
+   and this is a distance between siblings, not something the element paints. */
 
-nldd-form nldd-form-field[form-label-alignment='top']:not([label-alignment='left']):not([label-alignment='right']):has(+ nldd-form-field[form-label-alignment='top']:not([label-alignment='left']):not([label-alignment='right'])):has(~ *:not([hidden]):not([type='hidden'])) {
-	@container (min-width: 641px) {
-		margin-bottom: var(--semantics-forms-gap-tight);
-	}
+nldd-form nldd-form-actions {
+	margin-top: var(--semantics-forms-sections-gap);
 }

package/dist/css/rich-text.css

@@ -271,17 +271,17 @@ nldd-rich-text h6 {
 
 nldd-rich-text p {
 	margin: 0;
-	/* Vangnet, los van [hyphens]: laat lange URLs en Nederlandse
-	   samenstellingen breken zodra ze breder zijn dan de kolom, i.p.v. te
-	   overlopen op smalle (mobiele) breedtes. break-word (niet anywhere) raakt
-	   de grid-min-content-maat niet, dus de main-kolom blijft intact. */
+	/* Safety net, independent of [hyphens]: lets long URLs and Dutch compounds
+	   break as soon as they are wider than the column, instead of overflowing
+	   at narrow (mobile) widths. break-word (not anywhere) leaves the grid
+	   min-content size alone, so the main column stays intact. */
 	overflow-wrap: break-word;
 }
 
 
 /* # Hyphenation */
 
-/* Opt-in via [hyphens]; werkt alleen met een correcte `lang` op de pagina. */
+/* Opt-in through [hyphens]; only works with a correct `lang` on the page. */
 nldd-rich-text[hyphens] :is(p, li, dd) {
 	-webkit-hyphens: auto;
 	hyphens: auto;