@dsn-starter-kit/components-react 1.0.1 → 2.0.0

package/dist/Note/Note.css

@@ -8,34 +8,42 @@
  * Visually highlighted message for supplementary or important information.
  * Passive counterpart to Alert — no live region, read on navigation only.
  *
+ * The icon is decorative (aria-hidden); the non-neutral variants (info,
+ * positive, negative, warning) carry a visually hidden variant label that
+ * announces the variant to screen reader users: "Informatie: " / "Succes: " /
+ * "Foutmelding: " / "Let op: ". With a heading the label is the first child of
+ * the heading; without a heading it is a standalone span before the content.
+ * Neutral has no label: that variant deliberately carries no semantic signal.
+ *
  * Usage:
- * <!-- Neutral (default), with icon and heading -->
+ * <!-- Neutral (default), with icon and heading — no variant label -->
  * <div class="dsn-note">
  *   <span class="dsn-note__icon" aria-hidden="true">
- *     <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
+ *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
  *   </span>
- *   <strong class="dsn-heading dsn-heading--3 dsn-note__heading">Let op</strong>
+ *   <h3 class="dsn-heading dsn-heading--heading-3 dsn-note__heading">Let op</h3>
  *   <div class="dsn-note__content">
  *     <p>Aanvullende informatie over dit onderwerp.</p>
  *   </div>
  * </div>
  *
- * <!-- Info variant -->
+ * <!-- Info variant, with visually hidden variant label -->
  * <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>
+ *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
  *   </span>
- *   <strong class="dsn-heading dsn-heading--3 dsn-note__heading">Informatie</strong>
+ *   <h3 class="dsn-heading dsn-heading--heading-3 dsn-note__heading"><span class="dsn-visually-hidden">Informatie: </span>Heading</h3>
  *   <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">
+ * <!-- Without heading — icon spans both rows, variant label as standalone span -->
+ * <div class="dsn-note dsn-note--warning dsn-note--no-heading">
  *   <span class="dsn-note__icon" aria-hidden="true">
- *     <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
+ *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- alert-triangle --></svg>
  *   </span>
+ *   <span class="dsn-visually-hidden">Let op: </span>
  *   <div class="dsn-note__content">
  *     <p>Aanvullende informatie.</p>
  *   </div>
@@ -46,15 +54,15 @@
  *   ...
  * </aside>
  *
- * <!-- as="nav" — table of contents -->
+ * <!-- as="nav" — standalone navigation section (not a page table of contents: use TableOfContents) -->
  * <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>
+ *     <svg class="dsn-icon dsn-icon--xl" 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">
+ *   <h3 class="dsn-heading dsn-heading--heading-3 dsn-note__heading" id="note-heading-id">Related pages</h3>
+ *   <div class="dsn-note__content">
  *     <ul>...</ul>
- *   </nav>
+ *   </div>
  * </nav>
  */
 

package/dist/Note/Note.d.ts

@@ -29,6 +29,16 @@ export interface NoteProps extends React.HTMLAttributes<HTMLElement> {
      * - `ReactNode` — aangepast icoon
      */
     iconStart?: React.ReactNode;
+    /**
+     * Visueel verborgen tekst die de variant benoemt voor screenreadergebruikers
+     * (inclusief scheidingsteken en spatie). Komt vóór de heading, of vóór de
+     * content als er geen heading is.
+     * - `undefined` (default) — standaardtekst per variant:
+     *   `''` (neutral) / `'Informatie: '` / `'Succes: '` / `'Foutmelding: '` / `'Let op: '`
+     * - `''` — geen variant-label (bijv. als de heading de variant al benoemt)
+     * - `string` — eigen tekst, bijv. voor een andere taal
+     */
+    variantLabel?: string;
     /**
      * Body-content: tekst, lijst, links, etc.
      */
@@ -61,10 +71,10 @@ export interface NoteProps extends React.HTMLAttributes<HTMLElement> {
  *   <Paragraph>Meer context.</Paragraph>
  * </Note>
  *
- * // as="nav" — inhoudsopgave
- * <Note as="nav" variant="neutral" heading="Op deze pagina" headingLevel={2}>
+ * // as="nav" — eigenstandige navigatiesectie (niet voor een pagina-inhoudsopgave: gebruik TableOfContents)
+ * <Note as="nav" variant="neutral" heading="Gerelateerde pagina's" headingLevel={2}>
  *   <UnorderedList>
- *     <li><Link href="#sectie-1">Sectie 1</Link></li>
+ *     <li><Link href="/gerelateerd-1">Gerelateerde pagina 1</Link></li>
  *   </UnorderedList>
  * </Note>
  *
@@ -72,6 +82,11 @@ export interface NoteProps extends React.HTMLAttributes<HTMLElement> {
  * <Note variant="info" heading="Opmerking" iconStart={null}>
  *   <Paragraph>Zonder icoon.</Paragraph>
  * </Note>
+ *
+ * // Variant-label onderdrukken (heading benoemt de variant al)
+ * <Note variant="warning" heading="Waarschuwing" variantLabel="">
+ *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
+ * </Note>
  * ```
  */
 export declare const Note: React.ForwardRefExoticComponent<NoteProps & React.RefAttributes<HTMLElement>>;

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

@@ -1 +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"}
+{"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;AAkBzD,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;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,IAAI,+EA+EhB,CAAC"}

package/dist/Note/Note.js

@@ -11,6 +11,13 @@ const PREFERRED_ICONS = {
     negative: 'exclamation-circle',
     warning: 'alert-triangle',
 };
+const VARIANT_LABELS = {
+    neutral: '',
+    info: 'Informatie: ',
+    positive: 'Succes: ',
+    negative: 'Foutmelding: ',
+    warning: 'Let op: ',
+};
 /**
  * Note component
  * Visueel uitgelicht bericht voor aanvullende of belangrijke informatie.
@@ -38,10 +45,10 @@ const PREFERRED_ICONS = {
  *   <Paragraph>Meer context.</Paragraph>
  * </Note>
  *
- * // as="nav" — inhoudsopgave
- * <Note as="nav" variant="neutral" heading="Op deze pagina" headingLevel={2}>
+ * // as="nav" — eigenstandige navigatiesectie (niet voor een pagina-inhoudsopgave: gebruik TableOfContents)
+ * <Note as="nav" variant="neutral" heading="Gerelateerde pagina's" headingLevel={2}>
  *   <UnorderedList>
- *     <li><Link href="#sectie-1">Sectie 1</Link></li>
+ *     <li><Link href="/gerelateerd-1">Gerelateerde pagina 1</Link></li>
  *   </UnorderedList>
  * </Note>
  *
@@ -49,12 +56,18 @@ const PREFERRED_ICONS = {
  * <Note variant="info" heading="Opmerking" iconStart={null}>
  *   <Paragraph>Zonder icoon.</Paragraph>
  * </Note>
+ *
+ * // Variant-label onderdrukken (heading benoemt de variant al)
+ * <Note variant="warning" heading="Waarschuwing" variantLabel="">
+ *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
+ * </Note>
  * ```
  */
-export const Note = React.forwardRef(({ as: As = 'div', className, variant = 'neutral', heading, headingLevel = 3, iconStart, children, ...props }, ref) => {
+export const Note = React.forwardRef(({ as: As = 'div', className, variant = 'neutral', heading, headingLevel = 3, iconStart, variantLabel, children, ...props }, ref) => {
     const headingId = useId();
     const noIcon = iconStart === null;
     const noHeading = !heading;
+    const resolvedVariantLabel = variantLabel ?? VARIANT_LABELS[variant];
     const resolvedIcon = iconStart === undefined ? (_jsx(Icon, { name: PREFERRED_ICONS[variant], size: "xl", "aria-hidden": true })) : (iconStart);
     const classes = classNames('dsn-note', variant !== 'neutral' && `dsn-note--${variant}`, noHeading && 'dsn-note--no-heading', className);
     // For landmark elements with a heading, add aria-labelledby automatically
@@ -62,7 +75,7 @@ export const Note = React.forwardRef(({ as: As = 'div', className, variant = 'ne
     const labelledBy = isLandmark && heading && !props['aria-label'] && !props['aria-labelledby']
         ? headingId
         : undefined;
-    return (_jsxs(As, { ref: ref, className: classes, "aria-labelledby": labelledBy, ...props, children: [!noIcon && (_jsx("span", { className: "dsn-note__icon", "aria-hidden": true, children: resolvedIcon })), heading && (_jsx(Heading, { level: headingLevel, appearance: "heading-3", className: "dsn-note__heading", id: isLandmark ? headingId : undefined, children: heading })), children && _jsx("div", { className: "dsn-note__content", children: children })] }));
+    return (_jsxs(As, { ref: ref, className: classes, "aria-labelledby": labelledBy, ...props, children: [!noIcon && (_jsx("span", { className: "dsn-note__icon", "aria-hidden": true, children: resolvedIcon })), heading && (_jsxs(Heading, { level: headingLevel, appearance: "heading-3", className: "dsn-note__heading", id: isLandmark ? headingId : undefined, children: [resolvedVariantLabel && (_jsx("span", { className: "dsn-visually-hidden", children: resolvedVariantLabel })), heading] })), noHeading && resolvedVariantLabel && (_jsx("span", { className: "dsn-visually-hidden", children: resolvedVariantLabel })), children && _jsx("div", { className: "dsn-note__content", children: children })] }));
 });
 Note.displayName = 'Note';
 //# sourceMappingURL=Note.js.map

package/dist/Note/Note.js.map

@@ -1 +1 @@
-{"version":3,"file":"Note.js","sourceRoot":"","sources":["../../src/Note/Note.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,YAAY,CAAC;AAUpB,MAAM,eAAe,GAAgC;IACnD,OAAO,EAAE,aAAa;IACtB,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,cAAc;IACxB,QAAQ,EAAE,oBAAoB;IAC9B,OAAO,EAAE,gBAAgB;CAC1B,CAAC;AAwCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,EAAE,EAAE,EAAE,GAAG,KAAK,EACd,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClC,MAAM,SAAS,GAAG,CAAC,OAAO,CAAC;IAE3B,MAAM,YAAY,GAChB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,KAAC,IAAI,IACH,IAAI,EAAE,eAAe,CAAC,OAAO,CAAuC,EACpE,IAAI,EAAC,IAAI,wBAET,CACH,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;IAEJ,MAAM,OAAO,GAAG,UAAU,CACxB,UAAU,EACV,OAAO,KAAK,SAAS,IAAI,aAAa,OAAO,EAAE,EAC/C,SAAS,IAAI,sBAAsB,EACnC,SAAS,CACV,CAAC;IAEF,0EAA0E;IAC1E,MAAM,UAAU,GAAG,EAAE,KAAK,KAAK,IAAI,EAAE,KAAK,OAAO,IAAI,EAAE,KAAK,SAAS,CAAC;IACtE,MAAM,UAAU,GACd,UAAU,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;QACxE,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,MAAC,EAAE,IACD,GAAG,EAAE,GAAgC,EACrC,SAAS,EAAE,OAAO,qBACD,UAAU,KACvB,KAAK,aAER,CAAC,MAAM,IAAI,CACV,eAAM,SAAS,EAAC,gBAAgB,iCAC7B,YAAY,GACR,CACR,EACA,OAAO,IAAI,CACV,KAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,UAAU,EAAC,WAAW,EACtB,SAAS,EAAC,mBAAmB,EAC7B,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,YAErC,OAAO,GACA,CACX,EACA,QAAQ,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,IAC7D,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
+{"version":3,"file":"Note.js","sourceRoot":"","sources":["../../src/Note/Note.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,YAAY,CAAC;AAUpB,MAAM,eAAe,GAAgC;IACnD,OAAO,EAAE,aAAa;IACtB,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,cAAc;IACxB,QAAQ,EAAE,oBAAoB;IAC9B,OAAO,EAAE,gBAAgB;CAC1B,CAAC;AAEF,MAAM,cAAc,GAAgC;IAClD,OAAO,EAAE,EAAE;IACX,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,UAAU;CACpB,CAAC;AAmDF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,EAAE,EAAE,EAAE,GAAG,KAAK,EACd,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClC,MAAM,SAAS,GAAG,CAAC,OAAO,CAAC;IAC3B,MAAM,oBAAoB,GAAG,YAAY,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;IAErE,MAAM,YAAY,GAChB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,KAAC,IAAI,IACH,IAAI,EAAE,eAAe,CAAC,OAAO,CAAuC,EACpE,IAAI,EAAC,IAAI,wBAET,CACH,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;IAEJ,MAAM,OAAO,GAAG,UAAU,CACxB,UAAU,EACV,OAAO,KAAK,SAAS,IAAI,aAAa,OAAO,EAAE,EAC/C,SAAS,IAAI,sBAAsB,EACnC,SAAS,CACV,CAAC;IAEF,0EAA0E;IAC1E,MAAM,UAAU,GAAG,EAAE,KAAK,KAAK,IAAI,EAAE,KAAK,OAAO,IAAI,EAAE,KAAK,SAAS,CAAC;IACtE,MAAM,UAAU,GACd,UAAU,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;QACxE,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,MAAC,EAAE,IACD,GAAG,EAAE,GAAgC,EACrC,SAAS,EAAE,OAAO,qBACD,UAAU,KACvB,KAAK,aAER,CAAC,MAAM,IAAI,CACV,eAAM,SAAS,EAAC,gBAAgB,iCAC7B,YAAY,GACR,CACR,EACA,OAAO,IAAI,CACV,MAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,UAAU,EAAC,WAAW,EACtB,SAAS,EAAC,mBAAmB,EAC7B,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,aAErC,oBAAoB,IAAI,CACvB,eAAM,SAAS,EAAC,qBAAqB,YAClC,oBAAoB,GAChB,CACR,EACA,OAAO,IACA,CACX,EACA,SAAS,IAAI,oBAAoB,IAAI,CACpC,eAAM,SAAS,EAAC,qBAAqB,YAAE,oBAAoB,GAAQ,CACpE,EACA,QAAQ,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,IAC7D,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/PageBody/PageBody.css

@@ -67,3 +67,33 @@
   background-color: transparent;
 }
 
+/* =============================================================================
+   Sidebar layout — Table of Contents kolom (rechts)
+   De ToC-inhoud wordt twee keer gerenderd: één keer inline (onder H1/lead,
+   zichtbaar tot 80em) en één keer als rechterkolom (zichtbaar vanaf 80em).
+   `display: none` sluit de verborgen kopie uit van de accessibility tree,
+   dus er is nooit dubbele content voor schermlezers.
+   ============================================================================= */
+
+.dsn-sidebar-layout__toc-inline {
+  display: block;
+}
+
+.dsn-sidebar-layout__toc {
+  display: none;
+}
+
+@media (min-width: 80em) {
+  .dsn-sidebar-layout__toc-inline {
+    display: none;
+  }
+
+  .dsn-sidebar-layout__toc {
+    display: block;
+    flex-shrink: 0;
+    inline-size: var(--dsn-sidebar-layout-toc-inline-size, 16rem);
+    padding-inline-start: var(--dsn-space-inline-2xl);
+    padding-block: var(--dsn-space-block-3xl);
+  }
+}
+

package/dist/PageFooter/PageFooter.css

@@ -25,7 +25,6 @@
    ============================================================================= */
 
 .dsn-page-footer {
-  --dsn-grid-margin: 0;
   background-color: var(--dsn-page-footer-background-color);
   border-block-start: var(--dsn-page-footer-border-block-start-width) solid
     var(--dsn-page-footer-border-block-start-color);

package/dist/PageHeader/PageHeader.css

@@ -78,6 +78,19 @@
   }
 }
 
+/* =============================================================================
+   Forced colors (High Contrast mode)
+   Default variant mist op large viewport een border-block-end (navbar neemt de
+   visuele scheiding over). In forced-colors mode is die achtergrondkleur niet
+   zichtbaar, dus de border herstellen voor sectieafbakening.
+   ============================================================================= */
+
+@media (forced-colors: active) and (min-width: 64em) {
+  .dsn-page-header:not(.dsn-page-header--compact) {
+    border-block-end: var(--dsn-border-width-thick) solid transparent;
+  }
+}
+
 /* =============================================================================
    Masthead (large viewport) — neutrale achtergrond, logo + servicemenu + zoek
    ============================================================================= */

package/dist/PreHeading/PreHeading.css

@@ -0,0 +1,10 @@
+.dsn-pre-heading {
+  display: block;
+  color: var(--dsn-pre-heading-color);
+  font-family: var(--dsn-pre-heading-font-family);
+  font-size: var(--dsn-pre-heading-font-size);
+  font-weight: var(--dsn-pre-heading-font-weight);
+  line-height: var(--dsn-pre-heading-line-height);
+  margin-block-end: var(--dsn-pre-heading-margin-block-end);
+}
+

package/dist/PreHeading/PreHeading.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './PreHeading.css';
+export interface PreHeadingProps extends React.HTMLAttributes<HTMLSpanElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const PreHeading: React.ForwardRefExoticComponent<PreHeadingProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=PreHeading.d.ts.map

package/dist/PreHeading/PreHeading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreHeading.d.ts","sourceRoot":"","sources":["../../src/PreHeading/PreHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,yFAYtB,CAAC"}

package/dist/PreHeading/PreHeading.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './PreHeading.css';
+export const PreHeading = React.forwardRef(({ children, className, ...props }, ref) => {
+    return (_jsx("span", { ref: ref, className: classNames('dsn-pre-heading', className), ...props, children: children }));
+});
+PreHeading.displayName = 'PreHeading';
+//# sourceMappingURL=PreHeading.js.map

package/dist/PreHeading/PreHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreHeading.js","sourceRoot":"","sources":["../../src/PreHeading/PreHeading.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAO1B,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,KAC/C,KAAK,YAER,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/PreHeading/index.d.ts

@@ -0,0 +1,3 @@
+export { PreHeading } from './PreHeading';
+export type { PreHeadingProps } from './PreHeading';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PreHeading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/PreHeading/index.js

@@ -0,0 +1,2 @@
+export { PreHeading } from './PreHeading';
+//# sourceMappingURL=index.js.map

package/dist/PreHeading/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/PreHeading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/ProgressBar/ProgressBar.css

@@ -82,6 +82,20 @@
   margin-block-start: var(--dsn-progress-bar-gap-footer);
 }
 
+/* Forced colors (High Contrast mode)
+   appearance: none schakelt alle browser-styling uit waardoor track en fill
+   onzichtbaar worden. appearance: auto herstelt de native progress-stijl
+   zodat de browser zijn eigen system colors toepast. */
+@media (forced-colors: active) {
+  .dsn-progress-bar__bar {
+    appearance: auto;
+    block-size: revert;
+    border: revert;
+    border-radius: revert;
+    background-color: revert;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .dsn-progress-bar__bar::-webkit-progress-value,
   .dsn-progress-bar__bar::-moz-progress-bar {

package/dist/ProgressBar/ProgressBar.d.ts

@@ -3,7 +3,7 @@ import './ProgressBar.css';
 export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Visueel verborgen label dat de voortgangsbalk beschrijft voor screenreaders.
-     * Altijd vereist — gekoppeld via <label for> aan het <progress>-element.
+     * Altijd vereist — gekoppeld via `<label for>` aan het `<progress>`-element.
      */
     label: string;
     /**
@@ -20,10 +20,15 @@ export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     description?: React.ReactNode;
     /**
-     * ID voor het <progress>-element en de bijbehorende <label>.
+     * ID voor het `<progress>`-element en de bijbehorende `<label>`.
      * Automatisch gegenereerd via useId() indien weggelaten.
      */
     id?: string;
+    /**
+     * Verbergt het zichtbare percentage-getal. Gebruik dit voor decoratief gebruik
+     * in combinatie met aria-hidden="true" op de component.
+     */
+    hideValue?: boolean;
 }
 /**
  * ProgressBar component

package/dist/ProgressBar/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,WAAW,yFAuCvB,CAAC"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,WAAW,yFAqDvB,CAAC"}

package/dist/ProgressBar/ProgressBar.js

@@ -26,11 +26,11 @@ import './ProgressBar.css';
  * <ProgressBar label="Stap voortgang" value={3} max={7} />
  * ```
  */
-export const ProgressBar = React.forwardRef(({ className, label, value, max = 100, description, id, ...props }, ref) => {
+export const ProgressBar = React.forwardRef(({ className, label, value, max = 100, description, hideValue, id, ...props }, ref) => {
     const generatedId = useId();
     const progressId = id ?? generatedId;
     const percentage = Math.round((value / max) * 100);
-    return (_jsxs("div", { ref: ref, className: classNames('dsn-progress-bar', className), ...props, children: [_jsx("label", { className: "dsn-visually-hidden", htmlFor: progressId, children: label }), _jsx("div", { className: "dsn-progress-bar__header", children: _jsxs("p", { className: "dsn-paragraph dsn-progress-bar__percentage", "aria-hidden": "true", children: [percentage, "%"] }) }), _jsxs("progress", { id: progressId, className: "dsn-progress-bar__bar", value: value, max: max, children: [percentage, "%"] }), description && (_jsx("p", { className: "dsn-paragraph dsn-progress-bar__description", children: description }))] }));
+    return (_jsxs("div", { ref: ref, className: classNames('dsn-progress-bar', className), ...props, children: [_jsx("label", { className: "dsn-visually-hidden", htmlFor: progressId, children: label }), !hideValue && (_jsx("div", { className: "dsn-progress-bar__header", children: _jsxs("p", { className: "dsn-paragraph dsn-progress-bar__percentage", "aria-hidden": "true", children: [percentage, "%"] }) })), _jsxs("progress", { id: progressId, className: "dsn-progress-bar__bar", value: value, max: max, children: [percentage, "%"] }), description && (_jsx("p", { className: "dsn-paragraph dsn-progress-bar__description", children: description }))] }));
 });
 ProgressBar.displayName = 'ProgressBar';
 //# sourceMappingURL=ProgressBar.js.map

package/dist/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAgC3B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,UAAU,GAAG,EAAE,IAAI,WAAW,CAAC;IACrC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,KAChD,KAAK,aAET,gBAAO,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,UAAU,YACvD,KAAK,GACA,EACR,cAAK,SAAS,EAAC,0BAA0B,YACvC,aACE,SAAS,EAAC,4CAA4C,iBAC1C,MAAM,aAEjB,UAAU,SACT,GACA,EACN,oBACE,EAAE,EAAE,UAAU,EACd,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,aAEP,UAAU,SACF,EACV,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,6CAA6C,YACvD,WAAW,GACV,CACL,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAsC3B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CACE,EACE,SAAS,EACT,KAAK,EACL,KAAK,EACL,GAAG,GAAG,GAAG,EACT,WAAW,EACX,SAAS,EACT,EAAE,EACF,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,UAAU,GAAG,EAAE,IAAI,WAAW,CAAC;IACrC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,KAChD,KAAK,aAET,gBAAO,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,UAAU,YACvD,KAAK,GACA,EACP,CAAC,SAAS,IAAI,CACb,cAAK,SAAS,EAAC,0BAA0B,YACvC,aACE,SAAS,EAAC,4CAA4C,iBAC1C,MAAM,aAEjB,UAAU,SACT,GACA,CACP,EACD,oBACE,EAAE,EAAE,UAAU,EACd,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,aAEP,UAAU,SACF,EACV,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,6CAA6C,YACvD,WAAW,GACV,CACL,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/Radio/Radio.css

@@ -157,6 +157,42 @@
   transform: scale(1);
 }
 
+/* Forced colors (High Contrast mode)
+   background-color wordt genegeerd — inner circle verdwijnt tegen de control achtergrond.
+   Highlight/HighlightText zijn de system colors voor geselecteerde form controls. */
+@media (forced-colors: active) {
+  .dsn-radio__control {
+    forced-color-adjust: none;
+    border-color: ButtonText;
+    background-color: Field;
+  }
+
+  .dsn-radio__input:checked + .dsn-radio__control {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+
+  .dsn-radio__input:checked + .dsn-radio__control .dsn-radio__inner-circle {
+    background-color: HighlightText;
+  }
+
+  .dsn-radio__input:checked:disabled + .dsn-radio__control {
+    border-color: GrayText;
+    background-color: GrayText;
+  }
+
+  .dsn-radio__input:checked:disabled
+    + .dsn-radio__control
+    .dsn-radio__inner-circle {
+    background-color: Field;
+  }
+
+  .dsn-radio__input:disabled + .dsn-radio__control {
+    border-color: GrayText;
+    background-color: Field;
+  }
+}
+
 /* Invalid state */
 .dsn-radio__input--invalid + .dsn-radio__control {
   border-width: var(--dsn-radio-invalid-border-width);

package/dist/SearchInput/SearchInput.css

@@ -30,6 +30,14 @@
   padding-inline-start: var(--dsn-search-input-padding-inline-start-with-icon);
 }
 
+/* Forced colors (High Contrast mode) */
+@media (forced-colors: active) {
+  .dsn-search-input__icon {
+    forced-color-adjust: auto;
+    color: ButtonText;
+  }
+}
+
 /* Hide browser-native clear button — will be implemented as a separate pattern */
 .dsn-search-input::-webkit-search-cancel-button {
   display: none;

package/dist/Select/Select.css

@@ -60,6 +60,14 @@
   border-color: var(--dsn-text-input-invalid-border-color);
 }
 
+/* Forced colors (High Contrast mode) */
+@media (forced-colors: active) {
+  .dsn-select__icon {
+    forced-color-adjust: auto;
+    color: ButtonText;
+  }
+}
+
 /* Remove native arrow in IE/Edge */
 .dsn-select::-ms-expand {
   display: none;

package/dist/SkipLink/SkipLink.d.ts

@@ -21,7 +21,7 @@ export interface SkipLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElem
  * SkipLink — toegankelijkheidskoppeling om herhalende navigatie te omzeilen.
  *
  * Plaatst de link als **eerste focusbaar element** in de DOM, vóór `<header>` en `<nav>`.
- * Voldoet aan WCAG 2.1 succescriterium 2.4.1 (Bypass Blocks, Level A).
+ * Voldoet aan WCAG 2.2 succescriterium 2.4.1 (Bypass Blocks, Level A).
  *
  * @example
  * ```tsx

package/dist/SkipLink/SkipLink.js

@@ -6,7 +6,7 @@ import './SkipLink.css';
  * SkipLink — toegankelijkheidskoppeling om herhalende navigatie te omzeilen.
  *
  * Plaatst de link als **eerste focusbaar element** in de DOM, vóór `<header>` en `<nav>`.
- * Voldoet aan WCAG 2.1 succescriterium 2.4.1 (Bypass Blocks, Level A).
+ * Voldoet aan WCAG 2.2 succescriterium 2.4.1 (Bypass Blocks, Level A).
  *
  * @example
  * ```tsx

package/dist/Spinner/Spinner.css

@@ -82,6 +82,23 @@
   }
 }
 
+/* Forced colors (High Contrast mode)
+   SVG stroke wordt genegeerd — forced-color-adjust: auto laat de browser
+   de kleuren overnemen. Track verbergen: enkel de arc is informatief. */
+@media (forced-colors: active) {
+  .dsn-spinner__circle {
+    forced-color-adjust: none;
+  }
+
+  .dsn-spinner__track {
+    stroke: transparent;
+  }
+
+  .dsn-spinner__arc {
+    stroke: CanvasText;
+  }
+}
+
 /* prefers-reduced-motion: subtiel pulseren i.p.v. roteren */
 @media (prefers-reduced-motion: reduce) {
   .dsn-spinner__circle {

package/dist/TableOfContents/TableOfContents.css

@@ -0,0 +1,75 @@
+/**
+ * TableOfContents component styles for React
+ * Re-exports the base TableOfContents styles from components-html
+ */
+
+/**
+ * Table Of Contents Component
+ * Inhoudsopgave met ankerlinks naar de secties op de huidige pagina.
+ * Alleen H2-secties horen hierin opgenomen te worden.
+ *
+ * Twee appearances:
+ * - Default ("framed"): accent-1 achtergrond + linkerborder, heading als heading-3.
+ *   Bedoeld voor gebruik inline in de content-flow (bijv. onder de lead paragraph).
+ * - `dsn-table-of-contents--plain`: geen kader, heading als heading-5.
+ *   Bedoeld voor gebruik in een losstaande kolom naast de hoofdinhoud.
+ *
+ * Usage:
+ * <!-- Framed (default) -->
+ * <nav class="dsn-table-of-contents" aria-labelledby="toc-heading">
+ *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-table-of-contents__heading" id="toc-heading">Op deze pagina</h2>
+ *   <ul class="dsn-unordered-list">
+ *     <li><a class="dsn-link" href="#sectie-1">Sectie 1</a></li>
+ *   </ul>
+ * </nav>
+ *
+ * <!-- Plain -->
+ * <nav class="dsn-table-of-contents dsn-table-of-contents--plain" aria-labelledby="toc-heading-plain">
+ *   <h2 class="dsn-heading dsn-heading--heading-5 dsn-table-of-contents__heading" id="toc-heading-plain">Op deze pagina</h2>
+ *   <ul class="dsn-unordered-list">
+ *     <li><a class="dsn-link" href="#sectie-1">Sectie 1</a></li>
+ *   </ul>
+ * </nav>
+ */
+
+.dsn-table-of-contents {
+  border-inline-start: var(--dsn-table-of-contents-border-inline-start-width)
+    solid var(--dsn-table-of-contents-border-inline-start-color);
+  background-color: var(--dsn-table-of-contents-background-color);
+  padding-block: var(--dsn-table-of-contents-padding-block);
+  padding-inline-start: var(--dsn-table-of-contents-padding-inline-start);
+  padding-inline-end: var(--dsn-table-of-contents-padding-inline-end);
+}
+
+.dsn-table-of-contents__heading {
+  margin-block-end: var(--dsn-table-of-contents-heading-gap);
+}
+
+/* =============================================================================
+   Plain appearance — geen kader, voor gebruik in een losstaande kolom
+   ============================================================================= */
+
+.dsn-table-of-contents--plain {
+  border-inline-start: none;
+  background-color: transparent;
+  padding-block: var(--dsn-table-of-contents-plain-padding-block);
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  /* Ankerlinks: omgekeerd onderstrepingsgedrag t.o.v. de standaard Link —
+     rust zonder onderstreping, hover mét, zodat de kolom rustiger oogt. */
+  --dsn-link-text-decoration-line: var(
+    --dsn-table-of-contents-plain-link-text-decoration-line
+  );
+  --dsn-link-hover-text-decoration-line: var(
+    --dsn-table-of-contents-plain-link-hover-text-decoration-line
+  );
+}
+
+.dsn-table-of-contents--plain .dsn-unordered-list > li {
+  margin-block-end: var(--dsn-table-of-contents-plain-list-gap);
+}
+
+.dsn-table-of-contents--plain .dsn-unordered-list > li:last-child {
+  margin-block-end: 0;
+}
+