@dsn-starter-kit/components-react 1.0.0

package/dist/ModalDialog/ModalDialog.css

@@ -0,0 +1,199 @@
+/* ===== Modal Dialog ===== */
+
+/*
+ * dsn-modal-dialog — Modaal dialoogvenster
+ *
+ * Gebaseerd op het native <dialog> element.
+ * Altijd openen via .showModal() (niet .show()) voor:
+ *   - Automatische aria-modal=true semantiek
+ *   - Automatische inert-attribuut op achtergrond
+ *   - Natieve focus-trap
+ *   - ::backdrop pseudo-element
+ *
+ * HTML-structuur:
+ *
+ * <dialog class="dsn-modal-dialog" aria-labelledby="dialog-title">
+ *   <div class="dsn-modal-dialog__header">
+ *     <h2 class="dsn-modal-dialog-heading" id="dialog-title">Titel</h2>
+ *     <button type="button" class="dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only">
+ *       <svg class="dsn-icon" aria-hidden="true"><!-- x --></svg>
+ *       <span class="dsn-button__label">Sluiten</span>
+ *     </button>
+ *   </div>
+ *   <div class="dsn-modal-dialog__body">
+ *     <!-- inhoud -->
+ *   </div>
+ *   <div class="dsn-modal-dialog__footer">
+ *     <div class="dsn-action-group">
+ *       <!-- knoppen -->
+ *     </div>
+ *   </div>
+ * </dialog>
+ */
+
+.dsn-modal-dialog {
+  /* Reset native <dialog> styling */
+  border: var(--dsn-modal-dialog-border-width) solid
+    var(--dsn-modal-dialog-border-color);
+  border-radius: var(--dsn-modal-dialog-border-radius);
+  box-shadow: var(--dsn-modal-dialog-box-shadow);
+  background: var(--dsn-modal-dialog-background-color);
+  padding: 0;
+
+  /* Grootte en positionering */
+  inline-size: min(var(--dsn-modal-dialog-max-width), calc(100svw - 2rem));
+  max-block-size: min(calc(100svh - 4rem), 40rem);
+  margin: auto;
+
+  /* Altijd flex-direction column, ook tijdens sluitanimatie */
+  flex-direction: column;
+
+  /* Animatietransitie (ook voor sluitanimatie) */
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition:
+    opacity var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    transform var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    display var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default) allow-discrete,
+    overlay var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default) allow-discrete;
+}
+
+/*
+ * Flexbox layout alleen bij open staat.
+ * Gebruik [open] zodat de UA-stylesheet's display:none van kracht blijft
+ * wanneer de dialog gesloten is — anders overschrijft display:flex de UA.
+ */
+.dsn-modal-dialog[open] {
+  display: flex;
+}
+
+/* Openingsanimatie: startwaarden voor de [open] staat */
+@starting-style {
+  .dsn-modal-dialog[open] {
+    opacity: 0;
+    transform: translateY(-0.5rem) scale(0.98);
+  }
+}
+
+/* Animatie uitschakelen bij prefers-reduced-motion */
+@media (prefers-reduced-motion: reduce) {
+  .dsn-modal-dialog {
+    transition: none;
+  }
+}
+
+/* Native backdrop van het dialog element */
+.dsn-modal-dialog::backdrop {
+  background: var(--dsn-backdrop-background, rgba(0, 0, 0, 0.5));
+  backdrop-filter: var(--dsn-backdrop-blur, blur(2px));
+  opacity: 1;
+  transition:
+    opacity var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    display var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default) allow-discrete,
+    overlay var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default) allow-discrete;
+}
+
+@starting-style {
+  .dsn-modal-dialog[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsn-modal-dialog::backdrop {
+    transition: none;
+  }
+}
+
+/* ===== Header ===== */
+
+.dsn-modal-dialog__header {
+  display: flex;
+  align-items: center;
+  gap: var(--dsn-space-inline-xl);
+  flex-shrink: 0;
+
+  padding-block-start: var(--dsn-modal-dialog-header-padding-block-start);
+  padding-block-end: var(--dsn-modal-dialog-header-padding-block-end);
+  padding-inline: var(--dsn-modal-dialog-header-padding-inline);
+
+  /* Scheidingslijn onder de header */
+  border-block-end: var(--dsn-modal-dialog-border-width) solid
+    var(--dsn-modal-dialog-border-color);
+}
+
+/* ===== Heading ===== */
+
+.dsn-modal-dialog-heading {
+  flex: 1;
+  margin: 0;
+
+  font-family: var(--dsn-modal-dialog-heading-font-family);
+  font-weight: var(--dsn-modal-dialog-heading-font-weight);
+  font-size: var(--dsn-modal-dialog-heading-font-size);
+  line-height: var(--dsn-modal-dialog-heading-line-height);
+  color: var(--dsn-modal-dialog-heading-color);
+}
+
+/* ===== Body met scroll-affordance ===== */
+/*
+ * Scroll-affordance schaduw (Lea Verou techniek — verticale variant):
+ * - Dekkende overlagen (background-attachment: local) scrollen mee met de content
+ *   en verbergen de schaduwen wanneer je aan het begin of einde bent.
+ * - Schaduw-overlagen (background-attachment: scroll) blijven gefixeerd.
+ * - Resultaat: schaduw is zichtbaar zodra er content is om naartoe te scrollen.
+ *
+ * ⚠️ Vereist dat de achtergrondkleur overeenkomt met de dialoogachtergrond.
+ */
+
+.dsn-modal-dialog__body {
+  --_bg: var(--dsn-modal-dialog-background-color);
+  --_shadow: var(--dsn-color-shadow-scroll, rgba(0, 0, 0, 0.12));
+
+  flex: 1;
+  overflow-y: auto;
+
+  padding-block: var(--dsn-modal-dialog-body-padding-block);
+  padding-inline: var(--dsn-modal-dialog-body-padding-inline);
+
+  background-color: var(--_bg);
+  background-image:
+    /* Top-cover (local): verbergt de bovenschaduw als je helemaal boven bent */
+    linear-gradient(to bottom, var(--_bg) 0%, transparent 100%),
+    /* Onder-cover (local): verbergt de onderschaduw als je helemaal onder bent */
+    linear-gradient(to top, var(--_bg) 0%, transparent 100%),
+    /* Bovenschaduw (scroll): altijd aanwezig */
+    linear-gradient(to bottom, var(--_shadow) 0%, transparent 100%),
+    /* Onderschaduw (scroll): altijd aanwezig */
+    linear-gradient(to top, var(--_shadow) 0%, transparent 100%);
+  background-repeat: no-repeat;
+  background-size:
+    100% 4rem,
+    100% 4rem,
+    100% 2rem,
+    100% 2rem;
+  background-position: top, bottom, top, bottom;
+  background-attachment: local, local, scroll, scroll;
+}
+
+/* ===== Footer ===== */
+
+.dsn-modal-dialog__footer {
+  flex-shrink: 0;
+
+  padding-block-start: var(--dsn-modal-dialog-footer-padding-block-start);
+  padding-block-end: var(--dsn-modal-dialog-footer-padding-block-end);
+  padding-inline: var(--dsn-modal-dialog-footer-padding-inline);
+
+  /* Scheidingslijn boven de footer */
+  border-block-start: var(--dsn-modal-dialog-border-width) solid
+    var(--dsn-modal-dialog-border-color);
+}
+

package/dist/ModalDialog/ModalDialog.d.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+import './ModalDialog.css';
+export interface ModalDialogProps extends Omit<React.HTMLAttributes<HTMLDialogElement>, 'children'> {
+    /**
+     * Bepaalt of het dialoogvenster getoond wordt.
+     * Het dialoogvenster wordt via `.showModal()` geopend — nooit via `.show()`.
+     */
+    isOpen: boolean;
+    /**
+     * Callback die wordt aangeroepen wanneer het dialoogvenster sluit
+     * (sluitknop, Escape-toets of klik buiten het venster).
+     */
+    onClose?: () => void;
+    /**
+     * De subcomponenten van het dialoogvenster:
+     * `ModalDialogHeader`, `ModalDialogBody`, `ModalDialogFooter`
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ModalDialog component
+ * Modaal dialoogvenster gebaseerd op het native `<dialog>` element.
+ *
+ * Gebruik altijd `.showModal()` (intern afgehandeld via `isOpen` prop) — nooit `.show()`.
+ * Dit garandeert natieve focus-trap, aria-modal semantiek en inert-attribuut op de achtergrond.
+ *
+ * @example
+ * ```tsx
+ * <ModalDialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <ModalDialogHeader>
+ *     <ModalDialogHeading>Bevestig verwijderen</ModalDialogHeading>
+ *   </ModalDialogHeader>
+ *   <ModalDialogBody>
+ *     <Paragraph>Weet u zeker dat u dit item wilt verwijderen?</Paragraph>
+ *   </ModalDialogBody>
+ *   <ModalDialogFooter>
+ *     <ActionGroup>
+ *       <Button variant="negative" onClick={() => setIsOpen(false)}>Verwijderen</Button>
+ *       <Button variant="default" onClick={() => setIsOpen(false)}>Annuleren</Button>
+ *     </ActionGroup>
+ *   </ModalDialogFooter>
+ * </ModalDialog>
+ * ```
+ */
+export declare const ModalDialog: React.ForwardRefExoticComponent<ModalDialogProps & React.RefAttributes<HTMLDialogElement>>;
+export interface ModalDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Inhoud van de header — doorgaans een `ModalDialogHeading`
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ModalDialogHeader
+ * De headerstrook van het dialoogvenster met heading en sluitknop.
+ */
+export declare const ModalDialogHeader: React.ForwardRefExoticComponent<ModalDialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface ModalDialogHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Semantisch heading-niveau. Kies op basis van documenthiërarchie, niet visuele grootte.
+     * @default 2
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * De zichtbare heading-tekst
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ModalDialogHeading
+ * De heading van het dialoogvenster. ID wordt automatisch gegenereerd voor aria-labelledby.
+ */
+export declare const ModalDialogHeading: React.ForwardRefExoticComponent<ModalDialogHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface ModalDialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * De hoofdinhoud van het dialoogvenster
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ModalDialogBody
+ * De scrollbare inhoudssectie van het dialoogvenster met scroll-affordance schaduw.
+ */
+export declare const ModalDialogBody: React.ForwardRefExoticComponent<ModalDialogBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface ModalDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * De acties van het dialoogvenster — doorgaans een `ActionGroup` met knoppen
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ModalDialogFooter
+ * De voettekst van het dialoogvenster met actieknoppen.
+ */
+export declare const ModalDialogFooter: React.ForwardRefExoticComponent<ModalDialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ModalDialog.d.ts.map

package/dist/ModalDialog/ModalDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalDialog.d.ts","sourceRoot":"","sources":["../../src/ModalDialog/ModalDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,mBAAmB,CAAC;AAmB3B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC,UAAU,CACX;IACC;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,WAAW,4FAuCtB,CAAC;AAQH,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,+FAwB5B,CAAC;AAQH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IACvF;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,oGAiB7B,CAAC;AAQH,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,6FAa1B,CAAC;AAQH,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,+FAa5B,CAAC"}

package/dist/ModalDialog/ModalDialog.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import './ModalDialog.css';
+const ModalDialogContext = React.createContext({
+    headingId: '',
+});
+/**
+ * ModalDialog component
+ * Modaal dialoogvenster gebaseerd op het native `<dialog>` element.
+ *
+ * Gebruik altijd `.showModal()` (intern afgehandeld via `isOpen` prop) — nooit `.show()`.
+ * Dit garandeert natieve focus-trap, aria-modal semantiek en inert-attribuut op de achtergrond.
+ *
+ * @example
+ * ```tsx
+ * <ModalDialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <ModalDialogHeader>
+ *     <ModalDialogHeading>Bevestig verwijderen</ModalDialogHeading>
+ *   </ModalDialogHeader>
+ *   <ModalDialogBody>
+ *     <Paragraph>Weet u zeker dat u dit item wilt verwijderen?</Paragraph>
+ *   </ModalDialogBody>
+ *   <ModalDialogFooter>
+ *     <ActionGroup>
+ *       <Button variant="negative" onClick={() => setIsOpen(false)}>Verwijderen</Button>
+ *       <Button variant="default" onClick={() => setIsOpen(false)}>Annuleren</Button>
+ *     </ActionGroup>
+ *   </ModalDialogFooter>
+ * </ModalDialog>
+ * ```
+ */
+export const ModalDialog = React.forwardRef(({ className, isOpen, onClose, children, ...props }, ref) => {
+    const internalRef = React.useRef(null);
+    const dialogRef = ref ?? internalRef;
+    const headingId = React.useId();
+    React.useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (isOpen && !dialog.open) {
+            dialog.showModal();
+        }
+        else if (!isOpen && dialog.open) {
+            dialog.close();
+        }
+    }, [isOpen, dialogRef]);
+    const handleCancel = (event) => {
+        event.preventDefault();
+        onClose?.();
+    };
+    const classes = classNames('dsn-modal-dialog', className);
+    return (_jsx(ModalDialogContext.Provider, { value: { headingId, onClose }, children: _jsx("dialog", { ref: dialogRef, className: classes, "aria-labelledby": headingId, onCancel: handleCancel, ...props, children: children }) }));
+});
+ModalDialog.displayName = 'ModalDialog';
+/**
+ * ModalDialogHeader
+ * De headerstrook van het dialoogvenster met heading en sluitknop.
+ */
+export const ModalDialogHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { onClose } = React.useContext(ModalDialogContext);
+    return (_jsxs("div", { ref: ref, className: classNames('dsn-modal-dialog__header', className), ...props, children: [children, _jsx(Button, { variant: "subtle", size: "small", iconOnly: true, onClick: onClose, iconStart: _jsx(Icon, { name: "x", "aria-hidden": true }), children: "Sluiten" })] }));
+});
+ModalDialogHeader.displayName = 'ModalDialogHeader';
+/**
+ * ModalDialogHeading
+ * De heading van het dialoogvenster. ID wordt automatisch gegenereerd voor aria-labelledby.
+ */
+export const ModalDialogHeading = React.forwardRef(({ className, level = 2, children, ...props }, ref) => {
+    const { headingId } = React.useContext(ModalDialogContext);
+    const Tag = `h${level}`;
+    return (_jsx(Tag, { ref: ref, id: headingId, className: classNames('dsn-modal-dialog-heading', className), ...props, children: children }));
+});
+ModalDialogHeading.displayName = 'ModalDialogHeading';
+/**
+ * ModalDialogBody
+ * De scrollbare inhoudssectie van het dialoogvenster met scroll-affordance schaduw.
+ */
+export const ModalDialogBody = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: classNames('dsn-modal-dialog__body', className), ...props, children: children }));
+});
+ModalDialogBody.displayName = 'ModalDialogBody';
+/**
+ * ModalDialogFooter
+ * De voettekst van het dialoogvenster met actieknoppen.
+ */
+export const ModalDialogFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: classNames('dsn-modal-dialog__footer', className), ...props, children: children }));
+});
+ModalDialogFooter.displayName = 'ModalDialogFooter';
+//# sourceMappingURL=ModalDialog.js.map

package/dist/ModalDialog/ModalDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalDialog.js","sourceRoot":"","sources":["../../src/ModalDialog/ModalDialog.tsx"],"names":[],"mappings":"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"}

package/dist/ModalDialog/index.d.ts

@@ -0,0 +1,3 @@
+export { ModalDialog, ModalDialogHeader, ModalDialogHeading, ModalDialogBody, ModalDialogFooter, } from './ModalDialog';
+export type { ModalDialogProps, ModalDialogHeaderProps, ModalDialogHeadingProps, ModalDialogBodyProps, ModalDialogFooterProps, } from './ModalDialog';
+//# sourceMappingURL=index.d.ts.map

package/dist/ModalDialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ModalDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,EACvB,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,eAAe,CAAC"}

package/dist/ModalDialog/index.js

@@ -0,0 +1,2 @@
+export { ModalDialog, ModalDialogHeader, ModalDialogHeading, ModalDialogBody, ModalDialogFooter, } from './ModalDialog';
+//# sourceMappingURL=index.js.map

package/dist/ModalDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ModalDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,iBAAiB,GAClB,MAAM,eAAe,CAAC"}

package/dist/Note/Note.css

@@ -0,0 +1,169 @@
+/**
+ * Note component styles for React
+ * Re-exports the base Note styles from components-html
+ */
+
+/**
+ * Note Component
+ * Visually highlighted message for supplementary or important information.
+ * Passive counterpart to Alert — no live region, read on navigation only.
+ *
+ * Usage:
+ * <!-- Neutral (default), with icon and heading -->
+ * <div class="dsn-note">
+ *   <span class="dsn-note__icon" aria-hidden="true">
+ *     <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
+ *   </span>
+ *   <strong class="dsn-heading dsn-heading--3 dsn-note__heading">Let op</strong>
+ *   <div class="dsn-note__content">
+ *     <p>Aanvullende informatie over dit onderwerp.</p>
+ *   </div>
+ * </div>
+ *
+ * <!-- Info variant -->
+ * <div class="dsn-note dsn-note--info">
+ *   <span class="dsn-note__icon" aria-hidden="true">
+ *     <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
+ *   </span>
+ *   <strong class="dsn-heading dsn-heading--3 dsn-note__heading">Informatie</strong>
+ *   <div class="dsn-note__content">
+ *     <p>Body content.</p>
+ *   </div>
+ * </div>
+ *
+ * <!-- Without heading — icon spans both rows -->
+ * <div class="dsn-note dsn-note--no-heading">
+ *   <span class="dsn-note__icon" aria-hidden="true">
+ *     <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
+ *   </span>
+ *   <div class="dsn-note__content">
+ *     <p>Aanvullende informatie.</p>
+ *   </div>
+ * </div>
+ *
+ * <!-- as="aside" — supplementary content -->
+ * <aside class="dsn-note dsn-note--info">
+ *   ...
+ * </aside>
+ *
+ * <!-- as="nav" — table of contents -->
+ * <nav class="dsn-note" aria-labelledby="note-heading-id">
+ *   <span class="dsn-note__icon" aria-hidden="true">
+ *     <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
+ *   </span>
+ *   <strong class="dsn-heading dsn-heading--3 dsn-note__heading" id="note-heading-id">Op deze pagina</strong>
+ *   <nav class="dsn-note__content">
+ *     <ul>...</ul>
+ *   </nav>
+ * </nav>
+ */
+
+/* ===========================
+   Local color tokens (neutral = default)
+   =========================== */
+.dsn-note {
+  --dsn-note-icon-color: var(--dsn-note-neutral-icon-color);
+  --dsn-note-color: var(--dsn-note-neutral-color);
+  --dsn-note-background-color: var(--dsn-note-neutral-background-color);
+  --dsn-note-border-inline-start-color: var(
+    --dsn-note-neutral-border-inline-start-color
+  );
+}
+
+.dsn-note--info {
+  --dsn-note-icon-color: var(--dsn-note-info-icon-color);
+  --dsn-note-color: var(--dsn-note-info-color);
+  --dsn-note-background-color: var(--dsn-note-info-background-color);
+  --dsn-note-border-inline-start-color: var(
+    --dsn-note-info-border-inline-start-color
+  );
+}
+
+.dsn-note--positive {
+  --dsn-note-icon-color: var(--dsn-note-positive-icon-color);
+  --dsn-note-color: var(--dsn-note-positive-color);
+  --dsn-note-background-color: var(--dsn-note-positive-background-color);
+  --dsn-note-border-inline-start-color: var(
+    --dsn-note-positive-border-inline-start-color
+  );
+}
+
+.dsn-note--negative {
+  --dsn-note-icon-color: var(--dsn-note-negative-icon-color);
+  --dsn-note-color: var(--dsn-note-negative-color);
+  --dsn-note-background-color: var(--dsn-note-negative-background-color);
+  --dsn-note-border-inline-start-color: var(
+    --dsn-note-negative-border-inline-start-color
+  );
+}
+
+.dsn-note--warning {
+  --dsn-note-icon-color: var(--dsn-note-warning-icon-color);
+  --dsn-note-color: var(--dsn-note-warning-color);
+  --dsn-note-background-color: var(--dsn-note-warning-background-color);
+  --dsn-note-border-inline-start-color: var(
+    --dsn-note-warning-border-inline-start-color
+  );
+}
+
+/* ===========================
+   Base layout
+   =========================== */
+.dsn-note {
+  display: grid;
+  grid-template-columns: var(--dsn-note-icon-size) 1fr;
+  column-gap: var(--dsn-note-column-gap);
+  row-gap: var(--dsn-note-row-gap);
+  padding-block: var(--dsn-note-padding-block);
+  padding-inline-start: var(--dsn-note-padding-inline-start);
+  padding-inline-end: var(--dsn-note-padding-inline-end);
+  border-inline-start: var(--dsn-note-border-inline-start-width) solid
+    var(--dsn-note-border-inline-start-color);
+  background-color: var(--dsn-note-background-color);
+  color: var(--dsn-note-color);
+}
+
+/* ===========================
+   Icon
+   =========================== */
+.dsn-note__icon {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+  flex-shrink: 0;
+  width: var(--dsn-note-icon-size);
+  height: var(--dsn-note-icon-size);
+  color: var(--dsn-note-icon-color);
+}
+
+/* ===========================
+   Heading
+   =========================== */
+.dsn-note__heading {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: center;
+  margin-block-end: 0;
+}
+
+/* ===========================
+   Content
+   =========================== */
+.dsn-note__content {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+/* ===========================
+   No-heading modifier — icon spans both rows, content moves to row 1
+   =========================== */
+.dsn-note--no-heading .dsn-note__icon {
+  grid-row: 1 / span 2;
+  align-self: start;
+  margin-block-start: var(--dsn-space-block-xs);
+}
+
+.dsn-note--no-heading .dsn-note__content {
+  grid-row: 1;
+}
+

package/dist/Note/Note.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+import './Note.css';
+export type NoteVariant = 'neutral' | 'info' | 'positive' | 'negative' | 'warning';
+export type NoteAs = 'div' | 'aside' | 'nav' | 'section';
+export interface NoteProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * HTML-element — ontkoppelt semantiek van visuele stijl
+     * @default 'div'
+     */
+    as?: NoteAs;
+    /**
+     * Semantische variant die de signaalkleur bepaalt
+     * @default 'neutral'
+     */
+    variant?: NoteVariant;
+    /**
+     * Optionele heading-tekst (renders als `<Heading appearance="heading-3">`)
+     */
+    heading?: string;
+    /**
+     * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)
+     * @default 3
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Icoon vóór de heading.
+     * - `undefined` (default) — aanbevolen icoon per variant
+     * - `null` — geen icoon
+     * - `ReactNode` — aangepast icoon
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Body-content: tekst, lijst, links, etc.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Note component
+ * Visueel uitgelicht bericht voor aanvullende of belangrijke informatie.
+ * Passieve tegenhanger van Alert — geen live region, wordt alleen voorgelezen bij navigatie.
+ *
+ * @example
+ * ```tsx
+ * // Neutral (default), inline tip
+ * <Note heading="Let op">
+ *   <Paragraph>Aanvullende informatie over dit onderwerp.</Paragraph>
+ * </Note>
+ *
+ * // Info variant
+ * <Note variant="info" heading="Wist je dat...">
+ *   <Paragraph>Extra context.</Paragraph>
+ * </Note>
+ *
+ * // Zonder heading — icoon overspant beide rijen
+ * <Note variant="warning">
+ *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
+ * </Note>
+ *
+ * // as="aside" — echt aanvullende content
+ * <Note as="aside" variant="info" heading="Achtergrondinformatie">
+ *   <Paragraph>Meer context.</Paragraph>
+ * </Note>
+ *
+ * // as="nav" — inhoudsopgave
+ * <Note as="nav" variant="neutral" heading="Op deze pagina" headingLevel={2}>
+ *   <UnorderedList>
+ *     <li><Link href="#sectie-1">Sectie 1</Link></li>
+ *   </UnorderedList>
+ * </Note>
+ *
+ * // Icoon weglaten
+ * <Note variant="info" heading="Opmerking" iconStart={null}>
+ *   <Paragraph>Zonder icoon.</Paragraph>
+ * </Note>
+ * ```
+ */
+export declare const Note: React.ForwardRefExoticComponent<NoteProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Note.d.ts.map

package/dist/Note/Note.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.d.ts","sourceRoot":"","sources":["../../src/Note/Note.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAIrC,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,MAAM,GACN,UAAU,GACV,UAAU,GACV,SAAS,CAAC;AACd,MAAM,MAAM,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;AAUzD,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAClE;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,IAAI,+EAqEhB,CAAC"}