@nldd/design-system 0.8.37

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

@@ -0,0 +1,2 @@
+export declare const modalDialogStyles: import("lit").CSSResult;
+//# sourceMappingURL=modal-dialog.styles.d.ts.map

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

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

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

@@ -0,0 +1,99 @@
+import { css, unsafeCSS } from 'lit';
+import { breakpoints } from '../../../assets/styles/breakpoints.js';
+const mdMin = unsafeCSS(breakpoints.mdMin);
+export const modalDialogStyles = css `
+
+
+	/* # Host */
+
+	:host {
+		display: contents;
+		--_max-height: 90vh;
+		--_animation-duration: 150ms;
+		--_animation-easing: ease;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+
+	/* # Block */
+
+	.modal-dialog {
+		border: none;
+		max-width: var(--primitives-area-480);
+		width: calc(100% - var(--primitives-space-16) * 2);
+		max-height: var(--_max-height);
+		overflow-y: auto;
+		background-color: var(--semantics-surfaces-background-color);
+		border-radius: var(--semantics-overlays-corner-radius);
+		box-shadow: var(--semantics-overlays-box-shadow);
+		box-sizing: border-box;
+		outline: none;
+
+		padding: var(--primitives-space-16);
+
+		@media (min-width: ${mdMin}) {
+			padding: var(--primitives-space-24);
+		}
+	}
+
+	.modal-dialog:not([open]) {
+		display: none;
+	}
+
+	.modal-dialog:focus-visible:not(.is-pointer-focus) {
+		box-shadow: var(--semantics-focus-ring-box-shadow), var(--semantics-overlays-box-shadow);
+		outline: var(--semantics-focus-ring-outline);
+		outline-offset: var(--semantics-focus-ring-outline-offset);
+	}
+
+	.modal-dialog::backdrop {
+		background: var(--semantics-overlays-backdrop-color);
+	}
+
+
+	/* # Keyframes */
+
+	@keyframes modal-dialog-in {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes modal-dialog-out {
+		from {
+			opacity: 1;
+			transform: scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+	}
+
+	.modal-dialog[open] {
+		animation: modal-dialog-in var(--_animation-duration) var(--_animation-easing) both;
+	}
+
+	.modal-dialog.is-closing {
+		animation: modal-dialog-out var(--_animation-duration) var(--_animation-easing) both;
+	}
+
+
+	/* # Reduced motion */
+
+	@media (prefers-reduced-motion: reduce) {
+		.modal-dialog[open],
+		.modal-dialog.is-closing {
+			animation: none;
+		}
+	}
+`;
+//# sourceMappingURL=modal-dialog.styles.js.map

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

@@ -0,0 +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;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAiCb,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3B,CAAC"}

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

@@ -0,0 +1,3 @@
+import type { NLDDModalDialog } from './modal-dialog.js';
+export declare function modalDialogTemplate(component: NLDDModalDialog): import("lit-html").TemplateResult<1>;
+//# sourceMappingURL=modal-dialog.template.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal-dialog.template.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,wCAqB7D"}

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

@@ -0,0 +1,25 @@
+/* eslint-disable lit-a11y/click-events-have-key-events -- native dialog handles keyboard via @cancel */
+import { html, nothing } from 'lit';
+export function modalDialogTemplate(component) {
+    return html `
+		<dialog class="modal-dialog"
+			role=${component.variant === 'alert' ? 'alertdialog' : nothing}
+			aria-label=${component.accessibleLabel || component.text || nothing}
+			aria-modal="true"
+			@click=${component._handleBackdropClick}
+			@cancel=${component._handleCancel}
+		>
+			<nldd-inline-dialog
+				variant=${component.variant || nothing}
+				icon=${component.icon || nothing}
+				text=${component.text || nothing}
+				supporting-text=${component.supportingText || nothing}
+				heading-level="2"
+			>
+				<slot></slot>
+				<slot slot="actions" name="actions"></slot>
+			</nldd-inline-dialog>
+		</dialog>
+	`;
+}
+//# sourceMappingURL=modal-dialog.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal-dialog.template.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/modal-dialog/modal-dialog.template.ts"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,OAAO,IAAI,CAAA;;UAEF,SAAS,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;gBACjD,SAAS,CAAC,eAAe,IAAI,SAAS,CAAC,IAAI,IAAI,OAAO;;YAE1D,SAAS,CAAC,oBAAoB;aAC7B,SAAS,CAAC,aAAa;;;cAGtB,SAAS,CAAC,OAAO,IAAI,OAAO;WAC/B,SAAS,CAAC,IAAI,IAAI,OAAO;WACzB,SAAS,CAAC,IAAI,IAAI,OAAO;sBACd,SAAS,CAAC,cAAc,IAAI,OAAO;;;;;;;EAOvD,CAAC;AACH,CAAC"}

package/dist/css/form-section.css

@@ -0,0 +1,118 @@
+/* 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). */
+
+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;
+}
+
+nldd-form-section:last-child {
+	border-bottom: none;
+	padding-bottom: 0;
+}
+
+
+/* # Block (fieldset) — reset native styles */
+
+nldd-form-section > fieldset.form-section {
+	border: none;
+	margin: 0;
+	padding: 0;
+	min-width: 0;
+	display: block;
+	width: 100%;
+}
+
+
+/* # Header (rendered as <legend>, must be direct child of <fieldset>).
+   Title and subtitle are spans inside the legend so screen readers read
+   them together as the group label. */
+
+nldd-form-section .form-section__header {
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	text-align: left;
+}
+
+nldd-form-section .form-section__header[hidden] {
+	display: none;
+}
+
+
+/* # Title */
+
+nldd-form-section .form-section__title {
+	display: block;
+	color: var(--semantics-content-color);
+	font: var(--semantics-forms-section-title-font);
+}
+
+
+/* # Subtitle */
+
+nldd-form-section .form-section__subtitle {
+	display: block;
+	color: var(--semantics-content-secondary-color);
+	font: var(--semantics-forms-section-subtitle-font);
+}
+
+
+/* # 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. */
+
+nldd-form-section > fieldset.form-section > .form-section__main {
+	display: block;
+	margin-top: var(--semantics-forms-gap);
+}
+
+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. */

package/dist/css/form.css

@@ -0,0 +1,48 @@
+/* # Host */
+
+nldd-form {
+	display: block;
+}
+
+nldd-form > form {
+	display: block;
+}
+
+
+/* # Vertical rhythm
+   Use margin-top on adjacent siblings (owl pattern) instead of gap, so the
+   spacing between specific element pairs can be tuned independently.
+
+   Scoped binnen nldd-form. Form-section's eigen children spacing wordt
+   in form-section.css afgehandeld; deze regels zijn voor form's directe
+   children en form-fields anywhere binnen het form. */
+
+nldd-form > form > * + *,
+nldd-form nldd-form-field + nldd-form-field {
+	margin-top: var(--semantics-forms-gap);
+}
+
+
+/* Tighter spacing between consecutive top-aligned form-fields. Top-aligned
+   fields are vertically tall (label stacked above input), so a tight 8px gap
+   feels right between them. Right/left-aligned fields use the default 16px.
+   On sm viewport every form-field collapses to top-alignment (via the
+   form-field's own container query), so 8px applies regardless of attribute.
+
+   640px / 641px = breakpoints.smMax / breakpoints.mdMin (zie
+   src/assets/styles/breakpoints.ts). Light-DOM CSS files kunnen geen TS
+   imports gebruiken, dus de waarde wordt hier gedupliceerd. Houd in sync
+   met breakpoints.ts en met form-field/form-actions container queries. */
+
+@media (max-width: 640px) {
+	nldd-form nldd-form-field + nldd-form-field {
+		margin-top: var(--semantics-forms-gap-tight);
+	}
+}
+
+@media (min-width: 641px) {
+	nldd-form nldd-form-field:not([label-alignment]) + nldd-form-field:not([label-alignment]),
+	nldd-form nldd-form-field[label-alignment='top'] + nldd-form-field[label-alignment='top'] {
+		margin-top: var(--semantics-forms-gap-tight);
+	}
+}

package/dist/css/global.css

@@ -0,0 +1,4 @@
+@import "./settings.css";
+@import "./rich-text.css";
+@import "./form-section.css";
+@import "./form.css";