dso-toolkit 93.0.1 → 95.0.0

package/src/components/dropdown-menu/readme.md

@@ -1,45 +0,0 @@
-# `.dso-dropdown-menu`
-
-## Implementatie
-
-Het openen en sluiten van de dropdown button moet worden ondersteund met muis-, touch- en toetsenbordbediening.
-De scripting zal zelf geïmplementeerd moeten worden, waarbij het te programmeren gedrag op de diverse relevante toetsen gelijk moet zijn aan de native browser dropdown/select werkvorm (en het Web Component).
-
-- `event.code` `ArrowUp` : omhoog, vorige 'option', zelfde als tab
-- `event.code` `ArrowDown` : omlaag, volgende 'option', zelfde als shift-tab
-- `event.code` `Escape` : sluit dropdown, geen keuze maken
-- `event.code` `Space` : maak keuze
-
-## Voorschriften/algemeen
-
-- `.dso-dropdown-menu` is de root van het component, dat bestaat uit een `button` en het daadwerkelijke menu, de `.dso-dropdown-options`;
-- `.dso-dropdown-options` heeft `role="menu"` en verwijst met `aria-labelledby` naar de `button`;
-- `.dso-dropdown-options` wordt getoond wanneer `.dso-dropdown-menu` de class `dso-open` heeft;
-- de links in het menu krijgen `role="menuitemradio"` en het geselecteerde item `aria-checked="true"`;
-- `button` heeft attribute `aria-haspopup="menu"` om aan te duiden dat deze een menu bedient, en moet een `id` hebben waarnaar verwezen wordt vanuit `.dso-dropdown-options` met een `aria-labelledby`-attribuut
-
-### Menu ingeklapt
-
-- `.dso-dropdown-menu` geen class `dso-open`
-- `button` attribute `aria-expanded="false"`
-
-```
-<div class="dso-dropdown-menu">
-  <button type="button" aria-haspopup="true" aria-expanded="false" class="dso-tertiary">
-  <div class="dso-dropdown-options" ... > ...
-</div>
-```
-
-## Menu uitgeklapt
-
-- `div.dropdown` heeft class `dso-open`
-- `button` attribute `aria-expanded="true"`
-
-```
-<div class="dso-dropdown-menu dso-open">
-  <button type="button" aria-haspopup="true" aria-expanded="true" class="dso-tertiary">
-  <div class="dso-dropdown-options" ... > ...
-</div>
-```
-
-Note: de `button` mag class `dso-primary`, `dso-secondary` of `dso-tertiary` hebben, afhankelijk van de toepassing.

package/src/components/expandable/readme.md

@@ -1 +0,0 @@
-# `<dso-expandable>`

package/src/components/footer/readme.md

@@ -1 +0,0 @@
-# `<footer>`

package/src/components/footnotes/readme.md

@@ -1 +0,0 @@
-# `.dso-footnote-reference` and `.dso-footnotes`

package/src/components/form/readme.md

@@ -1,40 +0,0 @@
-# `.form, form, .dso-section-body`
-
-## `.form-group`
-
-Een formulier bestaat uit Form Group. Elke veld/werkvorm heeft z'n eigen `.form-group`.
-
-Als de gebruiker een ongeldige waarde invoert moet er `.dso-invalid` op `.form-group` worden geplaatst:
-
-```html
-<div class="form-group dso-*** dso-invalid">[...]</div>
-```
-
-Als het formulier daarna weer geldig wordt gemaakt moet de `.dso-invalid` class vervangen worden door `.dso-valid`:
-
-```html
-<div class="form-group dso-*** dso-valid">[...]</div>
-```
-
-### `.form-group.dso-input`
-
-Dit is een standaard invoerveld (`<input>`). Dit veld wordt gekoppeld aan een `<label>`.
-
-- Gebruik `type="email"` voor het automatisch valideren van een e-mailadres.
-- Gebruik `type="password"` voor wachtwoorden.
-- Gebruik `type="url"` voor het invoeren van URLs.
-- Gebruik `type="tel"` voor het invoeren van een telefoonnummer.
-- Gebruik **niet** `type="date"` maar het Web Component "Date Picker".
-
-### `.form-group.dso-checkboxes`
-
-Een Form Group "checkboxes" is een `fieldset` element in plaats van een `div`:
-
-```html
-<fieldset class="form-group dso-checkboxes"></fieldset>
-```
-
-### `.form-group.dso-files`
-
-Als er geen bestanden zijn geüpload in een Form Group "files" dan wordt er geen "lege" unordered list `dso-filelist` in het formulier geplaatst.
-Pas na de eerste upload is er een `ul` met 1 `li`st-item in het formulier aanwezig.

package/src/components/form-buttons/readme.md

@@ -1 +0,0 @@
-# `.dso-button-row`

package/src/components/form-group/readme.md

@@ -1,40 +0,0 @@
-# `.form, form, .dso-section-body`
-
-## `.form-group`
-
-Een formulier bestaat uit Form Group. Elke veld/werkvorm heeft z'n eigen `.form-group`.
-
-Als de gebruiker een ongeldige waarde invoert moet er `.dso-invalid` op `.form-group` worden geplaatst:
-
-```html
-<div class="form-group dso-*** dso-invalid">[...]</div>
-```
-
-Als het formulier daarna weer geldig wordt gemaakt moet de `.dso-invalid` class vervangen worden door `.dso-valid`:
-
-```html
-<div class="form-group dso-*** dso-valid">[...]</div>
-```
-
-### `.form-group.dso-input`
-
-Dit is een standaard invoerveld (`<input>`). Dit veld wordt gekoppeld aan een `<label>`.
-
-- Gebruik `type="email"` voor het automatisch valideren van een e-mailadres.
-- Gebruik `type="password"` voor wachtwoorden.
-- Gebruik `type="url"` voor het invoeren van URLs.
-- Gebruik `type="tel"` voor het invoeren van een telefoonnummer.
-- Gebruik **niet** `type="date"` maar het Web Component "Date Picker".
-
-### `.form-group.dso-checkboxes`
-
-Een Form Group "checkboxes" is een `fieldset` element in plaats van een `div`:
-
-```html
-<fieldset class="form-group dso-checkboxes"></fieldset>
-```
-
-### `.form-group.dso-files`
-
-Als er geen bestanden zijn geüpload in een Form Group "files" dan wordt er geen "lege" unordered list `dso-filelist` in het formulier geplaatst.
-Pas na de eerste upload is er een `ul` met 1 `li`st-item in het formulier aanwezig.

package/src/components/highlight-box/readme.md

@@ -1 +0,0 @@
-# `.dso-highlight-box`

package/src/components/image/readme.md

@@ -1 +0,0 @@
-# `.img-responsive`, `.img-circle`

package/src/components/info/readme.md

@@ -1,3 +0,0 @@
-# `.dso-info:not(.dso-accordion-section)`
-
-The specific selector is because `.dso-info` is also used as a modifier class.

package/src/components/info-button/readme.md

@@ -1,3 +0,0 @@
-# `.dso-info-button`
-
-De class `.dso-info-open` (bij getoonde toelichting) maakt de button groen.

package/src/components/justify-form-groups/readme.md

@@ -1,5 +0,0 @@
-# `.dso-justify-form-groups`
-
-## **Let op!**
-
-Bij justify-form-groups moet het aantal velden opgegeven worden als extra classname: `.form-groups-n`, waarbij `n` moet worden vervangen met het aantal `.form-group` velden er in het `.dso-justify-form-groups` staan. Maximaal kan dit **3** zijn, `.dso-form-buttons` wordt hierbij niet meegeteld.

package/src/components/label/readme.md

@@ -1,7 +0,0 @@
-# `.dso-label`
-
-**Let op**: In de `.sr-only` moet _na_ de dubbele punt (:) een whitespace staan.
-
-Deze staat nu niet in de markup voorschriften maar wordt wel gerendered in het DOM. Dit is een bug in een Storybook plugin. Zie #1163 voor meer informatie.
-
-De hover state voor het Web Component is onderdeel van de werkvorm, voor de CSS versie moet deze door developers worden geimplementeerd dmv. class `.dso-label-hover` op de `<span class="dso-label">`;

package/src/components/label-group/readme.md

@@ -1 +0,0 @@
-# `.dso-label-group`

package/src/components/link/readme.md

@@ -1,5 +0,0 @@
-# `a`
-
-## Technische opmerkingen
-
-Plaats bij gebruik van de "Link With Icon"-variant de tekst in een `<span>text hier</span>` om de afstand tot het icoon te creëren.

package/src/components/link-list/readme.md

@@ -1 +0,0 @@
-# `.dso-link-list`

package/src/components/list/readme.md

@@ -1,8 +0,0 @@
-# `ul`, `ol`, `.list-group`, `ul.dso-columns-list`, `ol.dso-columns-list`, `ol.dso-list-ordered-action`, `ol.dso-action-list`, `ul.dso-action-list`
-
-## Status
-
-Een List Item (`<li>`) kan een status hebben. Een status bestaat uit een icon en een toelichting. De status wordt met een modifier class op het List Item gezet.
-
-- Forbidden (`dso-forbidden`)
-- Status Warning (`dso-status-warning`)

package/src/components/list-button/readme.md

@@ -1 +0,0 @@
-# `.dso-list-button`

package/src/components/modal/_index.scss

@@ -1,2 +0,0 @@
-@forward "modal.mixins";
-@forward "modal.variables";

package/src/components/modal/modal.mixins.scss

@@ -1,249 +0,0 @@
-@use "sass:color";
-
-@use "../../variables/colors";
-@use "../../variables/media-query-breakpoints";
-@use "../../variables/units";
-@use "../../variables/zindex";
-
-@use "../button";
-@use "../rich-content";
-
-@use "modal.variables" as modal-variables;
-
-@keyframes ModalFadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@mixin root() {
-  // dialog
-  // ------
-  // overwrite UA styles:
-  overflow: visible;
-  padding: 0;
-  border: 0;
-
-  &::backdrop {
-    background-color: color.scale(modal-variables.$backdrop-bg, $alpha: modal-variables.$backdrop-opacity);
-  }
-
-  .dso-dialog {
-    inline-size: modal-variables.$max-inline-size;
-
-    background-color: modal-variables.$content-bg;
-
-    opacity: 1;
-
-    box-shadow: 0 #{units.$u1} #{units.$u3} 0 rgba(25, 25, 25, 0.4);
-    animation: 200ms ease-out 0s 1 ModalFadeIn;
-  }
-
-  .dso-header {
-    position: relative;
-
-    padding: modal-variables.$header-padding;
-
-    border-block-end: 1px solid modal-variables.$border-color;
-
-    h2 {
-      max-inline-size: calc(100% - #{units.$u3});
-
-      margin: 0;
-
-      color: colors.$bosgroen;
-    }
-
-    .dso-close {
-      position: absolute;
-      inset-block-start: units.$u2;
-      inset-inline-end: 13px;
-
-      block-size: modal-variables.$close-icon-size;
-      inline-size: modal-variables.$close-icon-size;
-
-      padding: 0;
-
-      background-color: transparent;
-
-      border: 0;
-
-      text-align: center;
-    }
-  }
-
-  > .dso-dialog > .dso-body {
-    // stylelint-disable-next-line scss/operator-no-newline-after -- disabled because of prettier newline
-    $dso-body-unavailable-height: (2 * modal-variables.$header-padding) +
-      (modal-variables.$footer-button-block-size + modal-variables.$footer-padding);
-
-    @include rich-content.children();
-
-    block-size: calc(100% - #{modal-variables.$body-padding * 2 + units.$u4} - 1.5rem);
-    max-block-size: calc(#{modal-variables.$max-block-size} - #{$dso-body-unavailable-height + units.$u4} - 1.5em);
-    min-block-size: 1.5rem;
-    overflow-x: auto;
-
-    padding: modal-variables.$body-padding;
-  }
-
-  > .dso-dialog > dso-scrollable {
-    // stylelint-disable-next-line scss/operator-no-newline-after -- disabled because of prettier newline
-    $dso-body-unavailable-height: (2 * modal-variables.$header-padding) +
-      (modal-variables.$footer-button-block-size + modal-variables.$footer-padding);
-
-    block-size: calc(100% - #{modal-variables.$body-padding * 2 + units.$u4} - 1.5rem);
-    max-block-size: calc(#{modal-variables.$max-block-size} - #{$dso-body-unavailable-height + units.$u4} - 1.5em);
-    min-block-size: modal-variables.$body-min-block-size;
-
-    .dso-body {
-      @include rich-content.children();
-
-      padding: modal-variables.$body-padding;
-    }
-  }
-
-  .dso-body {
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  .dso-footer {
-    @include modal-wide-buttons();
-
-    min-block-size: modal-variables.$footer-button-block-size + modal-variables.$footer-padding;
-
-    padding-block: calc(modal-variables.$footer-padding / 2);
-    padding-inline: modal-variables.$footer-padding;
-
-    text-align: end;
-  }
-
-  @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {
-    .dso-footer {
-      #{button.$button-adjacent-secondary} {
-        margin-inline-start: units.$u2;
-      }
-
-      #{button.$button-adjacent-tertiary} {
-        margin-inline-start: 0;
-      }
-    }
-  }
-
-  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {
-    .dso-dialog {
-      max-inline-size: 100%;
-
-      margin-block-start: 0;
-    }
-
-    .dso-footer {
-      #{button.$button-adjacent} {
-        margin-inline-start: 0;
-      }
-
-      button {
-        inline-size: 100%;
-
-        text-align: center;
-
-        + button {
-          margin-block-start: units.$u1;
-        }
-
-        &.dso-tertiary {
-          &,
-          span {
-            float: none;
-          }
-        }
-      }
-    }
-  }
-
-  // special query for height
-  @media screen and (max-height: modal-variables.$small-modal-vh) {
-    .dso-dialog {
-      min-block-size: modal-variables.$min-modal-block-size;
-
-      margin-block-start: units.$u1;
-      margin-block-end: units.$u1;
-    }
-
-    .dso-header {
-      padding-block: #{units.$u1};
-      padding-inline: #{units.$u2};
-
-      .dso-close {
-        inset-block-start: units.$u1;
-      }
-    }
-
-    .dso-body {
-      padding-block: #{units.$u2};
-      padding-inline: #{units.$u3};
-    }
-
-    .dso-footer {
-      min-block-size: auto;
-      overflow: auto;
-
-      padding-block: modal-variables.$footer-padding-small-modal-vh;
-      padding-inline: modal-variables.$footer-padding;
-    }
-  }
-}
-
-@mixin modal-wide-buttons() {
-  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {
-    #{button.$button-adjacent} {
-      margin-inline-start: 0;
-    }
-
-    button {
-      inline-size: 100%;
-
-      text-align: center;
-
-      + button {
-        margin-block-start: units.$u1;
-      }
-
-      &.dso-tertiary {
-        &,
-        span {
-          float: none;
-        }
-      }
-    }
-  }
-}
-
-@mixin fullscreen() {
-  inline-size: 100dvi;
-  block-size: 100dvb;
-
-  .dso-dialog {
-    display: flex;
-    flex-direction: column;
-
-    inline-size: 100%;
-    block-size: 100%;
-
-    > dso-scrollable {
-      flex-grow: 1;
-
-      max-block-size: unset;
-    }
-  }
-
-  .dso-footer {
-    flex-shrink: 0;
-  }
-}

package/src/components/modal/modal.scss

@@ -1,63 +0,0 @@
-@use "../../variables/media-query-breakpoints";
-@use "../../variables/zindex";
-@use "../button";
-@use "../icon";
-@use "../rich-content";
-@use "../modal";
-
-@use "../../di";
-
-body:has(dialog[open]),
-body:has(dso-modal.hydrated) {
-  // block scrolling of the body when a dialog is open
-  overflow: hidden;
-}
-
-.dso-modal {
-  @include modal.root();
-
-  &.dso-fullscreen {
-    @include modal.fullscreen();
-  }
-
-  .dso-close {
-    &::before {
-      @include di.base("cross", icon.$size, middle);
-
-      content: "";
-      display: inline-block;
-    }
-  }
-
-  .dso-footer {
-    .dso-tertiary {
-      float: inline-start;
-      line-height: calc(1.5em - 1px);
-      padding-block: button.$block-padding;
-      padding-inline: 0;
-      position: relative;
-    }
-  }
-
-  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {
-    @include modal.fullscreen();
-  }
-}
-
-dso-modal {
-  [slot="body"] {
-    @include rich-content.children();
-  }
-
-  [slot="footer"] {
-    @include modal.modal-wide-buttons();
-
-    .dso-tertiary {
-      float: inline-start;
-      line-height: calc(1.5em - 1px);
-      padding-block: button.$block-padding;
-      padding-inline: 0;
-      position: relative;
-    }
-  }
-}

package/src/components/modal/modal.variables.scss

@@ -1,23 +0,0 @@
-@use "../../variables/colors";
-@use "../../variables/units";
-
-$max-inline-size: 640px;
-$max-block-size: 70vh;
-
-$small-modal-vh: 380px;
-$min-modal-block-size: 216px;
-
-$backdrop-bg: colors.$wit;
-$backdrop-opacity: -20%;
-$content-bg: colors.$wit;
-$border-color: colors.$grijs-20;
-
-$close-icon-size: units.$u4;
-$close-icon-color: colors.$grasgroen;
-
-$header-padding: units.$u2;
-$body-min-block-size: 6.5rem;
-$body-padding: units.$u4;
-$footer-padding: units.$u4;
-$footer-padding-small-modal-vh: units.$u1;
-$footer-button-block-size: units.$u6;

package/src/components/modal/readme.md

@@ -1,3 +0,0 @@
-# `.dso-modal`
-
-Als een modal actief is zal de `body` dit door middel van CSS automatisch detecteren, en het scrollgedrag 'achter' de modal uitzetten.

package/src/components/navbar/readme.md

@@ -1 +0,0 @@
-# `.dso-navbar`

package/src/components/paragraph/readme.md

@@ -1 +0,0 @@
-# `<p>`

package/src/components/progress-indicator/readme.md

@@ -1,6 +0,0 @@
-# `.dso-progress-indicator`
-
-- toevoeging class `dso-block` zorgt voor horizontaal en verticaal gecentreerde progress-indicator;
-- icm. class `dso-small` zorgt dit voor een (afhankelijk van de inhoud) minimaal 48px hoge progress indicator;
-- icm. class `dso-medium` zorgt dit voor een (afhankelijk van de inhoud) minimaal 64px hoge progress indicator;
-- icm. class `dso-large` zorgt dit voor een (afhankelijk van de inhoud) minimaal 96px hoge progress indicator;

package/src/components/rich-content/readme.md

@@ -1 +0,0 @@
-# `.dso-rich-content`

package/src/components/row-equal-heights/readme.md

@@ -1 +0,0 @@
-# `.row.dso-equal-heights`

package/src/components/search-bar/readme.md

@@ -1 +0,0 @@
-# `.dso-search-bar`

package/src/components/shopping-cart/readme.md

@@ -1 +0,0 @@
-# `.dso-shopping-cart`

package/src/components/tabs/readme.md

@@ -1,17 +0,0 @@
-# `ul.nav.nav-tabs`
-
-De rollen `tablist`, `tab` en `tabpanel` tonen de elementen `<ul>`, `<a>` en `<div>` als een verzameling tabbladen en bijbehorende tabbladen in de toegankelijkheidsboom.
-
-De rol `presentation` voorkomt dat de `<li>`-elementen in kaart worden gebracht in de toegankelijkheidsboom.
-
-Het `aria-selected` kenmerk geeft aan welk tabblad momenteel is geselecteerd.
-
-Het `tabindex`-attribuut zorgt ervoor dat alleen het momenteel geselecteerde tabblad in de tabvolgorde wordt opgenomen.
-
-Het `hidden` attribuut verbergt alles behalve het momenteel weergegeven tabpaneel voor weergave.
-
-Het kenmerk `aria-controls` legt een relatie tussen elk tabblad en het bijbehorende tabblad.
-
-Het kenmerk `aria-labelledby` hergebruikt de naam van het tabblad als de toegankelijke naam van het bijbehorende tabblad.
-
-De `click`- en `keydown`- event listeners leggen de verwachte muis- en toetsenbordgebeurtenissen vast voor het activeren van de tabbladen. Scriptend moet ervoor gezorgd worden dat de a daarin niet meer reageert.

package/src/components/tile/readme.md

@@ -1 +0,0 @@
-# `.dso-tile`

package/src/components/tile-grid/readme.md

@@ -1 +0,0 @@
-# `.dso-tile-grid`