{ "version": "https://jsonfeed.org/version/1", "title": "DSO Toolkit Blog", "home_page_url": "https://www.dso-toolkit.nl/89.0.0/blog", "description": "DSO Toolkit Blog", "items": [ { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2026/03/02/dso-toolkit-89.0.0", "content_html": "

Deze release bevat BREAKING changes voor de volgende componenten:

\n\n

Legend​

\n

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.

\n

Wat is er veranderd?​

\n

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

\n

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.

\n

Nieuw: dso-legend-group​

\n
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>.
\n

Nieuw op dso-legend-item​

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

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

\n

Migratiepad​

\n

Groepskoppen: dso-legend-item met <h3> → dso-legend-group​

\n

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.

\n
❌
<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>
\n

dso-rich-content wrapper verwijderen​

\n

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.

\n
❌
<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>
\n

Edit/view-modus gebruiken​

\n

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.

\n

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

\n
View-modus (mode=\"view\")​
\n
<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>
\n
Edit-modus (mode=\"edit\")​
\n

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):

\n
<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>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2026/03/02/dso-toolkit-89.0.0", "title": "DSO Toolkit v89.0.0 🌹", "summary": "Deze release bevat BREAKING changes voor de volgende componenten:", "date_modified": "2026-03-02T00:00:00.000Z", "author": { "name": "Wouter Heldens", "url": "https://github.com/wheldens" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2026/02/11/dso-toolkit-88.0.0", "content_html": "

Deze release bevat een BREAKING change voor het volgende component:

\n\n

Info Button​

\n\n

Toggletip gebruik​

\n
<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>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2026/02/11/dso-toolkit-88.0.0", "title": "DSO Toolkit v88.0.0 🤧", "summary": "Deze release bevat een BREAKING change voor het volgende component:", "date_modified": "2026-02-11T00:00:00.000Z", "author": { "name": "Chris van der Leij", "url": "https://github.com/cvanderleij-ilionx" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2026/02/06/dso-toolkit-87.0.0", "content_html": "

Deze release bevat een BREAKING change voor het volgende component:

\n\n

Document Component​

\n

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

\n

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\".

\n

Migratiepad​

\n

Label (voorheen bevatOntwerpInformatie)​

\n

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.

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

✅
<dso-document-component label=\"Ontwerp\" label-status=\"warning\"></dso-document-component>
\n

Badge (voorheen genesteOntwerpInformatie)​

\n

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.

\n
❌
<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>
\n

Voorbeeld: Besluitversie​

\n

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

\n
<dso-document-component
  label=\"Besluitversie\"
  label-status=\"primary\"
  badge=\"B\"
  badge-status=\"primary\"
  badge-tooltip=\"Dit onderdeel bevat een besluitversie.\"
></dso-document-component>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2026/02/06/dso-toolkit-87.0.0", "title": "DSO Toolkit v87.0.0 🦉", "summary": "Deze release bevat een BREAKING change voor het volgende component:", "date_modified": "2026-02-06T00:00:00.000Z", "author": { "name": "Wouter Heldens", "url": "https://github.com/wheldens" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2026/01/29/dso-toolkit-86.0.0", "content_html": "

Deze release bevat een BREAKING change voor het volgende component:

\n\n

Document Card​

\n

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

\n

Migratiepad​

\n
❌
<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>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2026/01/29/dso-toolkit-86.0.0", "title": "DSO Toolkit v86.0.0 🐉", "summary": "Deze release bevat een BREAKING change voor het volgende component:", "date_modified": "2026-01-29T00:00:00.000Z", "author": { "name": "Xiangju Zou", "url": "https://github.com/xiangjuzou-prog" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2026/01/13/dso-toolkit-85.0.0", "content_html": "

Deze release bevat BREAKING changes voor de volgende componenten:

\n\n

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

\n

Legend Item​

\n

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

\n

Migratiepad​

\n

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

\n
❌
<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>
\n

Document Card​

\n

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

\n

Migratiepad​

\n
❌
<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>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2026/01/13/dso-toolkit-85.0.0", "title": "DSO Toolkit v85.0.0 🎇", "summary": "Deze release bevat BREAKING changes voor de volgende componenten:", "date_modified": "2026-01-13T00:00:00.000Z", "author": { "name": "Eric Tamminga", "url": "https://github.com/iterox" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/12/12/dso-toolkit-84.0.0", "content_html": "

Deze release bevat BREAKING changes voor het volgende component:

\n\n

Autosuggest​

\n

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

\n

Migratiepad​

\n
❌
<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>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/12/12/dso-toolkit-84.0.0", "title": "DSO Toolkit v84.0.0 🎠️", "summary": "Deze release bevat BREAKING changes voor het volgende component:", "date_modified": "2025-12-12T00:00:00.000Z", "author": { "name": "Chris van der Leij", "url": "https://github.com/cvanderleij-ilionx" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/11/27/dso-toolkit-83.0.0", "content_html": "

Deze release bevat BREAKING changes voor de volgende componenten:

\n\n

In deze release is het volgende component deprecated:

\n\n

Progress Bar​

\n

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.

\n

HTML/CSS implemenatie​

\n
❌
<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>
\n

Core implementatie​

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

Document List​

\n

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

\n

Progress Indicator (HTML/CSS implementatie)​

\n

De HTML/CSS implementatie van het component Progress Indicator is in 💃 Release 81.0.0 deprecated. In deze\nrelease is deze implementatie verwijderd.

\n

Migratiepad​

\n

Gebruik de Core implementatie van Progress Indicator.

\n
❌
<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>
\n

Card (HTML/CSS implementatie)​

\n

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

\n

Migratiepad​

\n

Gebruik de Core implementatie van Card.

\n
❌
<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>
\n

Dropdown Menu (HTML/CSS implementatie)​

\n

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

\n

Migratiepad​

\n

Gebruik de Core implementatie van Dropdown Menu.

\n
❌
<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>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/11/27/dso-toolkit-83.0.0", "title": "DSO Toolkit v83.0.0 🏝️", "summary": "Deze release bevat BREAKING changes voor de volgende componenten:", "date_modified": "2025-11-27T00:00:00.000Z", "author": { "name": "Eric Tamminga", "url": "https://github.com/iterox" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/11/17/dso-toolkit-82.0.0", "content_html": "

Deze release bevat BREAKING changes voor de volgende componenten:

\n\n

Deze release bevat een deprecation voor het volgende component:

\n\n

Selectable (HTML/CSS implementatie)​

\n

De HTML/CSS implementatie van het component Selectable is in 🍇 Release 78.0.0 deprecated. In deze\nrelease is deze implementatie verwijderd.

\n

Migratiepad​

\n

Gebruik de Core implementatie van Selectable.

\n
❌
<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>
\n

Accordion (HTML/CSS implementatie)​

\n

De HTML/CSS implementatie van het component Accordion is in 🦕 Release 78.1.0 deprecated. In deze\nrelease is deze implementatie verwijderd.

\n

Migratiepad​

\n

Gebruik de Core implementatie van Accordion.

\n
❌
<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>
\n

Modal (HTML/CSS implementatie)​

\n

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

\n

Migratiepad​

\n

Gebruik de Core implementatie van Modal.

\n
❌
<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>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/11/17/dso-toolkit-82.0.0", "title": "DSO Toolkit v82.0.0 🍔", "summary": "Deze release bevat BREAKING changes voor de volgende componenten:", "date_modified": "2025-11-17T00:00:00.000Z", "author": { "name": "Chris van der Leij", "url": "https://github.com/cvanderleij-ilionx" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/11/04/dso-toolkit-81.0.0", "content_html": "

Deze release bevat BREAKING changes voor de volgende componenten:

\n\n

Deze release bevat een deprecation voor de volgende componenten:

\n\n

Date Picker (Legacy)​

\n

Het component Date Picker (Legacy) is in 🦕 Release 78.1.0 deprecated. In deze release is dit component verwijderd.

\n

❌

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

Icon (HTML/CSS implementatie)​

\n

De HTML/CSS implementatie van het component Icon is in 🦕 Release 78.1.0 deprecated. In deze release is deze implementatie verwijderd.

\n

Migratiepad​

\n

Gebruik de Core implementatie van Icon.

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

✅
<dso-icon icon=\"user\"></dso-icon>
\n

Document Component​

\n

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

\n

Ozon Content​

\n

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

\n

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\".

\n

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.

\n

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.

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

  // [..]
}
\n

Badge (HTML/CSS implementatie)​

\n

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

\n

Migratiepad​

\n

Gebruik de Core implementatie van Badge.

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

✅
<dso-badge status=\"attention\">Attention</dso-badge>
\n

Progress Indicator (HTML/CSS implementatie)​

\n

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

\n

Migratiepad​

\n

Gebruik de Core implementatie van Progress Indicator.

\n
❌
<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>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/11/04/dso-toolkit-81.0.0", "title": "DSO Toolkit v81.0.0 💃", "summary": "Deze release bevat BREAKING changes voor de volgende componenten:", "date_modified": "2025-11-04T00:00:00.000Z", "author": { "name": "Chris van der Leij", "url": "https://github.com/cvanderleij-ilionx" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/10/30/dso-toolkit-80.0.0", "content_html": "

Deze release bevat een BREAKING change voor het volgende component:

\n\n

Deze release bevat een deprecation voor het volgende component:

\n\n

Document Component​

\n\n

Gereserveerd​

\n

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

\n

❌

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

✅

\n
<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>
\n

Vervallen​

\n

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

\n

❌

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

✅

\n
<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>
\n

Card (HTML/CSS implementatie)​

\n

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

\n

Migratiepad​

\n

Gebruik de Core implementatie van Card.

\n

❌

\n
<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>
\n

✅

\n
<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>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/10/30/dso-toolkit-80.0.0", "title": "DSO Toolkit v80.0.0 🍟", "summary": "Deze release bevat een BREAKING change voor het volgende component:", "date_modified": "2025-10-30T00:00:00.000Z", "author": { "name": "Chris van der Leij", "url": "https://github.com/cvanderleij-ilionx" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/09/18/dso-toolkit-79.0.0", "content_html": "

Deze release bevat Breaking changes voor de volgende componenten:

\n\n

Deze release bevat een deprecation voor het volgende component:

\n\n

Breadcrumbs​

\n

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

\n

Migratiepad​

\n

Vervang de class name breadcrumb door dso-breadcrumbs.

\n

❌

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

✅

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

Header​

\n

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

\n

Migratiepad​

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

✅
<dso-header compact=\"always|auto\"></dso-header>
\n

Label​

\n

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

\n

Migratiepad​

\n

Gebruik de Core implementatie van Label.

\n

❌

\n
<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>
\n

✅

\n
<dso-label status=\"primary\" compact removable>
  <!-- event listener onDsoRemoveClick -->
  <span slot=\"symbol\">[...]</span>
  LABEL
</dso-label>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/09/18/dso-toolkit-79.0.0", "title": "DSO Toolkit v79.0.0 🧽", "summary": "Deze release bevat Breaking changes voor de volgende componenten:", "date_modified": "2025-09-18T00:00:00.000Z", "author": { "name": "Eric Tamminga", "url": "https://github.com/iterox" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/08/19/dso-toolkit-78.1.0", "content_html": "

Deze release bevat drie deprecations voor de volgende componenten:

\n\n

Icon​

\n

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

\n

Migratiepad​

\n

Gebruik de Core implementatie van Icon.

\n

❌

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

✅

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

Date Picker (Legacy)​

\n

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

\n

Migratiepad​

\n

Gebruik het Date Picker component.

\n

❌

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

✅

\n
<dso-date-picker></dso-date-picker>
\n

Accordion​

\n

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

\n

Migratiepad​

\n

Gebruik de Core implementatie van Accordion.

\n

❌

\n
<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>
\n

✅

\n
<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>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/08/19/dso-toolkit-78.1.0", "title": "DSO Toolkit v78.1.0 🦕", "summary": "Deze release bevat drie deprecations voor de volgende componenten:", "date_modified": "2025-08-19T00:00:00.000Z", "author": { "name": "Eric Tamminga", "url": "https://github.com/iterox" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/08/14/dso-toolkit-78.0.0", "content_html": "

Deze release bevat Breaking changes voor het volgende component:

\n\n

Whitebox​

\n

Het HTML/CSS component Whitebox is in 💷 Release 76.0.0 deprecated. In deze release is dit component verwijderd.

\n

❌

\n
<div class=\"dso-whitebox\">...</div>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/08/14/dso-toolkit-78.0.0", "title": "DSO Toolkit v78.0.0 🍇", "summary": "Deze release bevat Breaking changes voor het volgende component:", "date_modified": "2025-08-14T00:00:00.000Z", "author": { "name": "Eric Tamminga", "url": "https://github.com/iterox" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/07/28/dso-toolkit-77.0.0", "content_html": "

Deze release bevat Breaking changes voor de volgende componenten:

\n\n

Pagination HTML/CSS Component​

\n

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

\n

❌

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

Dropdown Menu (Core implementatie)​

\n

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

\n

❌

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

✅

\n
<dso-dropdown-menu ...></dso-dropdown-menu>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/07/28/dso-toolkit-77.0.0", "title": "DSO Toolkit v77.0.0 ⛱️", "summary": "Deze release bevat Breaking changes voor de volgende componenten:", "date_modified": "2025-07-28T00:00:00.000Z", "author": { "name": "Chris van der Leij", "url": "https://github.com/cvanderleij-ilionx" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/07/15/dso-toolkit-76.0.0", "content_html": "

Deze release bevat Breaking changes voor het volgende component:

\n\n

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

\n

Document Component​

\n

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.

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

✅ >= 76.0.0
<dso-document-component kop=\"...\" [...]></dso-document-component>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/07/15/dso-toolkit-76.0.0", "title": "DSO Toolkit v76.0.0 💷", "summary": "Deze release bevat Breaking changes voor het volgende component:", "date_modified": "2025-07-15T00:00:00.000Z", "author": { "name": "Eric Tamminga", "url": "https://github.com/iterox" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/07/01/dso-toolkit-75.0.0", "content_html": "

Deze release bevat breaking changes voor het volgende component:

\n\n

Legend-item​

\n

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

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

✅ >= 75.0.0
<dso-legend-item active (dsoActiveChange)=\"...\" [...]></dso-legend-item>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/07/01/dso-toolkit-75.0.0", "title": "DSO Toolkit v75.0.0 🗺️", "summary": "Deze release bevat breaking changes voor het volgende component:", "date_modified": "2025-07-01T00:00:00.000Z", "author": { "name": "Chris van der Leij", "url": "https://github.com/cvanderleij-ilionx" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/06/19/dso-toolkit-74.0.0", "content_html": "

Deze release bevat breaking changes voor de volgende componenten:

\n\n

Banner​

\n

In deze release is in het component banner de prop status aangepast. De status danger is komen te vervallen. De status success is toegevoegd.

\n

Web component

\n
❌ < 74.0.0
<dso-banner status=\"danger\"></dso-banner>

✅ >= 74.0.0
<dso-banner status=\"error\"></dso-banner>

<dso-banner status=\"success\"></dso-banner>
\n

HTML/CSS component

\n
❌ < 74.0.0
<section role=\"alert\" class=\"dso-banner alert-danger dso-icon\">
  <div class=\"dso-banner-inner\">
    <div class=\"dso-rich-content\">
      <!-- inhoud banner -->
    </div>
  </div>
</div>

✅ >= 74.0.0
<section role=\"alert\" class=\"dso-banner alert-error dso-icon\">
  <div class=\"dso-banner-inner\">
    <div class=\"dso-rich-content\">
      <!-- inhoud banner -->
    </div>
  </div>
</div>

<section role=\"alert\" class=\"dso-banner alert-success dso-icon\">
  <div class=\"dso-banner-inner\">
    <div class=\"dso-rich-content\">
      <!-- inhoud banner -->
    </div>
  </div>
</div>
\n

Modal​

\n

In deze release is in het component modal de prop showCloseButton hernoemd naar closable die default op false staat. Het default gedrag van de Modal is veranderd. Voorheen waren alle Modals standaard sluitbaar, vanaf deze release zijn ze standaard niet-sluitbaar. Zie voor beide situaties onderstaand migratiepad:\nDe DSO Toolkit maakt gebruik van StencilJS voor het maken van Web Components. Zij raden het gebruik van default properties en attributes met default value true. Dit was het laatste attribuut met een default value true.

\n

Sluitbaar:

\n
❌ < 74.0.0
<dso-modal></dso-modal>

✅ >= 74.0.0
<dso-modal closable></dso-modal>
\n

Niet sluitbaar:

\n
❌ < 74.0.0
<dso-modal show-close-button=\"false\"></dso-modal>

✅ >= 74.0.0
<dso-modal></dso-modal>
\n

Badge​

\n

In deze release is in het component badge de status danger verwijderd inclusief de styling die daarbij hoort.\nAls alternatief kan de status error worden gebruikt. Deze heeft dezelfde achtergrond en tekst kleur als de\ndanger status. Daarnaast is de kleur aangepast van de info status. Deze heeft nu een donkerblauwe achtergrond en\nwitte tekst.

\n

Web component

\n
❌ < 74.0.0
<dso-badge status=\"danger\"></dso-badge>

✅ >= 74.0.0
<dso-badge status=\"error\"></dso-badge>
\n

HTML/CSS component

\n
❌ < 74.0.0
<span class=\"dso-badge badge-danger\">Badge text</span>

✅ >= 74.0.0
<span class=\"dso-badge badge-error\">Badge text</span>
\n

Label​

\n

In deze release is in het component Label de status danger verwijderd inclusief de styling die daarbij hoort. Als alternatief kan de status error worden gebruikt. Deze heeft dezelfde achtergrond en tekst kleur als de danger status. Daarnaast is er een filter status toegevoegd. Deze heeft nu een donkerblauwe linker border, lichtblauw achtergrond en witte tekst.

\n

Web component

\n
❌ < 74.0.0
<dso-label status=\"danger\"></dso-label>

✅ >= 74.0.0
<dso-label status=\"error\"></dso-label>

<dso-label status=\"filter\"></dso-label>
\n

HTML/CSS component

\n
❌ < 74.0.0
<span class=\"dso-label dso-label-danger\">Label</span>

✅ >= 74.0.0
<span class=\"dso-label dso-label-error\">Label</span>

<span class=\"dso-label dso-label-filter\">Label</span>
\n

Viewer Grid​

\n

De property mode is komen te vervallen. Alle functionaliteit die gekoppeld was aan mode=“vrk” is verwijderd.\nAlle functionaliteit die gekoppeld was aan mode=“vdk” is nu de enig resterende functionaliteit. De events dsoMainSizeChange, dsoFilterpanelApply en dsoFilterpanelCancel worden niet meer ge-emit.

\n

Daarnaast is de naamgeving van de properties filterpanel-title en filterpanel-open en het event\ndsoCloseFilterpanel gecorrigeerd: deze zijn nu filter-panel-title, filter-panel-open en dsoCloseFilterPanel geworden.

\n
❌ < 74.0.0
<dso-viewer-grid
  mode=\"“vrk|vdk”\"
  filterpanel-title=\"“...”\"
  filterpanel-open
  (dsoMainSizeChange)=\"“...”\"
  (dsoCloseFilterpanel)=\"“...”\"
  (dsoFilterpanelApply)=\"“...”\"
  (dsoFilterpanelCancel)=\"“...”\"
  [...]
></dso-viewer-grid>
\n
✅ >= 74.0.0
<dso-viewer-grid filter-panel-title=\"“...”\" filter-panel-open (dsoCloseFilterPanel)=\"“...”\" [...]></dso-viewer-grid>
", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/06/19/dso-toolkit-74.0.0", "title": "DSO Toolkit v74.0.0 💈", "summary": "Deze release bevat breaking changes voor de volgende componenten:", "date_modified": "2025-06-19T00:00:00.000Z", "author": { "name": "Chris van der Leij", "url": "https://github.com/cvanderleij-ilionx" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/06/02/dso-toolkit-73.2.0", "content_html": "

Deprecated​

\n

In deze release markeren we het Tooltip webcomponent als deprecated. Dit betekent dat het gebruik ervan wordt afgeraden in nieuwe implementaties. 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.

", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/06/02/dso-toolkit-73.2.0", "title": "DSO Toolkit v73.2.0 🐻", "summary": "Deprecated", "date_modified": "2025-06-02T00:00:00.000Z", "author": { "name": "Thomas Rijsewijk", "url": "https://github.com/tfrijsewijk" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/05/15/dso-toolkit-73.0.0", "content_html": "

Breaking change​

\n

In deze release hebben we het component Anchor hernoemd naar Link. De HTML-structuur blijft ongewijzigd, maar het volgende is wel aangepast:

\n", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/05/15/dso-toolkit-73.0.0", "title": "DSO Toolkit v73.0.0 👛", "summary": "Breaking change", "date_modified": "2025-05-15T00:00:00.000Z", "author": { "name": "Chris van der Leij", "url": "https://github.com/cvanderleij-ilionx" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/89.0.0/blog/2025/05/01/dso-toolkit-72.0.0", "content_html": "

Breaking change​

\n

In deze release is de ondersteuning voor React 17 komen te vervallen. Vanaf deze release ondersteunt DSO Toolkit React versies 18 en 19.

", "url": "https://www.dso-toolkit.nl/89.0.0/blog/2025/05/01/dso-toolkit-72.0.0", "title": "DSO Toolkit v72.0.0 💎", "summary": "Breaking change", "date_modified": "2025-05-01T00:00:00.000Z", "author": { "name": "Chris van der Leij", "url": "https://github.com/cvanderleij-ilionx" }, "tags": [] } ] }