dso-toolkit 92.0.0 → 94.0.0

package/src/components/attachments-counter/readme.md

@@ -1,5 +0,0 @@
-# `.dso-attachments`
-
-## Opmerkingen
-
-De classname `.dso-attachments` is legacy en zou eigenlijk `.dso-attachments-counter` moeten zijn.

package/src/components/badge/_index.scss

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

package/src/components/badge/badge.mixins.scss

@@ -1,54 +0,0 @@
-@use "../../variables/units";
-@use "../../variables/colors";
-@use "../../global/mixins/set-colors.mixin" as set-colors;
-
-@use "badge.variables" as badge-variables;
-
-@mixin root() {
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 1em;
-  display: inline-block;
-  font-size: 0.875em;
-  line-height: badge-variables.$line-height;
-  min-inline-size: 1.5rem;
-  padding-block: #{units.$u1 * 0.5};
-  padding-inline: units.$u1;
-  text-align: center;
-
-  @include _variant(badge-variables.$default-bg-color);
-
-  &.badge-info {
-    @include _variant(badge-variables.$info-bg-color);
-  }
-
-  &.badge-primary {
-    @include _variant(badge-variables.$primary-bg-color);
-  }
-
-  &.badge-success {
-    @include _variant(badge-variables.$success-bg-color);
-  }
-
-  &.badge-warning {
-    @include _variant(badge-variables.$warning-bg-color);
-  }
-
-  &.badge-error {
-    @include _variant(badge-variables.$error-bg-color);
-  }
-
-  &.badge-outline {
-    @include _variant(colors.$wit, colors.$grijs-90);
-  }
-
-  &.badge-attention {
-    @include _variant(badge-variables.$attention-bg-color);
-  }
-}
-
-@mixin _variant($background-color, $border-color: $background-color) {
-  @include set-colors.apply($background-color, "badge");
-
-  border-color: $border-color;
-}

package/src/components/badge/badge.scss

@@ -1,5 +0,0 @@
-@use "../badge";
-
-.dso-badge {
-  @include badge.root();
-}

package/src/components/badge/badge.variables.scss

@@ -1,11 +0,0 @@
-@use "../../variables/colors";
-
-$default-bg-color: colors.$grijs-60;
-$info-bg-color: colors.$donkerblauw;
-$primary-bg-color: colors.$bosgroen;
-$success-bg-color: colors.$success-color;
-$warning-bg-color: colors.$warning-color;
-$error-bg-color: colors.$error-color;
-$attention-bg-color: colors.$mauve;
-
-$line-height: 1;

package/src/components/badge/readme.md

@@ -1,5 +0,0 @@
-# `.dso-badge`
-
-**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.

package/src/components/banner/readme.md

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

package/src/components/breadcrumbs/readme.md

@@ -1 +0,0 @@
-# `ol.dso-breadcrumbs`

package/src/components/button/readme.md

@@ -1,10 +0,0 @@
-# `button.dso-primary`, `button.dso-secondary`, `button.dso-tertiary`
-
-Kan ook op `a` worden gebruikt: `a.dso-primary`, `a.dso-secondary`, `a.dso-tertiary`.
-
-Het label van de button staat altijd in een `<span>`. Naast de label `<span>` kan een Icon staan.
-
-## Modifiers
-
-- `.dso-small`: Om de button compacter te maken.
-- `.dso-align`: Met deze modifier kunnen tertiare buttons verticaal worden uitgelijnd met primary en secondary buttons.

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

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

package/src/components/card/readme.md

@@ -1,3 +0,0 @@
-# `.dso-card`
-
-Dit is een HTML/CSS component, de dso-toolkit biedt dus geen klik-gedrag aan. Hiervoor zou het webcomponent ingezet kunnen worden `<dso-card>`. Bij gebruik van het HTML/CSS component zijn afnemers zelf verantwoordelijk voor het plaatsen van een click eventhandler op `.dso-card`.

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

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

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

@@ -1 +0,0 @@
-# `ul.dso-card-list`

package/src/components/context/readme.md

@@ -1 +0,0 @@
-# `.dso-context-wrapper`, `.dso-context-label`, `.dso-context-container`

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

@@ -1 +0,0 @@
-# `dl`

package/src/components/description/readme.md

@@ -1 +0,0 @@
-# `.dso-description-term`

package/src/components/document-header/readme.md

@@ -1,10 +0,0 @@
-# `.dso-document-header`
-
-Indien gewenst, zoals bij scrollen, kan een compacte `document-header` getoond worden.
-
-Class `dso-document-header-sticky` zorgt voor een `display: sticky` op de `document-header`. In dat geval wordt ook alleen de titel (met chevron-up) getoond en de rest van de inhoud van de `document-header` verborgen. De chevron kan geplaatst worden door de titel te wrappen in een `<button type"button">`
-
-### Varianten
-
-- Gebruik de class `dso-variant-besluitversie` op de root om de `besluitversie` variant te tonen. Deze geeft een groene kleur aan de status balk en een groene border top aan de document-header.
-- Gebruik de class `dso-variant-ontwerp` op de root om de `ontwerp` variant te tonen. Deze geeft een gele kleur aan de status balk en een gele border top aan de sticky document-header.

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;
-    }
-  }
-}