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

package/README.md

@@ -101,7 +101,7 @@ function App() {
 - **TypeScript Support** - All components are fully typed
 - **JSDoc Documentation** - Comprehensive documentation with usage examples
 - **ForwardRef** - All components support ref forwarding
-- **Accessibility** - WCAG 2.1 Level AA compliant
+- **Accessibility** - WCAG 2.2 Level AA compliant
 - **Composable** - Components are designed to work together
 - **Themeable** - Uses design tokens for easy customization
 

package/dist/ActionGroup/ActionGroup.css

@@ -1,35 +1,55 @@
 /**
  * ActionGroup Component
  * Groups related actions (Buttons and Links) and manages their layout.
+ * Renders as a <ul> with each action in a <li>, with an aria-label
+ * describing the group — screenreaders announce the item count and the
+ * group's purpose (see issue #295).
  *
  * Usage:
  * <!-- Horizontal (default) — wraps automatically when viewport is too narrow -->
- * <div class="dsn-action-group">
- *   <button class="dsn-button dsn-button--strong dsn-button--size-default">
- *     <span class="dsn-button__label">Opslaan</span>
- *   </button>
- *   <button class="dsn-button dsn-button--subtle dsn-button--size-default">
- *     <span class="dsn-button__label">Annuleren</span>
- *   </button>
- * </div>
+ * <ul class="dsn-action-group" aria-label="Acties">
+ *   <li class="dsn-action-group__item">
+ *     <button class="dsn-button dsn-button--strong dsn-button--size-default">
+ *       <span class="dsn-button__label">Opslaan</span>
+ *     </button>
+ *   </li>
+ *   <li class="dsn-action-group__item">
+ *     <button class="dsn-button dsn-button--subtle dsn-button--size-default">
+ *       <span class="dsn-button__label">Annuleren</span>
+ *     </button>
+ *   </li>
+ * </ul>
  *
  * <!-- Horizontal with Link as soft exit -->
- * <div class="dsn-action-group">
- *   <button class="dsn-button dsn-button--strong dsn-button--size-default">
- *     <span class="dsn-button__label">Volgende stap</span>
- *   </button>
- *   <a class="dsn-link" href="/">Terug naar overzicht</a>
- * </div>
+ * <ul class="dsn-action-group" aria-label="Acties">
+ *   <li class="dsn-action-group__item">
+ *     <button class="dsn-button dsn-button--strong dsn-button--size-default">
+ *       <span class="dsn-button__label">Volgende stap</span>
+ *     </button>
+ *   </li>
+ *   <li class="dsn-action-group__item">
+ *     <a class="dsn-link" href="/">Terug naar overzicht</a>
+ *   </li>
+ * </ul>
  *
  * <!-- Vertical -->
- * <div class="dsn-action-group dsn-action-group--vertical">
- *   <button class="dsn-button dsn-button--strong dsn-button--size-default">
- *     <span class="dsn-button__label">Primaire actie</span>
- *   </button>
- *   <button class="dsn-button dsn-button--subtle dsn-button--size-default">
- *     <span class="dsn-button__label">Secundaire actie</span>
- *   </button>
- * </div>
+ * <ul class="dsn-action-group dsn-action-group--vertical" aria-label="Acties">
+ *   <li class="dsn-action-group__item">
+ *     <button class="dsn-button dsn-button--strong dsn-button--size-default">
+ *       <span class="dsn-button__label">Primaire actie</span>
+ *     </button>
+ *   </li>
+ *   <li class="dsn-action-group__item">
+ *     <button class="dsn-button dsn-button--subtle dsn-button--size-default">
+ *       <span class="dsn-button__label">Secundaire actie</span>
+ *     </button>
+ *   </li>
+ * </ul>
+ *
+ * <!-- Aangepast aria-label -->
+ * <ul class="dsn-action-group" aria-label="Formulierknoppen">
+ *   ...
+ * </ul>
  */
 
 /* ===========================
@@ -40,15 +60,27 @@
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
   column-gap: var(--dsn-action-group-column-gap);
   row-gap: var(--dsn-action-group-row-gap);
 }
 
+/* ===========================
+   Item — wraps each Button/Link
+   =========================== */
+.dsn-action-group__item {
+  display: flex;
+  align-items: center;
+}
+
 /* Link en LinkButton hebben align-self: flex-start om uitrekken te voorkomen
-   in verticale contexten — in een horizontale ActionGroup resetten we dit
-   zodat ze verticaal centreren met de Buttons naast hen. */
-.dsn-action-group:not(.dsn-action-group--vertical) > .dsn-link,
-.dsn-action-group:not(.dsn-action-group--vertical) > .dsn-link-button {
+   in verticale contexten — align-self op het element zelf overschrijft de
+   align-items van het omringende dsn-action-group__item, dus resetten we dit
+   hier zodat ze verticaal centreren met de Button ernaast. */
+.dsn-action-group__item > .dsn-link,
+.dsn-action-group__item > .dsn-link-button {
   align-self: center;
 }
 

package/dist/ActionGroup/ActionGroup.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import './ActionGroup.css';
-export interface ActionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ActionGroupProps extends React.HTMLAttributes<HTMLUListElement> {
     /**
      * Richting van de groep — horizontale rij met wrapping of verticale kolom
      * @default 'horizontal'
@@ -15,6 +15,8 @@ export interface ActionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  * ActionGroup component
  * Groepeert gerelateerde acties en verzorgt de lay-out van Buttons en Links.
  * Horizontale richting (default) wraps automatisch bij te weinig ruimte.
+ * Rendert als `<ul>` met elke actie in een `<li>`, zodat screenreaders het
+ * aantal acties en de groepsnaam aankondigen (zie issue #295).
  *
  * @example
  * ```tsx
@@ -35,7 +37,13 @@ export interface ActionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  *   <Button variant="strong">Primaire actie</Button>
  *   <Button variant="subtle">Secundaire actie</Button>
  * </ActionGroup>
+ *
+ * // Aangepast aria-label
+ * <ActionGroup aria-label="Formulierknoppen">
+ *   <Button variant="strong" type="submit">Verstuur</Button>
+ *   <Button variant="subtle">Annuleren</Button>
+ * </ActionGroup>
  * ```
  */
-export declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<HTMLUListElement>>;
 //# sourceMappingURL=ActionGroup.d.ts.map

package/dist/ActionGroup/ActionGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionGroup.d.ts","sourceRoot":"","sources":["../../src/ActionGroup/ActionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,WAAW,yFAcvB,CAAC"}
+{"version":3,"file":"ActionGroup.d.ts","sourceRoot":"","sources":["../../src/ActionGroup/ActionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9E;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAeD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,WAAW,2FA2BvB,CAAC"}

package/dist/ActionGroup/ActionGroup.js

@@ -2,10 +2,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { classNames } from '@dsn-starter-kit/core';
 import './ActionGroup.css';
+/**
+ * Flattens top-level React.Fragment children (e.g. `<>...</>`) so each
+ * action ends up as its own `<li>`, regardless of whether the caller wraps
+ * multiple children in a Fragment or passes them as direct JSX children.
+ */
+function flattenActions(children) {
+    return React.Children.toArray(children).flatMap((child) => React.isValidElement(child) && child.type === React.Fragment
+        ? flattenActions(child.props.children)
+        : [child]);
+}
 /**
  * ActionGroup component
  * Groepeert gerelateerde acties en verzorgt de lay-out van Buttons en Links.
  * Horizontale richting (default) wraps automatisch bij te weinig ruimte.
+ * Rendert als `<ul>` met elke actie in een `<li>`, zodat screenreaders het
+ * aantal acties en de groepsnaam aankondigen (zie issue #295).
  *
  * @example
  * ```tsx
@@ -26,11 +38,17 @@ import './ActionGroup.css';
  *   <Button variant="strong">Primaire actie</Button>
  *   <Button variant="subtle">Secundaire actie</Button>
  * </ActionGroup>
+ *
+ * // Aangepast aria-label
+ * <ActionGroup aria-label="Formulierknoppen">
+ *   <Button variant="strong" type="submit">Verstuur</Button>
+ *   <Button variant="subtle">Annuleren</Button>
+ * </ActionGroup>
  * ```
  */
-export const ActionGroup = React.forwardRef(({ className, direction = 'horizontal', children, ...props }, ref) => {
+export const ActionGroup = React.forwardRef(({ className, direction = 'horizontal', 'aria-label': ariaLabel = 'Acties', children, ...props }, ref) => {
     const classes = classNames('dsn-action-group', direction === 'vertical' && 'dsn-action-group--vertical', className);
-    return (_jsx("div", { ref: ref, className: classes, role: "group", ...props, children: children }));
+    return (_jsx("ul", { ref: ref, className: classes, "aria-label": ariaLabel, ...props, children: flattenActions(children).map((child, index) => (_jsx("li", { className: "dsn-action-group__item", children: child }, index))) }));
 });
 ActionGroup.displayName = 'ActionGroup';
 //# sourceMappingURL=ActionGroup.js.map

package/dist/ActionGroup/ActionGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionGroup.js","sourceRoot":"","sources":["../../src/ActionGroup/ActionGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAe3B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACnE,MAAM,OAAO,GAAG,UAAU,CACxB,kBAAkB,EAClB,SAAS,KAAK,UAAU,IAAI,4BAA4B,EACxD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,KAAK,YACtD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
+{"version":3,"file":"ActionGroup.js","sourceRoot":"","sources":["../../src/ActionGroup/ActionGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAe3B;;;;GAIG;AACH,SAAS,cAAc,CAAC,QAAyB;IAC/C,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CACxD,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,QAAQ;QAC1D,CAAC,CAAC,cAAc,CAAE,KAAK,CAAC,KAAwC,CAAC,QAAQ,CAAC;QAC1E,CAAC,CAAC,CAAC,KAAK,CAAC,CACZ,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CACE,EACE,SAAS,EACT,SAAS,GAAG,YAAY,EACxB,YAAY,EAAE,SAAS,GAAG,QAAQ,EAClC,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,kBAAkB,EAClB,SAAS,KAAK,UAAU,IAAI,4BAA4B,EACxD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,aAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,gBAAc,SAAS,KAAM,KAAK,YAC/D,cAAc,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9C,aAAI,SAAS,EAAC,wBAAwB,YACnC,KAAK,IADoC,KAAK,CAE5C,CACN,CAAC,GACC,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/Alert/Alert.css

@@ -7,11 +7,19 @@
  * Alert Component
  * Important message that informs the user about the current activity or state.
  *
+ * The icon is decorative (aria-hidden); a visually hidden variant label at the
+ * start of the heading announces the variant to screen reader users. Real text
+ * (not aria-label on the svg) so it gets translated by translation tools,
+ * works in braille and stays available when the icon is omitted.
+ * Default labels: "Informatie: " / "Succes: " / "Foutmelding: " / "Let op: ".
+ *
  * Usage:
  * <!-- Info variant (default), with icon -->
  * <div class="dsn-alert" role="alert">
- *   <svg class="dsn-icon dsn-alert__icon" aria-hidden="true"><!-- info-circle --></svg>
- *   <strong class="dsn-alert__heading">Heading</strong>
+ *   <span class="dsn-alert__icon" aria-hidden="true">
+ *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
+ *   </span>
+ *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Informatie: </span>Heading</h2>
  *   <div class="dsn-alert__content">
  *     <p>Body text or any content.</p>
  *   </div>
@@ -19,8 +27,10 @@
  *
  * <!-- Positive variant -->
  * <div class="dsn-alert dsn-alert--positive" role="alert">
- *   <svg class="dsn-icon dsn-alert__icon" aria-hidden="true"><!-- circle-check --></svg>
- *   <strong class="dsn-alert__heading">Gelukt</strong>
+ *   <span class="dsn-alert__icon" aria-hidden="true">
+ *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- circle-check --></svg>
+ *   </span>
+ *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Succes: </span>Gelukt</h2>
  *   <div class="dsn-alert__content">
  *     <p>Uw aanvraag is succesvol ingediend.</p>
  *   </div>
@@ -28,8 +38,10 @@
  *
  * <!-- Negative variant -->
  * <div class="dsn-alert dsn-alert--negative" role="alert">
- *   <svg class="dsn-icon dsn-alert__icon" aria-hidden="true"><!-- exclamation-circle --></svg>
- *   <strong class="dsn-alert__heading">Er is een fout opgetreden</strong>
+ *   <span class="dsn-alert__icon" aria-hidden="true">
+ *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- exclamation-circle --></svg>
+ *   </span>
+ *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Foutmelding: </span>Er is een fout opgetreden</h2>
  *   <div class="dsn-alert__content">
  *     <p>Controleer uw gegevens en probeer het opnieuw.</p>
  *   </div>
@@ -37,16 +49,18 @@
  *
  * <!-- Warning variant -->
  * <div class="dsn-alert dsn-alert--warning" role="alert">
- *   <svg class="dsn-icon dsn-alert__icon" aria-hidden="true"><!-- alert-triangle --></svg>
- *   <strong class="dsn-alert__heading">Let op</strong>
+ *   <span class="dsn-alert__icon" aria-hidden="true">
+ *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- alert-triangle --></svg>
+ *   </span>
+ *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Let op: </span>Uw sessie verloopt binnenkort</h2>
  *   <div class="dsn-alert__content">
- *     <p>Uw sessie verloopt binnenkort.</p>
+ *     <p>Sla uw werk op om gegevensverlies te voorkomen.</p>
  *   </div>
  * </div>
  *
- * <!-- Without icon -->
+ * <!-- Without icon: keep the visually hidden variant label -->
  * <div class="dsn-alert dsn-alert--no-icon" role="alert">
- *   <strong class="dsn-alert__heading">Heading</strong>
+ *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Informatie: </span>Heading</h2>
  *   <div class="dsn-alert__content">
  *     <p>Body text without an icon.</p>
  *   </div>

package/dist/Alert/Alert.d.ts

@@ -23,6 +23,15 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
      * - `ReactNode` — aangepast icoon
      */
     iconStart?: React.ReactNode;
+    /**
+     * Visueel verborgen tekst vóór de heading die de variant benoemt voor
+     * screenreadergebruikers (inclusief scheidingsteken en spatie).
+     * - `undefined` (default) — standaardtekst per variant:
+     *   `'Informatie: '` / `'Succes: '` / `'Foutmelding: '` / `'Let op: '`
+     * - `''` — geen variant-label (bijv. als de heading de variant al benoemt)
+     * - `string` — eigen tekst, bijv. voor een andere taal
+     */
+    variantLabel?: string;
     /**
      * Optionele body content (tekst, lijst, links, etc.)
      */
@@ -63,6 +72,11 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  * <Alert variant="info" heading="Tip" iconStart={<Icon name="star" aria-hidden />}>
  *   Gebruik de zoekfunctie om snel te navigeren.
  * </Alert>
+ *
+ * // Variant-label onderdrukken (heading benoemt de variant al)
+ * <Alert variant="negative" heading="Foutmelding" variantLabel="">
+ *   Controleer uw gegevens.
+ * </Alert>
  * ```
  */
 export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/dist/Alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AASxE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,KAAK,mFAmDjB,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAgBxE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK,mFAwDjB,CAAC"}

package/dist/Alert/Alert.js

@@ -10,6 +10,12 @@ const PREFERRED_ICONS = {
     negative: 'exclamation-circle',
     warning: 'alert-triangle',
 };
+const VARIANT_LABELS = {
+    info: 'Informatie: ',
+    positive: 'Succes: ',
+    negative: 'Foutmelding: ',
+    warning: 'Let op: ',
+};
 /**
  * Alert component
  * Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand.
@@ -45,13 +51,19 @@ const PREFERRED_ICONS = {
  * <Alert variant="info" heading="Tip" iconStart={<Icon name="star" aria-hidden />}>
  *   Gebruik de zoekfunctie om snel te navigeren.
  * </Alert>
+ *
+ * // Variant-label onderdrukken (heading benoemt de variant al)
+ * <Alert variant="negative" heading="Foutmelding" variantLabel="">
+ *   Controleer uw gegevens.
+ * </Alert>
  * ```
  */
-export const Alert = React.forwardRef(({ className, variant = 'info', heading, headingLevel = 2, iconStart, children, ...props }, ref) => {
+export const Alert = React.forwardRef(({ className, variant = 'info', heading, headingLevel = 2, iconStart, variantLabel, children, ...props }, ref) => {
     const noIcon = iconStart === null;
+    const resolvedVariantLabel = variantLabel ?? VARIANT_LABELS[variant];
     const resolvedIcon = iconStart === undefined ? (_jsx(Icon, { name: PREFERRED_ICONS[variant], size: "xl", "aria-hidden": true })) : (iconStart);
     const classes = classNames('dsn-alert', variant !== 'info' && `dsn-alert--${variant}`, noIcon && 'dsn-alert--no-icon', className);
-    return (_jsxs("div", { ref: ref, className: classes, role: "alert", ...props, children: [!noIcon && (_jsx("span", { className: "dsn-alert__icon", "aria-hidden": true, children: resolvedIcon })), _jsx(Heading, { level: headingLevel, appearance: "heading-3", className: "dsn-alert__heading", children: heading }), children && _jsx("div", { className: "dsn-alert__content", children: children })] }));
+    return (_jsxs("div", { ref: ref, className: classes, role: "alert", ...props, children: [!noIcon && (_jsx("span", { className: "dsn-alert__icon", "aria-hidden": true, children: resolvedIcon })), _jsxs(Heading, { level: headingLevel, appearance: "heading-3", className: "dsn-alert__heading", children: [resolvedVariantLabel && (_jsx("span", { className: "dsn-visually-hidden", children: resolvedVariantLabel })), heading] }), children && _jsx("div", { className: "dsn-alert__content", children: children })] }));
 });
 Alert.displayName = 'Alert';
 //# sourceMappingURL=Alert.js.map

package/dist/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.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,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,aAAa,CAAC;AAIrB,MAAM,eAAe,GAAiC;IACpD,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,cAAc;IACxB,QAAQ,EAAE,oBAAoB;IAC9B,OAAO,EAAE,gBAAgB;CAC1B,CAAC;AAkCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAElC,MAAM,YAAY,GAChB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,KAAC,IAAI,IACH,IAAI,EAAE,eAAe,CAAC,OAAO,CAAuC,EACpE,IAAI,EAAC,IAAI,wBAET,CACH,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;IAEJ,MAAM,OAAO,GAAG,UAAU,CACxB,WAAW,EACX,OAAO,KAAK,MAAM,IAAI,cAAc,OAAO,EAAE,EAC7C,MAAM,IAAI,oBAAoB,EAC9B,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,KAAK,aACtD,CAAC,MAAM,IAAI,CACV,eAAM,SAAS,EAAC,iBAAiB,iCAC9B,YAAY,GACR,CACR,EACD,KAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,UAAU,EAAC,WAAW,EACtB,SAAS,EAAC,oBAAoB,YAE7B,OAAO,GACA,EACT,QAAQ,IAAI,cAAK,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAO,IAC7D,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.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,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,aAAa,CAAC;AAIrB,MAAM,eAAe,GAAiC;IACpD,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,cAAc;IACxB,QAAQ,EAAE,oBAAoB;IAC9B,OAAO,EAAE,gBAAgB;CAC1B,CAAC;AAEF,MAAM,cAAc,GAAiC;IACnD,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,UAAU;CACpB,CAAC;AA4CF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClC,MAAM,oBAAoB,GAAG,YAAY,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;IAErE,MAAM,YAAY,GAChB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,KAAC,IAAI,IACH,IAAI,EAAE,eAAe,CAAC,OAAO,CAAuC,EACpE,IAAI,EAAC,IAAI,wBAET,CACH,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;IAEJ,MAAM,OAAO,GAAG,UAAU,CACxB,WAAW,EACX,OAAO,KAAK,MAAM,IAAI,cAAc,OAAO,EAAE,EAC7C,MAAM,IAAI,oBAAoB,EAC9B,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,KAAK,aACtD,CAAC,MAAM,IAAI,CACV,eAAM,SAAS,EAAC,iBAAiB,iCAC9B,YAAY,GACR,CACR,EACD,MAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,UAAU,EAAC,WAAW,EACtB,SAAS,EAAC,oBAAoB,aAE7B,oBAAoB,IAAI,CACvB,eAAM,SAAS,EAAC,qBAAqB,YAAE,oBAAoB,GAAQ,CACpE,EACA,OAAO,IACA,EACT,QAAQ,IAAI,cAAK,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAO,IAC7D,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/Grid/Grid.css

@@ -46,7 +46,7 @@
   grid-template-columns: repeat(12, 1fr);
   column-gap: var(--dsn-grid-gutter);
   row-gap: var(--dsn-grid-row-gap);
-  padding-inline: var(--dsn-grid-margin);
+  padding-inline: var(--dsn-grid-padding-inline);
 }
 
 /* Max-width variant — gecentreerd met margin-inline: auto */
@@ -69,7 +69,7 @@
 
 .dsn-full-bleed {
   grid-column: 1 / -1;
-  margin-inline: calc(-1 * var(--dsn-grid-margin));
+  margin-inline: calc(-1 * var(--dsn-grid-padding-inline));
 }
 
 /* ============================================================