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

package/dist/MenuLink/MenuLink.js

@@ -1,50 +0,0 @@
-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';
-import './MenuLink.css';
-/**
- * MenuLink component
- * Navigatielink met niveau-hiërarchie, actieve staat en uitklapbare subnavigatie.
- * Semantisch een `<a>`, visueel consistent met MenuButton.
- *
- * Gebruik in een `<ul>`-element (het `<nav>`-element met lijst).
- *
- * @example
- * ```tsx
- * // Basisgebruik (level 1)
- * <MenuLink href="/dashboard">Dashboard</MenuLink>
- *
- * // Actieve pagina
- * <MenuLink href="/rapporten" current>Rapporten</MenuLink>
- *
- * // Level 2 (subpagina)
- * <MenuLink href="/rapporten/maandelijks" level={2}>Maandelijks</MenuLink>
- *
- * // Met icoon en NumberBadge
- * <MenuLink
- *   href="/inbox"
- *   iconStart={<Icon name="mail" aria-hidden />}
- *   numberBadge={<NumberBadge variant="negative">5</NumberBadge>}
- * >
- *   Inbox
- * </MenuLink>
- *
- * // Met uitklapknop
- * <MenuLink
- *   href="/rapporten"
- *   subItems
- *   expanded={isExpanded}
- *   onExpandToggle={() => setIsExpanded(!isExpanded)}
- * >
- *   Rapporten
- * </MenuLink>
- * ```
- */
-export const MenuLink = React.forwardRef(({ href, level = 1, current = false, iconStart, iconEnd, numberBadge, subItems = false, expanded = false, onExpandToggle, className, children, ...props }, ref) => {
-    const liClasses = classNames('dsn-menu-link', level > 1 && `dsn-menu-link--level-${level}`, className);
-    const childrenText = typeof children === 'string' ? children : undefined;
-    return (_jsxs("li", { className: liClasses, children: [_jsxs("a", { ref: ref, className: "dsn-menu-link__link", href: href, "aria-current": current ? 'page' : undefined, ...props, children: [iconStart, _jsx("span", { className: "dsn-menu-link__label", children: children }), numberBadge, iconEnd] }), subItems && (_jsx("span", { className: "dsn-menu-link__divider", "aria-hidden": "true" })), subItems && (_jsxs("button", { type: "button", className: "dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only dsn-menu-link__expand-button", "aria-expanded": expanded, onClick: onExpandToggle, children: [_jsx(Icon, { name: "chevron-down", "aria-hidden": true }), _jsxs("span", { className: "dsn-button__label", children: [expanded ? 'Inklappen' : 'Uitklappen', childrenText && (_jsxs("span", { className: "dsn-visually-hidden", children: [' ', "voor ", childrenText] }))] })] }))] }));
-});
-MenuLink.displayName = 'MenuLink';
-//# sourceMappingURL=MenuLink.js.map

package/dist/MenuLink/MenuLink.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuLink.js","sourceRoot":"","sources":["../../src/MenuLink/MenuLink.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;AAC/B,OAAO,gBAAgB,CAAC;AAoExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CACE,EACE,IAAI,EACJ,KAAK,GAAG,CAAC,EACT,OAAO,GAAG,KAAK,EACf,SAAS,EACT,OAAO,EACP,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,UAAU,CAC1B,eAAe,EACf,KAAK,GAAG,CAAC,IAAI,wBAAwB,KAAK,EAAE,EAC5C,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEzE,OAAO,CACL,cAAI,SAAS,EAAE,SAAS,aACtB,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,IAAI,kBACI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,KACtC,KAAK,aAER,SAAS,EACV,eAAM,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAQ,EACvD,WAAW,EACX,OAAO,IACN,EAEH,QAAQ,IAAI,CACX,eAAM,SAAS,EAAC,wBAAwB,iBAAa,MAAM,GAAG,CAC/D,EACA,QAAQ,IAAI,CACX,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,mBACpG,QAAQ,EACvB,OAAO,EAAE,cAAc,aAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,wBAAe,EACxC,gBAAM,SAAS,EAAC,mBAAmB,aAChC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,EACrC,YAAY,IAAI,CACf,gBAAM,SAAS,EAAC,qBAAqB,aAClC,GAAG,WACE,YAAY,IACb,CACR,IACI,IACA,CACV,IACE,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/MenuLink/index.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MenuLink/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/MenuLink/index.js

@@ -1,2 +0,0 @@
-export * from './MenuLink';
-//# sourceMappingURL=index.js.map

package/dist/MenuLink/index.js.map

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

package/dist/ModalDialog/ModalDialog.css

@@ -1,199 +0,0 @@
-/* ===== 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

@@ -1,95 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,93 +0,0 @@
-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

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

package/dist/ModalDialog/index.d.ts

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

package/dist/ModalDialog/index.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,177 +0,0 @@
-/**
- * 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.
- *
- * 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 — no variant label -->
- * <div class="dsn-note">
- *   <span class="dsn-note__icon" aria-hidden="true">
- *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
- *   </span>
- *   <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, with visually hidden variant label -->
- * <div class="dsn-note dsn-note--info">
- *   <span class="dsn-note__icon" aria-hidden="true">
- *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
- *   </span>
- *   <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, 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 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>
- * </div>
- *
- * <!-- as="aside" — supplementary content -->
- * <aside class="dsn-note dsn-note--info">
- *   ...
- * </aside>
- *
- * <!-- 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 dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
- *   </span>
- *   <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>
- *   </div>
- * </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;
-}
-