@dsn-starter-kit/components-react 3.5.0 → 4.1.0

package/dist/Card/Card.d.mts

@@ -2,58 +2,81 @@ import React from "react";
 //#region src/Card/Card.d.ts
 interface CardProps extends React.HTMLAttributes<HTMLElement> {
   /**
-   * URL voor de stretched link. De `CardHeading` ontvangt `href` automatisch
-   * via React context en wraps de heading-tekst in een `<a>`.
+   * URL voor de stretched link. `CardHeading` en `CardLabel` ontvangen `href`
+   * automatisch via React context en zetten hun tekst in een `<a>`.
    */
   href?: string;
-  /** Sub-componenten: `CardHeader`, `CardBody`, `CardFooter` */
+  /** Secties: `CardHeader`, `CardPreHeader`, `CardBody`, `CardFooter` */
   children?: React.ReactNode;
   className?: string;
 }
 /**
  * Card component
- * Configureerbare container voor gestructureerde content met header, body en footer.
- * Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.
- * Screenreaders lezen alleen de heading-tekst als linknaam.
+ * Configureerbare container met vier optionele secties: `CardPreHeader`,
+ * `CardHeader`, `CardBody` en `CardFooter` (zie DR-2026-11).
+ *
+ * Zet `CardHeader` in de JSX altijd vóór `CardPreHeader`: zo kondigt een
+ * screenreader de heading eerst aan. De CSS zet de pre-header visueel bovenaan.
+ *
+ * Met `href` wordt de heading een stretched link: de link dekt de volledige
+ * card, en screenreaders lezen alleen de heading-tekst als linknaam.
  *
  * @example
  * ```tsx
  * <Card href="/artikel/slug">
  *   <CardHeader>
- *     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+ *     <CardHeading level={2}>Artikeltitel</CardHeading>
  *   </CardHeader>
+ *   <CardPreHeader>
+ *     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+ *   </CardPreHeader>
  *   <CardBody>
- *     <CardHeading level={2}>Artikeltitel</CardHeading>
  *     <Paragraph>Korte beschrijving.</Paragraph>
  *   </CardBody>
  *   <CardFooter>
- *     <Link href="/artikel/slug" aria-hidden tabIndex={-1}>Lees meer</Link>
+ *     <CardAffordance>Lees meer</CardAffordance>
  *   </CardFooter>
  * </Card>
  * ```
  */
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
-interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CardPreHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Afbeelding (`Image` component). Zonder children → toont placeholder
-   * met `aspect-ratio: 16 / 9` voor visuele consistentie in groep.
+   * Afbeelding, badge, logo of icoon. Een `Image` als direct kind loopt door
+   * tot de rand van de card. Zonder children → toont een placeholder met
+   * `aspect-ratio: 16 / 9` voor visuele consistentie in een groep.
+   *
+   * Zet hier geen focusbare elementen in: de pre-header staat in de DOM ná de
+   * header, dus de focusvolgorde zou afwijken van de visuele volgorde.
    */
   children?: React.ReactNode;
   className?: string;
 }
 /**
- * CardHeader sub-component
+ * CardPreHeader sub-component
+ * Staat in de DOM ná `CardHeader` en komt visueel bovenaan via `order: -1`.
  * Zonder children → toont automatisch een afbeeldingsplaceholder.
  */
+declare const CardPreHeader: React.ForwardRefExoticComponent<CardPreHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** `CardHeading` of `CardLabel`, optioneel gevolgd door een `StatusBadge` */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardHeader sub-component
+ * Bevat de heading of het label van de card. Zet hem in de JSX vóór
+ * `CardPreHeader`.
+ */
 declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
 interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** `CardHeading`, optionele extra content (bijv. `StatusBadge`), `Paragraph` */
+  /** `Paragraph`, `CardDescription`, `CardMeta` of andere inhoud */
   children?: React.ReactNode;
   className?: string;
 }
 /**
  * CardBody sub-component
- * Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.
+ * Inhoudssectie onder de header.
  */
 declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
 interface CardHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
@@ -69,22 +92,64 @@ interface CardHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
 /**
  * CardHeading sub-component
  * Ontvangt `href` automatisch via React context van de parent `Card`.
- * Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class="dsn-card-heading__link">`.
+ * Wanneer `href` beschikbaar is, staat de heading-tekst in een `<a class="dsn-card__link">`.
  * Het `::before` pseudo-element dekt de volledige card (stretched link).
  */
 declare const CardHeading: React.ForwardRefExoticComponent<CardHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+interface CardLabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** Label-tekst */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardLabel sub-component
+ * Gebruik in plaats van `CardHeading` wanneer de card geen nieuw onderwerp
+ * introduceert, zoals bij login-opties of instellingen. Ontvangt `href` via
+ * context, net als `CardHeading`.
+ */
+declare const CardLabel: React.ForwardRefExoticComponent<CardLabelProps & React.RefAttributes<HTMLParagraphElement>>;
+interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardDescription sub-component
+ * Korte omschrijving met eigen typografie-tokens.
+ */
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+interface CardMetaProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** Bijv. een `<time>`-element of een auteur */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardMeta sub-component
+ * Aanvullende gegevens bij de card, zoals een datum.
+ */
+declare const CardMeta: React.ForwardRefExoticComponent<CardMetaProps & React.RefAttributes<HTMLParagraphElement>>;
 interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** `Link` of `ButtonLink` — staat boven de stretched link via CSS z-index */
+  /** `CardAffordance`, of een `Link` / `ButtonLink` naar een andere bestemming */
   children?: React.ReactNode;
   className?: string;
 }
 /**
  * CardFooter sub-component
- * Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.
- * Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde
- * bestemming heeft als de card — vermijdt een dubbele tabstop.
+ * Staat altijd onderaan de card. Links en buttons staan boven de stretched
+ * link en blijven zelfstandig klikbaar. Voor een visuele "Lees meer" naar
+ * dezelfde bestemming als de card: gebruik `CardAffordance`.
  */
 declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+interface CardAffordanceProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Bijv. "Lees meer" */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardAffordance sub-component
+ * Een `<span aria-hidden="true">` die eruitziet als een link. De stretched
+ * link vangt de klik al af, dus er is geen tweede tabstop nodig.
+ */
+declare const CardAffordance: React.ForwardRefExoticComponent<CardAffordanceProps & React.RefAttributes<HTMLSpanElement>>;
 interface CardGroupProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Semantisch container-element.
@@ -103,5 +168,5 @@ interface CardGroupProps extends React.HTMLAttributes<HTMLElement> {
  */
 declare const CardGroup: React.ForwardRefExoticComponent<CardGroupProps & React.RefAttributes<HTMLElement>>;
 //#endregion
-export { Card, CardBody, CardBodyProps, CardFooter, CardFooterProps, CardGroup, CardGroupProps, CardHeader, CardHeaderProps, CardHeading, CardHeadingProps, CardProps };
+export { Card, CardAffordance, CardAffordanceProps, CardBody, CardBodyProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardGroup, CardGroupProps, CardHeader, CardHeaderProps, CardHeading, CardHeadingProps, CardLabel, CardLabelProps, CardMeta, CardMetaProps, CardPreHeader, CardPreHeaderProps, CardProps };
 //# sourceMappingURL=Card.d.mts.map

package/dist/Card/Card.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.mts","names":[],"sources":["../../src/Card/Card.tsx"],"mappings":";;UAkBiB,kBAAkB,MAAM,eAAe;;;;;EAKtD;;EAGA,WAAW,MAAM;EAEjB;;;;;;;;;;;;;;;;;;;;;;;;cAyBW,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA;UAsBA,wBAAwB,MAAM,eAAe;;;;;EAK5D,WAAW,MAAM;EAEjB;;;;;;cAOW,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;UAwBN,sBAAsB,MAAM,eAAe;;EAE1D,WAAW,MAAM;EAEjB;;;;;;cAOW,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA;UAoBJ,yBAAyB,MAAM,eAAe;;;;;EAK7D;;EAGA,WAAW,MAAM;EAEjB;;;;;;;;cASW,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA;UA8BP,wBAAwB,MAAM,eAAe;;EAE5D,WAAW,MAAM;EAEjB;;;;;;;;cASW,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;UAoBN,uBAAuB,MAAM,eAAe;;;;;;EAM3D;;EAGA,WAAW,MAAM;EAEjB;;;;;;;cAQW,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}
+{"version":3,"file":"Card.d.mts","names":[],"sources":["../../src/Card/Card.tsx"],"mappings":";;UAkBiB,kBAAkB,MAAM,eAAe;;;;;EAKtD;;EAGA,WAAW,MAAM;EAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgCW,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA;UAsBA,2BAA2B,MAAM,eAAe;;;;;;;;;EAS/D,WAAW,MAAM;EAEjB;;;;;;;cAQW,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA;UAyBT,wBAAwB,MAAM,eAAe;;EAE5D,WAAW,MAAM;EAEjB;;;;;;;cAQW,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;UAoBN,sBAAsB,MAAM,eAAe;;EAE1D,WAAW,MAAM;EAEjB;;;;;;cAOW,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA;UAoBJ,yBAAyB,MAAM,eAAe;;;;;EAK7D;;EAGA,WAAW,MAAM;EAEjB;;;;;;;;cASW,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA;UA8BP,uBAAuB,MAAM,eAAe;;EAE3D,WAAW,MAAM;EAEjB;;;;;;;;cASW,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA;UA4BL,6BAA6B,MAAM,eAAe;EACjE,WAAW,MAAM;EAEjB;;;;;;cAOW,iBAAe,MAAA,0BAAA,uBAAA,MAAA,cAAA;UAqBX,sBAAsB,MAAM,eAAe;;EAE1D,WAAW,MAAM;EAEjB;;;;;;cAOW,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA;UAoBJ,wBAAwB,MAAM,eAAe;;EAE5D,WAAW,MAAM;EAEjB;;;;;;;;cASW,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;UAoBN,4BAA4B,MAAM,eAAe;;EAEhE,WAAW,MAAM;EAEjB;;;;;;;cAQW,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA;UAsBV,uBAAuB,MAAM,eAAe;;;;;;EAM3D;;EAGA,WAAW,MAAM;EAEjB;;;;;;;cAQW,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/Card/Card2.mjs

@@ -6,22 +6,29 @@ import { jsx } from "react/jsx-runtime";
 const CardContext = React.createContext({});
 /**
 * Card component
-* Configureerbare container voor gestructureerde content met header, body en footer.
-* Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.
-* Screenreaders lezen alleen de heading-tekst als linknaam.
+* Configureerbare container met vier optionele secties: `CardPreHeader`,
+* `CardHeader`, `CardBody` en `CardFooter` (zie DR-2026-11).
+*
+* Zet `CardHeader` in de JSX altijd vóór `CardPreHeader`: zo kondigt een
+* screenreader de heading eerst aan. De CSS zet de pre-header visueel bovenaan.
+*
+* Met `href` wordt de heading een stretched link: de link dekt de volledige
+* card, en screenreaders lezen alleen de heading-tekst als linknaam.
 *
 * @example
 * ```tsx
 * <Card href="/artikel/slug">
 *   <CardHeader>
-*     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+*     <CardHeading level={2}>Artikeltitel</CardHeading>
 *   </CardHeader>
+*   <CardPreHeader>
+*     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+*   </CardPreHeader>
 *   <CardBody>
-*     <CardHeading level={2}>Artikeltitel</CardHeading>
 *     <Paragraph>Korte beschrijving.</Paragraph>
 *   </CardBody>
 *   <CardFooter>
-*     <Link href="/artikel/slug" aria-hidden tabIndex={-1}>Lees meer</Link>
+*     <CardAffordance>Lees meer</CardAffordance>
 *   </CardFooter>
 * </Card>
 * ```
@@ -39,13 +46,14 @@ const Card = React.forwardRef(({ className, href, children, ...props }, ref) =>
 });
 Card.displayName = "Card";
 /**
-* CardHeader sub-component
+* CardPreHeader sub-component
+* Staat in de DOM ná `CardHeader` en komt visueel bovenaan via `order: -1`.
 * Zonder children → toont automatisch een afbeeldingsplaceholder.
 */
-const CardHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+const CardPreHeader = React.forwardRef(({ className, children, ...props }, ref) => {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
-		className: classNames("dsn-card__header", className),
+		className: classNames("dsn-card__pre-header", className),
 		...props,
 		children: children ? children : /* @__PURE__ */ jsx("div", {
 			className: "dsn-card__image-placeholder",
@@ -53,10 +61,24 @@ const CardHeader = React.forwardRef(({ className, children, ...props }, ref) =>
 		})
 	});
 });
+CardPreHeader.displayName = "CardPreHeader";
+/**
+* CardHeader sub-component
+* Bevat de heading of het label van de card. Zet hem in de JSX vóór
+* `CardPreHeader`.
+*/
+const CardHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-card__header", className),
+		...props,
+		children
+	});
+});
 CardHeader.displayName = "CardHeader";
 /**
 * CardBody sub-component
-* Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.
+* Inhoudssectie onder de header.
 */
 const CardBody = React.forwardRef(({ className, children, ...props }, ref) => {
 	return /* @__PURE__ */ jsx("div", {
@@ -70,7 +92,7 @@ CardBody.displayName = "CardBody";
 /**
 * CardHeading sub-component
 * Ontvangt `href` automatisch via React context van de parent `Card`.
-* Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class="dsn-card-heading__link">`.
+* Wanneer `href` beschikbaar is, staat de heading-tekst in een `<a class="dsn-card__link">`.
 * Het `::before` pseudo-element dekt de volledige card (stretched link).
 */
 const CardHeading = React.forwardRef(({ className, level = 2, children, ...props }, ref) => {
@@ -78,21 +100,67 @@ const CardHeading = React.forwardRef(({ className, level = 2, children, ...props
 	const Tag = `h${level}`;
 	return /* @__PURE__ */ jsx(Tag, {
 		ref,
-		className: classNames("dsn-card-heading", className),
+		className: classNames("dsn-card__heading", className),
 		...props,
 		children: href ? /* @__PURE__ */ jsx("a", {
 			href,
-			className: "dsn-card-heading__link",
+			className: "dsn-card__link",
 			children
 		}) : children
 	});
 });
 CardHeading.displayName = "CardHeading";
 /**
+* CardLabel sub-component
+* Gebruik in plaats van `CardHeading` wanneer de card geen nieuw onderwerp
+* introduceert, zoals bij login-opties of instellingen. Ontvangt `href` via
+* context, net als `CardHeading`.
+*/
+const CardLabel = React.forwardRef(({ className, children, ...props }, ref) => {
+	const { href } = React.useContext(CardContext);
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		className: classNames("dsn-card__label", className),
+		...props,
+		children: href ? /* @__PURE__ */ jsx("a", {
+			href,
+			className: "dsn-card__link",
+			children
+		}) : children
+	});
+});
+CardLabel.displayName = "CardLabel";
+/**
+* CardDescription sub-component
+* Korte omschrijving met eigen typografie-tokens.
+*/
+const CardDescription = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		className: classNames("dsn-card__description", className),
+		...props,
+		children
+	});
+});
+CardDescription.displayName = "CardDescription";
+/**
+* CardMeta sub-component
+* Aanvullende gegevens bij de card, zoals een datum.
+*/
+const CardMeta = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		className: classNames("dsn-card__meta", className),
+		...props,
+		children
+	});
+});
+CardMeta.displayName = "CardMeta";
+/**
 * CardFooter sub-component
-* Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.
-* Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde
-* bestemming heeft als de card — vermijdt een dubbele tabstop.
+* Staat altijd onderaan de card. Links en buttons staan boven de stretched
+* link en blijven zelfstandig klikbaar. Voor een visuele "Lees meer" naar
+* dezelfde bestemming als de card: gebruik `CardAffordance`.
 */
 const CardFooter = React.forwardRef(({ className, children, ...props }, ref) => {
 	return /* @__PURE__ */ jsx("div", {
@@ -104,6 +172,21 @@ const CardFooter = React.forwardRef(({ className, children, ...props }, ref) =>
 });
 CardFooter.displayName = "CardFooter";
 /**
+* CardAffordance sub-component
+* Een `<span aria-hidden="true">` die eruitziet als een link. De stretched
+* link vangt de klik al af, dus er is geen tweede tabstop nodig.
+*/
+const CardAffordance = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: classNames("dsn-card__affordance", className),
+		"aria-hidden": "true",
+		...props,
+		children
+	});
+});
+CardAffordance.displayName = "CardAffordance";
+/**
 * CardGroup sub-component
 * Flexbox wrapper die gelijke hoogte garandeert en de footer in elke card onderaan uitlijnt.
 * Rendert `role="list"` wanneer `as="ul"` — nodig omdat CSS-resets de lijstsemantiek verwijderen.
@@ -120,6 +203,6 @@ const CardGroup = React.forwardRef(({ className, as: Tag = "ul", children, ...pr
 });
 CardGroup.displayName = "CardGroup";
 //#endregion
-export { Card, CardBody, CardFooter, CardGroup, CardHeader, CardHeading };
+export { Card, CardAffordance, CardBody, CardDescription, CardFooter, CardGroup, CardHeader, CardHeading, CardLabel, CardMeta, CardPreHeader };
 
 //# sourceMappingURL=Card2.mjs.map

package/dist/Card/Card2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card2.mjs","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Card.css';\n\n// =============================================================================\n// Context — Card deelt href met CardHeading via React context\n// =============================================================================\n\ninterface CardContextValue {\n  href?: string;\n}\n\nconst CardContext = React.createContext<CardContextValue>({});\n\n// =============================================================================\n// Card — root container\n// =============================================================================\n\nexport interface CardProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * URL voor de stretched link. De `CardHeading` ontvangt `href` automatisch\n   * via React context en wraps de heading-tekst in een `<a>`.\n   */\n  href?: string;\n\n  /** Sub-componenten: `CardHeader`, `CardBody`, `CardFooter` */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * Card component\n * Configureerbare container voor gestructureerde content met header, body en footer.\n * Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.\n * Screenreaders lezen alleen de heading-tekst als linknaam.\n *\n * @example\n * ```tsx\n * <Card href=\"/artikel/slug\">\n *   <CardHeader>\n *     <Image src=\"/foto.jpg\" alt=\"\" width={800} height={450} ratio=\"16:9\" />\n *   </CardHeader>\n *   <CardBody>\n *     <CardHeading level={2}>Artikeltitel</CardHeading>\n *     <Paragraph>Korte beschrijving.</Paragraph>\n *   </CardBody>\n *   <CardFooter>\n *     <Link href=\"/artikel/slug\" aria-hidden tabIndex={-1}>Lees meer</Link>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLElement, CardProps>(\n  ({ className, href, children, ...props }, ref) => {\n    return (\n      <CardContext.Provider value={{ href }}>\n        <article\n          ref={ref}\n          className={classNames('dsn-card', className)}\n          {...props}\n        >\n          {children}\n        </article>\n      </CardContext.Provider>\n    );\n  }\n);\n\nCard.displayName = 'Card';\n\n// =============================================================================\n// CardHeader — optionele afbeeldingssectie\n// =============================================================================\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Afbeelding (`Image` component). Zonder children → toont placeholder\n   * met `aspect-ratio: 16 / 9` voor visuele consistentie in groep.\n   */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardHeader sub-component\n * Zonder children → toont automatisch een afbeeldingsplaceholder.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-card__header', className)}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <div className=\"dsn-card__image-placeholder\" aria-hidden=\"true\" />\n        )}\n      </div>\n    );\n  }\n);\n\nCardHeader.displayName = 'CardHeader';\n\n// =============================================================================\n// CardBody — inhoudssectie\n// =============================================================================\n\nexport interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `CardHeading`, optionele extra content (bijv. `StatusBadge`), `Paragraph` */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardBody sub-component\n * Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.\n */\nexport const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-card__body', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCardBody.displayName = 'CardBody';\n\n// =============================================================================\n// CardHeading — heading met stretched link\n// =============================================================================\n\nexport interface CardHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantisch heading-niveau. Visuele appearance is altijd \"card-heading\".\n   * @default 2\n   */\n  level?: 2 | 3 | 4;\n\n  /** Heading-tekst */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardHeading sub-component\n * Ontvangt `href` automatisch via React context van de parent `Card`.\n * Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class=\"dsn-card-heading__link\">`.\n * Het `::before` pseudo-element dekt de volledige card (stretched link).\n */\nexport const CardHeading = React.forwardRef<\n  HTMLHeadingElement,\n  CardHeadingProps\n>(({ className, level = 2, children, ...props }, ref) => {\n  const { href } = React.useContext(CardContext);\n  const Tag = `h${level}` as 'h2' | 'h3' | 'h4';\n\n  return (\n    <Tag\n      ref={ref}\n      className={classNames('dsn-card-heading', className)}\n      {...props}\n    >\n      {href ? (\n        <a href={href} className=\"dsn-card-heading__link\">\n          {children}\n        </a>\n      ) : (\n        children\n      )}\n    </Tag>\n  );\n});\n\nCardHeading.displayName = 'CardHeading';\n\n// =============================================================================\n// CardFooter — voettekst\n// =============================================================================\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `Link` of `ButtonLink` — staat boven de stretched link via CSS z-index */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardFooter sub-component\n * Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.\n * Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde\n * bestemming heeft als de card — vermijdt een dubbele tabstop.\n */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-card__footer', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCardFooter.displayName = 'CardFooter';\n\n// =============================================================================\n// CardGroup — layout wrapper\n// =============================================================================\n\nexport interface CardGroupProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Semantisch container-element.\n   * Gebruik `div` wanneer cards geen lijst-context hebben.\n   * @default 'ul'\n   */\n  as?: 'ul' | 'div';\n\n  /** `Card` componenten */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardGroup sub-component\n * Flexbox wrapper die gelijke hoogte garandeert en de footer in elke card onderaan uitlijnt.\n * Rendert `role=\"list\"` wanneer `as=\"ul\"` — nodig omdat CSS-resets de lijstsemantiek verwijderen.\n */\nexport const CardGroup = React.forwardRef<HTMLElement, CardGroupProps>(\n  ({ className, as: Tag = 'ul', children, ...props }, ref) => {\n    const roleProps = Tag === 'ul' ? { role: 'list' as const } : {};\n\n    return (\n      <Tag\n        ref={ref as React.Ref<HTMLUListElement & HTMLDivElement>}\n        className={classNames('dsn-card-group', className)}\n        {...roleProps}\n        {...props}\n      >\n        {children}\n      </Tag>\n    );\n  }\n);\n\nCardGroup.displayName = 'CardGroup';\n"],"mappings":";;;;;AAYA,MAAM,cAAc,MAAM,cAAgC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;AAyC5D,MAAa,OAAO,MAAM,YACvB,EAAE,WAAW,MAAM,UAAU,GAAG,SAAS,QAAQ;CAChD,OACE,oBAAC,YAAY,UAAb;EAAsB,OAAO,EAAE,KAAK;EAClC,UAAA,oBAAC,WAAD;GACO;GACL,WAAW,WAAW,YAAY,SAAS;GAC3C,GAAI;GAEH;EACM,CAAA;CACW,CAAA;AAE1B,CACF;AAEA,KAAK,cAAc;;;;;AAoBnB,MAAa,aAAa,MAAM,YAC7B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,oBAAoB,SAAS;EACnD,GAAI;EAEH,UAAA,WACC,WAEA,oBAAC,OAAD;GAAK,WAAU;GAA8B,eAAY;EAAQ,CAAA;CAEhE,CAAA;AAET,CACF;AAEA,WAAW,cAAc;;;;;AAiBzB,MAAa,WAAW,MAAM,YAC3B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,kBAAkB,SAAS;EACjD,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc;;;;;;;AAyBvB,MAAa,cAAc,MAAM,YAG9B,EAAE,WAAW,QAAQ,GAAG,UAAU,GAAG,SAAS,QAAQ;CACvD,MAAM,EAAE,SAAS,MAAM,WAAW,WAAW;CAC7C,MAAM,MAAM,IAAI;CAEhB,OACE,oBAAC,KAAD;EACO;EACL,WAAW,WAAW,oBAAoB,SAAS;EACnD,GAAI;EAEH,UAAA,OACC,oBAAC,KAAD;GAAS;GAAM,WAAU;GACtB;EACA,CAAA,IAEH;CAEC,CAAA;AAET,CAAC;AAED,YAAY,cAAc;;;;;;;AAmB1B,MAAa,aAAa,MAAM,YAC7B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,oBAAoB,SAAS;EACnD,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,WAAW,cAAc;;;;;;AAyBzB,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,IAAI,MAAM,MAAM,UAAU,GAAG,SAAS,QAAQ;CAC1D,MAAM,YAAY,QAAQ,OAAO,EAAE,MAAM,OAAgB,IAAI,CAAC;CAE9D,OACE,oBAAC,KAAD;EACO;EACL,WAAW,WAAW,kBAAkB,SAAS;EACjD,GAAI;EACJ,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"Card2.mjs","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Card.css';\n\n// =============================================================================\n// Context — Card deelt href met CardHeading via React context\n// =============================================================================\n\ninterface CardContextValue {\n  href?: string;\n}\n\nconst CardContext = React.createContext<CardContextValue>({});\n\n// =============================================================================\n// Card — root container\n// =============================================================================\n\nexport interface CardProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * URL voor de stretched link. `CardHeading` en `CardLabel` ontvangen `href`\n   * automatisch via React context en zetten hun tekst in een `<a>`.\n   */\n  href?: string;\n\n  /** Secties: `CardHeader`, `CardPreHeader`, `CardBody`, `CardFooter` */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * Card component\n * Configureerbare container met vier optionele secties: `CardPreHeader`,\n * `CardHeader`, `CardBody` en `CardFooter` (zie DR-2026-11).\n *\n * Zet `CardHeader` in de JSX altijd vóór `CardPreHeader`: zo kondigt een\n * screenreader de heading eerst aan. De CSS zet de pre-header visueel bovenaan.\n *\n * Met `href` wordt de heading een stretched link: de link dekt de volledige\n * card, en screenreaders lezen alleen de heading-tekst als linknaam.\n *\n * @example\n * ```tsx\n * <Card href=\"/artikel/slug\">\n *   <CardHeader>\n *     <CardHeading level={2}>Artikeltitel</CardHeading>\n *   </CardHeader>\n *   <CardPreHeader>\n *     <Image src=\"/foto.jpg\" alt=\"\" width={800} height={450} ratio=\"16:9\" />\n *   </CardPreHeader>\n *   <CardBody>\n *     <Paragraph>Korte beschrijving.</Paragraph>\n *   </CardBody>\n *   <CardFooter>\n *     <CardAffordance>Lees meer</CardAffordance>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLElement, CardProps>(\n  ({ className, href, children, ...props }, ref) => {\n    return (\n      <CardContext.Provider value={{ href }}>\n        <article\n          ref={ref}\n          className={classNames('dsn-card', className)}\n          {...props}\n        >\n          {children}\n        </article>\n      </CardContext.Provider>\n    );\n  }\n);\n\nCard.displayName = 'Card';\n\n// =============================================================================\n// CardPreHeader — slot dat visueel bovenaan staat\n// =============================================================================\n\nexport interface CardPreHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Afbeelding, badge, logo of icoon. Een `Image` als direct kind loopt door\n   * tot de rand van de card. Zonder children → toont een placeholder met\n   * `aspect-ratio: 16 / 9` voor visuele consistentie in een groep.\n   *\n   * Zet hier geen focusbare elementen in: de pre-header staat in de DOM ná de\n   * header, dus de focusvolgorde zou afwijken van de visuele volgorde.\n   */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardPreHeader sub-component\n * Staat in de DOM ná `CardHeader` en komt visueel bovenaan via `order: -1`.\n * Zonder children → toont automatisch een afbeeldingsplaceholder.\n */\nexport const CardPreHeader = React.forwardRef<\n  HTMLDivElement,\n  CardPreHeaderProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={classNames('dsn-card__pre-header', className)}\n      {...props}\n    >\n      {children ? (\n        children\n      ) : (\n        <div className=\"dsn-card__image-placeholder\" aria-hidden=\"true\" />\n      )}\n    </div>\n  );\n});\n\nCardPreHeader.displayName = 'CardPreHeader';\n\n// =============================================================================\n// CardHeader — heading of label, plus bijbehorende badges\n// =============================================================================\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `CardHeading` of `CardLabel`, optioneel gevolgd door een `StatusBadge` */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardHeader sub-component\n * Bevat de heading of het label van de card. Zet hem in de JSX vóór\n * `CardPreHeader`.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-card__header', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCardHeader.displayName = 'CardHeader';\n\n// =============================================================================\n// CardBody — inhoudssectie\n// =============================================================================\n\nexport interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `Paragraph`, `CardDescription`, `CardMeta` of andere inhoud */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardBody sub-component\n * Inhoudssectie onder de header.\n */\nexport const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-card__body', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCardBody.displayName = 'CardBody';\n\n// =============================================================================\n// CardHeading — heading met stretched link\n// =============================================================================\n\nexport interface CardHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantisch heading-niveau. Visuele appearance is altijd \"card-heading\".\n   * @default 2\n   */\n  level?: 2 | 3 | 4;\n\n  /** Heading-tekst */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardHeading sub-component\n * Ontvangt `href` automatisch via React context van de parent `Card`.\n * Wanneer `href` beschikbaar is, staat de heading-tekst in een `<a class=\"dsn-card__link\">`.\n * Het `::before` pseudo-element dekt de volledige card (stretched link).\n */\nexport const CardHeading = React.forwardRef<\n  HTMLHeadingElement,\n  CardHeadingProps\n>(({ className, level = 2, children, ...props }, ref) => {\n  const { href } = React.useContext(CardContext);\n  const Tag = `h${level}` as 'h2' | 'h3' | 'h4';\n\n  return (\n    <Tag\n      ref={ref}\n      className={classNames('dsn-card__heading', className)}\n      {...props}\n    >\n      {href ? (\n        <a href={href} className=\"dsn-card__link\">\n          {children}\n        </a>\n      ) : (\n        children\n      )}\n    </Tag>\n  );\n});\n\nCardHeading.displayName = 'CardHeading';\n\n// =============================================================================\n// CardLabel — compacte aanduiding zonder heading-semantiek\n// =============================================================================\n\nexport interface CardLabelProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /** Label-tekst */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardLabel sub-component\n * Gebruik in plaats van `CardHeading` wanneer de card geen nieuw onderwerp\n * introduceert, zoals bij login-opties of instellingen. Ontvangt `href` via\n * context, net als `CardHeading`.\n */\nexport const CardLabel = React.forwardRef<HTMLParagraphElement, CardLabelProps>(\n  ({ className, children, ...props }, ref) => {\n    const { href } = React.useContext(CardContext);\n\n    return (\n      <p\n        ref={ref}\n        className={classNames('dsn-card__label', className)}\n        {...props}\n      >\n        {href ? (\n          <a href={href} className=\"dsn-card__link\">\n            {children}\n          </a>\n        ) : (\n          children\n        )}\n      </p>\n    );\n  }\n);\n\nCardLabel.displayName = 'CardLabel';\n\n// =============================================================================\n// CardDescription — korte omschrijving\n// =============================================================================\n\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardDescription sub-component\n * Korte omschrijving met eigen typografie-tokens.\n */\nexport const CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  CardDescriptionProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <p\n      ref={ref}\n      className={classNames('dsn-card__description', className)}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n});\n\nCardDescription.displayName = 'CardDescription';\n\n// =============================================================================\n// CardMeta — aanvullende gegevens, zoals een datum\n// =============================================================================\n\nexport interface CardMetaProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /** Bijv. een `<time>`-element of een auteur */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardMeta sub-component\n * Aanvullende gegevens bij de card, zoals een datum.\n */\nexport const CardMeta = React.forwardRef<HTMLParagraphElement, CardMetaProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <p\n        ref={ref}\n        className={classNames('dsn-card__meta', className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  }\n);\n\nCardMeta.displayName = 'CardMeta';\n\n// =============================================================================\n// CardFooter — voettekst\n// =============================================================================\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `CardAffordance`, of een `Link` / `ButtonLink` naar een andere bestemming */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardFooter sub-component\n * Staat altijd onderaan de card. Links en buttons staan boven de stretched\n * link en blijven zelfstandig klikbaar. Voor een visuele \"Lees meer\" naar\n * dezelfde bestemming als de card: gebruik `CardAffordance`.\n */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-card__footer', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCardFooter.displayName = 'CardFooter';\n\n// =============================================================================\n// CardAffordance — visuele hint zonder eigen interactie\n// =============================================================================\n\nexport interface CardAffordanceProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Bijv. \"Lees meer\" */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardAffordance sub-component\n * Een `<span aria-hidden=\"true\">` die eruitziet als een link. De stretched\n * link vangt de klik al af, dus er is geen tweede tabstop nodig.\n */\nexport const CardAffordance = React.forwardRef<\n  HTMLSpanElement,\n  CardAffordanceProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={classNames('dsn-card__affordance', className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n\nCardAffordance.displayName = 'CardAffordance';\n\n// =============================================================================\n// CardGroup — layout wrapper\n// =============================================================================\n\nexport interface CardGroupProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Semantisch container-element.\n   * Gebruik `div` wanneer cards geen lijst-context hebben.\n   * @default 'ul'\n   */\n  as?: 'ul' | 'div';\n\n  /** `Card` componenten */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardGroup sub-component\n * Flexbox wrapper die gelijke hoogte garandeert en de footer in elke card onderaan uitlijnt.\n * Rendert `role=\"list\"` wanneer `as=\"ul\"` — nodig omdat CSS-resets de lijstsemantiek verwijderen.\n */\nexport const CardGroup = React.forwardRef<HTMLElement, CardGroupProps>(\n  ({ className, as: Tag = 'ul', children, ...props }, ref) => {\n    const roleProps = Tag === 'ul' ? { role: 'list' as const } : {};\n\n    return (\n      <Tag\n        ref={ref as React.Ref<HTMLUListElement & HTMLDivElement>}\n        className={classNames('dsn-card-group', className)}\n        {...roleProps}\n        {...props}\n      >\n        {children}\n      </Tag>\n    );\n  }\n);\n\nCardGroup.displayName = 'CardGroup';\n"],"mappings":";;;;;AAYA,MAAM,cAAc,MAAM,cAAgC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgD5D,MAAa,OAAO,MAAM,YACvB,EAAE,WAAW,MAAM,UAAU,GAAG,SAAS,QAAQ;CAChD,OACE,oBAAC,YAAY,UAAb;EAAsB,OAAO,EAAE,KAAK;EAClC,UAAA,oBAAC,WAAD;GACO;GACL,WAAW,WAAW,YAAY,SAAS;GAC3C,GAAI;GAEH;EACM,CAAA;CACW,CAAA;AAE1B,CACF;AAEA,KAAK,cAAc;;;;;;AAyBnB,MAAa,gBAAgB,MAAM,YAGhC,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC5C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,wBAAwB,SAAS;EACvD,GAAI;EAEH,UAAA,WACC,WAEA,oBAAC,OAAD;GAAK,WAAU;GAA8B,eAAY;EAAQ,CAAA;CAEhE,CAAA;AAET,CAAC;AAED,cAAc,cAAc;;;;;;AAkB5B,MAAa,aAAa,MAAM,YAC7B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,oBAAoB,SAAS;EACnD,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,WAAW,cAAc;;;;;AAiBzB,MAAa,WAAW,MAAM,YAC3B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,kBAAkB,SAAS;EACjD,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc;;;;;;;AAyBvB,MAAa,cAAc,MAAM,YAG9B,EAAE,WAAW,QAAQ,GAAG,UAAU,GAAG,SAAS,QAAQ;CACvD,MAAM,EAAE,SAAS,MAAM,WAAW,WAAW;CAC7C,MAAM,MAAM,IAAI;CAEhB,OACE,oBAAC,KAAD;EACO;EACL,WAAW,WAAW,qBAAqB,SAAS;EACpD,GAAI;EAEH,UAAA,OACC,oBAAC,KAAD;GAAS;GAAM,WAAU;GACtB;EACA,CAAA,IAEH;CAEC,CAAA;AAET,CAAC;AAED,YAAY,cAAc;;;;;;;AAmB1B,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,MAAM,EAAE,SAAS,MAAM,WAAW,WAAW;CAE7C,OACE,oBAAC,KAAD;EACO;EACL,WAAW,WAAW,mBAAmB,SAAS;EAClD,GAAI;EAEH,UAAA,OACC,oBAAC,KAAD;GAAS;GAAM,WAAU;GACtB;EACA,CAAA,IAEH;CAED,CAAA;AAEP,CACF;AAEA,UAAU,cAAc;;;;;AAgBxB,MAAa,kBAAkB,MAAM,YAGlC,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC5C,OACE,oBAAC,KAAD;EACO;EACL,WAAW,WAAW,yBAAyB,SAAS;EACxD,GAAI;EAEH;CACA,CAAA;AAEP,CAAC;AAED,gBAAgB,cAAc;;;;;AAiB9B,MAAa,WAAW,MAAM,YAC3B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,KAAD;EACO;EACL,WAAW,WAAW,kBAAkB,SAAS;EACjD,GAAI;EAEH;CACA,CAAA;AAEP,CACF;AAEA,SAAS,cAAc;;;;;;;AAmBvB,MAAa,aAAa,MAAM,YAC7B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,oBAAoB,SAAS;EACnD,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,WAAW,cAAc;;;;;;AAkBzB,MAAa,iBAAiB,MAAM,YAGjC,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC5C,OACE,oBAAC,QAAD;EACO;EACL,WAAW,WAAW,wBAAwB,SAAS;EACvD,eAAY;EACZ,GAAI;EAEH;CACG,CAAA;AAEV,CAAC;AAED,eAAe,cAAc;;;;;;AAyB7B,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,IAAI,MAAM,MAAM,UAAU,GAAG,SAAS,QAAQ;CAC1D,MAAM,YAAY,QAAQ,OAAO,EAAE,MAAM,OAAgB,IAAI,CAAC;CAE9D,OACE,oBAAC,KAAD;EACO;EACL,WAAW,WAAW,kBAAkB,SAAS;EACjD,GAAI;EACJ,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,UAAU,cAAc"}

package/dist/Card/index.d.mts

@@ -1,2 +1,2 @@
-import { Card, CardBody, CardBodyProps, CardFooter, CardFooterProps, CardGroup, CardGroupProps, CardHeader, CardHeaderProps, CardHeading, CardHeadingProps, CardProps } from "./Card.mjs";
-export { Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardGroup, type CardGroupProps, CardHeader, type CardHeaderProps, CardHeading, type CardHeadingProps, type CardProps };
+import { Card, CardAffordance, CardAffordanceProps, CardBody, CardBodyProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardGroup, CardGroupProps, CardHeader, CardHeaderProps, CardHeading, CardHeadingProps, CardLabel, CardLabelProps, CardMeta, CardMetaProps, CardPreHeader, CardPreHeaderProps, CardProps } from "./Card.mjs";
+export { Card, CardAffordance, type CardAffordanceProps, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardGroup, type CardGroupProps, CardHeader, type CardHeaderProps, CardHeading, type CardHeadingProps, CardLabel, type CardLabelProps, CardMeta, type CardMetaProps, CardPreHeader, type CardPreHeaderProps, type CardProps };

package/dist/DateInput/DateInput.d.mts

@@ -14,7 +14,7 @@ interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 /**
  * Date Input component
  * Date input with an interactive calendar button at inline-end that opens the native date picker.
- * Fixed width (sm) — not configurable, as date inputs have a predictable content width.
+ * Fixed inline-size (md): not configurable, as date inputs have a predictable content length.
  *
  * @example
  * ```tsx

package/dist/DateInput/DateInput2.mjs

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * Date Input component
 * Date input with an interactive calendar button at inline-end that opens the native date picker.
-* Fixed width (sm) — not configurable, as date inputs have a predictable content width.
+* Fixed inline-size (md): not configurable, as date inputs have a predictable content length.
 *
 * @example
 * ```tsx

package/dist/DateInput/DateInput2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput2.mjs","names":[],"sources":["../../src/DateInput/DateInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './DateInput.css';\n\nexport interface DateInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Date Input component\n * Date input with an interactive calendar button at inline-end that opens the native date picker.\n * Fixed width (sm) — not configurable, as date inputs have a predictable content width.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <DateInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"date\">Datum</FormFieldLabel>\n * <DateInput id=\"date\" />\n *\n * // With default value\n * <DateInput defaultValue=\"2025-03-15\" />\n *\n * // Invalid state\n * <DateInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-date-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-date-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"date\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"calendar-event\" aria-hidden />}\n            className=\"dsn-date-input__button\"\n            onClick={handleButtonClick}\n          >\n            Datumkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nDateInput.displayName = 'DateInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,WAAW,MAAM,OAAyB,IAAI;CAGpD,MAAM,YAAY,MAAM,aACrB,SAAkC;EACjC,SAA8D,UAC5D;EACF,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAyD,UACvD;CAEN,GACA,CAAC,GAAG,CACN;CAEA,MAAM,0BAA0B;EAC9B,IAAI,SAAS,WAAW,gBAAgB,SAAS,SAC/C,SAAS,QAAQ,WAAW;CAEhC;CAEA,MAAM,eAAe,WACnB,kBACA,kBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACA;GACV,GAAI;EACL,CAAA,GACA,CAAC,YAAY,CAAC,YACb,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAiB,eAAA;GAAa,CAAA;GACpD,WAAU;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CAEP;;AAET,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"DateInput2.mjs","names":[],"sources":["../../src/DateInput/DateInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './DateInput.css';\n\nexport interface DateInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Date Input component\n * Date input with an interactive calendar button at inline-end that opens the native date picker.\n * Fixed inline-size (md): not configurable, as date inputs have a predictable content length.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <DateInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"date\">Datum</FormFieldLabel>\n * <DateInput id=\"date\" />\n *\n * // With default value\n * <DateInput defaultValue=\"2025-03-15\" />\n *\n * // Invalid state\n * <DateInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-date-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-date-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"date\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"calendar-event\" aria-hidden />}\n            className=\"dsn-date-input__button\"\n            onClick={handleButtonClick}\n          >\n            Datumkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nDateInput.displayName = 'DateInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,WAAW,MAAM,OAAyB,IAAI;CAGpD,MAAM,YAAY,MAAM,aACrB,SAAkC;EACjC,SAA8D,UAC5D;EACF,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAyD,UACvD;CAEN,GACA,CAAC,GAAG,CACN;CAEA,MAAM,0BAA0B;EAC9B,IAAI,SAAS,WAAW,gBAAgB,SAAS,SAC/C,SAAS,QAAQ,WAAW;CAEhC;CAEA,MAAM,eAAe,WACnB,kBACA,kBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACA;GACV,GAAI;EACL,CAAA,GACA,CAAC,YAAY,CAAC,YACb,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAiB,eAAA;GAAa,CAAA;GACpD,WAAU;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CAEP;;AAET,CACF;AAEA,UAAU,cAAc"}

package/dist/DateInputGroup/DateInputGroup2.mjs

@@ -61,7 +61,7 @@ const DateInputGroup = React.forwardRef(({ className, value, onChange, invalid,
 					children: "Dag"
 				}), /* @__PURE__ */ jsx(NumberInput, {
 					id: dayId,
-					width: "xs",
+					inlineSize: "xs",
 					value: value?.day ?? "",
 					onChange: handleChange("day"),
 					invalid,
@@ -80,7 +80,7 @@ const DateInputGroup = React.forwardRef(({ className, value, onChange, invalid,
 					children: "Maand"
 				}), /* @__PURE__ */ jsx(NumberInput, {
 					id: monthId,
-					width: "xs",
+					inlineSize: "xs",
 					value: value?.month ?? "",
 					onChange: handleChange("month"),
 					invalid,
@@ -99,7 +99,7 @@ const DateInputGroup = React.forwardRef(({ className, value, onChange, invalid,
 					children: "Jaar"
 				}), /* @__PURE__ */ jsx(NumberInput, {
 					id: yearId,
-					width: "sm",
+					inlineSize: "sm",
 					value: value?.year ?? "",
 					onChange: handleChange("year"),
 					invalid,

package/dist/DateInputGroup/DateInputGroup2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateInputGroup2.mjs","names":[],"sources":["../../src/DateInputGroup/DateInputGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { NumberInput } from '../NumberInput';\nimport './DateInputGroup.css';\n\nexport interface DateInputGroupValue {\n  day: string;\n  month: string;\n  year: string;\n}\n\nexport interface DateInputGroupProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  /**\n   * The current value of the date group\n   */\n  value?: DateInputGroupValue;\n\n  /**\n   * Called when any field changes, with the full updated value object\n   */\n  onChange?: (value: DateInputGroupValue) => void;\n\n  /**\n   * Whether all fields are in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Whether all fields are disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * id prefix used to generate unique ids for each field (dag, maand, jaar)\n   * E.g. id=\"geboortedatum\" → \"geboortedatum-dag\", \"geboortedatum-maand\", \"geboortedatum-jaar\"\n   */\n  id?: string;\n}\n\n/**\n * Date Input Group component\n * Three separate inputs for day, month and year.\n * More accessible than a native date picker: works consistently across all browsers and\n * devices, and allows partial input (e.g. year only).\n *\n * Wrap in a FormFieldset for a complete form field with legend and error message.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <DateInputGroup\n *   value={{ day: '', month: '', year: '' }}\n *   onChange={(val) => setValue(val)}\n * />\n *\n * // Complete form field\n * <FormFieldset>\n *   <FormFieldLegend>Geboortedatum</FormFieldLegend>\n *   <FormFieldDescription>Bijvoorbeeld: 15 3 1990</FormFieldDescription>\n *   <DateInputGroup\n *     id=\"geboortedatum\"\n *     value={value}\n *     onChange={setValue}\n *   />\n * </FormFieldset>\n *\n * // Invalid state\n * <DateInputGroup invalid value={value} onChange={setValue} />\n * ```\n */\nexport const DateInputGroup = React.forwardRef<\n  HTMLDivElement,\n  DateInputGroupProps\n>(({ className, value, onChange, invalid, disabled, id, ...props }, ref) => {\n  const classes = classNames('dsn-date-input-group', className);\n\n  const handleChange =\n    (field: keyof DateInputGroupValue) =>\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.({\n        day: value?.day ?? '',\n        month: value?.month ?? '',\n        year: value?.year ?? '',\n        [field]: e.target.value,\n      });\n    };\n\n  const dayId = id ? `${id}-dag` : undefined;\n  const monthId = id ? `${id}-maand` : undefined;\n  const yearId = id ? `${id}-jaar` : undefined;\n\n  return (\n    <div ref={ref} className={classes} {...props}>\n      <div className=\"dsn-date-input-group__field\">\n        <label className=\"dsn-date-input-group__label\" htmlFor={dayId}>\n          Dag\n        </label>\n        <NumberInput\n          id={dayId}\n          width=\"xs\"\n          value={value?.day ?? ''}\n          onChange={handleChange('day')}\n          invalid={invalid}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          placeholder=\"DD\"\n          min={1}\n          max={31}\n        />\n      </div>\n      <div className=\"dsn-date-input-group__field\">\n        <label className=\"dsn-date-input-group__label\" htmlFor={monthId}>\n          Maand\n        </label>\n        <NumberInput\n          id={monthId}\n          width=\"xs\"\n          value={value?.month ?? ''}\n          onChange={handleChange('month')}\n          invalid={invalid}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          placeholder=\"MM\"\n          min={1}\n          max={12}\n        />\n      </div>\n      <div className=\"dsn-date-input-group__field\">\n        <label className=\"dsn-date-input-group__label\" htmlFor={yearId}>\n          Jaar\n        </label>\n        <NumberInput\n          id={yearId}\n          width=\"sm\"\n          value={value?.year ?? ''}\n          onChange={handleChange('year')}\n          invalid={invalid}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          placeholder=\"JJJJ\"\n          min={1}\n          max={9999}\n        />\n      </div>\n    </div>\n  );\n});\n\nDateInputGroup.displayName = 'DateInputGroup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,MAAa,iBAAiB,MAAM,YAGjC,EAAE,WAAW,OAAO,UAAU,SAAS,UAAU,IAAI,GAAG,SAAS,QAAQ;CAC1E,MAAM,UAAU,WAAW,wBAAwB,SAAS;CAE5D,MAAM,gBACH,WACA,MAA2C;EAC1C,WAAW;GACT,KAAK,OAAO,OAAO;GACnB,OAAO,OAAO,SAAS;GACvB,MAAM,OAAO,QAAQ;IACpB,QAAQ,EAAE,OAAO;EACpB,CAAC;CACH;CAEF,MAAM,QAAQ,KAAK,GAAG,GAAG,QAAQ,KAAA;CACjC,MAAM,UAAU,KAAK,GAAG,GAAG,UAAU,KAAA;CACrC,MAAM,SAAS,KAAK,GAAG,GAAG,SAAS,KAAA;CAEnC,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW;EAAS,GAAI;EAAvC,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAD;KAAO,WAAU;KAA8B,SAAS;KAAO,UAAA;IAExD,CAAA,GACP,oBAAC,aAAD;KACE,IAAI;KACJ,OAAM;KACN,OAAO,OAAO,OAAO;KACrB,UAAU,aAAa,KAAK;KACnB;KACT,gBAAc,WAAW,KAAA;KACf;KACV,aAAY;KACZ,KAAK;KACL,KAAK;IACN,CAAA,CACE;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAD;KAAO,WAAU;KAA8B,SAAS;KAAS,UAAA;IAE1D,CAAA,GACP,oBAAC,aAAD;KACE,IAAI;KACJ,OAAM;KACN,OAAO,OAAO,SAAS;KACvB,UAAU,aAAa,OAAO;KACrB;KACT,gBAAc,WAAW,KAAA;KACf;KACV,aAAY;KACZ,KAAK;KACL,KAAK;IACN,CAAA,CACE;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAD;KAAO,WAAU;KAA8B,SAAS;KAAQ,UAAA;IAEzD,CAAA,GACP,oBAAC,aAAD;KACE,IAAI;KACJ,OAAM;KACN,OAAO,OAAO,QAAQ;KACtB,UAAU,aAAa,MAAM;KACpB;KACT,gBAAc,WAAW,KAAA;KACf;KACV,aAAY;KACZ,KAAK;KACL,KAAK;IACN,CAAA,CACE;;EACF;;AAET,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"DateInputGroup2.mjs","names":[],"sources":["../../src/DateInputGroup/DateInputGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { NumberInput } from '../NumberInput';\nimport './DateInputGroup.css';\n\nexport interface DateInputGroupValue {\n  day: string;\n  month: string;\n  year: string;\n}\n\nexport interface DateInputGroupProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  /**\n   * The current value of the date group\n   */\n  value?: DateInputGroupValue;\n\n  /**\n   * Called when any field changes, with the full updated value object\n   */\n  onChange?: (value: DateInputGroupValue) => void;\n\n  /**\n   * Whether all fields are in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Whether all fields are disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * id prefix used to generate unique ids for each field (dag, maand, jaar)\n   * E.g. id=\"geboortedatum\" → \"geboortedatum-dag\", \"geboortedatum-maand\", \"geboortedatum-jaar\"\n   */\n  id?: string;\n}\n\n/**\n * Date Input Group component\n * Three separate inputs for day, month and year.\n * More accessible than a native date picker: works consistently across all browsers and\n * devices, and allows partial input (e.g. year only).\n *\n * Wrap in a FormFieldset for a complete form field with legend and error message.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <DateInputGroup\n *   value={{ day: '', month: '', year: '' }}\n *   onChange={(val) => setValue(val)}\n * />\n *\n * // Complete form field\n * <FormFieldset>\n *   <FormFieldLegend>Geboortedatum</FormFieldLegend>\n *   <FormFieldDescription>Bijvoorbeeld: 15 3 1990</FormFieldDescription>\n *   <DateInputGroup\n *     id=\"geboortedatum\"\n *     value={value}\n *     onChange={setValue}\n *   />\n * </FormFieldset>\n *\n * // Invalid state\n * <DateInputGroup invalid value={value} onChange={setValue} />\n * ```\n */\nexport const DateInputGroup = React.forwardRef<\n  HTMLDivElement,\n  DateInputGroupProps\n>(({ className, value, onChange, invalid, disabled, id, ...props }, ref) => {\n  const classes = classNames('dsn-date-input-group', className);\n\n  const handleChange =\n    (field: keyof DateInputGroupValue) =>\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.({\n        day: value?.day ?? '',\n        month: value?.month ?? '',\n        year: value?.year ?? '',\n        [field]: e.target.value,\n      });\n    };\n\n  const dayId = id ? `${id}-dag` : undefined;\n  const monthId = id ? `${id}-maand` : undefined;\n  const yearId = id ? `${id}-jaar` : undefined;\n\n  return (\n    <div ref={ref} className={classes} {...props}>\n      <div className=\"dsn-date-input-group__field\">\n        <label className=\"dsn-date-input-group__label\" htmlFor={dayId}>\n          Dag\n        </label>\n        <NumberInput\n          id={dayId}\n          inlineSize=\"xs\"\n          value={value?.day ?? ''}\n          onChange={handleChange('day')}\n          invalid={invalid}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          placeholder=\"DD\"\n          min={1}\n          max={31}\n        />\n      </div>\n      <div className=\"dsn-date-input-group__field\">\n        <label className=\"dsn-date-input-group__label\" htmlFor={monthId}>\n          Maand\n        </label>\n        <NumberInput\n          id={monthId}\n          inlineSize=\"xs\"\n          value={value?.month ?? ''}\n          onChange={handleChange('month')}\n          invalid={invalid}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          placeholder=\"MM\"\n          min={1}\n          max={12}\n        />\n      </div>\n      <div className=\"dsn-date-input-group__field\">\n        <label className=\"dsn-date-input-group__label\" htmlFor={yearId}>\n          Jaar\n        </label>\n        <NumberInput\n          id={yearId}\n          inlineSize=\"sm\"\n          value={value?.year ?? ''}\n          onChange={handleChange('year')}\n          invalid={invalid}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          placeholder=\"JJJJ\"\n          min={1}\n          max={9999}\n        />\n      </div>\n    </div>\n  );\n});\n\nDateInputGroup.displayName = 'DateInputGroup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,MAAa,iBAAiB,MAAM,YAGjC,EAAE,WAAW,OAAO,UAAU,SAAS,UAAU,IAAI,GAAG,SAAS,QAAQ;CAC1E,MAAM,UAAU,WAAW,wBAAwB,SAAS;CAE5D,MAAM,gBACH,WACA,MAA2C;EAC1C,WAAW;GACT,KAAK,OAAO,OAAO;GACnB,OAAO,OAAO,SAAS;GACvB,MAAM,OAAO,QAAQ;IACpB,QAAQ,EAAE,OAAO;EACpB,CAAC;CACH;CAEF,MAAM,QAAQ,KAAK,GAAG,GAAG,QAAQ,KAAA;CACjC,MAAM,UAAU,KAAK,GAAG,GAAG,UAAU,KAAA;CACrC,MAAM,SAAS,KAAK,GAAG,GAAG,SAAS,KAAA;CAEnC,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW;EAAS,GAAI;EAAvC,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAD;KAAO,WAAU;KAA8B,SAAS;KAAO,UAAA;IAExD,CAAA,GACP,oBAAC,aAAD;KACE,IAAI;KACJ,YAAW;KACX,OAAO,OAAO,OAAO;KACrB,UAAU,aAAa,KAAK;KACnB;KACT,gBAAc,WAAW,KAAA;KACf;KACV,aAAY;KACZ,KAAK;KACL,KAAK;IACN,CAAA,CACE;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAD;KAAO,WAAU;KAA8B,SAAS;KAAS,UAAA;IAE1D,CAAA,GACP,oBAAC,aAAD;KACE,IAAI;KACJ,YAAW;KACX,OAAO,OAAO,SAAS;KACvB,UAAU,aAAa,OAAO;KACrB;KACT,gBAAc,WAAW,KAAA;KACf;KACV,aAAY;KACZ,KAAK;KACL,KAAK;IACN,CAAA,CACE;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAD;KAAO,WAAU;KAA8B,SAAS;KAAQ,UAAA;IAEzD,CAAA,GACP,oBAAC,aAAD;KACE,IAAI;KACJ,YAAW;KACX,OAAO,OAAO,QAAQ;KACtB,UAAU,aAAa,MAAM;KACpB;KACT,gBAAc,WAAW,KAAA;KACf;KACV,aAAY;KACZ,KAAK;KACL,KAAK;IACN,CAAA,CACE;;EACF;;AAET,CAAC;AAED,eAAe,cAAc"}

package/dist/Drawer/Drawer.d.mts

@@ -14,8 +14,11 @@ interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDialogElement>, 'chi
    * Modaal of non-modaal gedrag.
    * - `true` (standaard): opent via `.showModal()` — achtergrond geblokkeerd,
    *   focus blijft binnen het paneel, Escape sluit via `cancel`-event.
-   * - `false`: opent via `.show()` — achtergrond blijft interactief en de
-   *   gebruiker kan er met Tab naartoe, Escape sluit via `keydown`-listener.
+   * - `false`: `<dialog popover="manual">`, opent via `.showPopover()` —
+   *   achtergrond blijft interactief en de gebruiker kan er met Tab naartoe,
+   *   Escape sluit via `keydown`-listener. Het paneel staat in de top layer,
+   *   dus een sticky header of een voorouder met `transform` valt er niet
+   *   overheen.
    * @default true
    */
   modal?: boolean;

package/dist/Drawer/Drawer.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.mts","names":[],"sources":["../../src/Drawer/Drawer.tsx"],"mappings":";;UA0BiB,oBAAoB,KACnC,MAAM,eAAe;;;;EAMrB;;;;;EAMA;;;;;;;;;EAUA;;;;;;;EAQA,aAAa,MAAM,UAAU;;;;;EAM7B;;;;;EAMA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6BN,QAAM,MAAA,0BAAA,cAAA,MAAA,cAAA;UAuHF,0BAA0B,MAAM,eAAe;;;;EAI9D,WAAW,MAAM;;;;;;cAON,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA;UA+BR,2BAA2B,MAAM,eAAe;;;;;EAK/D;;;;EAKA,WAAW,MAAM;;;;;;;cAQN,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA;UAyCT,wBAAwB,MAAM,eAAe;;;;EAI5D,WAAW,MAAM;;;;;;cAON,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;UAoBN,0BAA0B,MAAM,eAAe;;;;EAI9D,WAAW,MAAM;;;;;;cAON,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA"}
+{"version":3,"file":"Drawer.d.mts","names":[],"sources":["../../src/Drawer/Drawer.tsx"],"mappings":";;UA0BiB,oBAAoB,KACnC,MAAM,eAAe;;;;EAMrB;;;;;EAMA;;;;;;;;;;;;EAaA;;;;;;;EAQA,aAAa,MAAM,UAAU;;;;;EAM7B;;;;;EAMA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6BN,QAAM,MAAA,0BAAA,cAAA,MAAA,cAAA;UA4JF,0BAA0B,MAAM,eAAe;;;;EAI9D,WAAW,MAAM;;;;;;cAON,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA;UA+BR,2BAA2B,MAAM,eAAe;;;;;EAK/D;;;;EAKA,WAAW,MAAM;;;;;;;cAQN,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA;UAyCT,wBAAwB,MAAM,eAAe;;;;EAI5D,WAAW,MAAM;;;;;;cAON,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;UAoBN,0BAA0B,MAAM,eAAe;;;;EAI9D,WAAW,MAAM;;;;;;cAON,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA"}

package/dist/Drawer/Drawer2.mjs

@@ -41,14 +41,28 @@ const Drawer = React.forwardRef(({ className, isOpen, onClose, modal = true, tri
 	const dialogRef = ref ?? internalRef;
 	const headingId = React.useId();
 	const headingRef = React.useRef(null);
+	const popoverShownRef = React.useRef(false);
+	const previousFocusRef = React.useRef(null);
 	React.useEffect(() => {
 		const dialog = dialogRef.current;
 		if (!dialog) return;
-		if (isOpen && !dialog.open) {
+		const isShown = dialog.open || popoverShownRef.current;
+		if (isOpen && !isShown) {
 			if (modal) dialog.showModal();
-			else dialog.show();
+			else {
+				previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+				dialog.showPopover();
+				popoverShownRef.current = true;
+			}
 			(headingRef.current ?? dialog).focus();
-		} else if (!isOpen && dialog.open) dialog.close();
+		} else if (!isOpen && isShown) {
+			if (popoverShownRef.current) {
+				const focusWasInside = dialog.contains(document.activeElement);
+				dialog.hidePopover();
+				popoverShownRef.current = false;
+				if (focusWasInside) previousFocusRef.current?.focus();
+			} else dialog.close();
+		}
 	}, [
 		isOpen,
 		modal,
@@ -95,6 +109,7 @@ const Drawer = React.forwardRef(({ className, isOpen, onClose, modal = true, tri
 			"aria-labelledby": headingId,
 			onCancel: handleCancel,
 			tabIndex: -1,
+			popover: modal ? void 0 : "manual",
 			...props,
 			children
 		})