https://www.dso-toolkit.nl/93.0.0/blog DSO Toolkit Blog 2026-04-20T00:00:00.000Z https://github.com/jpmonette/feed DSO Toolkit Blog https://www.dso-toolkit.nl/93.0.0/favicon.ico <![CDATA[DSO Toolkit v93.0.0 🦺]]> https://www.dso-toolkit.nl/93.0.0/blog/2026/04/20/dso-toolkit-93.0.0 2026-04-20T00:00:00.000Z Deze release bevat Breaking changes voor de volgende componenten:

  • Alert (Core implementatie)
  • Badge (HTML/CSS implementatie)

Alert (Core implementatie)​

Vooruitlopend op de deprecation en verwijdering van de HTML/CSS implementatie van het component Alert hebben wij het markup voorschrift van de Core implementatie aangepast. De Button, die voorheen gestyled werd met class dso-alert-button, wordt nu gestyled met de classes dso-primary en dso-small.

Migratiepad​

❌
<dso-alert status="success" closable>
  <div class="dso-rich-content">
    <p>Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond.</p>
    <button type="button" class="dso-alert-button">
      <span>Button</span>
    </button>
  </div>
</dso-alert>

βœ…
<dso-alert status="success" closable>
  <div class="dso-rich-content">
    <p>Dit is een succesmelding. Deze wordt getoond als een proces succesvol is afgerond.</p>
    <button type="button" class="dso-primary dso-small">
      <span>Button</span>
    </button>
  </div>
</dso-alert>

Badge (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Badge is in πŸ’ƒ Release 81.0.0 deprecated. In deze release is de HTML/CSS implementatie van het component Badge verwijderd.

Migratiepad​

Gebruik de Core implementatie van Badge.

❌
<span class="dso-badge badge-attention">Attention</span>

βœ…
<dso-badge status="attention">Attention</dso-badge>
]]> Eric Tamminga https://github.com/iterox <![CDATA[DSO Toolkit v92.0.0 🚚]]> https://www.dso-toolkit.nl/93.0.0/blog/2026/04/13/dso-toolkit-92.0.0 2026-04-13T00:00:00.000Z Deze release bevat Breaking changes voor het volgende component:

  • Toggletip

In deze release is het volgende component deprecated:

  • Highlight Box (HTML/CSS implementatie)

Toggletip​

Dit component is in 🧱 Release 91.0.0 deprecated. In deze release is dit component verwijderd.

Gebruik in plaats van Toggletip het component Info Button met Toggletip functionaliteit (sinds 🀧 Release 88.0.0). Daarnaast bieden wij sinds 🦑 Release 90.1.0 ook het component Badge aan met Toggletip functionaliteit.

Migratiepad​

❌
<dso-toggletip>
  <div class="dso-rich-content">...</div>
</dso-toggletip>

βœ…
<dso-info-button label="Toelichting bij vraag">
  <div slot="toggletip">
    <div class="dso-rich-content">...</div>
  </div>
</dso-info-button>

βœ…
<dso-badge>
  <div slot="toggletip">
    <div class="dso-rich-content">...</div>
  </div>
</dso-badge>

Highlight Box (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Highlight Box is deprecated. In een toekomstige BREAKING release zal de HTML/CSS implementatie verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Highlight Box.

❌
<div class="dso-highlight-box  dso-yellow dso-has-counter">
  <div class="dso-step-counter">
    <dso-icon icon="plus"></dso-icon>
  </div>
  <div class="dso-rich-content">
    <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten</p>
  </div>
</div>

βœ…
<dso-highlight-box yellow>
  <dso-icon icon="plus" slot="icon"></dso-icon>
  <div class="dso-rich-content">
    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
    <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten</p>
  </div>
</dso-highlight-box>
]]> Eric Tamminga https://github.com/iterox Xiangju Zou https://github.com/xiangjuzou-prog <![CDATA[DSO Toolkit v91.0.0 🧱]]> https://www.dso-toolkit.nl/93.0.0/blog/2026/03/30/dso-toolkit-91.0.0 2026-03-30T00:00:00.000Z Deze release bevat een deprecation voor de volgende componenten:

  • Toggletip
  • List

Tevens brengen we de deprecation van het component Tooltip nogmaals onder de aandacht.

Verder bevat deze release BREAKING changes voor de componenten:

  • Info Button
  • Toggletip

Info Button​

De property secondary is verwijderd. De kleurstelling die gekoppeld was aan secondary is in 🌯 Release 79.1.0 ondergebracht in het component Icon Button in de tertiary variant op een lichte achtergrondkleur en daar maakt Info Button nu gebruik van.

❌
<dso-info-button label="Toelichting bij vraag" secondary ...></dso-info-button>

❌
<button type="button" class="dso-info-button dso-info-secondary" aria-expanded="false">
  <span class="sr-only"> Toelichting bij vraag </span>
</button>

βœ…
<dso-info-button label="Toelichting bij vraag" ...></dso-info-button>

βœ…
<button type="button" class="dso-info-button">
  <span class="sr-only"> Toelichting bij vraag </span>
</button>

Toggletip​

Dit component hebben we deprecated. In een toekomstige BREAKING release zal dit component verwijderd worden. Gebruik in plaats van Toggletip het component Info Button met Toggletip functionaliteit (sinds 🀧 Release 88.0.0). Daarnaast bieden wij sinds 🦑 Release 90.1.0 ook het component Badge aan met Toggletip functionaliteit.

Ook is de property secondary verwijderd. Onder de motorkap maakt Toggletip gebruik van Info Button. De property secondary werd gebruikt om Info Button als secondary in te stellen, maar met de verwijdering van die property op het component Info Button is deze ook komen te vervallen voor Toggletip.

Migratiepad​

❌
<dso-toggletip secondary>
  <div class="dso-rich-content">...</div>
</dso-toggletip>

βœ…
<dso-toggletip>
  <div class="dso-rich-content">...</div>
</dso-toggletip>

βœ…
<dso-info-button label="Toelichting bij vraag">
  <div slot="toggletip">
    <div class="dso-rich-content">...</div>
  </div>
</dso-info-button>

βœ…
<dso-badge>
  <div slot="toggletip">
    <div class="dso-rich-content">...</div>
  </div>
</dso-badge>

Tooltip​

Tooltip hebben we eerder in 🐻 Release 73.2.0 deprecated. In de blogpost van die release schreven we: "In een van de komende releases zal Tooltip worden vervangen door verbeterde alternatieven, zoals het nieuwe Icon Button Web Component of vernieuwde varianten van het Toggletip webcomponent."

De verbeterde alternatieven zijn inmiddels via een aantal releases beschikbaar gekomen:

  • In 🌯 Release 79.1.0 hebben we het component Icon Button geΓ―ntroduceerd.
  • In 🀧 Release 88.0.0 hebben we het component Info Button uitgebreid met ondersteuning voor Toggletip functionaliteit.
  • In 🦑 Release 90.1.0 hebben we het component Badge uitgebreid met ondersteuning voor toggletip functionaliteit.

Migratiepad​

❌
<button type="button" aria-describedby="40990d71-60c2-46d2-9822-e619f4783e74">
  <span>Hover or focus me</span>
  <dso-tooltip position="right" id="40990d71-60c2-46d2-9822-e619f4783e74"> Ik sta "right" </dso-tooltip>
</button>

❌
<button type="button" aria-describedby="92fdc476-3588-4c97-80b5-d42289d00184">
  <span>Hover or focus me</span>
</button>
<dso-tooltip position="bottom" id="92fdc476-3588-4c97-80b5-d42289d00184"> Ik sta "bottom" </dso-tooltip>

βœ…
<dso-icon-button variant="map | secondary | tertiary" label="Toelichting bij vraag" icon="trash"></dso-icon-button>

βœ…
<dso-info-button label="Toelichting bij vraag">
  <div slot="toggletip">
    <div class="dso-rich-content">...</div>
  </div>
</dso-info-button>

βœ…
<dso-badge>
  <div slot="toggletip">
    <div class="dso-rich-content">...</div>
  </div>
</dso-badge>

List​

De selector ol.dso-list-ordered-action in het HTML/CSS component List is deprecated. In een toekomstige BREAKING release zal deze selector verwijderd worden.

Migratiepad​

Gebruik de ol.dso-action-list selector van de List.

❌
<ol class="dso-list-ordered-action">
  <li>...</li>
</ol>

βœ…
<ol class="dso-action-list">
  <li>...</li>
</ol>
]]> Eric Tamminga https://github.com/iterox Chris van der Leij https://github.com/cvanderleij-ilionx <![CDATA[DSO Toolkit v90.0.0 πŸ§žβ€β™‚οΈ]]> https://www.dso-toolkit.nl/93.0.0/blog/2026/03/13/dso-toolkit-90.0.0 2026-03-13T00:00:00.000Z Deze release bevat een BREAKING change voor het volgende component:

  • Label (HTML/CSS implementatie)

In deze release introduceren we een nieuwe set iconen. Alle iconen zijn nu op een 4px grid gebouwd. We hebben ook iconen verwijderd, hernoemd en toegevoegd.

Daarnaast is de Angular-integratie verbeterd: builds falen nu correct bij niet-kloppende props op DSO Toolkit componenten.

  • Nieuwe iconenset
  • Angular: Stricter type-checking op component props

Label (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Label is in 🧽 Release 79.0.0 deprecated. In deze release is deze implementatie verwijderd.

Migratiepad​

Gebruik de Core implementatie van Label.

❌
<span class="dso-label dso-label-primary">Label content</span>

βœ…
<dso-label status="primary">Label content</dso-label>

Nieuwe iconenset​

Migratiepad verwijderde en hernoemde iconen​

❌
<dso-accordion-section icon="[Oud]" ...></dso-accordion-section>
<dso-icon icon="[Oud]"></dso-icon>
<dso-icon-button icon="[Oud]" ...></dso-icon-button>

βœ…
<dso-accordion-section icon="[Nieuw]" ...></dso-accordion-section>
<dso-icon icon="[Nieuw]"></dso-icon>
<dso-icon-button icon="[Nieuw]" ...></dso-icon-button>

Verwijderde iconen​

OudNieuw
angle-downchevron-down
angle-leftchevron-left
angle-rightchevron-right
angle-upchevron-up

Hernoemde iconen​

OudNieuw
airweather
balloonballoon-outline
clockclock-outline
copycopy-outline
emailmail-outline
help-activehelp-solid
helphelp-outline
househome
info-activeinfo-solid
infoinfo-outline
location-outlinelocation-orange
mailpostcard
minus-circleminus-circle-outline
minus-squareminus-square-outline
moremore-horizontal
plus-circleplus-circle-outline
plus-squareplus-square-outline
proceduressettings
safetysecurity
status-dangerstatus-warning-red-solid
status-infostatus-info-solid
status-warning-inlinestatus-warning-red-solid
status-warning-inline-negativestatus-warning-red-outline
tabletable-outline
timescross
user-lineuser-outline
useruser-solid
wip-wipwip

Nieuwe iconen​

Nieuw
balloon-solid
caret-up
chevron-down-down
chevron-down-up
chevron-up-down
chevron-up-up
clock-solid
copy-solid
internet
mail-solid
map
minus-circle-solid
minus-square-solid
more-vertical
pause
play
plus-circle-solid
plus-square-solid
question
share
status-forbidden
status-info-outline
stop
table-solid
user-solid

Angular: Stricter type-checking op component props​

De Angular output target gebruikt nu inlineProperties. Hierdoor controleert de Angular Language Service (en daarmee ook de build) of properties op DSO Toolkit componenten correct zijn gebruikt.

Voorheen werden fouten in component properties alleen runtime in de browserconsole gemeld. Vanaf nu worden deze fouten al tijdens de build gedetecteerd.

Wat betekent dit voor afnemers?​

Angular-projecten die DSO Toolkit componenten gebruiken met onjuiste properties zullen nu een build-error krijgen. Dit is gewenst gedrag: fouten worden eerder ontdekt in plaats van stilzwijgend genegeerd.

Controleer na het updaten of je Angular-project nog succesvol bouwt. Eventuele build-fouten wijzen op properties die niet (meer) bestaan of een verkeerd type hebben. Corrigeer deze aan de hand van de foutmeldingen.

]]> Eric Tamminga https://github.com/iterox Chris van der Leij https://github.com/cvanderleij-ilionx Wouter Heldens https://github.com/wheldens <![CDATA[DSO Toolkit v89.0.0 🌹]]> https://www.dso-toolkit.nl/93.0.0/blog/2026/03/02/dso-toolkit-89.0.0 2026-03-02T00:00:00.000Z Deze release bevat BREAKING changes voor de volgende componenten:

  • Legend
  • Legend Item

Legend​

Legend Item is opgegaan in Legend en mag alleen nog worden gebruikt binnen een dso-legend-group. Elke dso-legend-group beheert de groepskop en de edit/view-modus van zijn onderliggende dso-legend-item elementen.

Wat is er veranderd?​

Voorheen werden groepskoppen als dso-legend-item met een <h3 slot="label"> gerenderd. Er was geen concept van groepering, edit/view-modus of verwijderfunctionaliteit.

Nu worden dso-legend-item elementen geplaatst in een dso-legend-group. De groepskop wordt via het heading-slot van dso-legend-group meegegeven. dso-legend-group beheert de mode ("edit" | "view") van zijn onderliggende items.

Nieuw: dso-legend-group​

Property / SlotBeschrijving
mode"edit" | "view" β€” Schakelt de modus van de groep en cascadeert naar onderliggende dso-legend-item elementen. Wanneer niet gezet wordt er geen edit/view icoon getoond.
dsoLegendGroupModeChangeEvent dat wordt geΓ«mit wanneer de gebruiker de modus wijzigt. Bevat { next: LegendMode, originalEvent: MouseEvent }.
heading slotDe groepskop. Verwacht een <h3 slot="heading">...</h3>.
options slotControls die alleen in edit-modus zichtbaar zijn (bijv. dso-input-range voor transparantie). Gebruik <div slot="options">...</div>.

Nieuw op dso-legend-item​

Property / EventBeschrijving
dsoDeleteEvent dat wordt geΓ«mit wanneer de gebruiker op de verwijderknop klikt (zichtbaar in edit-modus).

De mode van een dso-legend-item wordt intern beheerd door de bovenliggende dso-legend-group en hoeft niet handmatig gezet te worden.

Migratiepad​

Groepskoppen: dso-legend-item met <h3> β†’ dso-legend-group​

Groepskoppen die voorheen als dso-legend-item met een <h3 slot="label"> werden gerenderd, worden nu als dso-legend-group met een <h3 slot="heading"> weergegeven. De bijbehorende items worden als children in de groep geplaatst.

❌
<dso-legend>
  <dso-legend-item>
    <h3 slot="label">Geselecteerde kenmerken</h3>
  </dso-legend-item>
  <dso-legend-item>
    <span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
    <span slot="label">Bomen kappen</span>
  </dso-legend-item>
  <dso-legend-item>
    <span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
    <span slot="label">Acculader in werking</span>
  </dso-legend-item>
</dso-legend>

βœ…
<dso-legend>
  <dso-legend-group>
    <h3 slot="heading">Geselecteerde kenmerken</h3>
    <dso-legend-item>
      <span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
      <span slot="label">Bomen kappen</span>
    </dso-legend-item>
    <dso-legend-item>
      <span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
      <span slot="label">Acculader in werking</span>
    </dso-legend-item>
  </dso-legend-group>
</dso-legend>

dso-rich-content wrapper verwijderen​

De <div class="dso-rich-content"> wrapper binnen dso-legend is niet meer nodig en mag niet meer gebruikt worden. De content wordt direct in dso-legend geplaatst.

❌
<dso-legend>
  <div class="dso-rich-content">
    <dso-legend-group>
      <h3 slot="heading">Geselecteerde kenmerken</h3>
      ...
    </dso-legend-group>
  </div>
</dso-legend>

βœ…
<dso-legend>
  <dso-legend-group>
    <h3 slot="heading">Geselecteerde kenmerken</h3>
    ...
  </dso-legend-group>
</dso-legend>

Edit/view-modus gebruiken​

Om de edit/view-modus te activeren, zet mode op de dso-legend-group. De groep cascadeert deze modus automatisch naar alle onderliggende dso-legend-item elementen. Luister naar dsoLegendGroupModeChange om de modus te wijzigen. Wanneer mode niet wordt meegegeven, wordt er geen edit/view icoon getoond in de groepskop.

In edit-modus toont elk dso-legend-item een verwijderknop. Luister naar het dsoDelete event om hierop te reageren.

View-modus (mode="view")​
<dso-legend>
  <dso-legend-group mode="view">
    <h3 slot="heading">Geselecteerde kenmerken</h3>
    <dso-legend-item>
      <span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
      <span slot="label">Bomen kappen</span>
    </dso-legend-item>
  </dso-legend-group>
</dso-legend>
Edit-modus (mode="edit")​

Wanneer de gebruiker naar edit-modus schakelt via het potloodicoon, emit dso-legend-group het dsoLegendGroupModeChange event. Na het updaten van mode naar "edit" toont elk item een verwijderknop die bij klik het dsoDelete event emit. Daarnaast wordt de inhoud van het options-slot zichtbaar (bijv. een transparantieregelaar):

<dso-legend>
  <dso-legend-group mode="edit">
    <h3 slot="heading">Geselecteerde kenmerken</h3>
    <div slot="options">
      <label>Zichtbaarheid</label>
      <dso-input-range label="Transparantie" unit="%"></dso-input-range>
    </div>
    <dso-legend-item>
      <span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
      <span slot="label">Bomen kappen</span>
    </dso-legend-item>
  </dso-legend-group>
</dso-legend>
]]> Wouter Heldens https://github.com/wheldens <![CDATA[DSO Toolkit v88.0.0 🀧]]> https://www.dso-toolkit.nl/93.0.0/blog/2026/02/11/dso-toolkit-88.0.0 2026-02-11T00:00:00.000Z Deze release bevat een BREAKING change voor het volgende component:

  • Info Button

Info Button​

  • Breaking: De active prop is nu volledig stateless en wordt niet langer intern aangepast door het component. De verantwoordelijkheid voor het beheren van de active state ligt nu volledig bij de afnemer.
  • Bij een klik emit de Info Button het dsoToggle event, zolang het slot name="toggletip" niet is gevuld.
  • Het slot name="toggletip" is toegevoegd om de Toggletip functionaliteit door Info Button te laten verzorgen. Wanneer dit slot is gevuld, neemt de Info Button het tonen en verbergen van de Toggletip over op basis van klik op de Info Button. Dit is nieuwe optionele functionaliteit; bestaande implementaties zonder dit slot blijven werken zoals voorheen.

Toggletip gebruik​

<dso-info-button label="Toelichting bij vraag">
  <div slot="toggletip">
    <div class="dso-rich-content">
      <h2>Samenspel tussen wetgever en ontwikkelaars</h2>
      <p>
        Het DSO wordt ontwikkeld door het programma
        <a href="https://aandeslagmetdeomgevingswet.nl/digitaal-stelsel/">Aan de slag met de Omgevingswet</a>
        in samenwerking met haar partners. De ontwikkeling vraagt een intensief samenspel tussen de wetgever en de
        ontwikkelpartners van het DSO. Enerzijds moeten wetgever en de ontwikkelpartners zorgen dat alles wat in de wet-
        en regelgeving wordt geregeld ook makkelijk toegankelijk is of kan worden. Anderzijds moeten zij zorgen dat
        alles wat digitaal wordt gerealiseerd, ook juridisch verankerd is of kan worden.
      </p>
    </div>
  </div>
</dso-info-button>
]]> Chris van der Leij https://github.com/cvanderleij-ilionx <![CDATA[DSO Toolkit v87.0.0 πŸ¦‰]]> https://www.dso-toolkit.nl/93.0.0/blog/2026/02/06/dso-toolkit-87.0.0 2026-02-06T00:00:00.000Z Deze release bevat een BREAKING change voor het volgende component:

  • Document Component

Document Component​

De properties bevatOntwerpInformatie en genesteOntwerpInformatie zijn verwijderd. Hiervoor in de plaats zijn de generieke properties label, labelStatus, badge, badgeStatus en badgeTooltip gekomen.

Voorheen was de "Ontwerp"-status hardcoded in het component: bevatOntwerpInformatie toonde altijd een geel "Ontwerp" label en genesteOntwerpInformatie toonde altijd een waarschuwingsbadge. Met deze wijziging kan de afnemer zelf de tekst, status en tooltip instellen. Dit maakt het component geschikt voor meerdere scenario's, zoals "Ontwerp" en "Besluitversie".

Migratiepad​

Label (voorheen bevatOntwerpInformatie)​

De property bevatOntwerpInformatie is vervangen door label en labelStatus. Waar voorheen het component zelf het label "Ontwerp" renderde, geeft de afnemer nu expliciet de tekst en kleur mee.

❌
<dso-document-component bevat-ontwerp-informatie></dso-document-component>

βœ…
<dso-document-component label="Ontwerp" label-status="warning"></dso-document-component>

Badge (voorheen genesteOntwerpInformatie)​

De property genesteOntwerpInformatie is vervangen door badge, badgeStatus en badgeTooltip. Waar voorheen het component automatisch een "!" badge met tooltip toonde, geeft de afnemer nu zelf de badge-inhoud, kleur en tooltip mee.

❌
<dso-document-component geneste-ontwerp-informatie></dso-document-component>

βœ…
<dso-document-component
  badge="!"
  badge-status="warning"
  badge-tooltip="Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp."
></dso-document-component>

Voorbeeld: Besluitversie​

Door de generieke opzet is het nu ook mogelijk om andere statussen weer te geven:

<dso-document-component
  label="Besluitversie"
  label-status="primary"
  badge="B"
  badge-status="primary"
  badge-tooltip="Dit onderdeel bevat een besluitversie."
></dso-document-component>
]]> Wouter Heldens https://github.com/wheldens <![CDATA[DSO Toolkit v86.0.0 πŸ‰]]> https://www.dso-toolkit.nl/93.0.0/blog/2026/01/29/dso-toolkit-86.0.0 2026-01-29T00:00:00.000Z Deze release bevat een BREAKING change voor het volgende component:

  • Document Card

Document Card​

Waar voorheen de Badge's aan het eind van het slot="status" werden geplaatst, worden de Badge's nu in het slot="interactions" geplaatst.

Migratiepad​

❌
<dso-document-card href="#">
  <h2 slot="heading">Omgevingsplan Amsterdam</h2>
  <div slot="meta">
    <dso-label status="warning" compact="">Ontwerp</dso-label>
  </div>
  <div slot="type">
    <span class="dso-document-card-type-item">Omgevingsplan</span>
    <span class="dso-document-card-type-item">Gemeente Amsterdam</span>
  </div>
  <div slot="status">
    Vastgesteld 07-06-2024 - geheel onherroepelijk in werking
    <dso-badge status="outline">!</dso-badge>
    <dso-badge status="warning">!</dso-badge>
  </div>
</dso-document-card>

βœ…
<dso-document-card href="#">
  <h2 slot="heading">Omgevingsplan Amsterdam</h2>
  <div slot="type">
    <span class="dso-document-card-type-item">Omgevingsplan</span>
    <span class="dso-document-card-type-item">Gemeente Amsterdam</span>
  </div>
  <span slot="meta">
    <dso-label status="warning" compact="">Ontwerp</dso-label>
  </span>
  <span slot="status">Vastgesteld 07-06-2024 - geheel onherroepelijk in werking</span>
  <span slot="interactions">
    <dso-badge status="outline">!</dso-badge>
    <dso-badge status="warning">!</dso-badge>
  </span>
</dso-document-card>
]]> Xiangju Zou https://github.com/xiangjuzou-prog <![CDATA[DSO Toolkit v85.0.0 πŸŽ‡]]> https://www.dso-toolkit.nl/93.0.0/blog/2026/01/13/dso-toolkit-85.0.0 2026-01-13T00:00:00.000Z Deze release bevat BREAKING changes voor de volgende componenten:

  • Legend Item
  • Document Card

Daarnaast is in deze release de ondersteuning voor Angular 18 komen te vervallen. Vanaf deze release ondersteunt DSO Toolkit Angular versies 19, 20 en 21.

Legend Item​

Er was een probleem met de toegankelijkheid van een activatable Legend Item: het aria-label van de Slide Toggle button met role="switch" was niet gekoppeld aan het label van het Legend Item. Dit hebben we nu verholpen. Daardoor is het vanaf nu voorgeschreven dat het label in een span met attribuut slot="label" wordt geplaatst, zodat Legend Item via de property accessibleLabel van de Slide Toggle het aria-label van de button op de voorgeschreven manier kan vullen.

Migratiepad​

Plaats het label dat voorheen zonder HTML markup in het anonieme slot werd geplaatst voortaan in en span met attribuut slot="label".

❌
<dso-legend-item>
  <span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span> Legenda item label
  <div slot="options"><dso-input-range label="Transparantie" unit="%"></dso-input-range></div>
</dso-legend-item>

βœ…
<dso-legend-item>
  <span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
  <span slot="label">Legenda item label</span>
  <div slot="options"><dso-input-range label="Transparantie" unit="%"></dso-input-range></div>
</dso-legend-item>

Document Card​

Het slot="meta" is verwijderd. Het Label dat voorheen in het slot="meta" stond is nu verplaatst naar het begin van het slot="status".

Migratiepad​

❌
<dso-document-card href="#">
  <h2 slot="heading">Omgevingsplan Amsterdam</h2>
  <div slot="type">
    <span class="dso-document-card-type-item">Omgevingsplan</span>
    <span class="dso-document-card-type-item">Gemeente Amsterdam</span>
  </div>
  <div slot="status">
    Vastgesteld 07-06-2024 - geheel onherroepelijk in werking
    <dso-badge status="outline">!</dso-badge>
    <dso-badge status="warning">!</dso-badge>
  </div>
</dso-document-card>

βœ…
<dso-document-card href="#">
  <h2 slot="heading">Omgevingsplan Amsterdam</h2>
  <div slot="type">
    <span class="dso-document-card-type-item">Omgevingsplan</span>
    <span class="dso-document-card-type-item">Gemeente Amsterdam</span>
  </div>

  <span slot="status"> Vastgesteld 07-06-2024 - geheel onherroepelijk in werking</span>
  <span slot="interactions">
    <dso-badge status="outline">!</dso-badge>
    <dso-badge status="warning">!</dso-badge>
  </span>
</dso-document-card>
]]> Eric Tamminga https://github.com/iterox Xiangju Zou https://github.com/xiangjuzou-prog <![CDATA[DSO Toolkit v84.0.0 🎠️]]> https://www.dso-toolkit.nl/93.0.0/blog/2025/12/12/dso-toolkit-84.0.0 2025-12-12T00:00:00.000Z Deze release bevat BREAKING changes voor het volgende component:

  • Autosuggest

Autosuggest​

De property suggestOnFocus is verwijderd. Het gedrag dat de voorgaande suggesties opnieuw getoond worden, wanneer de invoer weer de focus krijgt, is nu het standaard gedrag bij meer dan 1 suggestie.

Migratiepad​

❌
<dso-autosuggest suggest-on-focus>
  <input id="autosuggestInputId" type="text" class="form-control" />
</dso-autosuggest>

βœ…
<dso-autosuggest>
  <input id="autosuggestInputId" type="text" class="form-control" />
</dso-autosuggest>
]]> Chris van der Leij https://github.com/cvanderleij-ilionx <![CDATA[DSO Toolkit v83.0.0 🏝️]]> https://www.dso-toolkit.nl/93.0.0/blog/2025/11/27/dso-toolkit-83.0.0 2025-11-27T00:00:00.000Z Deze release bevat BREAKING changes voor de volgende componenten:

  • Progress Bar
  • Document List (HTML/CSS component)
  • Progress Indicator (HTML/CSS implementatie)
  • Card (HTML/CSS implementatie)

In deze release is het volgende component deprecated:

  • Dropdown Menu: (HTML/CSS implementatie)

Progress Bar​

In πŸ‡ Release 78.0.0 is het component Progress Bar deprecated. Dit component bleek niet meer in gebruik te zijn. In deze release is dit component verwijderd.

HTML/CSS implemenatie​

❌
<div class="progress">
  <span
    class="progress-bar"
    role="progressbar"
    aria-labelledby="progress-bar-label"
    aria-valuenow="60"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    <span style="width: 60%"></span>
  </span>
  <span id="progress-bar-label">Genereren export: nog ongeveer 4 minuten.</span>
</div>

Core implementatie​

❌ <dso-progress-bar progress="60">Genereren export: nog ongeveer 4 minuten.</dso-progress-bar>

Document List​

Het HTML/CSS component Document List werd niet meer gebruikt. Daarom hebben we het in deze release verwijderd.

Progress Indicator (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Progress Indicator is in πŸ’ƒ Release 81.0.0 deprecated. In deze release is deze implementatie verwijderd.

Migratiepad​

Gebruik de Core implementatie van Progress Indicator.

❌
<div class="dso-progress-indicator dso-medium">
  <span class="dso-progress-indicator-spinner" role="progressbar" aria-labelledby="progress-indicator-label"></span>
  <span id="progress-indicator-label" class="dso-progress-indicator-label">
    Resultaten laden: een moment geduld alstublieft.
  </span>
</div>

βœ…
<dso-progress-indicator size="medium"></dso-progress-indicator>

Card (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Card is in 🍟 Release 80.0.0 deprecated. In deze release is deze implementatie verwijderd.

Migratiepad​

Gebruik de Core implementatie van Card.

❌
<div class="dso-card">
  <div class="dso-card-container">
    <div class="dso-card-heading">
      <a href="#">
        <h2>
          <span id="card-title">Omgevingsplan Nieuwegein</span>
          <!-- START DEPRECATED --><svg class="di di-chevron-right">
            <use href="#chevron-right"></use></svg
          ><!-- END DEPRECATED -->
        </h2>
      </a>
    </div>
    <div class="dso-rich-content"><p>Gemeente Nieuwegein informeert haar burgers graag over de Omgevingswet.</p></div>
  </div>
</div>

βœ…
<dso-card href="#">
  <h2 slot="heading" id="card-title">Omgevingsplan Nieuwegein</h2>
  <div class="dso-rich-content" slot="content">
    <p>Gemeente Nieuwegein informeert haar burgers graag over de Omgevingswet.</p>
  </div>
</dso-card>

De HTML/CSS implementatie van het component Dropdown Menu is deprecated. In een toekomstige BREAKING release zal de HTML/CSS implementatie verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Dropdown Menu.

❌
<div class="dso-dropdown-menu dso-open">
  <button type="button" id="0d47f401-0f17-4192-9dc7-10ecb5b1beee" class="dso-secondary">
    <span>Opties</span>
  </button>
  <div class="dso-dropdown-options" role="menu" aria-labelledby="0d47f401-0f17-4192-9dc7-10ecb5b1beee">
    <ul role="group" aria-labelledby="">
      <li role="none">
        <button type="button" role="menuitem">Bewerken</button>
      </li>
      <li role="none">
        <button type="button" role="menuitem">Verwijderen</button>
      </li>
    </ul>
  </div>
</div>

βœ…
<dso-dropdown-menu dropdown-align="left">
  <button type="button" id="6120c29d-e6d6-493c-b020-e2f77afe32de" class="dso-secondary" slot="toggle">
    <span>Opties</span>
  </button>
  <div class="dso-dropdown-options" aria-labelledby="6120c29d-e6d6-493c-b020-e2f77afe32de">
    <ul>
      <li>
        <button type="button">Bewerken</button>
      </li>
      <li>
        <button type="button">Verwijderen</button>
      </li>
    </ul>
  </div>
</dso-dropdown-menu>
]]> Eric Tamminga https://github.com/iterox <![CDATA[DSO Toolkit v82.0.0 πŸ”]]> https://www.dso-toolkit.nl/93.0.0/blog/2025/11/17/dso-toolkit-82.0.0 2025-11-17T00:00:00.000Z Deze release bevat BREAKING changes voor de volgende componenten:

  • Selectable (HTML/CSS implementatie)
  • Accordion (HTML/CSS implementatie)

Deze release bevat een deprecation voor het volgende component:

  • Modal (HTML/CSS implementatie)

Selectable (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Selectable is in πŸ‡ Release 78.0.0 deprecated. In deze release is deze implementatie verwijderd.

Migratiepad​

Gebruik de Core implementatie van Selectable.

❌
<div class="dso-selectable">
  <input type="checkbox" id="1234" value="the-value" aria-invalid="false" />
  <script>
    document.getElementById("1234").indeterminate = false;
  </script>
  <label for="1234">Label</label>
  <div class="dso-info">
    <div class="dso-rich-content" slot="info">
      <p>Rijke inhoud</p>
      <p>Ziet er zo uit</p>
      <ul>
        <li>Lijstjes</li>
      </ul>
      <p>Kan allemaal</p>
    </div>
  </div>
</div>

βœ…
<dso-selectable type="checkbox" identifier="1234" value="the-value">
  Label
  <div class="dso-rich-content" slot="info">
    <p>Rijke inhoud</p>
    <p>Ziet er zo uit</p>
    <ul>
      <li>Lijstjes</li>
    </ul>
    <p>Kan allemaal</p>
  </div>
</dso-selectable>

Accordion (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Accordion is in πŸ¦• Release 78.1.0 deprecated. In deze release is deze implementatie verwijderd.

Migratiepad​

Gebruik de Core implementatie van Accordion.

❌
<div class="dso-accordion">
  <div class="dso-accordion-section dso-open">
    <h2 class="dso-section-handle">
      <button type="button" aria-expanded="true">
        Is het verplicht om de Vergunningcheck te doen?

        <div class="dso-section-handle-addons">
          <span class="dso-label dso-label-attention dso-compact"> Attentie </span>
        </div>
      </button>
    </h2>
    <div class="dso-section-body">
      <p>
        Nee, de Vergunningcheck is niet verplicht. Het is een hulpmiddel waarmee u kunt zien of u een vergunning nodig
        heeft of melding moet doen.
      </p>
      <p>
        Wel kunt u meteen na de check een aanvraag of melding starten. Een aantal gegevens uit de Vergunningcheck wordt
        dan meegenomen in de aanvraag of melding.
      </p>
    </div>
  </div>
</div>

βœ…
<dso-accordion>
  <dso-accordion-section
    heading="h2"
    handle-title="Is het verplicht om de Vergunningcheck te doen?"
    label="Attentie"
    label-status="attention"
    open
  >
    <p>
      Nee, de Vergunningcheck is niet verplicht. Het is een hulpmiddel waarmee u kunt zien of u een vergunning nodig
      heeft of melding moet doen.
    </p>
    <p>
      Wel kunt u meteen na de check een aanvraag of melding starten. Een aantal gegevens uit de Vergunningcheck wordt
      dan meegenomen in de aanvraag of melding.
    </p>
  </dso-accordion-section>
</dso-accordion>

De HTML/CSS implementatie van het component Modal is deprecated. In een toekomstige BREAKING release zal de HTML/CSS implementatie verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Modal.

❌
<dialog aria-modal="true" class="dso-modal" role="alertdialog" aria-labelledby="c7934734-e6aa-4d9c-a76c-32dde50fe078">
  <div class="dso-dialog" role="document">
    <div class="dso-header">
      <h2 id="c7934734-e6aa-4d9c-a76c-32dde50fe078">Verwijderen werkzaamheid</h2>
      <button type="button" class="dso-close">
        <span class="sr-only">Sluiten</span>
      </button>
    </div>
    <dso-scrollable>
      <div class="dso-body" tabindex="0">
        <p>
          U wilt de werkzaamheid <strong>Dakkapel plaatsen, vervangen of veranderen</strong> verwijderen. Uw antwoorden
          op de vragen worden dan ook verwijderd. Wilt u doorgaan?
        </p>
      </div>
    </dso-scrollable>
    <div class="dso-footer">
      <button type="button" class="dso-tertiary">
        <span>Annuleren</span>
      </button>
      <button type="button" class="dso-secondary">
        <span>Secundaire actie</span>
      </button>
      <button type="button" class="dso-primary">
        <span>Bevestigen</span>
      </button>
    </div>
  </div>
</dialog>

βœ…
<dso-modal dialog-role="alertdialog" modal-title="Verwijderen werkzaamheid" closable="">
  <div slot="body">
    <p>
      U wilt de werkzaamheid <strong>Dakkapel plaatsen, vervangen of veranderen</strong> verwijderen. Uw antwoorden op
      de vragen worden dan ook verwijderd. Wilt u doorgaan?
    </p>
  </div>
  <div slot="footer">
    <button type="button" class="dso-tertiary">
      <span>Annuleren</span>
    </button>
    <button type="button" class="dso-secondary">
      <span>Secundaire actie</span>
    </button>
    <button type="button" class="dso-primary">
      <span>Bevestigen</span>
    </button>
  </div>
</dso-modal>
]]> Chris van der Leij https://github.com/cvanderleij-ilionx Eric Tamminga https://github.com/iterox <![CDATA[DSO Toolkit v81.0.0 πŸ’ƒ]]> https://www.dso-toolkit.nl/93.0.0/blog/2025/11/04/dso-toolkit-81.0.0 2025-11-04T00:00:00.000Z Deze release bevat BREAKING changes voor de volgende componenten:

  • Date Picker (Legacy)
  • Icon (HTML/CSS implementatie)
  • Document Component
  • Ozon Content

Deze release bevat een deprecation voor de volgende componenten:

  • Badge (HTML/CSS implementatie)
  • Progress Indicator (HTML/CSS implementatie)

Date Picker (Legacy)​

Het component Date Picker (Legacy) is in πŸ¦• Release 78.1.0 deprecated. In deze release is dit component verwijderd.

❌

<dso-date-picker-legacy></dso-date-picker-legacy>

Icon (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Icon is in πŸ¦• Release 78.1.0 deprecated. In deze release is deze implementatie verwijderd.

Migratiepad​

Gebruik de Core implementatie van Icon.

❌
<svg class="di di-user">
  <use href="#user"></use>
</svg>

βœ…
<dso-icon icon="user"></dso-icon>

Document Component​

Het Event dsoOzonContentAnchorClick is vervangen door dsoOzonContentClick. (Zie ook de BREAKING change aan het component Ozon Content in deze release).

Ozon Content​

De Ozon Content dsoAnchorClick event handler is komen te vervallen. Het gedrag van deze event handler is ondergebracht in dsoClick. Daarnaast is de event handler dsoClick uitgebreid met de nieuwe link types IntIoRef en IntRef.

Er is geen uitgestippeld migratiepad. Hoogstwaarschijnlijk wil je als high-level afnemer gebruik maken van Document Component. Ozon Content kan gezien worden als een "Low Level component".

STOP elementen IntRef werden voorheen geparsed tot <a href="#<waarde-van-ref-attribuut>">. De waarde in het href attribuut wordt nu gegenereerd via de urlResolver. Dit maakt het mogelijk om de gegenereerde URL aan te passen.

Onderstaande voorbeeld implementatie geeft het oude gedrag. Dit wordt niet aangeraden en staat er slechts ter verduidelijking. Het is de bedoeling dat de urlResolver dezelfde functie teruggeeft als die de click handler in de router zet.

function urlResolver(
  name: "ExtIoRef" | "ExtRef" | "IntIoRef" | "IntRef",
  attribute: "ref",
  value: string | null,
  element: Element,
): string {
  if (name === "IntRef" && value) {
    return `#${value}`;
  }

  // [..]
}

Badge (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Badge is deprecated. In een toekomstige BREAKING release zal dit component verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Badge.

❌
<span class="dso-badge badge-attention">Attention</span>

βœ…
<dso-badge status="attention">Attention</dso-badge>

Progress Indicator (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Progress Indicator is deprecated. In een toekomstige BREAKING release zal dit component verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Progress Indicator.

❌
<div class="dso-progress-indicator dso-medium">
  <span class="dso-progress-indicator-spinner" role="progressbar" aria-labelledby="progress-indicator-label"></span>
  <span id="progress-indicator-label" class="dso-progress-indicator-label">
    Resultaten laden: een moment geduld alstublieft.
  </span>
</div>

βœ…
<dso-progress-indicator size="medium"></dso-progress-indicator>
]]> Chris van der Leij https://github.com/cvanderleij-ilionx Eric Tamminga https://github.com/iterox Thomas Rijsewijk https://github.com/tfrijsewijk <![CDATA[DSO Toolkit v80.0.0 🍟]]> https://www.dso-toolkit.nl/93.0.0/blog/2025/10/30/dso-toolkit-80.0.0 2025-10-30T00:00:00.000Z Deze release bevat een BREAKING change voor het volgende component:

  • Document Component

Deze release bevat een deprecation voor het volgende component:

  • Card (HTML/CSS implementatie)

Document Component​

  • Property gereserveerd is vervangen met een XMLDocument of string i.p.v. een boolean.
  • Property vervallen is vervangen met een XMLDocument of string i.p.v. een boolean.

Gereserveerd​

De property gereserveerd accepteert nu een XML-string of een XMLDocument. Dit maakt het mogelijk om een optionele wijzigactie (voegtoe of verwijder) mee te geven, zoals voorgeschreven door STOP:

❌

<dso-document-component gereserveerd></dso-document-component>

βœ…

<dso-document-component gereserveerd="<Gereserveerd wijzigactie='verwijder'></Gereserveerd>"></dso-document-component>
<dso-document-component gereserveerd="<Gereserveerd wijzigactie='voegtoe'></Gereserveerd>"></dso-document-component>
<dso-document-component gereserveerd="<Gereserveerd></Gereserveerd>"></dso-document-component>

Vervallen​

Hetzelfde geldt voor vervallen. Ook deze property accepteert nu een XML-string of een XMLDocument, met een optionele wijzigactie:

❌

<dso-document-component vervallen></dso-document-component>

βœ…

<dso-document-component vervallen="<Vervallen wijzigactie='verwijder'></Vervallen>"></dso-document-component>
<dso-document-component vervallen="<Vervallen wijzigactie='voegtoe'></Vervallen>"></dso-document-component>
<dso-document-component vervallen="<Vervallen></Vervallen>"></dso-document-component>

Card (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Card is deprecated. In een toekomstige BREAKING release zal dit component verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Card.

❌

<div class="dso-card">
  <div class="dso-card-container">
    <div class="dso-card-heading">
      <a href="#">
        <h2>
          <span id="card-title">Omgevingsplan Nieuwegein</span>
          <!-- START DEPRECATED --><svg class="di di-chevron-right">
            <use href="#chevron-right"></use></svg
          ><!-- END DEPRECATED -->
        </h2>
      </a>
    </div>
    <div class="dso-rich-content"><p>Gemeente Nieuwegein informeert haar burgers graag over de Omgevingswet.</p></div>
  </div>
</div>

βœ…

<dso-card href="#">
  <h2 slot="heading" id="card-title">Omgevingsplan Nieuwegein</h2>
  <div class="dso-rich-content" slot="content">
    <p>Gemeente Nieuwegein informeert haar burgers graag over de Omgevingswet.</p>
  </div>
</dso-card>
]]> Chris van der Leij https://github.com/cvanderleij-ilionx Eric Tamminga https://github.com/iterox <![CDATA[DSO Toolkit v79.0.0 🧽]]> https://www.dso-toolkit.nl/93.0.0/blog/2025/09/18/dso-toolkit-79.0.0 2025-09-18T00:00:00.000Z Deze release bevat Breaking changes voor de volgende componenten:

  • Breadcrumbs
  • Header

Deze release bevat een deprecation voor het volgende component:

  • Label (HTML/CSS implementatie)

Het HTML/CSS component Breadcrumbs maakte nog ten onrechte gebruik van de class name in enkelvoud: breadcrumb. Daarnaast ontbrak de prefix dso- in de class name. Dat hebben we in deze release gecorrigeerd. De class name is geworden dso-breadcrumbs

Migratiepad​

Vervang de class name breadcrumb door dso-breadcrumbs.

❌

<ol class="breadcrumb">
  [..]
</ol>

βœ…

<ol class="dso-breadcrumbs">
  [..]
</ol>

De property useDropDownMenu is hernoemd, de mogelijke waarden zijn gelijk gebleven.

Migratiepad​

❌
<dso-header useDropDownMenu="always|auto"></dso-header>

βœ…
<dso-header compact="always|auto"></dso-header>

Label​

Het HTML/CSS component Label is deprecated. In een toekomstige BREAKING release zal dit component verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Label.

❌

<span class="dso-label dso-label-primary dso-compact">
  <span class="dso-label-symbol">[...]</span>
  LABEL
  <button type="button">
    <span class="sr-only">Verwijder</span>
    <dso-icon icon="times"></dso-icon>
  </button>
</span>

βœ…

<dso-label status="primary" compact removable>
  <!-- event listener onDsoRemoveClick -->
  <span slot="symbol">[...]</span>
  LABEL
</dso-label>
]]> Eric Tamminga https://github.com/iterox <![CDATA[DSO Toolkit v78.1.0 πŸ¦•]]> https://www.dso-toolkit.nl/93.0.0/blog/2025/08/19/dso-toolkit-78.1.0 2025-08-19T00:00:00.000Z Deze release bevat drie deprecations voor de volgende componenten:

  • Icon (HTML/CSS implementatie)
  • Date Picker (Legacy)
  • Accordion (HTML/CSS implementatie)

Icon​

Het HTML/CSS component Icon is deprecated. In een toekomstige BREAKING release zal dit component verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Icon.

❌

<svg class="di di-user">
  <use href="#user"></use>
</svg>

βœ…

<dso-icon icon="user"></dso-icon>

Date Picker (Legacy)​

Het Date Picker (Legacy) component is deprecated. In een toekomstige BREAKING release zal dit component verwijderd worden.

Migratiepad​

Gebruik het Date Picker component.

❌

<dso-date-picker-legacy></dso-date-picker-legacy>

βœ…

<dso-date-picker></dso-date-picker>

Accordion​

Het HTML/CSS component Accordion is deprecated. In een toekomstige BREAKING release zal dit component verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Accordion.

❌

<div class="dso-accordion">
  <div class="dso-accordion-section dso-open">
    <h2 class="dso-section-handle">
      <button type="button" aria-expanded="true">
        Is het verplicht om de Vergunningcheck te doen?

        <div class="dso-section-handle-addons">
          <span class="dso-label dso-label-attention dso-compact"> Attentie </span>
        </div>
      </button>
    </h2>
    <div class="dso-section-body">
      <p>
        Nee, de Vergunningcheck is niet verplicht. Het is een hulpmiddel waarmee u kunt zien of u een vergunning nodig
        heeft of melding moet doen.
      </p>
      <p>
        Wel kunt u meteen na de check een aanvraag of melding starten. Een aantal gegevens uit de Vergunningcheck wordt
        dan meegenomen in de aanvraag of melding.
      </p>
    </div>
  </div>
</div>

βœ…

<dso-accordion>
  <dso-accordion-section
    heading="h2"
    handle-title="Is het verplicht om de Vergunningcheck te doen?"
    label="Attentie"
    label-status="attention"
    open
  >
    <p>
      Nee, de Vergunningcheck is niet verplicht. Het is een hulpmiddel waarmee u kunt zien of u een vergunning nodig
      heeft of melding moet doen.
    </p>
    <p>
      Wel kunt u meteen na de check een aanvraag of melding starten. Een aantal gegevens uit de Vergunningcheck wordt
      dan meegenomen in de aanvraag of melding.
    </p>
  </dso-accordion-section>
</dso-accordion>
]]> Eric Tamminga https://github.com/iterox <![CDATA[DSO Toolkit v78.0.0 πŸ‡]]> https://www.dso-toolkit.nl/93.0.0/blog/2025/08/14/dso-toolkit-78.0.0 2025-08-14T00:00:00.000Z Deze release bevat Breaking changes voor het volgende component:

  • Whitebox

Whitebox​

Het HTML/CSS component Whitebox is in πŸ’· Release 76.0.0 deprecated. In deze release is dit component verwijderd.

❌

<div class="dso-whitebox">...</div>
]]> Eric Tamminga https://github.com/iterox <![CDATA[DSO Toolkit v77.0.0 ⛱️]]> https://www.dso-toolkit.nl/93.0.0/blog/2025/07/28/dso-toolkit-77.0.0 2025-07-28T00:00:00.000Z Deze release bevat Breaking changes voor de volgende componenten:

  • Pagination Component (HTML/CSS implementatie)
  • Dropdown Menu (Core implementatie)

Pagination HTML/CSS Component​

De Pagination (HTML/CSS implementatie) wordt niet gebruikt. Daarom hebben we het in deze release verwijderd.

❌

<nav class="pagination"></nav>

Het Web component Dropdown Menu maakte gebruik van de deprecated package popper-max-size-modifier@0.2.0 en @popperjs/core. In deze release zijn beide vervangen door floating-ui. Het koppelvlak is daarbij gewijzigd: de properties boundary, placement en strategy zijn verwijderd. floating-ui regelt dit nu automatisch.

❌

<dso-dropdown-menu boundary="..." placement="..." strategy="..." ...></dso-dropdown-menu>

βœ…

<dso-dropdown-menu ...></dso-dropdown-menu>
]]> Chris van der Leij https://github.com/cvanderleij-ilionx Eric Tamminga https://github.com/iterox <![CDATA[DSO Toolkit v76.0.0 πŸ’·]]> https://www.dso-toolkit.nl/93.0.0/blog/2025/07/15/dso-toolkit-76.0.0 2025-07-15T00:00:00.000Z Deze release bevat Breaking changes voor het volgende component:

  • Document Component

Daarnaast is in deze release is de ondersteuning voor Angular 16 en 17 komen te vervallen. Vanaf deze release ondersteunt DSO Toolkit Angular versies 18, 19 en 20.

Document Component​

De deprecated properties label, nummer en opschrift zijn verwijderd. In versie πŸͺ— 68.5.0 is de property kop geΓ―ntroduceerd. kop bevat label, nummer en opschrift.

❌ < 76.0.0
<dso-document-component label="..." nummer="..." opschrift="..." [...]></dso-document-component>

βœ… >= 76.0.0
<dso-document-component kop="..." [...]></dso-document-component>
]]> Eric Tamminga https://github.com/iterox <![CDATA[DSO Toolkit v75.0.0 πŸ—ΊοΈ]]> https://www.dso-toolkit.nl/93.0.0/blog/2025/07/01/dso-toolkit-75.0.0 2025-07-01T00:00:00.000Z Deze release bevat breaking changes voor het volgende component:

  • Legend-item

Legend-item​

Het Legend Item component is aangepast. Waar voorheen een checkbox aan de linkerkant werd getoond, die middels een door de afnemer in het nameless slot te plaatsen Selectable werd gerealiseerd, toont het Legend Item nu altijd aan de rechterkant een Slide Toggle, die middels een nieuwe boolean property active bediend kan worden. Het wijzigen van de stand van de Slide Toggle vuurt nu een nieuw event af: dsoActiveChange. Daarnaast is de mogelijkheid om het Legend Item te verwijderen komen te vervallen: daartoe zijn de property removable en het event dsoRemoveClick verwijderd.

❌ < 75.0.0
<dso-legend-item removable (dsoRemoveClick)="..." [...]></dso-legend-item>

βœ… >= 75.0.0
<dso-legend-item active (dsoActiveChange)="..." [...]></dso-legend-item>
]]> Chris van der Leij https://github.com/cvanderleij-ilionx Eric Tamminga https://github.com/iterox