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

package/dist/index.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,10 +60,30 @@
   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 — 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;
+}
+
 /* ===========================
    Vertical modifier
    =========================== */
@@ -63,11 +103,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>
@@ -75,8 +123,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>
@@ -84,8 +134,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>
@@ -93,16 +145,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>
@@ -480,6 +534,10 @@
 .dsn-breakout-section {
   margin-block: var(--dsn-space-block-4xl);
   margin-inline: calc(50% - 50vw);
+  border-block-start: var(--dsn-breakout-section-border-block-width) solid
+    var(--dsn-color-transparent);
+  border-block-end: var(--dsn-breakout-section-border-block-width) solid
+    var(--dsn-color-transparent);
 }
 
 
@@ -1526,6 +1584,20 @@
   transform: rotate(180deg);
 }
 
+/* ===========================
+   Forced colors (High Contrast mode)
+   =========================== */
+@media (forced-colors: active) {
+  .dsn-details__icon {
+    forced-color-adjust: auto;
+    color: LinkText;
+  }
+
+  .dsn-details__summary:hover .dsn-details__icon {
+    color: LinkText;
+  }
+}
+
 /* ===========================
    Content area
    =========================== */
@@ -1641,6 +1713,19 @@
   }
 }
 
+/* Forced colors (High Contrast mode)
+   background-color wordt vervangen door Canvas — dot is onzichtbaar zonder border.
+   Pulse-animatie uitschakelen: opacity-animatie op systeemkleuren is onbetrouwbaar. */
+@media (forced-colors: active) {
+  .dsn-dot-badge {
+    border: 1px solid transparent;
+  }
+
+  .dsn-dot-badge--pulse::before {
+    animation: none;
+  }
+}
+
 
 /* ===== Drawer ===== */
 
@@ -2084,6 +2169,22 @@ span.dsn-file__name {
   }
 }
 
+/* =============================================================================
+   Forced colors (High Contrast mode)
+   ============================================================================= */
+
+@media (forced-colors: active) {
+  .dsn-file__media > .dsn-icon {
+    forced-color-adjust: auto;
+    color: CanvasText;
+  }
+
+  .dsn-file__status-icon {
+    forced-color-adjust: auto;
+    color: CanvasText;
+  }
+}
+
 /* =============================================================================
    FileList — ul wrapper voor meerdere File items
    ============================================================================= */
@@ -2505,7 +2606,7 @@ fieldset.dsn-form-field--invalid {
   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 */
@@ -2528,7 +2629,7 @@ fieldset.dsn-form-field--invalid {
 
 .dsn-full-bleed {
   grid-column: 1 / -1;
-  margin-inline: calc(-1 * var(--dsn-grid-margin));
+  margin-inline: calc(-1 * var(--dsn-grid-padding-inline));
 }
 
 /* ============================================================
@@ -3113,6 +3214,648 @@ fieldset.dsn-form-field--invalid {
 }
 
 
+.dsn-heading-group {
+  display: flex;
+  flex-direction: column;
+}
+
+
+/* Force light-mode kleurwaarden binnen image hero — voorkomt donkere tekst op foto.
+   Per thema gescoopt (.dsn-theme-{name} .dsn-hero--image); gegenereerd door token-build. */
+/**
+ * Do not edit directly
+ * Generated on Sun, 12 Jul 2026 08:06:04 GMT
+ */
+
+.dsn-theme-start .dsn-hero--image {
+  --dsn-color-neutral-bg-document: #fcfcfc;
+  --dsn-color-neutral-bg-elevated: #fcfcfc;
+  --dsn-color-neutral-bg-subtle: #f6f6f6;
+  --dsn-color-neutral-bg-default: #f1f1f1;
+  --dsn-color-neutral-bg-hover: #ebebeb;
+  --dsn-color-neutral-bg-active: #e5e5e5;
+  --dsn-color-neutral-border-subtle: #c4c4c4;
+  --dsn-color-neutral-border-default: #868686;
+  --dsn-color-neutral-border-hover: #7c7c7c;
+  --dsn-color-neutral-border-active: #727272;
+  --dsn-color-neutral-color-default: #595959;
+  --dsn-color-neutral-color-hover: #4b4b4b;
+  --dsn-color-neutral-color-active: #3e3e3e;
+  --dsn-color-neutral-color-subtle: #636363;
+  --dsn-color-neutral-color-document: #1b1b1b;
+  --dsn-color-accent-1-bg-document: #fbfcfd;
+  --dsn-color-accent-1-bg-elevated: #fbfcfd;
+  --dsn-color-accent-1-bg-subtle: #f4f7fa;
+  --dsn-color-accent-1-bg-default: #ecf1f7;
+  --dsn-color-accent-1-bg-hover: #e4ecf4;
+  --dsn-color-accent-1-bg-active: #dde6f1;
+  --dsn-color-accent-1-border-subtle: #b0c6df;
+  --dsn-color-accent-1-border-default: #5c89be;
+  --dsn-color-accent-1-border-hover: #4e7fb8;
+  --dsn-color-accent-1-border-active: #3f74b2;
+  --dsn-color-accent-1-color-default: #1b59a4;
+  --dsn-color-accent-1-color-hover: #04499a;
+  --dsn-color-accent-1-color-active: #003b81;
+  --dsn-color-accent-1-color-subtle: #2964aa;
+  --dsn-color-accent-1-color-document: #001b3c;
+  --dsn-color-accent-2-bg-document: #fbfcfd;
+  --dsn-color-accent-2-bg-elevated: #fbfcfd;
+  --dsn-color-accent-2-bg-subtle: #f4f7fa;
+  --dsn-color-accent-2-bg-default: #ecf1f7;
+  --dsn-color-accent-2-bg-hover: #e4ecf4;
+  --dsn-color-accent-2-bg-active: #dde6f1;
+  --dsn-color-accent-2-border-subtle: #b0c6df;
+  --dsn-color-accent-2-border-default: #5c89be;
+  --dsn-color-accent-2-border-hover: #4e7fb8;
+  --dsn-color-accent-2-border-active: #3f74b2;
+  --dsn-color-accent-2-color-default: #1b59a4;
+  --dsn-color-accent-2-color-hover: #04499a;
+  --dsn-color-accent-2-color-active: #003b81;
+  --dsn-color-accent-2-color-subtle: #2964aa;
+  --dsn-color-accent-2-color-document: #001b3c;
+  --dsn-color-accent-3-bg-document: #fbfcfd;
+  --dsn-color-accent-3-bg-elevated: #fbfcfd;
+  --dsn-color-accent-3-bg-subtle: #f4f7fa;
+  --dsn-color-accent-3-bg-default: #ecf1f7;
+  --dsn-color-accent-3-bg-hover: #e4ecf4;
+  --dsn-color-accent-3-bg-active: #dde6f1;
+  --dsn-color-accent-3-border-subtle: #b0c6df;
+  --dsn-color-accent-3-border-default: #5c89be;
+  --dsn-color-accent-3-border-hover: #4e7fb8;
+  --dsn-color-accent-3-border-active: #3f74b2;
+  --dsn-color-accent-3-color-default: #1b59a4;
+  --dsn-color-accent-3-color-hover: #04499a;
+  --dsn-color-accent-3-color-active: #003b81;
+  --dsn-color-accent-3-color-subtle: #2964aa;
+  --dsn-color-accent-3-color-document: #001b3c;
+  --dsn-color-action-1-bg-document: #fbfcfd;
+  --dsn-color-action-1-bg-elevated: #fbfcfd;
+  --dsn-color-action-1-bg-subtle: #f4f7fa;
+  --dsn-color-action-1-bg-default: #ecf1f7;
+  --dsn-color-action-1-bg-hover: #e4ecf4;
+  --dsn-color-action-1-bg-active: #dde6f1;
+  --dsn-color-action-1-border-subtle: #b0c6df;
+  --dsn-color-action-1-border-default: #5c89be;
+  --dsn-color-action-1-border-hover: #4e7fb8;
+  --dsn-color-action-1-border-active: #3f74b2;
+  --dsn-color-action-1-color-default: #1b59a4;
+  --dsn-color-action-1-color-hover: #04499a;
+  --dsn-color-action-1-color-active: #003b81;
+  --dsn-color-action-1-color-subtle: #2964aa;
+  --dsn-color-action-1-color-document: #001b3c;
+  --dsn-color-action-2-bg-document: #fbfcfd;
+  --dsn-color-action-2-bg-elevated: #fbfcfd;
+  --dsn-color-action-2-bg-subtle: #f4f7fa;
+  --dsn-color-action-2-bg-default: #ecf1f7;
+  --dsn-color-action-2-bg-hover: #e4ecf4;
+  --dsn-color-action-2-bg-active: #dde6f1;
+  --dsn-color-action-2-border-subtle: #b0c6df;
+  --dsn-color-action-2-border-default: #5c89be;
+  --dsn-color-action-2-border-hover: #4e7fb8;
+  --dsn-color-action-2-border-active: #3f74b2;
+  --dsn-color-action-2-color-default: #1b59a4;
+  --dsn-color-action-2-color-hover: #04499a;
+  --dsn-color-action-2-color-active: #003b81;
+  --dsn-color-action-2-color-subtle: #2964aa;
+  --dsn-color-action-2-color-document: #001b3c;
+  --dsn-color-info-bg-document: #fbfcfd;
+  --dsn-color-info-bg-elevated: #fbfcfd;
+  --dsn-color-info-bg-subtle: #f4f7fa;
+  --dsn-color-info-bg-default: #ecf1f7;
+  --dsn-color-info-bg-hover: #e4ecf4;
+  --dsn-color-info-bg-active: #dde6f1;
+  --dsn-color-info-border-subtle: #b0c6df;
+  --dsn-color-info-border-default: #5c89be;
+  --dsn-color-info-border-hover: #4e7fb8;
+  --dsn-color-info-border-active: #3f74b2;
+  --dsn-color-info-color-default: #1b59a4;
+  --dsn-color-info-color-hover: #04499a;
+  --dsn-color-info-color-active: #003b81;
+  --dsn-color-info-color-subtle: #2964aa;
+  --dsn-color-info-color-document: #001b3c;
+  --dsn-color-negative-bg-document: #fffbfb;
+  --dsn-color-negative-bg-elevated: #fffbfb;
+  --dsn-color-negative-bg-subtle: #fef4f4;
+  --dsn-color-negative-bg-default: #feeded;
+  --dsn-color-negative-bg-hover: #fde6e6;
+  --dsn-color-negative-bg-active: #fddede;
+  --dsn-color-negative-border-subtle: #f9b1b1;
+  --dsn-color-negative-border-default: #f14848;
+  --dsn-color-negative-border-hover: #ef2929;
+  --dsn-color-negative-border-active: #e60000;
+  --dsn-color-negative-color-default: #b70000;
+  --dsn-color-negative-color-hover: #9c0000;
+  --dsn-color-negative-color-active: #930000;
+  --dsn-color-negative-color-subtle: #ca0000;
+  --dsn-color-negative-color-document: #410000;
+  --dsn-color-positive-bg-document: #fafdfb;
+  --dsn-color-positive-bg-elevated: #fafdfb;
+  --dsn-color-positive-bg-subtle: #eff9f3;
+  --dsn-color-positive-bg-default: #e4f5ea;
+  --dsn-color-positive-bg-hover: #d9f1e2;
+  --dsn-color-positive-bg-active: #ceedd9;
+  --dsn-color-positive-border-subtle: #8ad3a6;
+  --dsn-color-positive-border-default: #009b3a;
+  --dsn-color-positive-border-hover: #009036;
+  --dsn-color-positive-border-active: #008432;
+  --dsn-color-positive-color-default: #006827;
+  --dsn-color-positive-color-hover: #005821;
+  --dsn-color-positive-color-active: #00481b;
+  --dsn-color-positive-color-subtle: #00732b;
+  --dsn-color-positive-color-document: #00210c;
+  --dsn-color-warning-bg-document: #fffcf8;
+  --dsn-color-warning-bg-elevated: #fffcf8;
+  --dsn-color-warning-bg-subtle: #fff5eb;
+  --dsn-color-warning-bg-default: #ffeedd;
+  --dsn-color-warning-bg-hover: #ffe7d0;
+  --dsn-color-warning-bg-active: #ffe0c2;
+  --dsn-color-warning-border-subtle: #ffb46b;
+  --dsn-color-warning-border-default: #c8700e;
+  --dsn-color-warning-border-hover: #b86810;
+  --dsn-color-warning-border-active: #a96011;
+  --dsn-color-warning-color-default: #844c12;
+  --dsn-color-warning-color-hover: #6f4012;
+  --dsn-color-warning-color-active: #5a3511;
+  --dsn-color-warning-color-subtle: #935412;
+  --dsn-color-warning-color-document: #27190a;
+  --dsn-color-neutral-inverse-bg-document: #242424;
+  --dsn-color-neutral-inverse-bg-elevated: #242424;
+  --dsn-color-neutral-inverse-bg-subtle: #1b1b1b;
+  --dsn-color-neutral-inverse-bg-default: #595959;
+  --dsn-color-neutral-inverse-bg-hover: #4b4b4b;
+  --dsn-color-neutral-inverse-bg-active: #3e3e3e;
+  --dsn-color-neutral-inverse-border-subtle: #474747;
+  --dsn-color-neutral-inverse-border-default: #c9c9c9;
+  --dsn-color-neutral-inverse-border-hover: #d4d4d4;
+  --dsn-color-neutral-inverse-border-active: #dfdfdf;
+  --dsn-color-neutral-inverse-color-default: #ffffff;
+  --dsn-color-neutral-inverse-color-hover: #ffffff;
+  --dsn-color-neutral-inverse-color-active: #ffffff;
+  --dsn-color-neutral-inverse-color-subtle: #c4c4c4;
+  --dsn-color-neutral-inverse-color-document: #ffffff;
+  --dsn-color-accent-1-inverse-bg-document: #00234d;
+  --dsn-color-accent-1-inverse-bg-elevated: #00234d;
+  --dsn-color-accent-1-inverse-bg-subtle: #001b3c;
+  --dsn-color-accent-1-inverse-bg-default: #1b59a4;
+  --dsn-color-accent-1-inverse-bg-hover: #04499a;
+  --dsn-color-accent-1-inverse-bg-active: #003b81;
+  --dsn-color-accent-1-inverse-border-subtle: #004494;
+  --dsn-color-accent-1-inverse-border-default: #b8cbe2;
+  --dsn-color-accent-1-inverse-border-hover: #c6d6e8;
+  --dsn-color-accent-1-inverse-border-active: #d5e1ee;
+  --dsn-color-accent-1-inverse-color-default: #ffffff;
+  --dsn-color-accent-1-inverse-color-hover: #ffffff;
+  --dsn-color-accent-1-inverse-color-active: #ffffff;
+  --dsn-color-accent-1-inverse-color-subtle: #b0c6df;
+  --dsn-color-accent-1-inverse-color-document: #ffffff;
+  --dsn-color-accent-2-inverse-bg-document: #00234d;
+  --dsn-color-accent-2-inverse-bg-elevated: #00234d;
+  --dsn-color-accent-2-inverse-bg-subtle: #001b3c;
+  --dsn-color-accent-2-inverse-bg-default: #1b59a4;
+  --dsn-color-accent-2-inverse-bg-hover: #04499a;
+  --dsn-color-accent-2-inverse-bg-active: #003b81;
+  --dsn-color-accent-2-inverse-border-subtle: #004494;
+  --dsn-color-accent-2-inverse-border-default: #b8cbe2;
+  --dsn-color-accent-2-inverse-border-hover: #c6d6e8;
+  --dsn-color-accent-2-inverse-border-active: #d5e1ee;
+  --dsn-color-accent-2-inverse-color-default: #ffffff;
+  --dsn-color-accent-2-inverse-color-hover: #ffffff;
+  --dsn-color-accent-2-inverse-color-active: #ffffff;
+  --dsn-color-accent-2-inverse-color-subtle: #b0c6df;
+  --dsn-color-accent-2-inverse-color-document: #ffffff;
+  --dsn-color-accent-3-inverse-bg-document: #00234d;
+  --dsn-color-accent-3-inverse-bg-elevated: #00234d;
+  --dsn-color-accent-3-inverse-bg-subtle: #001b3c;
+  --dsn-color-accent-3-inverse-bg-default: #1b59a4;
+  --dsn-color-accent-3-inverse-bg-hover: #04499a;
+  --dsn-color-accent-3-inverse-bg-active: #003b81;
+  --dsn-color-accent-3-inverse-border-subtle: #004494;
+  --dsn-color-accent-3-inverse-border-default: #b8cbe2;
+  --dsn-color-accent-3-inverse-border-hover: #c6d6e8;
+  --dsn-color-accent-3-inverse-border-active: #d5e1ee;
+  --dsn-color-accent-3-inverse-color-default: #ffffff;
+  --dsn-color-accent-3-inverse-color-hover: #ffffff;
+  --dsn-color-accent-3-inverse-color-active: #ffffff;
+  --dsn-color-accent-3-inverse-color-subtle: #b0c6df;
+  --dsn-color-accent-3-inverse-color-document: #ffffff;
+  --dsn-color-action-1-inverse-bg-document: #00234d;
+  --dsn-color-action-1-inverse-bg-elevated: #00234d;
+  --dsn-color-action-1-inverse-bg-subtle: #001b3c;
+  --dsn-color-action-1-inverse-bg-default: #1b59a4;
+  --dsn-color-action-1-inverse-bg-hover: #04499a;
+  --dsn-color-action-1-inverse-bg-active: #003b81;
+  --dsn-color-action-1-inverse-border-subtle: #004494;
+  --dsn-color-action-1-inverse-border-default: #b8cbe2;
+  --dsn-color-action-1-inverse-border-hover: #c6d6e8;
+  --dsn-color-action-1-inverse-border-active: #d5e1ee;
+  --dsn-color-action-1-inverse-color-default: #ffffff;
+  --dsn-color-action-1-inverse-color-hover: #ffffff;
+  --dsn-color-action-1-inverse-color-active: #ffffff;
+  --dsn-color-action-1-inverse-color-subtle: #b0c6df;
+  --dsn-color-action-1-inverse-color-document: #ffffff;
+  --dsn-color-action-2-inverse-bg-document: #00234d;
+  --dsn-color-action-2-inverse-bg-elevated: #00234d;
+  --dsn-color-action-2-inverse-bg-subtle: #001b3c;
+  --dsn-color-action-2-inverse-bg-default: #1b59a4;
+  --dsn-color-action-2-inverse-bg-hover: #04499a;
+  --dsn-color-action-2-inverse-bg-active: #003b81;
+  --dsn-color-action-2-inverse-border-subtle: #004494;
+  --dsn-color-action-2-inverse-border-default: #b8cbe2;
+  --dsn-color-action-2-inverse-border-hover: #c6d6e8;
+  --dsn-color-action-2-inverse-border-active: #d5e1ee;
+  --dsn-color-action-2-inverse-color-default: #ffffff;
+  --dsn-color-action-2-inverse-color-hover: #ffffff;
+  --dsn-color-action-2-inverse-color-active: #ffffff;
+  --dsn-color-action-2-inverse-color-subtle: #b0c6df;
+  --dsn-color-action-2-inverse-color-document: #ffffff;
+  --dsn-color-info-inverse-bg-document: #00234d;
+  --dsn-color-info-inverse-bg-elevated: #00234d;
+  --dsn-color-info-inverse-bg-subtle: #001b3c;
+  --dsn-color-info-inverse-bg-default: #1b59a4;
+  --dsn-color-info-inverse-bg-hover: #04499a;
+  --dsn-color-info-inverse-bg-active: #003b81;
+  --dsn-color-info-inverse-border-subtle: #004494;
+  --dsn-color-info-inverse-border-default: #b8cbe2;
+  --dsn-color-info-inverse-border-hover: #c6d6e8;
+  --dsn-color-info-inverse-border-active: #d5e1ee;
+  --dsn-color-info-inverse-color-default: #ffffff;
+  --dsn-color-info-inverse-color-hover: #ffffff;
+  --dsn-color-info-inverse-color-active: #ffffff;
+  --dsn-color-info-inverse-color-subtle: #b0c6df;
+  --dsn-color-info-inverse-color-document: #ffffff;
+  --dsn-color-negative-inverse-bg-document: #510000;
+  --dsn-color-negative-inverse-bg-elevated: #510000;
+  --dsn-color-negative-inverse-bg-subtle: #410000;
+  --dsn-color-negative-inverse-bg-default: #b70000;
+  --dsn-color-negative-inverse-bg-hover: #9c0000;
+  --dsn-color-negative-inverse-bg-active: #820000;
+  --dsn-color-negative-inverse-border-subtle: #930000;
+  --dsn-color-negative-inverse-border-default: #fab9b9;
+  --dsn-color-negative-inverse-border-hover: #fbc8c8;
+  --dsn-color-negative-inverse-border-active: #fcd7d7;
+  --dsn-color-negative-inverse-color-default: #ffffff;
+  --dsn-color-negative-inverse-color-hover: #ffffff;
+  --dsn-color-negative-inverse-color-active: #ffffff;
+  --dsn-color-negative-inverse-color-subtle: #f9b1b1;
+  --dsn-color-negative-inverse-color-document: #ffffff;
+  --dsn-color-positive-inverse-bg-document: #002b10;
+  --dsn-color-positive-inverse-bg-elevated: #002b10;
+  --dsn-color-positive-inverse-bg-subtle: #00210c;
+  --dsn-color-positive-inverse-bg-default: #006827;
+  --dsn-color-positive-inverse-bg-hover: #005821;
+  --dsn-color-positive-inverse-bg-active: #00481b;
+  --dsn-color-positive-inverse-border-subtle: #00531f;
+  --dsn-color-positive-inverse-border-default: #96d8ae;
+  --dsn-color-positive-inverse-border-hover: #ace0c0;
+  --dsn-color-positive-inverse-border-active: #c3e9d1;
+  --dsn-color-positive-inverse-color-default: #ffffff;
+  --dsn-color-positive-inverse-color-hover: #ffffff;
+  --dsn-color-positive-inverse-color-active: #ffffff;
+  --dsn-color-positive-inverse-color-subtle: #8ad3a6;
+  --dsn-color-positive-inverse-color-document: #ffffff;
+  --dsn-color-warning-inverse-bg-document: #331f0d;
+  --dsn-color-warning-inverse-bg-elevated: #331f0d;
+  --dsn-color-warning-inverse-bg-subtle: #27190a;
+  --dsn-color-warning-inverse-bg-default: #844c12;
+  --dsn-color-warning-inverse-bg-hover: #6f4012;
+  --dsn-color-warning-inverse-bg-active: #5a3511;
+  --dsn-color-warning-inverse-border-subtle: #683c12;
+  --dsn-color-warning-inverse-border-default: #ffbc7a;
+  --dsn-color-warning-inverse-border-hover: #ffcb98;
+  --dsn-color-warning-inverse-border-active: #ffd9b4;
+  --dsn-color-warning-inverse-color-default: #ffffff;
+  --dsn-color-warning-inverse-color-hover: #ffffff;
+  --dsn-color-warning-inverse-color-active: #ffffff;
+  --dsn-color-warning-inverse-color-subtle: #ffb46b;
+  --dsn-color-warning-inverse-color-document: #ffffff;
+  --dsn-color-transparent: rgba(0, 0, 0, 0);
+  --dsn-color-shadow-direct: color-mix(in srgb, black 12%, transparent);
+  --dsn-color-shadow-ambient: color-mix(in srgb, black 6%, transparent);
+  --dsn-color-shadow-highlight: rgba(0, 0, 0, 0);
+  --dsn-color-shadow-scroll: rgba(0, 0, 0, 0.15);
+  --dsn-hero-background-color-default: #ecf1f7;
+  --dsn-hero-background-color-inverse: #1b59a4;
+  --dsn-hero-color-default: #1b59a4;
+  --dsn-hero-color-inverse: #ffffff;
+  --dsn-hero-image-blend-color: #1b59a4;
+}
+
+/**
+ * Do not edit directly
+ * Generated on Sun, 12 Jul 2026 08:06:05 GMT
+ */
+
+.dsn-theme-wireframe .dsn-hero--image {
+  --dsn-color-neutral-bg-document: #ffffff;
+  --dsn-color-neutral-bg-elevated: #ffffff;
+  --dsn-color-neutral-bg-subtle: #ffffff;
+  --dsn-color-neutral-bg-default: #ffffff;
+  --dsn-color-neutral-bg-hover: #ffffff;
+  --dsn-color-neutral-bg-active: #ffffff;
+  --dsn-color-neutral-border-subtle: #000000;
+  --dsn-color-neutral-border-default: #000000;
+  --dsn-color-neutral-border-hover: #000000;
+  --dsn-color-neutral-border-active: #000000;
+  --dsn-color-neutral-color-default: #000000;
+  --dsn-color-neutral-color-hover: #000000;
+  --dsn-color-neutral-color-active: #000000;
+  --dsn-color-neutral-color-subtle: #000000;
+  --dsn-color-neutral-color-document: #000000;
+  --dsn-color-accent-1-bg-document: #ffffff;
+  --dsn-color-accent-1-bg-elevated: #ffffff;
+  --dsn-color-accent-1-bg-subtle: #ffffff;
+  --dsn-color-accent-1-bg-default: #ffffff;
+  --dsn-color-accent-1-bg-hover: #ffffff;
+  --dsn-color-accent-1-bg-active: #ffffff;
+  --dsn-color-accent-1-border-subtle: #000000;
+  --dsn-color-accent-1-border-default: #000000;
+  --dsn-color-accent-1-border-hover: #000000;
+  --dsn-color-accent-1-border-active: #000000;
+  --dsn-color-accent-1-color-default: #000000;
+  --dsn-color-accent-1-color-hover: #000000;
+  --dsn-color-accent-1-color-active: #000000;
+  --dsn-color-accent-1-color-subtle: #000000;
+  --dsn-color-accent-1-color-document: #000000;
+  --dsn-color-accent-2-bg-document: #ffffff;
+  --dsn-color-accent-2-bg-elevated: #ffffff;
+  --dsn-color-accent-2-bg-subtle: #ffffff;
+  --dsn-color-accent-2-bg-default: #ffffff;
+  --dsn-color-accent-2-bg-hover: #ffffff;
+  --dsn-color-accent-2-bg-active: #ffffff;
+  --dsn-color-accent-2-border-subtle: #000000;
+  --dsn-color-accent-2-border-default: #000000;
+  --dsn-color-accent-2-border-hover: #000000;
+  --dsn-color-accent-2-border-active: #000000;
+  --dsn-color-accent-2-color-default: #000000;
+  --dsn-color-accent-2-color-hover: #000000;
+  --dsn-color-accent-2-color-active: #000000;
+  --dsn-color-accent-2-color-subtle: #000000;
+  --dsn-color-accent-2-color-document: #000000;
+  --dsn-color-accent-3-bg-document: #ffffff;
+  --dsn-color-accent-3-bg-elevated: #ffffff;
+  --dsn-color-accent-3-bg-subtle: #ffffff;
+  --dsn-color-accent-3-bg-default: #ffffff;
+  --dsn-color-accent-3-bg-hover: #ffffff;
+  --dsn-color-accent-3-bg-active: #ffffff;
+  --dsn-color-accent-3-border-subtle: #000000;
+  --dsn-color-accent-3-border-default: #000000;
+  --dsn-color-accent-3-border-hover: #000000;
+  --dsn-color-accent-3-border-active: #000000;
+  --dsn-color-accent-3-color-default: #000000;
+  --dsn-color-accent-3-color-hover: #000000;
+  --dsn-color-accent-3-color-active: #000000;
+  --dsn-color-accent-3-color-subtle: #000000;
+  --dsn-color-accent-3-color-document: #000000;
+  --dsn-color-action-1-bg-document: #ffffff;
+  --dsn-color-action-1-bg-elevated: #ffffff;
+  --dsn-color-action-1-bg-subtle: #ffffff;
+  --dsn-color-action-1-bg-default: #ffffff;
+  --dsn-color-action-1-bg-hover: #ffffff;
+  --dsn-color-action-1-bg-active: #ffffff;
+  --dsn-color-action-1-border-subtle: #000000;
+  --dsn-color-action-1-border-default: #000000;
+  --dsn-color-action-1-border-hover: #000000;
+  --dsn-color-action-1-border-active: #000000;
+  --dsn-color-action-1-color-default: #000000;
+  --dsn-color-action-1-color-hover: #000000;
+  --dsn-color-action-1-color-active: #000000;
+  --dsn-color-action-1-color-subtle: #000000;
+  --dsn-color-action-1-color-document: #000000;
+  --dsn-color-action-2-bg-document: #ffffff;
+  --dsn-color-action-2-bg-elevated: #ffffff;
+  --dsn-color-action-2-bg-subtle: #ffffff;
+  --dsn-color-action-2-bg-default: #ffffff;
+  --dsn-color-action-2-bg-hover: #ffffff;
+  --dsn-color-action-2-bg-active: #ffffff;
+  --dsn-color-action-2-border-subtle: #000000;
+  --dsn-color-action-2-border-default: #000000;
+  --dsn-color-action-2-border-hover: #000000;
+  --dsn-color-action-2-border-active: #000000;
+  --dsn-color-action-2-color-default: #000000;
+  --dsn-color-action-2-color-hover: #000000;
+  --dsn-color-action-2-color-active: #000000;
+  --dsn-color-action-2-color-subtle: #000000;
+  --dsn-color-action-2-color-document: #000000;
+  --dsn-color-positive-bg-document: #ffffff;
+  --dsn-color-positive-bg-elevated: #ffffff;
+  --dsn-color-positive-bg-subtle: #ffffff;
+  --dsn-color-positive-bg-default: #ffffff;
+  --dsn-color-positive-bg-hover: #ffffff;
+  --dsn-color-positive-bg-active: #ffffff;
+  --dsn-color-positive-border-subtle: #000000;
+  --dsn-color-positive-border-default: #000000;
+  --dsn-color-positive-border-hover: #000000;
+  --dsn-color-positive-border-active: #000000;
+  --dsn-color-positive-color-default: #000000;
+  --dsn-color-positive-color-hover: #000000;
+  --dsn-color-positive-color-active: #000000;
+  --dsn-color-positive-color-subtle: #000000;
+  --dsn-color-positive-color-document: #000000;
+  --dsn-color-negative-bg-document: #ffffff;
+  --dsn-color-negative-bg-elevated: #ffffff;
+  --dsn-color-negative-bg-subtle: #ffffff;
+  --dsn-color-negative-bg-default: #ffffff;
+  --dsn-color-negative-bg-hover: #ffffff;
+  --dsn-color-negative-bg-active: #ffffff;
+  --dsn-color-negative-border-subtle: #000000;
+  --dsn-color-negative-border-default: #000000;
+  --dsn-color-negative-border-hover: #000000;
+  --dsn-color-negative-border-active: #000000;
+  --dsn-color-negative-color-default: #000000;
+  --dsn-color-negative-color-hover: #000000;
+  --dsn-color-negative-color-active: #000000;
+  --dsn-color-negative-color-subtle: #000000;
+  --dsn-color-negative-color-document: #000000;
+  --dsn-color-warning-bg-document: #ffffff;
+  --dsn-color-warning-bg-elevated: #ffffff;
+  --dsn-color-warning-bg-subtle: #ffffff;
+  --dsn-color-warning-bg-default: #ffffff;
+  --dsn-color-warning-bg-hover: #ffffff;
+  --dsn-color-warning-bg-active: #ffffff;
+  --dsn-color-warning-border-subtle: #000000;
+  --dsn-color-warning-border-default: #000000;
+  --dsn-color-warning-border-hover: #000000;
+  --dsn-color-warning-border-active: #000000;
+  --dsn-color-warning-color-default: #000000;
+  --dsn-color-warning-color-hover: #000000;
+  --dsn-color-warning-color-active: #000000;
+  --dsn-color-warning-color-subtle: #000000;
+  --dsn-color-warning-color-document: #000000;
+  --dsn-color-info-bg-document: #ffffff;
+  --dsn-color-info-bg-elevated: #ffffff;
+  --dsn-color-info-bg-subtle: #ffffff;
+  --dsn-color-info-bg-default: #ffffff;
+  --dsn-color-info-bg-hover: #ffffff;
+  --dsn-color-info-bg-active: #ffffff;
+  --dsn-color-info-border-subtle: #000000;
+  --dsn-color-info-border-default: #000000;
+  --dsn-color-info-border-hover: #000000;
+  --dsn-color-info-border-active: #000000;
+  --dsn-color-info-color-default: #000000;
+  --dsn-color-info-color-hover: #000000;
+  --dsn-color-info-color-active: #000000;
+  --dsn-color-info-color-subtle: #000000;
+  --dsn-color-info-color-document: #000000;
+  --dsn-color-neutral-inverse-bg-document: #000000;
+  --dsn-color-neutral-inverse-bg-elevated: #000000;
+  --dsn-color-neutral-inverse-bg-subtle: #000000;
+  --dsn-color-neutral-inverse-bg-default: #000000;
+  --dsn-color-neutral-inverse-bg-hover: #000000;
+  --dsn-color-neutral-inverse-bg-active: #000000;
+  --dsn-color-neutral-inverse-border-subtle: #000000;
+  --dsn-color-neutral-inverse-border-default: #000000;
+  --dsn-color-neutral-inverse-border-hover: #000000;
+  --dsn-color-neutral-inverse-border-active: #000000;
+  --dsn-color-neutral-inverse-color-default: #ffffff;
+  --dsn-color-neutral-inverse-color-hover: #ffffff;
+  --dsn-color-neutral-inverse-color-active: #ffffff;
+  --dsn-color-neutral-inverse-color-subtle: #ffffff;
+  --dsn-color-neutral-inverse-color-document: #ffffff;
+  --dsn-color-accent-1-inverse-bg-document: #000000;
+  --dsn-color-accent-1-inverse-bg-elevated: #000000;
+  --dsn-color-accent-1-inverse-bg-subtle: #000000;
+  --dsn-color-accent-1-inverse-bg-default: #000000;
+  --dsn-color-accent-1-inverse-bg-hover: #000000;
+  --dsn-color-accent-1-inverse-bg-active: #000000;
+  --dsn-color-accent-1-inverse-border-subtle: #000000;
+  --dsn-color-accent-1-inverse-border-default: #000000;
+  --dsn-color-accent-1-inverse-border-hover: #000000;
+  --dsn-color-accent-1-inverse-border-active: #000000;
+  --dsn-color-accent-1-inverse-color-default: #ffffff;
+  --dsn-color-accent-1-inverse-color-hover: #ffffff;
+  --dsn-color-accent-1-inverse-color-active: #ffffff;
+  --dsn-color-accent-1-inverse-color-subtle: #ffffff;
+  --dsn-color-accent-1-inverse-color-document: #ffffff;
+  --dsn-color-accent-2-inverse-bg-document: #000000;
+  --dsn-color-accent-2-inverse-bg-elevated: #000000;
+  --dsn-color-accent-2-inverse-bg-subtle: #000000;
+  --dsn-color-accent-2-inverse-bg-default: #000000;
+  --dsn-color-accent-2-inverse-bg-hover: #000000;
+  --dsn-color-accent-2-inverse-bg-active: #000000;
+  --dsn-color-accent-2-inverse-border-subtle: #000000;
+  --dsn-color-accent-2-inverse-border-default: #000000;
+  --dsn-color-accent-2-inverse-border-hover: #000000;
+  --dsn-color-accent-2-inverse-border-active: #000000;
+  --dsn-color-accent-2-inverse-color-default: #ffffff;
+  --dsn-color-accent-2-inverse-color-hover: #ffffff;
+  --dsn-color-accent-2-inverse-color-active: #ffffff;
+  --dsn-color-accent-2-inverse-color-subtle: #ffffff;
+  --dsn-color-accent-2-inverse-color-document: #ffffff;
+  --dsn-color-accent-3-inverse-bg-document: #000000;
+  --dsn-color-accent-3-inverse-bg-elevated: #000000;
+  --dsn-color-accent-3-inverse-bg-subtle: #000000;
+  --dsn-color-accent-3-inverse-bg-default: #000000;
+  --dsn-color-accent-3-inverse-bg-hover: #000000;
+  --dsn-color-accent-3-inverse-bg-active: #000000;
+  --dsn-color-accent-3-inverse-border-subtle: #000000;
+  --dsn-color-accent-3-inverse-border-default: #000000;
+  --dsn-color-accent-3-inverse-border-hover: #000000;
+  --dsn-color-accent-3-inverse-border-active: #000000;
+  --dsn-color-accent-3-inverse-color-default: #ffffff;
+  --dsn-color-accent-3-inverse-color-hover: #ffffff;
+  --dsn-color-accent-3-inverse-color-active: #ffffff;
+  --dsn-color-accent-3-inverse-color-subtle: #ffffff;
+  --dsn-color-accent-3-inverse-color-document: #ffffff;
+  --dsn-color-action-1-inverse-bg-document: #000000;
+  --dsn-color-action-1-inverse-bg-elevated: #000000;
+  --dsn-color-action-1-inverse-bg-subtle: #000000;
+  --dsn-color-action-1-inverse-bg-default: #000000;
+  --dsn-color-action-1-inverse-bg-hover: #000000;
+  --dsn-color-action-1-inverse-bg-active: #000000;
+  --dsn-color-action-1-inverse-border-subtle: #000000;
+  --dsn-color-action-1-inverse-border-default: #000000;
+  --dsn-color-action-1-inverse-border-hover: #000000;
+  --dsn-color-action-1-inverse-border-active: #000000;
+  --dsn-color-action-1-inverse-color-default: #ffffff;
+  --dsn-color-action-1-inverse-color-hover: #ffffff;
+  --dsn-color-action-1-inverse-color-active: #ffffff;
+  --dsn-color-action-1-inverse-color-subtle: #ffffff;
+  --dsn-color-action-1-inverse-color-document: #ffffff;
+  --dsn-color-action-2-inverse-bg-document: #000000;
+  --dsn-color-action-2-inverse-bg-elevated: #000000;
+  --dsn-color-action-2-inverse-bg-subtle: #000000;
+  --dsn-color-action-2-inverse-bg-default: #000000;
+  --dsn-color-action-2-inverse-bg-hover: #000000;
+  --dsn-color-action-2-inverse-bg-active: #000000;
+  --dsn-color-action-2-inverse-border-subtle: #000000;
+  --dsn-color-action-2-inverse-border-default: #000000;
+  --dsn-color-action-2-inverse-border-hover: #000000;
+  --dsn-color-action-2-inverse-border-active: #000000;
+  --dsn-color-action-2-inverse-color-default: #ffffff;
+  --dsn-color-action-2-inverse-color-hover: #ffffff;
+  --dsn-color-action-2-inverse-color-active: #ffffff;
+  --dsn-color-action-2-inverse-color-subtle: #ffffff;
+  --dsn-color-action-2-inverse-color-document: #ffffff;
+  --dsn-color-positive-inverse-bg-document: #000000;
+  --dsn-color-positive-inverse-bg-elevated: #000000;
+  --dsn-color-positive-inverse-bg-subtle: #000000;
+  --dsn-color-positive-inverse-bg-default: #000000;
+  --dsn-color-positive-inverse-bg-hover: #000000;
+  --dsn-color-positive-inverse-bg-active: #000000;
+  --dsn-color-positive-inverse-border-subtle: #000000;
+  --dsn-color-positive-inverse-border-default: #000000;
+  --dsn-color-positive-inverse-border-hover: #000000;
+  --dsn-color-positive-inverse-border-active: #000000;
+  --dsn-color-positive-inverse-color-default: #ffffff;
+  --dsn-color-positive-inverse-color-hover: #ffffff;
+  --dsn-color-positive-inverse-color-active: #ffffff;
+  --dsn-color-positive-inverse-color-subtle: #ffffff;
+  --dsn-color-positive-inverse-color-document: #ffffff;
+  --dsn-color-negative-inverse-bg-document: #000000;
+  --dsn-color-negative-inverse-bg-elevated: #000000;
+  --dsn-color-negative-inverse-bg-subtle: #000000;
+  --dsn-color-negative-inverse-bg-default: #000000;
+  --dsn-color-negative-inverse-bg-hover: #000000;
+  --dsn-color-negative-inverse-bg-active: #000000;
+  --dsn-color-negative-inverse-border-subtle: #000000;
+  --dsn-color-negative-inverse-border-default: #000000;
+  --dsn-color-negative-inverse-border-hover: #000000;
+  --dsn-color-negative-inverse-border-active: #000000;
+  --dsn-color-negative-inverse-color-default: #ffffff;
+  --dsn-color-negative-inverse-color-hover: #ffffff;
+  --dsn-color-negative-inverse-color-active: #ffffff;
+  --dsn-color-negative-inverse-color-subtle: #ffffff;
+  --dsn-color-negative-inverse-color-document: #ffffff;
+  --dsn-color-warning-inverse-bg-document: #000000;
+  --dsn-color-warning-inverse-bg-elevated: #000000;
+  --dsn-color-warning-inverse-bg-subtle: #000000;
+  --dsn-color-warning-inverse-bg-default: #000000;
+  --dsn-color-warning-inverse-bg-hover: #000000;
+  --dsn-color-warning-inverse-bg-active: #000000;
+  --dsn-color-warning-inverse-border-subtle: #000000;
+  --dsn-color-warning-inverse-border-default: #000000;
+  --dsn-color-warning-inverse-border-hover: #000000;
+  --dsn-color-warning-inverse-border-active: #000000;
+  --dsn-color-warning-inverse-color-default: #ffffff;
+  --dsn-color-warning-inverse-color-hover: #ffffff;
+  --dsn-color-warning-inverse-color-active: #ffffff;
+  --dsn-color-warning-inverse-color-subtle: #ffffff;
+  --dsn-color-warning-inverse-color-document: #ffffff;
+  --dsn-color-info-inverse-bg-document: #000000;
+  --dsn-color-info-inverse-bg-elevated: #000000;
+  --dsn-color-info-inverse-bg-subtle: #000000;
+  --dsn-color-info-inverse-bg-default: #000000;
+  --dsn-color-info-inverse-bg-hover: #000000;
+  --dsn-color-info-inverse-bg-active: #000000;
+  --dsn-color-info-inverse-border-subtle: #000000;
+  --dsn-color-info-inverse-border-default: #000000;
+  --dsn-color-info-inverse-border-hover: #000000;
+  --dsn-color-info-inverse-border-active: #000000;
+  --dsn-color-info-inverse-color-default: #ffffff;
+  --dsn-color-info-inverse-color-hover: #ffffff;
+  --dsn-color-info-inverse-color-active: #ffffff;
+  --dsn-color-info-inverse-color-subtle: #ffffff;
+  --dsn-color-info-inverse-color-document: #ffffff;
+  --dsn-color-transparent: rgba(0, 0, 0, 0);
+  --dsn-color-shadow-scroll: rgba(0, 0, 0, 0.15);
+  --dsn-hero-background-color-default: #ffffff;
+  --dsn-hero-background-color-inverse: #000000;
+  --dsn-hero-color-default: #000000;
+  --dsn-hero-color-inverse: #ffffff;
+  --dsn-hero-image-blend-color: #000000;
+}
+
+
 /**
  * Hero Component
  * Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige
@@ -3141,6 +3884,10 @@ fieldset.dsn-form-field--invalid {
 
 .dsn-hero {
   margin-inline: calc(50% - 50vw);
+  border-block-start: var(--dsn-hero-border-block-width) solid
+    var(--dsn-color-transparent);
+  border-block-end: var(--dsn-hero-border-block-width) solid
+    var(--dsn-color-transparent);
   min-block-size: max(
     var(--dsn-hero-min-block-size),
     var(--dsn-hero-block-size)
@@ -3210,6 +3957,7 @@ fieldset.dsn-form-field--invalid {
   color: var(--dsn-hero-color-inverse);
 
   /* Tekst-componenten */
+  --dsn-pre-heading-color: var(--dsn-hero-color-inverse);
   --dsn-heading-level-1-color: var(--dsn-hero-color-inverse);
   --dsn-heading-level-2-color: var(--dsn-hero-color-inverse);
   --dsn-heading-level-3-color: var(--dsn-hero-color-inverse);
@@ -3257,6 +4005,7 @@ fieldset.dsn-form-field--invalid {
   color: var(--dsn-hero-color-inverse);
 
   /* Tekst-componenten */
+  --dsn-pre-heading-color: var(--dsn-hero-color-inverse);
   --dsn-heading-level-1-color: var(--dsn-hero-color-inverse);
   --dsn-heading-level-2-color: var(--dsn-hero-color-inverse);
   --dsn-heading-level-3-color: var(--dsn-hero-color-inverse);
@@ -4278,34 +5027,42 @@ fieldset.dsn-form-field--invalid {
  * Visually highlighted message for supplementary or important information.
  * Passive counterpart to Alert — no live region, read on navigation only.
  *
+ * The icon is decorative (aria-hidden); the non-neutral variants (info,
+ * positive, negative, warning) carry a visually hidden variant label that
+ * announces the variant to screen reader users: "Informatie: " / "Succes: " /
+ * "Foutmelding: " / "Let op: ". With a heading the label is the first child of
+ * the heading; without a heading it is a standalone span before the content.
+ * Neutral has no label: that variant deliberately carries no semantic signal.
+ *
  * Usage:
- * <!-- Neutral (default), with icon and heading -->
+ * <!-- Neutral (default), with icon and heading — no variant label -->
  * <div class="dsn-note">
  *   <span class="dsn-note__icon" aria-hidden="true">
- *     <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
+ *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
  *   </span>
- *   <strong class="dsn-heading dsn-heading--3 dsn-note__heading">Let op</strong>
+ *   <h3 class="dsn-heading dsn-heading--heading-3 dsn-note__heading">Let op</h3>
  *   <div class="dsn-note__content">
  *     <p>Aanvullende informatie over dit onderwerp.</p>
  *   </div>
  * </div>
  *
- * <!-- Info variant -->
+ * <!-- Info variant, with visually hidden variant label -->
  * <div class="dsn-note dsn-note--info">
  *   <span class="dsn-note__icon" aria-hidden="true">
- *     <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
+ *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
  *   </span>
- *   <strong class="dsn-heading dsn-heading--3 dsn-note__heading">Informatie</strong>
+ *   <h3 class="dsn-heading dsn-heading--heading-3 dsn-note__heading"><span class="dsn-visually-hidden">Informatie: </span>Heading</h3>
  *   <div class="dsn-note__content">
  *     <p>Body content.</p>
  *   </div>
  * </div>
  *
- * <!-- Without heading — icon spans both rows -->
- * <div class="dsn-note dsn-note--no-heading">
+ * <!-- Without heading — icon spans both rows, variant label as standalone span -->
+ * <div class="dsn-note dsn-note--warning dsn-note--no-heading">
  *   <span class="dsn-note__icon" aria-hidden="true">
- *     <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
+ *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- alert-triangle --></svg>
  *   </span>
+ *   <span class="dsn-visually-hidden">Let op: </span>
  *   <div class="dsn-note__content">
  *     <p>Aanvullende informatie.</p>
  *   </div>
@@ -4316,15 +5073,15 @@ fieldset.dsn-form-field--invalid {
  *   ...
  * </aside>
  *
- * <!-- as="nav" — table of contents -->
+ * <!-- as="nav" — standalone navigation section (not a page table of contents: use TableOfContents) -->
  * <nav class="dsn-note" aria-labelledby="note-heading-id">
  *   <span class="dsn-note__icon" aria-hidden="true">
- *     <svg class="dsn-icon" aria-hidden="true"><!-- info-circle --></svg>
+ *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
  *   </span>
- *   <strong class="dsn-heading dsn-heading--3 dsn-note__heading" id="note-heading-id">Op deze pagina</strong>
- *   <nav class="dsn-note__content">
+ *   <h3 class="dsn-heading dsn-heading--heading-3 dsn-note__heading" id="note-heading-id">Related pages</h3>
+ *   <div class="dsn-note__content">
  *     <ul>...</ul>
- *   </nav>
+ *   </div>
  * </nav>
  */
 
@@ -4653,6 +5410,36 @@ fieldset.dsn-form-field--invalid {
   background-color: transparent;
 }
 
+/* =============================================================================
+   Sidebar layout — Table of Contents kolom (rechts)
+   De ToC-inhoud wordt twee keer gerenderd: één keer inline (onder H1/lead,
+   zichtbaar tot 80em) en één keer als rechterkolom (zichtbaar vanaf 80em).
+   `display: none` sluit de verborgen kopie uit van de accessibility tree,
+   dus er is nooit dubbele content voor schermlezers.
+   ============================================================================= */
+
+.dsn-sidebar-layout__toc-inline {
+  display: block;
+}
+
+.dsn-sidebar-layout__toc {
+  display: none;
+}
+
+@media (min-width: 80em) {
+  .dsn-sidebar-layout__toc-inline {
+    display: none;
+  }
+
+  .dsn-sidebar-layout__toc {
+    display: block;
+    flex-shrink: 0;
+    inline-size: var(--dsn-sidebar-layout-toc-inline-size, 16rem);
+    padding-inline-start: var(--dsn-space-inline-2xl);
+    padding-block: var(--dsn-space-block-3xl);
+  }
+}
+
 
 /**
  * PageFooter Component
@@ -4681,7 +5468,6 @@ fieldset.dsn-form-field--invalid {
    ============================================================================= */
 
 .dsn-page-footer {
-  --dsn-grid-margin: 0;
   background-color: var(--dsn-page-footer-background-color);
   border-block-start: var(--dsn-page-footer-border-block-start-width) solid
     var(--dsn-page-footer-border-block-start-color);
@@ -4837,6 +5623,19 @@ fieldset.dsn-form-field--invalid {
   }
 }
 
+/* =============================================================================
+   Forced colors (High Contrast mode)
+   Default variant mist op large viewport een border-block-end (navbar neemt de
+   visuele scheiding over). In forced-colors mode is die achtergrondkleur niet
+   zichtbaar, dus de border herstellen voor sectieafbakening.
+   ============================================================================= */
+
+@media (forced-colors: active) and (min-width: 64em) {
+  .dsn-page-header:not(.dsn-page-header--compact) {
+    border-block-end: var(--dsn-border-width-thick) solid transparent;
+  }
+}
+
 /* =============================================================================
    Masthead (large viewport) — neutrale achtergrond, logo + servicemenu + zoek
    ============================================================================= */
@@ -5560,6 +6359,17 @@ fieldset.dsn-form-field--invalid {
 }
 
 
+.dsn-pre-heading {
+  display: block;
+  color: var(--dsn-pre-heading-color);
+  font-family: var(--dsn-pre-heading-font-family);
+  font-size: var(--dsn-pre-heading-font-size);
+  font-weight: var(--dsn-pre-heading-font-weight);
+  line-height: var(--dsn-pre-heading-line-height);
+  margin-block-end: var(--dsn-pre-heading-margin-block-end);
+}
+
+
 /**
  * ProgressBar Component
  * Horizontale voortgangsbalk voor bepaalde wachttijden.
@@ -5644,6 +6454,20 @@ fieldset.dsn-form-field--invalid {
   margin-block-start: var(--dsn-progress-bar-gap-footer);
 }
 
+/* Forced colors (High Contrast mode)
+   appearance: none schakelt alle browser-styling uit waardoor track en fill
+   onzichtbaar worden. appearance: auto herstelt de native progress-stijl
+   zodat de browser zijn eigen system colors toepast. */
+@media (forced-colors: active) {
+  .dsn-progress-bar__bar {
+    appearance: auto;
+    block-size: revert;
+    border: revert;
+    border-radius: revert;
+    background-color: revert;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .dsn-progress-bar__bar::-webkit-progress-value,
   .dsn-progress-bar__bar::-moz-progress-bar {
@@ -5811,6 +6635,42 @@ fieldset.dsn-form-field--invalid {
   transform: scale(1);
 }
 
+/* Forced colors (High Contrast mode)
+   background-color wordt genegeerd — inner circle verdwijnt tegen de control achtergrond.
+   Highlight/HighlightText zijn de system colors voor geselecteerde form controls. */
+@media (forced-colors: active) {
+  .dsn-radio__control {
+    forced-color-adjust: none;
+    border-color: ButtonText;
+    background-color: Field;
+  }
+
+  .dsn-radio__input:checked + .dsn-radio__control {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+
+  .dsn-radio__input:checked + .dsn-radio__control .dsn-radio__inner-circle {
+    background-color: HighlightText;
+  }
+
+  .dsn-radio__input:checked:disabled + .dsn-radio__control {
+    border-color: GrayText;
+    background-color: GrayText;
+  }
+
+  .dsn-radio__input:checked:disabled
+    + .dsn-radio__control
+    .dsn-radio__inner-circle {
+    background-color: Field;
+  }
+
+  .dsn-radio__input:disabled + .dsn-radio__control {
+    border-color: GrayText;
+    background-color: Field;
+  }
+}
+
 /* Invalid state */
 .dsn-radio__input--invalid + .dsn-radio__control {
   border-width: var(--dsn-radio-invalid-border-width);
@@ -5883,6 +6743,14 @@ fieldset.dsn-form-field--invalid {
   padding-inline-start: var(--dsn-search-input-padding-inline-start-with-icon);
 }
 
+/* Forced colors (High Contrast mode) */
+@media (forced-colors: active) {
+  .dsn-search-input__icon {
+    forced-color-adjust: auto;
+    color: ButtonText;
+  }
+}
+
 /* Hide browser-native clear button — will be implemented as a separate pattern */
 .dsn-search-input::-webkit-search-cancel-button {
   display: none;
@@ -5973,6 +6841,14 @@ fieldset.dsn-form-field--invalid {
   border-color: var(--dsn-text-input-invalid-border-color);
 }
 
+/* Forced colors (High Contrast mode) */
+@media (forced-colors: active) {
+  .dsn-select__icon {
+    forced-color-adjust: auto;
+    color: ButtonText;
+  }
+}
+
 /* Remove native arrow in IE/Edge */
 .dsn-select::-ms-expand {
   display: none;
@@ -6141,6 +7017,23 @@ fieldset.dsn-form-field--invalid {
   }
 }
 
+/* Forced colors (High Contrast mode)
+   SVG stroke wordt genegeerd — forced-color-adjust: auto laat de browser
+   de kleuren overnemen. Track verbergen: enkel de arc is informatief. */
+@media (forced-colors: active) {
+  .dsn-spinner__circle {
+    forced-color-adjust: none;
+  }
+
+  .dsn-spinner__track {
+    stroke: transparent;
+  }
+
+  .dsn-spinner__arc {
+    stroke: CanvasText;
+  }
+}
+
 /* prefers-reduced-motion: subtiel pulseren i.p.v. roteren */
 @media (prefers-reduced-motion: reduce) {
   .dsn-spinner__circle {
@@ -6703,6 +7596,82 @@ fieldset.dsn-form-field--invalid {
 }
 
 
+/**
+ * TableOfContents component styles for React
+ * Re-exports the base TableOfContents styles from components-html
+ */
+
+/**
+ * Table Of Contents Component
+ * Inhoudsopgave met ankerlinks naar de secties op de huidige pagina.
+ * Alleen H2-secties horen hierin opgenomen te worden.
+ *
+ * Twee appearances:
+ * - Default ("framed"): accent-1 achtergrond + linkerborder, heading als heading-3.
+ *   Bedoeld voor gebruik inline in de content-flow (bijv. onder de lead paragraph).
+ * - `dsn-table-of-contents--plain`: geen kader, heading als heading-5.
+ *   Bedoeld voor gebruik in een losstaande kolom naast de hoofdinhoud.
+ *
+ * Usage:
+ * <!-- Framed (default) -->
+ * <nav class="dsn-table-of-contents" aria-labelledby="toc-heading">
+ *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-table-of-contents__heading" id="toc-heading">Op deze pagina</h2>
+ *   <ul class="dsn-unordered-list">
+ *     <li><a class="dsn-link" href="#sectie-1">Sectie 1</a></li>
+ *   </ul>
+ * </nav>
+ *
+ * <!-- Plain -->
+ * <nav class="dsn-table-of-contents dsn-table-of-contents--plain" aria-labelledby="toc-heading-plain">
+ *   <h2 class="dsn-heading dsn-heading--heading-5 dsn-table-of-contents__heading" id="toc-heading-plain">Op deze pagina</h2>
+ *   <ul class="dsn-unordered-list">
+ *     <li><a class="dsn-link" href="#sectie-1">Sectie 1</a></li>
+ *   </ul>
+ * </nav>
+ */
+
+.dsn-table-of-contents {
+  border-inline-start: var(--dsn-table-of-contents-border-inline-start-width)
+    solid var(--dsn-table-of-contents-border-inline-start-color);
+  background-color: var(--dsn-table-of-contents-background-color);
+  padding-block: var(--dsn-table-of-contents-padding-block);
+  padding-inline-start: var(--dsn-table-of-contents-padding-inline-start);
+  padding-inline-end: var(--dsn-table-of-contents-padding-inline-end);
+}
+
+.dsn-table-of-contents__heading {
+  margin-block-end: var(--dsn-table-of-contents-heading-gap);
+}
+
+/* =============================================================================
+   Plain appearance — geen kader, voor gebruik in een losstaande kolom
+   ============================================================================= */
+
+.dsn-table-of-contents--plain {
+  border-inline-start: none;
+  background-color: transparent;
+  padding-block: var(--dsn-table-of-contents-plain-padding-block);
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  /* Ankerlinks: omgekeerd onderstrepingsgedrag t.o.v. de standaard Link —
+     rust zonder onderstreping, hover mét, zodat de kolom rustiger oogt. */
+  --dsn-link-text-decoration-line: var(
+    --dsn-table-of-contents-plain-link-text-decoration-line
+  );
+  --dsn-link-hover-text-decoration-line: var(
+    --dsn-table-of-contents-plain-link-hover-text-decoration-line
+  );
+}
+
+.dsn-table-of-contents--plain .dsn-unordered-list > li {
+  margin-block-end: var(--dsn-table-of-contents-plain-list-gap);
+}
+
+.dsn-table-of-contents--plain .dsn-unordered-list > li:last-child {
+  margin-block-end: 0;
+}
+
+
 /**
  * TelephoneInput Component Styles
  * Uses dsn-text-input styles from TextInput.css — no additional styles needed