@dso-toolkit/core 101.2.0 → 103.0.0

package/dist/collection/components/shopping-cart/shopping-cart.css

@@ -10,11 +10,45 @@
 
 .shopping-cart {
   background-color: #e1ecf7;
+}
+
+.content {
   padding-block: 16px;
   padding-inline: 16px;
 }
 
 .header {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
+  --_dso-icon-button-secondary-active-color: #fff;
+  --_dso-icon-button-secondary-active-background-color: #1f472c;
+  --_dso-icon-button-secondary-toggled-color: #fff;
+  --_dso-icon-button-secondary-toggled-background-color: #275937;
+  --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-toggled-color: #275937;
+  --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
+  --_dso-button-tertiary-color: #191919;
+  --_dso-button-tertiary-hover-color: #4c4c4c;
+  --_dso-button-tertiary-active-color: #173521;
+  --_dso-button-tertiary-disabled-color: #999;
+  background-color: #e1ecf7;
+  color: #191919;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -40,179 +74,29 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  list-style: none;
+}
+
+::slotted([slot=warning]) {
+  margin-block: 0 !important;
+  margin-inline: 0 !important;
+  padding-block: 16px !important;
+  padding-inline: 16px !important;
+  background-color: #fff !important;
 }
 
 :host([mode=side]) .items {
   --_dso-shopping-cart-line-clamp: 2;
 }
 
-button {
-  -webkit-appearance: button;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-}
-button[disabled] {
-  cursor: default;
-}
-button::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-button.dso-secondary {
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 500;
-  margin-block-end: 0;
-  text-decoration: none;
-  touch-action: manipulation;
-  text-align: var(--_dso-button-text-align, start);
-  user-select: none;
-  vertical-align: middle;
-  background-clip: padding-box;
-}
-button.dso-secondary:focus, button.dso-secondary:focus-visible {
-  outline-offset: 2px;
-}
-button.dso-secondary:active {
-  outline: 0;
-}
-button.dso-secondary.extern::after, button.dso-secondary.download::after {
-  content: "";
-  display: inline-block;
-}
-button.dso-secondary {
-  background-color: var(--_dso-button-secondary-background-color, #fff);
-  border-color: var(--_dso-button-secondary-border-color, #39870c);
-  color: var(--_dso-button-secondary-color, #39870c);
-  float: var(--_dso-button-float-secondary, none);
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  inline-size: var(--_dso-button-inline-size, auto);
-  padding-block: 11px;
-  padding-inline: 15px;
-}
-button.dso-secondary:hover {
-  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
-  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
-  color: var(--_dso-button-secondary-hover-color, #275937);
-  float: var(--_dso-button-float-secondary, none);
-}
-button.dso-secondary:active {
-  background-color: var(--_dso-button-secondary-active-background-color, #275937);
-  border-color: var(--_dso-button-secondary-active-border-color, #275937);
-  color: var(--_dso-button-secondary-active-color, #fff);
-  float: var(--_dso-button-float-secondary, none);
-}
-button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {
-  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
-  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
-  color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-  float: var(--_dso-button-float-secondary, none);
-}
-button.dso-secondary.dso-small {
-  line-height: 1rem;
+::slotted([slot=button]) {
+  flex-shrink: 0 !important;
 }
-button.dso-secondary.dso-small dso-icon, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {
-  margin-block-end: -4px;
-  margin-block-start: -4px;
-}
-button.dso-secondary.dso-small.dso-spinner-left::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-button.dso-secondary.dso-small.dso-spinner-right::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-button.dso-secondary.dso-extra-small {
-  line-height: 1rem;
-}
-button.dso-secondary.dso-extra-small dso-icon, button.dso-secondary.dso-extra-small.extern::after, button.dso-secondary.dso-extra-small.download::after, button.dso-secondary.dso-extra-small.dso-spinner::before {
-  margin-block-end: -4px;
-  margin-block-start: -4px;
-}
-button.dso-secondary.dso-extra-small.dso-spinner-left::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-button.dso-secondary.dso-extra-small.dso-spinner-right::after {
-  block-size: 16px;
-  inline-size: 16px;
-}
-button.dso-secondary.dso-extra-small {
-  padding-block: 9px;
-}
-button.dso-secondary dso-icon:has(+ span:not(.sr-only)) {
-  margin-inline-start: -8px;
-}
-button.dso-secondary span:not(.sr-only) + dso-icon {
-  margin-inline-start: 8px;
-  margin-inline-end: -8px;
-}
-button.dso-secondary dso-icon + span:not(.sr-only) {
-  margin-inline-start: 8px;
-}
-button.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-}
-button.dso-secondary.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-button.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-end: 8px;
-}
-button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  block-size: 16px;
-  inline-size: 16px;
-}
-button.dso-secondary.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-button.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  content: "";
-  display: inline-block;
-  block-size: 24px;
-  vertical-align: top;
-  inline-size: 24px;
-  margin-inline-start: 8px;
-}
-button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  block-size: 16px;
-  inline-size: 16px;
+
+::slotted(.dso-tertiary[slot=button]) {
+  --_dso-button-padding-block-tertiary: 11px !important;
 }

package/dist/collection/components/shopping-cart/shopping-cart.js

@@ -3,6 +3,10 @@ import { h } from "@stencil/core";
  * @slot - The slot to place the `dso-shopping-cart-item` elements in.
  * @slot heading - The title of the Shopping Cart, as a heading element (e.g. `<h3 slot="heading">`) matching the
  * heading hierarchy of the page.
+ * @slot button - An optional slot to place a button in the header of the Shopping Cart, e.g. a "Sluiten" button
+ * (main), an "Openen" Icon Button (side) or a tertiary "Alles verwijderen" button.
+ * @slot warning - An optional explanation of the warning icon of the Shopping Cart Items, e.g. a `<p>` starting with
+ * "Let op:". Shown below the items on a white background spanning the full width of the Shopping Cart.
  */
 export class ShoppingCart {
     constructor() {
@@ -10,20 +14,9 @@ export class ShoppingCart {
          * The mode of the Shopping Cart.
          */
         this.mode = "side";
-        /**
-         * When set, a toggle button is rendered. In the `side` mode this is a button to expand the Shopping Cart, in the
-         * `main` mode this is a button to collapse the Shopping Cart.
-         */
-        this.toggleable = false;
-    }
-    renderToggle() {
-        if (this.mode === "main") {
-            return (h("button", { type: "button", class: "dso-secondary", onClick: (e) => this.dsoToggle.emit({ originalEvent: e }) }, h("span", null, "Sluiten"), h("dso-icon", { icon: "cross" })));
-        }
-        return (h("dso-icon-button", { icon: "chevron-left", variant: "secondary", label: "Openen", onDsoClick: (e) => this.dsoToggle.emit({ originalEvent: e.detail.originalEvent }) }));
     }
     render() {
-        return (h("div", { key: '81a125d44c5a6478f17a2846bea530fea131a036', class: "shopping-cart" }, h("div", { key: 'fc1f6300e29f2e77f7a385b099e2ae97d504244f', class: "header" }, h("slot", { key: 'aadf1e6de0ee0b3acd9cb9f006a398fe6605c6b1', name: "heading" }), this.toggleable && this.renderToggle()), h("div", { key: 'f08808a803d3cc704ac18baf67287c2344fd4593', class: "items" }, h("slot", { key: '6c498a9644bc181885e4fab94cbbce09fabfa3e7' }))));
+        return (h("div", { key: '6487f02b89e9dd12a733410bde3c18effa77e006', class: "shopping-cart" }, h("div", { key: '342c1aaf5f8cea9ec54618a0220d9f950519816d', class: "content" }, h("div", { key: '0cb026359c10116ff9b72063110c64d5168be696', class: "header" }, h("slot", { key: 'fa1d098a90c2aeeb82f2bb9133faee8ada538391', name: "heading" }), h("slot", { key: '5ed5ad2f1ca6d40f64839519502c6c05ef90cadd', name: "button" })), h("ul", { key: '2e7cbc6f8fc5c42620a51c2fda11cd9c92120140', class: "items", role: "list" }, h("slot", { key: 'ccd0090868bc256333bf2c73f4d926e02c44cb3b' }))), h("slot", { key: '35c2329c7352af67412d40aa1ad8818f32d8466c', name: "warning" })));
     }
     static get is() { return "dso-shopping-cart"; }
     static get encapsulation() { return "shadow"; }
@@ -65,52 +58,7 @@ export class ShoppingCart {
                 "reflect": true,
                 "attribute": "mode",
                 "defaultValue": "\"side\""
-            },
-            "toggleable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "When set, a toggle button is rendered. In the `side` mode this is a button to expand the Shopping Cart, in the\r\n`main` mode this is a button to collapse the Shopping Cart."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "toggleable",
-                "defaultValue": "false"
             }
         };
     }
-    static get events() {
-        return [{
-                "method": "dsoToggle",
-                "name": "dsoToggle",
-                "bubbles": false,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the user clicks the toggle button (the button in the `side` mode or the \"Sluiten\" button in the\r\n`main` mode)."
-                },
-                "complexType": {
-                    "original": "ShoppingCartToggleEvent",
-                    "resolved": "ShoppingCartToggleEvent",
-                    "references": {
-                        "ShoppingCartToggleEvent": {
-                            "location": "import",
-                            "path": "./shopping-cart.interfaces",
-                            "id": "src/components/shopping-cart/shopping-cart.interfaces.ts::ShoppingCartToggleEvent",
-                            "referenceLocation": "ShoppingCartToggleEvent"
-                        }
-                    }
-                }
-            }];
-    }
 }

package/dist/collection/components/skiplink/skiplink.js

@@ -8,7 +8,7 @@ export class Skiplink {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: 'ec97f39a3e830efad1c830f0c193794de45a09ae', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '719fe53204afac5f21fd31c71fb49db77493d971', icon: "chevron-right" })));
+        return (h("a", { key: 'ffce938d034d708c40338ad07196e683989e09ef', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '3d8ce97937d72b81b105e159ae3ec7358045bbbe', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slide-toggle/slide-toggle.css

@@ -1,6 +1,18 @@
 :host {
-  display: inline-block;
-  padding-block-start: calc((1.5rem - 20px) * 0.5);
+  display: inline-flex;
+  align-items: flex-start;
+  block-size: max-content;
+  margin-block: calc((1lh - 20px) * 0.5);
+  vertical-align: top;
+}
+
+:host(:has(> label)) {
+  margin-block: 0;
+}
+
+:host(:has(> label)) button.dso-slider {
+  margin-block: calc((1lh - 20px) * 0.5);
+  font: inherit;
 }
 
 button.dso-slider {

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -28,7 +28,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, { key: '64a97f9d83968bdebbc47b3bb4a3a2351505ad61' }, h("button", { key: '692a3db28c1d319ad3da63d632f0064b7e08af75', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, h("svg", { key: '4b4f22a4128da3c283c57c182705534df87cecb2', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '948390a81782cfe675544c9e79863cd966bb0a08', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '690fb1aa53236f9d8ab8fd37043d4c8a63a86f01', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '9a34f945b81e9796438d1044d199feafc9404e5e', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'c2de4147452d4a3266261f902fc2cc1704310d04', htmlFor: this.identifier }, h("slot", { key: 'a03022da8ddce1a038652c88b43f6cb6e59e07d1' })))));
+        return (h(Fragment, { key: '4f7be27534a44b1014b9257935ba5c0d96426cba' }, h("button", { key: '8054c4a637123d292671c1333d9fa1d7ecc941f6', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, h("svg", { key: '14131b92a8e6a66a5def4758370f65b69f1997f8', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'cfdd00f42e05ab025934513e6706b9e60dcf96ff', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '1e3d6acf12c1c0cc5cb03af45e7cd2f824eea3cc', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '0f8ba867f9144991d0d3511490161cdb2d0135a6', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'a938acd19089c63e9c682c4a036b989214689d9e', htmlFor: this.identifier }, h("slot", { key: '5db6f65e0051bdb0c3f6bed378ac4bcc6872478f' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/survey-rating/survey-rating.js

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: 'f71feb379730da313da81cfa870a94972cbfdd1d', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'f288a70a39f39f5a8713db685ba6aec0edf091b7', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '740079e482fd986f4087c0406efd32f5c5d79f91' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '328fb7f100fb6016562a0fb7f50d9650783fbf7e', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '5d220f3fa422599f46e3aab711b307b755a4a0dc', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'b2d5f2934c03361231708b91a7e442ea635b93e1' }, "Heel moeilijk"), h("span", { key: '33ccc8a4d43de5ac05a4066321ef0396b66069e8' }, "Heel makkelijk")), h("div", { key: '0c90046e5e8752425bae3187dd729e33b8383530', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '46eda8236dacfd8efdeb19f73c199cf792d4de1c', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '0f13609b9dfe138d9bc1bd297215123b5dec1100', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'e9d9ad67aac187c0cb05003431dfe88ce7cc27b7' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '67eacd9bfe4d9aa7f9de718c7d66eefc208d1cda', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '4118bd73372ebe13c7a604f0e7b717154c93a7ab', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '590fd6d4db6f497da801c29a24821f553ef98297' }, "Heel moeilijk"), h("span", { key: 'd3eb988572fba331828467298a5e72612af1442c' }, "Heel makkelijk")), h("div", { key: '7aeb6102e3ce13a1dd67038475454b483e9006ca', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: '41e151e08f5e9e83498b07e9f512d5c19ae92d03', type: "submit", class: "dso-secondary" }, h("span", { key: '10ea4788787c0d3c360ed371ab76eb7fbbbc1ec2' }, "Antwoord verzenden")))));
+        })), h("button", { key: '9c0569f5875ac60b4f9d33a80ea264f4c40529c0', type: "submit", class: "dso-secondary" }, h("span", { key: '32352ef5dd59e78ed1ee64c3c6e90d7822b34467' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.css

@@ -469,6 +469,11 @@ button.dso-secondary.download:hover::after,
 label.dso-secondary.download:hover::after {
   background-image: var(--_dso-di-download-bosgroen);
 }
+a.dso-secondary.download:active::after,
+button.dso-secondary.download:active::after,
+label.dso-secondary.download:active::after {
+  background-image: var(--_dso-di-download-wit);
+}
 a.dso-secondary.download[disabled]::after,
 button.dso-secondary.download[disabled]::after,
 label.dso-secondary.download[disabled]::after {
@@ -490,6 +495,11 @@ button.dso-secondary.extern:hover::after,
 label.dso-secondary.extern:hover::after {
   background-image: var(--_dso-di-external-link-bosgroen);
 }
+a.dso-secondary.extern:active::after,
+button.dso-secondary.extern:active::after,
+label.dso-secondary.extern:active::after {
+  background-image: var(--_dso-di-external-link-wit);
+}
 a.dso-secondary.extern[disabled]::after,
 button.dso-secondary.extern[disabled]::after,
 label.dso-secondary.extern[disabled]::after {
@@ -1050,7 +1060,7 @@ a.dso-primary, a.dso-primary:hover, a.dso-primary:visited, a.dso-primary:focus-v
 a.dso-secondary {
   text-decoration: none;
 }
-a.dso-secondary, a.dso-secondary:visited {
+a.dso-secondary, a.dso-secondary:visited:not(:hover):not(:active), a.dso-secondary:focus-visible:not(:hover):not(:active) {
   color: #39870c;
 }
 a.dso-secondary:hover, a.dso-secondary:focus-visible {

package/dist/collection/components/table/table.js

@@ -59,7 +59,7 @@ export class Table {
     render() {
         const caption = this.host.querySelector(":scope > table > caption")?.textContent?.trim();
         const dialogLabel = caption || "Uitvergrote tabel";
-        return (h(Host, { key: 'cc679e90e830606f3b1d131fe537ecde181444eb', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: 'b3d883e89ebbf1918aa23c2a1d2ae35eb8e713cd', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dso-modal", { modalTitle: caption ? dialogLabel : undefined, closable: true, returnFocus: false, onDsoClose: () => this.closeModal() }, !caption && (h("span", { slot: "body", class: "sr-only" }, dialogLabel)), h("div", { slot: "body", class: "dso-table-body" }, h("slot", null)))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && h("slot", { name: "open-modal-button" })), h("div", { class: "dso-table-body" }, h("slot", null))))));
+        return (h(Host, { key: 'efbf9c4905afc527729bf6d6ae357c61dffaaa91', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: 'e4b53475e4a33642ee98e82bef38651eaf19353c', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dso-modal", { modalTitle: caption ? dialogLabel : undefined, closable: true, returnFocus: false, onDsoClose: () => this.closeModal() }, !caption && (h("span", { slot: "body", class: "sr-only" }, dialogLabel)), h("div", { slot: "body", class: "dso-table-body" }, h("slot", null)))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && h("slot", { name: "open-modal-button" })), h("div", { class: "dso-table-body" }, h("slot", null))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

package/dist/collection/components/tabs/tabs.js

@@ -60,7 +60,7 @@ export class Tabs {
         this.mutationObserver?.disconnect();
     }
     render() {
-        return (h(Host, { key: 'fa4be67628f85d5b548517c20ee61528c51b922d' }, h("div", { key: '6fda62a4edb0115bd4ccc259d4bd8d3e69f077a3', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '1fa41f7e9e6968ca70ecbe6315b535d24be71707' })), h("div", { key: 'c63df74e37ac2a44c6f5472026e57c2390e6ef70', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'f9c438558d37b90a5977c2fc5d4a32911f9a44e3', name: "panel" }))));
+        return (h(Host, { key: '6d0780aac3bd2d5640e018e48e40a5443cd5cf6b' }, h("div", { key: '6161073805ac2b749dce067d686bce92b9e7bc0a', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'eb6a324213936fc9a5dbd85e7266159d7059eaa9' })), h("div", { key: '1620e369cf56cac76e00485f6c64c5037e94aef5', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'd2ebac3376122ee3ecfe6521d0a3e969c6b2713d', name: "panel" }))));
     }
     static get is() { return "dso-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tijdreis-banner/tijdreis-banner.js

@@ -5,7 +5,7 @@ import { Fragment, h } from "@stencil/core";
  */
 export class TijdreisBanner {
     render() {
-        return (h(Fragment, { key: '8c13ab50b35a92848d72b776ce5b3875c5e67086' }, h("dso-icon", { key: 'a3b0e70442176974a04b9fe2bea036e5361f7bed', icon: "clock-outline" }), h("slot", { key: 'a482014428a92ad7fdea8f56ee28ce1716be2725' }), h("slot", { key: '8bcd260f712ecdcc67e0b70433e7b9a8e7af6012', name: "button" })));
+        return (h(Fragment, { key: '47492875b4ceb7eae6532aaa484df5f9d63564fb' }, h("dso-icon", { key: 'a506e9ec41cda8ae39b83039bacca0a1da96a091', icon: "clock-outline" }), h("slot", { key: '35e336de613f7b5e5c5b0e4968f34912212925d5' }), h("slot", { key: '5d9e1936e78b576c3a5e47e2cc55beb4f3bf167c', name: "button" })));
     }
     static get is() { return "dso-tijdreis-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tree-view/tree-view.js

@@ -170,7 +170,7 @@ export class TreeView {
         return false;
     }
     render() {
-        return (h("div", { key: 'cfd4a4c97f9a9a19d63ca06da1d85e49b17d7241', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '4c178feeb364c23f883d46e3afef5bba6ea412e4', role: "tree", "aria-label": "Objectenboom" }, this.collection?.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: '344ee783cff101cd4ec0957f3c9066fb704f7a0b', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '1d5d37f3f5f151fdd3c0575cda61d348e4e0ba7d', role: "tree", "aria-label": "Objectenboom" }, this.collection?.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get is() { return "dso-tree-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/truncate/truncate.css

@@ -48,7 +48,8 @@
 }
 
 :host {
-  display: block;
+  display: grid;
+  grid-template-columns: minmax(0, max-content);
 }
 
 .dso-truncate-content {

package/dist/collection/components/truncate/truncate.js

@@ -114,7 +114,7 @@ export class Truncate {
         this.tooltipController.dispose();
     }
     render() {
-        return (h(Host, { key: '7044e989155cf26d80d85d664059ea505df09498' }, h("span", { key: 'dbf788a0775a4be2dc276737c9095fd26470b13c', class: "dso-truncate-content", ref: this.setContentElement, tabindex: this.truncated ? 0 : undefined, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip, onFocus: this.showTooltip, onBlur: this.hideTooltip }, h("slot", { key: 'cb197369b2da8df36102e4ba0f93d2b1a6130da2', ref: (element) => (this.slotElement = element) })), h(Tooltip, { key: '53ab33a7445a4774fcdba91af4c702dae9f5c2a2', tipElementRef: (element) => (this.tooltipElement = element), tipArrowElementRef: (element) => (this.tooltipArrowElement = element) }, h("div", { key: '5c7ad1a1275b527530fca85e0ebbb312a391bf4b', ref: this.setTooltipContentElement, "aria-hidden": "true" }))));
+        return (h(Host, { key: '63a1aefd3b6fb5a35a7239e4518f7546388d9b96' }, h("span", { key: 'ecde4e5fd43c083bcb43339a0d9e7aecd187475b', class: "dso-truncate-content", ref: this.setContentElement, tabindex: this.truncated ? 0 : undefined, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip, onFocus: this.showTooltip, onBlur: this.hideTooltip }, h("slot", { key: '8d9680318df35114d80dde6b33d9fc8666979c7a', ref: (element) => (this.slotElement = element) })), h(Tooltip, { key: 'f131d00b7c176c50541dcde0b916d7228565a811', tipElementRef: (element) => (this.tooltipElement = element), tipArrowElementRef: (element) => (this.tooltipArrowElement = element) }, h("div", { key: '567fab88c49cbac49369095a2f30c99f7e9519bd', ref: this.setTooltipContentElement, "aria-hidden": "true" }))));
     }
     static get is() { return "dso-truncate"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -241,57 +241,36 @@ slot[name=legend] {
 }
 
 @media screen and (min-width: 1032px) {
-  :host(:not([print])[main-size=small]) .dso-main-panel,
-  :host(:not([print])[document-panel-size=small]) .dso-document-panel {
+  :host(:not([print])[main-size=small]) .dso-main-panel {
     flex-basis: 375px;
     min-inline-size: 0;
     max-inline-size: 375px;
   }
-}
-@media screen and (min-width: 1032px) and (max-width: 375px) {
-  :host(:not([print])[main-size=small]) .dso-main-panel,
-  :host(:not([print])[document-panel-size=small]) .dso-document-panel {
-    flex-basis: 100vw;
-    max-inline-size: 100vw;
-    min-inline-size: 0;
-    transition: none;
-  }
-}
-@media screen and (min-width: 1032px) {
-  :host(:not([print])[main-size=medium]) .dso-main-panel,
-  :host(:not([print])[document-panel-size=medium]) .dso-document-panel {
+  :host(:not([print])[main-size=medium]) .dso-main-panel {
     flex-basis: 624px;
     min-inline-size: 375px;
     max-inline-size: 624px;
   }
-}
-@media screen and (min-width: 1032px) and (max-width: 624px) {
-  :host(:not([print])[main-size=medium]) .dso-main-panel,
-  :host(:not([print])[document-panel-size=medium]) .dso-document-panel {
-    flex-basis: 100vw;
-    max-inline-size: 100vw;
-    min-inline-size: 375px;
-    transition: none;
-  }
-}
-@media screen and (min-width: 1032px) {
-  :host(:not([print])[main-size=large]) .dso-main-panel,
-  :host(:not([print])[document-panel-size=large]) .dso-document-panel {
+  :host(:not([print])[main-size=large]) .dso-main-panel {
     flex-basis: 60%;
     min-inline-size: 768px;
     max-inline-size: 1024px;
   }
-}
-@media screen and (min-width: 1032px) and (max-width: 768px) {
-  :host(:not([print])[main-size=large]) .dso-main-panel,
+  :host(:not([print])[document-panel-size=small]) .dso-document-panel {
+    flex-basis: 25%;
+    min-inline-size: 375px;
+    max-inline-size: 623px;
+  }
+  :host(:not([print])[document-panel-size=medium]) .dso-document-panel {
+    flex-basis: 40%;
+    min-inline-size: 624px;
+    max-inline-size: 1024px;
+  }
   :host(:not([print])[document-panel-size=large]) .dso-document-panel {
-    flex-basis: 100vw;
-    max-inline-size: 100vw;
+    flex-basis: 60%;
     min-inline-size: 768px;
-    transition: none;
+    max-inline-size: 1200px;
   }
-}
-@media screen and (min-width: 1032px) {
   :host(:not([print])) .dso-main-panel.compact,
   :host(:not([print])) .dso-main-panel.expanded {
     flex-basis: unset;

package/dist/collection/components/viewer-grid/viewer-grid.js

@@ -160,9 +160,9 @@ export class ViewerGrid {
     }
     render() {
         const tabs = viewerGridTabs.filter((tab) => tab !== "document" || this.documentPanelOpen);
-        return (h(Fragment, { key: 'a4a2d506d887502495e82994af7dc5fadb04c72d' }, h("slot", { key: '2cce5a91ca55e0e99b14113d84711f6b8ea64016', name: "top-bar" }), h("div", { key: '07712c49f0c2b374d9beb3423e63b1a22e3aa49f', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: 'e412fb5363c99096e2756890a987a47461de78bd', class: "dso-navbar" }, h("ul", { key: '5d6c77f44c72bc8a03e44d83bbdc227ff3d9e484', class: "dso-nav dso-nav-sub" }, tabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", "aria-current": this.activeTab === tab ? "page" : undefined, onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search") || this.print) && (h(MainPanel, { key: 'bc0bd828cf71d44f8c5112985ce60b899cf984d1', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.tabView ? false : this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd, printFilterPanel: !this.tabView && this.filterPanelOpen && this.print ? this.renderFilterPanel() : undefined })), (!this.tabView || (this.tabView && this.activeTab === "search")) && !this.print && this.renderFilterPanel(), (!this.tabView || (this.tabView && this.activeTab === "map") || this.print) && (h("div", { key: 'aab029d2044d207bed52ef12d506257f659e349f', class: "map-area" }, h("div", { key: '242c712042871f3fcaee9b39259de06ffde3753a', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '1514f9691361db4a6c2a968ddca090686d90bf7f', name: "map" })), h("slot", { key: '56b24a21ebf1bda91aa285520a4e3643a28e45dc', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
+        return (h(Fragment, { key: '96c242cdde1a4bb41752f3d98ead62aad3790977' }, h("slot", { key: '95d49eebce481289dac6206f5b2249b4b6a37b17', name: "top-bar" }), h("div", { key: '630d2b18a05801b840210cd0965cab0ddfd2e42b', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '83f8a63abaddbf10e5ff6a28f9e53296c213c54c', class: "dso-navbar" }, h("ul", { key: '0323c650722fb070efff99cb9c2007acc8707e4d', class: "dso-nav dso-nav-sub" }, tabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", "aria-current": this.activeTab === tab ? "page" : undefined, onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search") || this.print) && (h(MainPanel, { key: '8e210d40820dff9f7eb641540fba03a0bb217125', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.tabView ? false : this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd, printFilterPanel: !this.tabView && this.filterPanelOpen && this.print ? this.renderFilterPanel() : undefined })), (!this.tabView || (this.tabView && this.activeTab === "search")) && !this.print && this.renderFilterPanel(), (!this.tabView || (this.tabView && this.activeTab === "map") || this.print) && (h("div", { key: '02fd34a6f02f091f1469b06523ba30bb305995c6', class: "map-area" }, h("div", { key: '74127720fa459c20a276f3e9ff5601ead4272701', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '036b54fe0281d61bb87722ac928ed6070a29bd5d', name: "map" })), h("slot", { key: '9ed121e18508ecdb77b5cd00c37742b631e9b4c9', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
             (this.tabView && this.activeTab === "document" && this.documentPanelOpen) ||
-            this.print) && (h(DocumentPanel, { key: '9b6d0e936adb8f740a97d9470726b6732275434e', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'e795a3cdb870b1f932925e875950523bfeae736b', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+            this.print) && (h(DocumentPanel, { key: '1bfef6321df9365a25e1d1dab9126cadea8df837', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'ce8e51f24a2c6a7a20de9648b1555d8edb8362d4', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }