@dsn-starter-kit/components-react 1.0.0

package/dist/Backdrop/Backdrop.css

@@ -0,0 +1,30 @@
+/**
+ * Backdrop Component
+ * Vaste, volledig-scherm overlay die de achtergrondinhoud visueel verhult
+ * wanneer een modaal UI-element open is (Modal Dialog, Drawer).
+ *
+ * Altijd aria-hidden="true" — puur decoratief, geen interactieve rol.
+ * Conditioneel renderen vanuit de parent.
+ *
+ * Usage:
+ * <div class="dsn-backdrop" aria-hidden="true"></div>
+ */
+
+.dsn-backdrop {
+  position: fixed;
+  inset: 0;
+  /* Fallback voor omgevingen zonder color-mix() support (~6%) */
+  background-color: var(--dsn-backdrop-background-color);
+  background-color: color-mix(
+    in srgb,
+    var(--dsn-backdrop-background-color) var(--dsn-backdrop-opacity),
+    transparent
+  );
+  backdrop-filter: blur(var(--dsn-backdrop-blur));
+  z-index: var(--dsn-backdrop-z-index);
+}
+
+.dsn-backdrop--no-blur {
+  backdrop-filter: none;
+}
+

package/dist/Backdrop/Backdrop.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import './Backdrop.css';
+export interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Schakelt het blur-filter in of uit.
+     * Gebruik `false` als fallback voor omgevingen zonder backdrop-filter support.
+     * @default true
+     */
+    blur?: boolean;
+}
+/**
+ * Backdrop component
+ * Vaste, volledig-scherm overlay die de achtergrondinhoud visueel verhult
+ * wanneer een modaal UI-element open is (Modal Dialog, Drawer).
+ *
+ * Altijd aria-hidden="true" — puur decoratief, geen interactieve rol.
+ * Conditioneel renderen vanuit de parent.
+ *
+ * @example
+ * ```tsx
+ * {isOpen && <Backdrop />}
+ * {isOpen && <Backdrop blur={false} />}
+ * ```
+ */
+export declare const Backdrop: React.ForwardRefExoticComponent<BackdropProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Backdrop.d.ts.map

package/dist/Backdrop/Backdrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../src/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,sFAepB,CAAC"}

package/dist/Backdrop/Backdrop.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Backdrop.css';
+/**
+ * Backdrop component
+ * Vaste, volledig-scherm overlay die de achtergrondinhoud visueel verhult
+ * wanneer een modaal UI-element open is (Modal Dialog, Drawer).
+ *
+ * Altijd aria-hidden="true" — puur decoratief, geen interactieve rol.
+ * Conditioneel renderen vanuit de parent.
+ *
+ * @example
+ * ```tsx
+ * {isOpen && <Backdrop />}
+ * {isOpen && <Backdrop blur={false} />}
+ * ```
+ */
+export const Backdrop = React.forwardRef(({ className, blur = true, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: classNames('dsn-backdrop', !blur && 'dsn-backdrop--no-blur', className), "aria-hidden": "true", ...props }));
+});
+Backdrop.displayName = 'Backdrop';
+//# sourceMappingURL=Backdrop.js.map

package/dist/Backdrop/Backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../src/Backdrop/Backdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,CAAC;AAWxB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5C,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,cAAc,EACd,CAAC,IAAI,IAAI,uBAAuB,EAChC,SAAS,CACV,iBACW,MAAM,KACd,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/Backdrop/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Backdrop/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/Backdrop/index.js

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

package/dist/Backdrop/index.js.map

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

package/dist/Body/Body.css

@@ -0,0 +1,14 @@
+/**
+ * Body component styles voor React
+ * Re-exporteert de basis Body stijlen vanuit components-html
+ */
+
+.dsn-body {
+  background-color: var(--dsn-color-neutral-bg-document);
+  color: var(--dsn-color-neutral-color-document);
+  font-family: var(--dsn-text-font-family-default);
+  font-size: var(--dsn-text-font-size-md);
+  line-height: var(--dsn-text-line-height-md);
+  font-weight: var(--dsn-text-font-weight-default);
+}
+

package/dist/Body/Body.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import './Body.css';
+export interface BodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Child-elementen die de document-level stijlen erven
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Body component
+ * Stelt document-level CSS stijlen in via CSS inheritance zodat alle child-elementen
+ * automatisch de juiste typografie, kleur en achtergrond erven.
+ *
+ * @example
+ * ```tsx
+ * // In een applicatie: wrap de root-content
+ * <Body>
+ *   <h1>Mijn pagina</h1>
+ *   <p>Inhoud met geërfde stijlen</p>
+ * </Body>
+ *
+ * // Of pas de CSS class direct toe op het <body> element
+ * // <body class="dsn-body">
+ * ```
+ */
+export declare const Body: React.ForwardRefExoticComponent<BodyProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Body.d.ts.map

package/dist/Body/Body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../src/Body/Body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,IAAI,kFAUhB,CAAC"}

package/dist/Body/Body.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Body.css';
+/**
+ * Body component
+ * Stelt document-level CSS stijlen in via CSS inheritance zodat alle child-elementen
+ * automatisch de juiste typografie, kleur en achtergrond erven.
+ *
+ * @example
+ * ```tsx
+ * // In een applicatie: wrap de root-content
+ * <Body>
+ *   <h1>Mijn pagina</h1>
+ *   <p>Inhoud met geërfde stijlen</p>
+ * </Body>
+ *
+ * // Of pas de CSS class direct toe op het <body> element
+ * // <body class="dsn-body">
+ * ```
+ */
+export const Body = React.forwardRef(({ className, children, ...props }, ref) => {
+    const classes = classNames('dsn-body', className);
+    return (_jsx("div", { ref: ref, className: classes, ...props, children: children }));
+});
+Body.displayName = 'Body';
+//# sourceMappingURL=Body.js.map

package/dist/Body/Body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body.js","sourceRoot":"","sources":["../../src/Body/Body.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,YAAY,CAAC;AASpB;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;IAElD,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACzC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/Body/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Body/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/Body/index.js

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

package/dist/Body/index.js.map

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

package/dist/BreadcrumbNavigation/BreadcrumbNavigation.css

@@ -0,0 +1,216 @@
+/**
+ * BreadcrumbNavigation component styles for React
+ * Re-exports the base BreadcrumbNavigation styles from components-html
+ */
+
+/**
+ * BreadcrumbNavigation Component
+ * Toont de hiërarchische locatie van de gebruiker en biedt navigatie naar bovenliggende pagina's.
+ *
+ * Usage:
+ * <!-- Standaard -->
+ * <nav aria-label="Broodkruimelpad" class="dsn-breadcrumb-navigation">
+ *   <ol class="dsn-breadcrumb-navigation__list">
+ *     <li class="dsn-breadcrumb-navigation__item">
+ *       <a href="/home" class="dsn-breadcrumb-navigation__link">Home</a>
+ *       <svg class="dsn-icon dsn-breadcrumb-navigation__separator" aria-hidden="true"><!-- chevron-right --></svg>
+ *     </li>
+ *
+ * <!-- Compact item met terug-pijl (back-icon zit binnen de <a>) -->
+ *     <li class="dsn-breadcrumb-navigation__item">
+ *       <a href="/fruit" class="dsn-breadcrumb-navigation__link">
+ *         <svg class="dsn-icon dsn-breadcrumb-navigation__back-icon" aria-hidden="true"><!-- arrow-left --></svg>
+ *         Fruit
+ *       </a>
+ *       <svg class="dsn-icon dsn-breadcrumb-navigation__separator" aria-hidden="true"><!-- chevron-right --></svg>
+ *     </li>
+ *     <li class="dsn-breadcrumb-navigation__item dsn-breadcrumb-navigation__item--current">
+ *       <a href="/appel" class="dsn-breadcrumb-navigation__link" aria-current="page">Appel</a>
+ *     </li>
+ *   </ol>
+ * </nav>
+ *
+ * <!-- Compact variant (container query responsive collapse) -->
+ * <nav aria-label="Broodkruimelpad" class="dsn-breadcrumb-navigation dsn-breadcrumb-navigation--compact">
+ *   ...
+ * </nav>
+ */
+
+/* ===========================
+   Base — nav wrapper
+   =========================== */
+.dsn-breadcrumb-navigation {
+  display: block;
+  padding-block: var(--dsn-space-block-lg);
+  font-size: var(--dsn-breadcrumb-navigation-font-size);
+  font-weight: var(--dsn-breadcrumb-navigation-font-weight);
+  line-height: var(--dsn-breadcrumb-navigation-line-height);
+}
+
+/* ===========================
+   List
+   =========================== */
+.dsn-breadcrumb-navigation__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  column-gap: var(--dsn-breadcrumb-navigation-column-gap);
+}
+
+/* ===========================
+   Item
+   =========================== */
+.dsn-breadcrumb-navigation__item {
+  display: flex;
+  align-items: center;
+  padding-block: var(--dsn-breadcrumb-navigation-item-padding-block);
+  padding-inline: var(--dsn-breadcrumb-navigation-item-padding-inline);
+  gap: var(--dsn-breadcrumb-navigation-column-gap);
+}
+
+/* ===========================
+   Current page item
+   =========================== */
+.dsn-breadcrumb-navigation__item--current {
+  color: var(--dsn-breadcrumb-navigation-current-color);
+}
+
+/* ===========================
+   Link
+   =========================== */
+.dsn-breadcrumb-navigation__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsn-breadcrumb-navigation-link-column-gap);
+  color: var(--dsn-breadcrumb-navigation-link-color);
+  text-decoration-line: var(
+    --dsn-breadcrumb-navigation-link-text-decoration-line
+  );
+  text-underline-offset: var(
+    --dsn-breadcrumb-navigation-link-text-underline-offset
+  );
+  text-decoration-thickness: var(
+    --dsn-breadcrumb-navigation-link-text-decoration-thickness
+  );
+  cursor: pointer;
+  transition:
+    color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    text-decoration-color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default);
+}
+
+/* Current link — muted color, no underline, no hover effect */
+.dsn-breadcrumb-navigation__item--current .dsn-breadcrumb-navigation__link {
+  color: var(--dsn-breadcrumb-navigation-current-color);
+  text-decoration-line: none;
+  cursor: default;
+}
+
+/* Hover */
+.dsn-breadcrumb-navigation__link:hover:not(
+    .dsn-breadcrumb-navigation__item--current .dsn-breadcrumb-navigation__link
+  ) {
+  color: var(--dsn-breadcrumb-navigation-link-hover-color);
+  text-decoration-line: var(
+    --dsn-breadcrumb-navigation-link-hover-text-decoration-line
+  );
+}
+
+/* Active */
+.dsn-breadcrumb-navigation__link:active:not(
+    .dsn-breadcrumb-navigation__item--current .dsn-breadcrumb-navigation__link
+  ) {
+  color: var(--dsn-breadcrumb-navigation-link-active-color);
+  text-decoration-line: var(
+    --dsn-breadcrumb-navigation-link-active-text-decoration-line
+  );
+}
+
+/* Focus */
+.dsn-breadcrumb-navigation__link:focus-visible {
+  background-color: var(--dsn-focus-background-color);
+  color: var(--dsn-focus-color);
+  text-decoration: none;
+  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
+    var(--dsn-focus-outline-color);
+  outline-offset: var(--dsn-focus-outline-offset);
+  box-shadow: 0 0 0
+    calc(var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width))
+    var(--dsn-focus-inverse-outline-color);
+  box-decoration-break: clone;
+}
+
+/* ===========================
+   Separator icon
+   =========================== */
+.dsn-breadcrumb-navigation__separator {
+  flex-shrink: 0;
+  width: var(--dsn-breadcrumb-navigation-separator-size);
+  height: var(--dsn-breadcrumb-navigation-separator-size);
+  color: var(--dsn-breadcrumb-navigation-separator-color);
+}
+
+/* Verberg separator na het laatste item */
+.dsn-breadcrumb-navigation__item:last-child
+  .dsn-breadcrumb-navigation__separator {
+  display: none;
+}
+
+/* ===========================
+   Back icon (compact variant)
+   =========================== */
+.dsn-breadcrumb-navigation__back-icon {
+  display: none;
+  flex-shrink: 0;
+  width: var(--dsn-breadcrumb-navigation-icon-size);
+  height: var(--dsn-breadcrumb-navigation-icon-size);
+}
+
+/* ===========================
+   RTL — richtingsgevoelige iconen omdraaien
+   =========================== */
+[dir='rtl'] .dsn-breadcrumb-navigation__separator,
+[dir='rtl'] .dsn-breadcrumb-navigation__back-icon {
+  transform: scaleX(-1);
+}
+
+/* ===========================
+   Compact variant — container query responsive collapse
+   =========================== */
+.dsn-breadcrumb-navigation--compact {
+  container-type: inline-size;
+  container-name: breadcrumb;
+}
+
+@container breadcrumb (max-width: 32rem) {
+  /* Verberg alle items */
+  .dsn-breadcrumb-navigation--compact .dsn-breadcrumb-navigation__item {
+    display: none;
+  }
+
+  /* Toon het ouder-item (tweede van achteren) */
+  .dsn-breadcrumb-navigation--compact
+    .dsn-breadcrumb-navigation__item:nth-last-child(2) {
+    display: flex;
+    align-items: center;
+  }
+
+  /* Toon het terug-icoon in het ouder-item */
+  .dsn-breadcrumb-navigation--compact
+    .dsn-breadcrumb-navigation__item:nth-last-child(2)
+    .dsn-breadcrumb-navigation__back-icon {
+    display: block;
+  }
+
+  /* Verberg het scheidingsteken na het ouder-item */
+  .dsn-breadcrumb-navigation--compact
+    .dsn-breadcrumb-navigation__item:nth-last-child(2)
+    .dsn-breadcrumb-navigation__separator {
+    display: none;
+  }
+}
+

package/dist/BreadcrumbNavigation/BreadcrumbNavigation.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import './BreadcrumbNavigation.css';
+export interface BreadcrumbNavigationProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Toegankelijke naam van het `<nav>` landmark
+     * @default "Broodkruimelpad"
+     */
+    'aria-label'?: string;
+    /**
+     * `"compact"` activeert container-query responsief gedrag:
+     * bij weinig ruimte wordt enkel het ouder-item met terug-pijl getoond
+     * @default "default"
+     */
+    variant?: 'default' | 'compact';
+    /**
+     * `BreadcrumbNavigationItem` elementen
+     */
+    children: React.ReactNode;
+}
+/**
+ * BreadcrumbNavigation component
+ * Toont de hiërarchische locatie van de gebruiker en biedt navigatie naar bovenliggende pagina's.
+ * Plaatsen vóór `<main>`, na de primaire navigatie.
+ *
+ * @example
+ * ```tsx
+ * // Standaard
+ * <BreadcrumbNavigation aria-label="Broodkruimelpad">
+ *   <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
+ *   <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
+ *   <BreadcrumbNavigationItem href="/product" current>Product</BreadcrumbNavigationItem>
+ * </BreadcrumbNavigation>
+ *
+ * // Compact variant
+ * <BreadcrumbNavigation aria-label="Broodkruimelpad" variant="compact">
+ *   <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
+ *   <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
+ *   <BreadcrumbNavigationItem href="/product" current>Product</BreadcrumbNavigationItem>
+ * </BreadcrumbNavigation>
+ * ```
+ */
+export declare const BreadcrumbNavigation: React.ForwardRefExoticComponent<BreadcrumbNavigationProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=BreadcrumbNavigation.d.ts.map

package/dist/BreadcrumbNavigation/BreadcrumbNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNavigation.d.ts","sourceRoot":"","sources":["../../src/BreadcrumbNavigation/BreadcrumbNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,4BAA4B,CAAC;AAEpC,MAAM,WAAW,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAClF;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,oBAAoB,+FA4ChC,CAAC"}

package/dist/BreadcrumbNavigation/BreadcrumbNavigation.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './BreadcrumbNavigation.css';
+/**
+ * BreadcrumbNavigation component
+ * Toont de hiërarchische locatie van de gebruiker en biedt navigatie naar bovenliggende pagina's.
+ * Plaatsen vóór `<main>`, na de primaire navigatie.
+ *
+ * @example
+ * ```tsx
+ * // Standaard
+ * <BreadcrumbNavigation aria-label="Broodkruimelpad">
+ *   <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
+ *   <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
+ *   <BreadcrumbNavigationItem href="/product" current>Product</BreadcrumbNavigationItem>
+ * </BreadcrumbNavigation>
+ *
+ * // Compact variant
+ * <BreadcrumbNavigation aria-label="Broodkruimelpad" variant="compact">
+ *   <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
+ *   <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
+ *   <BreadcrumbNavigationItem href="/product" current>Product</BreadcrumbNavigationItem>
+ * </BreadcrumbNavigation>
+ * ```
+ */
+export const BreadcrumbNavigation = React.forwardRef(({ className, 'aria-label': ariaLabel = 'Broodkruimelpad', variant = 'default', children, ...props }, ref) => {
+    const classes = classNames('dsn-breadcrumb-navigation', variant === 'compact' && 'dsn-breadcrumb-navigation--compact', className);
+    const childArray = React.Children.toArray(children);
+    const processedChildren = childArray.map((child, index) => {
+        if (!React.isValidElement(child))
+            return child;
+        const isParentOfCurrent = variant === 'compact' && index === childArray.length - 2;
+        if (isParentOfCurrent) {
+            return React.cloneElement(child, { showBackIcon: true });
+        }
+        return child;
+    });
+    return (_jsx("nav", { ref: ref, className: classes, "aria-label": ariaLabel, ...props, children: _jsx("ol", { className: "dsn-breadcrumb-navigation__list", children: processedChildren }) }));
+});
+BreadcrumbNavigation.displayName = 'BreadcrumbNavigation';
+//# sourceMappingURL=BreadcrumbNavigation.js.map

package/dist/BreadcrumbNavigation/BreadcrumbNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNavigation.js","sourceRoot":"","sources":["../../src/BreadcrumbNavigation/BreadcrumbNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,4BAA4B,CAAC;AAsBpC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAIlD,CACE,EACE,SAAS,EACT,YAAY,EAAE,SAAS,GAAG,iBAAiB,EAC3C,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,2BAA2B,EAC3B,OAAO,KAAK,SAAS,IAAI,oCAAoC,EAC7D,SAAS,CACV,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEpD,MAAM,iBAAiB,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACxD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAE/C,MAAM,iBAAiB,GACrB,OAAO,KAAK,SAAS,IAAI,KAAK,KAAK,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;QAE3D,IAAI,iBAAiB,EAAE,CAAC;YACtB,OAAO,KAAK,CAAC,YAAY,CACvB,KAA0D,EAC1D,EAAE,YAAY,EAAE,IAAI,EAAE,CACvB,CAAC;QACJ,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,gBAAc,SAAS,KAAM,KAAK,YACjE,aAAI,SAAS,EAAC,iCAAiC,YAAE,iBAAiB,GAAM,GACpE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC"}

package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+export interface BreadcrumbNavigationItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * URL van de pagina
+     */
+    href: string;
+    /**
+     * Markeert het huidige pagina-item; voegt `aria-current="page"` toe
+     * @default false
+     */
+    current?: boolean;
+    /**
+     * Zichtbare link- of paginatekst
+     */
+    children: React.ReactNode;
+    /**
+     * @internal — wordt gezet door BreadcrumbNavigation (compact variant)
+     */
+    showBackIcon?: boolean;
+}
+/**
+ * BreadcrumbNavigationItem component
+ * Enkel item in een BreadcrumbNavigation. Gebruik altijd binnen een `<BreadcrumbNavigation>`.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
+ * <BreadcrumbNavigationItem href="/categorie" current>Categorie</BreadcrumbNavigationItem>
+ * ```
+ */
+export declare const BreadcrumbNavigationItem: React.ForwardRefExoticComponent<BreadcrumbNavigationItemProps & React.RefAttributes<HTMLLIElement>>;
+//# sourceMappingURL=BreadcrumbNavigationItem.d.ts.map

package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNavigationItem.d.ts","sourceRoot":"","sources":["../../src/BreadcrumbNavigation/BreadcrumbNavigationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,6BAA8B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAClG;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,wBAAwB,qGA8CpC,CAAC"}

package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Icon } from '../Icon';
+/**
+ * BreadcrumbNavigationItem component
+ * Enkel item in een BreadcrumbNavigation. Gebruik altijd binnen een `<BreadcrumbNavigation>`.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
+ * <BreadcrumbNavigationItem href="/categorie" current>Categorie</BreadcrumbNavigationItem>
+ * ```
+ */
+export const BreadcrumbNavigationItem = React.forwardRef(({ className, href, current = false, showBackIcon = false, children, ...props }, ref) => {
+    const itemClasses = classNames('dsn-breadcrumb-navigation__item', current && 'dsn-breadcrumb-navigation__item--current', className);
+    return (_jsxs("li", { ref: ref, className: itemClasses, children: [_jsxs("a", { href: href, className: "dsn-breadcrumb-navigation__link", "aria-current": current ? 'page' : undefined, ...props, children: [showBackIcon && (_jsx(Icon, { name: "arrow-left", className: "dsn-breadcrumb-navigation__back-icon", "aria-hidden": true })), children] }), _jsx(Icon, { name: "chevron-right", className: "dsn-breadcrumb-navigation__separator", "aria-hidden": true })] }));
+});
+BreadcrumbNavigationItem.displayName = 'BreadcrumbNavigationItem';
+//# sourceMappingURL=BreadcrumbNavigationItem.js.map

package/dist/BreadcrumbNavigation/BreadcrumbNavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNavigationItem.js","sourceRoot":"","sources":["../../src/BreadcrumbNavigation/BreadcrumbNavigationItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAyB/B;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CAItD,CACE,EACE,SAAS,EACT,IAAI,EACJ,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,UAAU,CAC5B,iCAAiC,EACjC,OAAO,IAAI,0CAA0C,EACrD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,cAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,aAClC,aACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,iCAAiC,kBAC7B,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,KACtC,KAAK,aAER,YAAY,IAAI,CACf,KAAC,IAAI,IACH,IAAI,EAAC,YAAY,EACjB,SAAS,EAAC,sCAAsC,wBAEhD,CACH,EACA,QAAQ,IACP,EACJ,KAAC,IAAI,IACH,IAAI,EAAC,eAAe,EACpB,SAAS,EAAC,sCAAsC,wBAEhD,IACC,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAC"}

package/dist/BreadcrumbNavigation/index.d.ts

@@ -0,0 +1,3 @@
+export * from './BreadcrumbNavigation';
+export * from './BreadcrumbNavigationItem';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/BreadcrumbNavigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC"}

package/dist/BreadcrumbNavigation/index.js

@@ -0,0 +1,3 @@
+export * from './BreadcrumbNavigation';
+export * from './BreadcrumbNavigationItem';
+//# sourceMappingURL=index.js.map

package/dist/BreadcrumbNavigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/BreadcrumbNavigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC"}

package/dist/BreakoutSection/BreakoutSection.css

@@ -0,0 +1,19 @@
+/**
+ * BreakoutSection Layout Component
+ * Laat een sectie "uitslaan" buiten een beperkte paginabreedte om de volledige
+ * viewportbreedte te beslaan.
+ *
+ * Vereiste: de parent (.dsn-page-body) moet overflow-x: clip hebben om
+ * horizontale scrolbalken te voorkomen.
+ *
+ * Usage:
+ * <section class="dsn-breakout-section">
+ *   <!-- inhoud beslaat volledige viewportbreedte -->
+ * </section>
+ */
+
+.dsn-breakout-section {
+  margin-block: var(--dsn-space-block-4xl);
+  margin-inline: calc(50% - 50vw);
+}
+

package/dist/BreakoutSection/BreakoutSection.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import './BreakoutSection.css';
+export type BreakoutSectionAs = 'div' | 'section' | 'article' | 'aside';
+export interface BreakoutSectionProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * HTML-element — ontkoppelt semantiek van visuele stijl
+     * @default 'section'
+     */
+    as?: BreakoutSectionAs;
+    children?: React.ReactNode;
+}
+/**
+ * BreakoutSection layout component
+ * Laat een sectie "uitslaan" buiten een beperkte paginabreedte om de volledige
+ * viewportbreedte te beslaan via `margin-inline: calc(50% - 50vw)`.
+ *
+ * Vereiste: de parent (.dsn-page-body) heeft `overflow-x: clip` zodat er geen
+ * horizontale scrolbalk verschijnt.
+ *
+ * @example
+ * ```tsx
+ * <BreakoutSection style={{ backgroundColor: 'var(--dsn-color-accent-1-inverse-bg-default)' }}>
+ *   <div style={{ maxInlineSize: 'var(--dsn-page-max-inline-size)', marginInline: 'auto', paddingInline: 'var(--dsn-page-body-padding-inline)' }}>
+ *     <Heading level={2}>Uitgeslagen sectie</Heading>
+ *   </div>
+ * </BreakoutSection>
+ * ```
+ */
+export declare const BreakoutSection: React.ForwardRefExoticComponent<BreakoutSectionProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=BreakoutSection.d.ts.map

package/dist/BreakoutSection/BreakoutSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreakoutSection.d.ts","sourceRoot":"","sources":["../../src/BreakoutSection/BreakoutSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,uBAAuB,CAAC;AAE/B,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E;;;OAGG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IAEvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,eAAe,0FAW1B,CAAC"}