{ "version": "https://jsonfeed.org/version/1", "title": "DSO Toolkit Blog", "home_page_url": "https://www.dso-toolkit.nl/84.0.0/blog", "description": "DSO Toolkit Blog", "items": [ { "id": "https://www.dso-toolkit.nl/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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/84.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": [] }, { "id": "https://www.dso-toolkit.nl/84.0.0/blog/2025/04/28/dso-toolkit-71.0.0", "content_html": "

Deze release bevat breaking changes voor het volgende component:

\n\n

Ozon Content​

\n

De property addSpaceBeforeNode bestaat niet meer.

\n

Bij de verwerking van de STOP Kop node werd binnen het Document Component gebruik gemaakt van deze property op Ozon Content. Het toevoegen van een spatie voor STOP nodes Nummer en Opschrift, die onderdeel van de Kop node zijn, wordt nu zonder deze property binnen Ozon Content afgehandeld.

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

", "url": "https://www.dso-toolkit.nl/84.0.0/blog/2025/04/28/dso-toolkit-71.0.0", "title": "DSO Toolkit v71.0.0 🎱", "summary": "Deze release bevat breaking changes voor het volgende component:", "date_modified": "2025-04-28T00:00:00.000Z", "author": { "name": "Eric Tamminga", "url": "https://github.com/iterox" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/84.0.0/blog/2025/03/31/dso-toolkit-70.0.0", "content_html": "

Deze release bevat breaking changes voor de volgende componenten:

\n\n

Helpcenter Panel​

\n

Het Helpcenter Panel (Core implementatie) werd niet gebruikt. Daarom hebben we het in deze release verwijderd.

\n
❌ <dso-helpcenter-panel ...></dso-helpcenter-panel>
\n

Banner​

\n

De property noIcon is hernoemd naar icon.​

\n

Stencil verbiedt het direct instellen van een prop-defaultwaarde op true in de @Prop()-decorator. In deze release is de prop noIcon, die default op true staat, hernoemd naar icon die default op false staat. Daarnaast is het webcomponent gelijk getrokken aan de HTML/CSS variant betreft het verbergen van het icon. Dat kan alleen wanneer de prop compact op true staat.

\n

** Web component **

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

** HTML/CSS component **

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

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

Legacy selectors voor grid-system zijn verwijderd​

\n

In DSO Toolkit v67.2.0 👹 is van de HTML/CSS implementatie van Banner de HTML markup gewijzigd: de afhankelijkheid van het grid system is verwijderd. De \"oude\" markup werd nog ondersteund via de styling, maar die tijdelijke ondersteuning is in deze versie van DSO Toolkit verwijderd. Het gaat om de banner specieke styling; .container en de daarin geneste .col-sm-12.

\n
❌
<section role=\"alert\" class=\"dso-banner alert-danger\">
  <div class=\"container\">
    <div class=\"row\">
      <div class=\"col-sm-12\">-content-</div>
    </div>
  </div>
</section>

✅
<section role=\"alert\" class=\"dso-banner alert-danger\">
  <div class=\"dso-banner-inner\">-content-</div>
</section>
", "url": "https://www.dso-toolkit.nl/84.0.0/blog/2025/03/31/dso-toolkit-70.0.0", "title": "DSO Toolkit v70.0.0 📜", "summary": "Deze release bevat breaking changes voor de volgende componenten:", "date_modified": "2025-03-31T00:00:00.000Z", "author": { "name": "Eric Tamminga", "url": "https://github.com/iterox" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/84.0.0/blog/2025/03/06/dso-toolkit-69.1.0", "content_html": "

Deze release bevat changes voor het volgende component:

\n\n

Pagination​

\n

In de Stelselcatalogus (SC) wordt de HTML/CSS implementatie van Pagination ingezet ten behoeve van het\nkunnen navigeren door lange lijsten, waarvan op voorhand niet bekend is wat het totale aantal pagina's is. Omdat in de\nCore implementatie van het component Pagination de property totalPages verplicht is, kon SC hier geen gebruik van\nmaken.

\n

In deze release is de property totalPages van het webcomponent Pagination optioneel gemaakt. In samenhang\ndaarmee heeft de HTML/CSS implementatie van Pagination geen toegevoegde waarde meer. Daarom hebben we in de\nvorige release (💞 69.0.0) de HTML/CSS implementatie van Pagination deprecated.

", "url": "https://www.dso-toolkit.nl/84.0.0/blog/2025/03/06/dso-toolkit-69.1.0", "title": "DSO Toolkit v69.1.0 🌻", "summary": "Deze release bevat changes voor het volgende component:", "date_modified": "2025-03-06T00:00:00.000Z", "author": { "name": "Chris van der Leij", "url": "https://github.com/cvanderleij-ilionx" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/84.0.0/blog/2025/03/03/dso-toolkit-69.0.0", "content_html": "

Deze release bevat breaking changes voor het volgende component:

\n\n

Renvooi (Web Component)​

\n

Dit component heeft een property value?: RenvooiValue | RenvooiValue[];. Als er een array werd doorgegeven maakt dit component er een komma gescheiden lijst van. Deze functionaliteit is verdwenen. Mocht je een array als een komma gescheiden lijst willen tonen moet je dat zelf regelen. De betekenis van een lijst RenvooiValue[] is dat het een reeks van wijzigingen over dezelfde entiteit is, en geen opsomming van wijzigingen.

\n
<!-- 👻 pseudo code -->
<dso-renvooi value=\"[{ was: 'oud' }, 'nieuw']\"></dso-renvooi>

<!-- ❌ werd voorheen -->
<span><del>oud</del>, nieuw</span>

<!-- ✅ wordt vanaf deze release -->
<span><del>oud</del>nieuw</span>
", "url": "https://www.dso-toolkit.nl/84.0.0/blog/2025/03/03/dso-toolkit-69.0.0", "title": "DSO Toolkit v69.0.0 💞", "summary": "Deze release bevat breaking changes voor het volgende component:", "date_modified": "2025-03-03T00:00:00.000Z", "author": { "name": "Thomas Rijsewijk", "url": "https://github.com/tfrijsewijk" }, "tags": [] }, { "id": "https://www.dso-toolkit.nl/84.0.0/blog/2025/01/20/dso-toolkit-68.0.0", "content_html": "

Deze release bevat breaking changes voor het volgende component:

\n\n

List Button (Web Component)​

\n

De property manual is verwijderd.​

\n

Naar aanleiding van een bevinding van Stichting Accessibility is de mogelijkheid om handmatig een aantal in te geven\nverwijderd. Hierdoor is de property 'manual` komen te vervallen.

\n
❌
<dso-list-button manual=\"\" label=\"Milieubelastende activiteit - Melding\"></dso-list-button>

✅
<dso-list-button label=\"Milieubelastende activiteit - Melding\"></dso-list-button>
", "url": "https://www.dso-toolkit.nl/84.0.0/blog/2025/01/20/dso-toolkit-68.0.0", "title": "DSO Toolkit v68.0.0 ⚖️", "summary": "Deze release bevat breaking changes voor het volgende component:", "date_modified": "2025-01-20T00:00:00.000Z", "author": { "name": "Eric Tamminga", "url": "https://github.com/iterox" }, "tags": [] } ] }