@dsn-starter-kit/components-react 1.0.2 → 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":"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"}

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/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/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;
+}
+

package/dist/TableOfContents/TableOfContents.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { type HeadingLevel } from '../Heading';
+import './TableOfContents.css';
+export type TableOfContentsAppearance = 'framed' | 'plain';
+export interface TableOfContentsItem {
+    /**
+     * Anchor target — moet overeenkomen met het `id` van de bijbehorende H2 op de pagina
+     */
+    id: string;
+    /**
+     * Zichtbare linktekst
+     */
+    label: string;
+}
+export interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Zichtbare heading-tekst
+     * @default 'Op deze pagina'
+     */
+    heading?: string;
+    /**
+     * Semantisch heading-niveau
+     * @default 2
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Visuele weergave:
+     * - `'framed'` — accent-1 achtergrond + linkerborder, heading als heading-3 (voor gebruik inline in de content-flow)
+     * - `'plain'` — geen kader, heading als heading-5 (voor gebruik in een losstaande kolom)
+     * @default 'framed'
+     */
+    appearance?: TableOfContentsAppearance;
+    /**
+     * Secties waarnaar gelinkt wordt — alleen H2's horen hierin opgenomen te worden
+     */
+    items: TableOfContentsItem[];
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * TableOfContents component
+ * Inhoudsopgave met ankerlinks naar de H2-secties op de huidige pagina.
+ *
+ * @example
+ * ```tsx
+ * // Framed (default) — inline in de content-flow
+ * <TableOfContents
+ *   items={[
+ *     { id: 'sectie-1', label: 'Sectie 1' },
+ *     { id: 'sectie-2', label: 'Sectie 2' },
+ *   ]}
+ * />
+ *
+ * // Plain — in een losstaande kolom naast de hoofdinhoud
+ * <TableOfContents appearance="plain" items={items} />
+ * ```
+ */
+export declare const TableOfContents: React.ForwardRefExoticComponent<TableOfContentsProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=TableOfContents.d.ts.map

package/dist/TableOfContents/TableOfContents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.d.ts","sourceRoot":"","sources":["../../src/TableOfContents/TableOfContents.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAGxD,OAAO,uBAAuB,CAAC;AAE/B,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IAEvC;;OAEG;IACH,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,eAAe,0FAgD3B,CAAC"}

package/dist/TableOfContents/TableOfContents.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useId } from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Heading } from '../Heading';
+import { Link } from '../Link';
+import { UnorderedList } from '../UnorderedList';
+import './TableOfContents.css';
+/**
+ * TableOfContents component
+ * Inhoudsopgave met ankerlinks naar de H2-secties op de huidige pagina.
+ *
+ * @example
+ * ```tsx
+ * // Framed (default) — inline in de content-flow
+ * <TableOfContents
+ *   items={[
+ *     { id: 'sectie-1', label: 'Sectie 1' },
+ *     { id: 'sectie-2', label: 'Sectie 2' },
+ *   ]}
+ * />
+ *
+ * // Plain — in een losstaande kolom naast de hoofdinhoud
+ * <TableOfContents appearance="plain" items={items} />
+ * ```
+ */
+export const TableOfContents = React.forwardRef(({ heading = 'Op deze pagina', headingLevel = 2, appearance = 'framed', items, className, ...props }, ref) => {
+    const headingId = useId();
+    const classes = classNames('dsn-table-of-contents', appearance === 'plain' && 'dsn-table-of-contents--plain', className);
+    return (_jsxs("nav", { ref: ref, className: classes, "aria-labelledby": headingId, ...props, children: [_jsx(Heading, { level: headingLevel, appearance: appearance === 'plain' ? 'heading-5' : 'heading-3', className: "dsn-table-of-contents__heading", id: headingId, children: heading }), _jsx(UnorderedList, { children: items.map((item) => (_jsx("li", { children: _jsx(Link, { href: `#${item.id}`, children: item.label }) }, item.id))) })] }));
+});
+TableOfContents.displayName = 'TableOfContents';
+//# sourceMappingURL=TableOfContents.js.map

package/dist/TableOfContents/TableOfContents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.js","sourceRoot":"","sources":["../../src/TableOfContents/TableOfContents.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAqB,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAgD/B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAI7C,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,YAAY,GAAG,CAAC,EAChB,UAAU,GAAG,QAAQ,EACrB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAE1B,MAAM,OAAO,GAAG,UAAU,CACxB,uBAAuB,EACvB,UAAU,KAAK,OAAO,IAAI,8BAA8B,EACxD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eACE,GAAG,EAAE,GAA6B,EAClC,SAAS,EAAE,OAAO,qBACD,SAAS,KACtB,KAAK,aAET,KAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,UAAU,EAAE,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAC9D,SAAS,EAAC,gCAAgC,EAC1C,EAAE,EAAE,SAAS,YAEZ,OAAO,GACA,EACV,KAAC,aAAa,cACX,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,uBACE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,YAAG,IAAI,CAAC,KAAK,GAAQ,IADvC,IAAI,CAAC,EAAE,CAEX,CACN,CAAC,GACY,IACZ,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC"}

package/dist/TableOfContents/index.d.ts

@@ -0,0 +1,3 @@
+export { TableOfContents } from './TableOfContents';
+export type { TableOfContentsProps, TableOfContentsAppearance, TableOfContentsItem, } from './TableOfContents';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TableOfContents/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,mBAAmB,CAAC"}

package/dist/TableOfContents/index.js

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

package/dist/TableOfContents/index.js.map

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