@dso-toolkit/core 100.4.0 → 101.0.0

package/dist/collection/components/plekinfo-card/plekinfo-card-item/plekinfo-card-item.css

@@ -0,0 +1,148 @@
+ins {
+  text-decoration: none;
+  --_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: #e4f1d4;
+  color: #191919;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
+  --_dso-ozon-content-toggletip-color: #000;
+}
+
+del {
+  --_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: #f5d8dc;
+  color: #191919;
+  --_dso-ozon-content-toggletip-color: #000;
+  text-decoration: line-through;
+  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+}
+@media screen and (min--moz-device-pixel-ratio: 0) {
+  del {
+    font-family: sans-serif;
+  }
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}
+
+.dso-plekinfo-card-item-container {
+  display: flex;
+  align-items: flex-start;
+  column-gap: 8px;
+  inline-size: 100%;
+  padding-block: 8px;
+  padding-inline: 8px;
+}
+.dso-plekinfo-card-item-container ::slotted([slot=symbol]) {
+  background-color: #fff;
+  display: block;
+  float: inline-start;
+  block-size: 24px;
+  margin-block-start: 0;
+  margin-inline-end: 8px;
+  inline-size: 27.6923076923px;
+  overflow: hidden;
+  position: relative;
+  margin-inline-end: 0;
+  background-color: transparent;
+}
+
+.content {
+  min-inline-size: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  flex: 1 1 auto;
+}
+
+.text {
+  min-inline-size: 0;
+  flex: 1 1 auto;
+}
+
+.no-sublabel .text {
+  flex-grow: 0;
+}
+
+del .text {
+  text-decoration: line-through;
+  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
+}
+@media screen and (min--moz-device-pixel-ratio: 0) {
+  del .text {
+    font-family: sans-serif;
+  }
+}
+
+slot[name=label] {
+  font-weight: 700;
+}
+
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 0 0 auto;
+  gap: 4px;
+}

package/dist/collection/components/plekinfo-card/plekinfo-card-item/plekinfo-card-item.js

@@ -0,0 +1,82 @@
+import { Host, h } from "@stencil/core";
+import { WrapWijzigactie, } from "../../../functional-components/wrap-wijzigactie/wrap-wijzigactie.functional-component";
+/**
+ * @slot symbol - A required slot for the symbol representing this plekinfo item.
+ * @slot label - The label of the plekinfo item.
+ * @slot sublabel - An optional sublabel of the plekinfo item.
+ * @slot meta - An optional label badge displayed after the label and sublabel.
+ */
+export class PlekinfoCardItem {
+    constructor() {
+        this.hasSublabel = false;
+        this.hasMeta = false;
+        this.updateSublabel = () => {
+            this.hasSublabel = (this.sublabelSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+        };
+        this.updateMeta = () => {
+            this.hasMeta = (this.metaSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+        };
+        this.setSublabelSlot = (element) => {
+            this.sublabelSlot = element;
+            this.updateSublabel();
+        };
+        this.setMetaSlot = (element) => {
+            this.metaSlot = element;
+            this.updateMeta();
+        };
+    }
+    render() {
+        return (h(Host, { key: '4e563baa58db341171a3c007480c65a25d9ea4c2' }, h(WrapWijzigactie, { key: '73da6556bb70f408cc70986fdb8c6a013c1f44f9', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-item-container" }, h("div", { key: '0af3ef4cbdc949f485f2a9f98fe8fcd450c50f59' }, h("slot", { key: '19b13f3962c3d147e8462cfd76f98e3f7f0f3502', name: "symbol" })), h("div", { key: 'f28a6c404312c709a071409dbfdb535fde4da4f9', class: {
+                content: true,
+                "no-sublabel": !this.hasSublabel,
+            } }, h("dso-truncate", { key: '1dfe0d1fb70d70a39c01f76474b5e46335e63e31', class: "text" }, h("slot", { key: '9c4ff61c02505d426e4a7b677cc324f11b04a11e', name: "label" }), this.hasSublabel && " ", h("slot", { key: 'ac961117505fe0c4307ecbd6f03e94e8fbc48792', name: "sublabel", ref: this.setSublabelSlot, onSlotchange: this.updateSublabel })), h("div", { key: 'f02925bd0492b477d112445115c436c73a678761', class: "meta", hidden: !this.hasMeta }, h("slot", { key: '1e6f25fde6fc59e053ad5b468bbf67b625e65d00', name: "meta", ref: this.setMetaSlot, onSlotchange: this.updateMeta }))))));
+    }
+    static get is() { return "dso-plekinfo-card-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["plekinfo-card-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["plekinfo-card-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "wijzigactie": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Wijzigactie",
+                    "resolved": "\"verwijder\" | \"voegtoe\" | undefined",
+                    "references": {
+                        "Wijzigactie": {
+                            "location": "import",
+                            "path": "../../../functional-components/wrap-wijzigactie/wrap-wijzigactie.functional-component",
+                            "id": "src/functional-components/wrap-wijzigactie/wrap-wijzigactie.functional-component.tsx::Wijzigactie",
+                            "referenceLocation": "Wijzigactie"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional 'wijzigactie' that signals if the plekinfo item is added or removed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "wijzigactie"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSublabel": {},
+            "hasMeta": {}
+        };
+    }
+}

package/dist/collection/components/plekinfo-card/plekinfo-card.css

@@ -88,14 +88,14 @@ del {
 }
 
 .dso-plekinfo-card-container {
+  inline-size: 100%;
   padding-block: 16px;
   padding-inline: 16px;
-  inline-size: 100%;
 }
 .dso-plekinfo-card-container .dso-plekinfo-card-heading {
   display: flex;
   align-items: start;
-  column-gap: 8px;
+  column-gap: 16px;
 }
 @media screen and (max-width: 480px) {
   .dso-plekinfo-card-container .dso-plekinfo-card-heading {
@@ -107,7 +107,7 @@ del {
 }
 .dso-plekinfo-card-container .dso-plekinfo-card-symbol {
   grid-row: span 2;
-  margin-inline-end: 8px;
+  margin-inline-end: 16px;
 }
 .dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover, :focus-visible)) {
   background-color: #f2f2f2;
@@ -155,12 +155,11 @@ del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover, :foc
 
 ::slotted([slot=heading]) {
   display: inline !important;
+  margin-block: 0 !important;
   font-size: 1.125em !important;
   font-weight: 700 !important;
   color: #275937 !important;
   line-height: 1.25 !important;
-  margin-block-end: 0 !important;
-  margin-block-start: 0 !important;
 }
 
 ::slotted([slot=content]) {

package/dist/collection/components/plekinfo-card/plekinfo-card.js

@@ -2,12 +2,11 @@ import { Fragment, Host, forceUpdate, h, } from "@stencil/core";
 import { WrapWijzigactie, } from "../../functional-components/wrap-wijzigactie/wrap-wijzigactie.functional-component";
 import { isModifiedEvent } from "../../utils/is-modified-event";
 /**
- * @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.
+ * @slot symbol - The card symbol, required when the card has no items. Do not provide it when the card contains items.
  * @slot heading - A slot to place the title of the card in.
  * @slot meta - An optional slot to place a `Label` in.
- * @slot content - An optional slot to place `Rich Content` in.
- * @slot interaction - A slot for the `SlideToggle`s elments.
- *
+ * @slot content - A slot for rich content or `PlekinfoCardItem`s. These content types are mutually exclusive.
+ * @slot interaction - A slot for the `SlideToggle` element.
  */
 export class PlekinfoCard {
     constructor() {
@@ -24,11 +23,13 @@ export class PlekinfoCard {
         this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
-    clickEventHandler(e) {
-        if (!(e.target instanceof HTMLElement) || !this.href) {
-            return;
+    clickEventHandler(event) {
+        if (event.target instanceof HTMLElement && this.href) {
+            this.dsoPlekinfoCardClick.emit({
+                originalEvent: event,
+                isModifiedEvent: isModifiedEvent(event),
+            });
         }
-        return this.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     get symbolSlottedElement() {
         return this.host.querySelector("[slot='symbol']");
@@ -41,7 +42,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: 'aabcf9f7d1d9ac7a2eaaf8dac9bbd487def590e9', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '8fe16ac5af29835b9dd45f6910ec9d17f9182921', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: '54a40042ed5eebfd81ba2534b1931fda5bd3f6c8', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'f08ae4bacaf9b1f62059f5f34a857025ad07c23b', name: "symbol" })), h("div", { key: '897b568013c7dc1dac7695bcab2251c87212acfb', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "heading-content" }, h("slot", { name: "heading" })), "\u2060", this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '676637dfd0bae31d9ce8a59d80acce3029ae5a73', name: "meta" }), this.interaction !== null && h("slot", { key: 'f5e396fcda503f238056bd9b764d46422b005390', name: "interaction" })), h("div", { key: 'c4c81e97a4a9b2edda0e96d88b74f4cc77fd39be', class: "dso-plekinfo-card-content" }, h("slot", { key: 'ec0373ae1542871541b60ba74af38964fac34f9e', name: "content" })))));
+        return (h(Host, { key: '9a0d2e538345493b030b42d2b1da0db1cc134931', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'a91214b0c0f4902142fb0cf491e130464295f621', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: '6f538b6c62b8e32330a93acf947390c6467553b8', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'abe6a65f1f2fe489541b792c083e932fa9a6672b', name: "symbol" })), h("div", { key: '7d18fed50ae8b684a81134d8daa4c8b63a6a3965', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (event) => this.clickEventHandler(event) }, h("span", { class: "heading-content" }, h("slot", { name: "heading" })), "\u2060", this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '45fbbc08c5bdec7e35861d821091d2b8f51e81e1', name: "meta" }), this.interaction !== null && h("slot", { key: '77f2cb8a0bf33e591e5c66e40f911edbb6094f4e', name: "interaction" })), h("div", { key: 'bffd895b68594c01ac6e5bd655dce3106b672e21', class: "dso-plekinfo-card-content" }, h("slot", { key: 'c9c8f8f7aade44d4098362e16f16c90eb6032be2', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: '756b3c77f67be36f96ff5ab888468612ba099827' }, h("span", { key: '11fb5c5829de9fc1a01ba440aacf0c1577c5bf2e', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '2ea1050a9196781ab9f246dd50b8f1b905bf085b', icon: "spinner" })), h("span", { key: 'ec94e1009c0d8aa8540ceb3bc9b745db8f591e15', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '4c4a20f9efaed65f1238c20d9e6edb1a451a22d9' }, h("span", { key: '21ce4ac50f717a0219a8e5ffd59efb2319107705', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '7452a5fc2d83e55f6728aa3886c259984006b708', icon: "spinner" })), h("span", { key: '654ee10f19a190b00787f9bc2e714a23f76ad6b2', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/project-item/project-item.js

@@ -7,7 +7,7 @@ import { Fragment, h } from "@stencil/core";
  */
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: 'fbd842d78dc7f545df95ec000859bc4837c23eae' }, h("div", { key: 'df40e9b6dbacf73db4cf8656df95a00801375f9d', class: "project-item-header" }, h("div", { key: 'd261820611c170fc3c29fe1068613b6f473b33cb', class: "project-item-title" }, h("slot", { key: '93b04978237359ca028428911a2f57e17667c5b0', name: "title" }), this.label && (h("dso-label", { key: '56aaa5fe79e6e3f5dc9df1687ec3f0c862e144b2', status: "error", compact: true }, this.label))), h("div", { key: 'f217ffc60903fc7a30d006f54e4b7d474a700b28', class: "project-item-actions" }, h("slot", { key: 'fc67bf12783c9da2612f3d677995396c461e565f', name: "actions" }))), h("div", { key: 'e68fa3b25d48b481a959b0747f01e596df0fa8c8', class: "project-item-info" }, h("div", { key: '4fe886f52e1026e41435b33ad8966ef68c473576', class: "project-item-progress" }, h("slot", { key: 'a4acc4d2524793c659d5303f135f732a67e715ac', name: "progress" })), h("div", { key: '413de77281b87d695c323068c3750ac06452f793', class: "project-item-status" }, h("slot", { key: '2d9bca7bf50f2ba0d5684344c54d38c2dd35df4e', name: "status" })))));
+        return (h(Fragment, { key: 'a3d3cf7301b6fbe683b4043266b3e71a5d1eb17c' }, h("div", { key: 'b9c6d4246e73e4402f5782b98fbe0299f4188089', class: "project-item-header" }, h("div", { key: '58d0ff3643d6950353bf871a7a63eed43250d7c2', class: "project-item-title" }, h("slot", { key: '3e3615ee41121fe61d1ec5b31ed6b037bccef96c', name: "title" }), this.label && (h("dso-label", { key: '335aed255c4cd097a83453db3b61b7c1da0a4883', status: "error", compact: true }, this.label))), h("div", { key: 'f49bc034b3b72e4f1421642886826a450fe05b10', class: "project-item-actions" }, h("slot", { key: '057fae595524d3b95a51546491b988aef0f7fab0', name: "actions" }))), h("div", { key: 'cff3cb719312b6657cc68f8cfd217cf0fc5ddd49', class: "project-item-info" }, h("div", { key: '8689117f98f3f07fe820d17d01c893cd46199c17', class: "project-item-progress" }, h("slot", { key: '8504a9aad446ff43584e27fb4b127f6e50123c8e', name: "progress" })), h("div", { key: '38a34c347101af1bbe5142578ffd42926cfdaab8', class: "project-item-status" }, h("slot", { key: '1c38a35cfdd8767445d11ae55b519bcfbdff5dd2', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/responsive-element/responsive-element.js

@@ -56,7 +56,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '59035c21796e17384579a80ca5d2fa0604a344db', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '5e0966874e73a7740a6ba97bb3c11547d5959795' })));
+        return (h(Host, { key: 'c0110d27f11f4def9eb46a41fbd42c8395545ebd', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'b10fe19d1414143bd61a42dbf85ff85898300414' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.js

@@ -109,9 +109,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: '274bcedecaffc230d15a2fa9269dc0c642f80a8b', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'e3bd6322a428e44451c1d50368ae51f58e7edc18', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '044daadd0db3bfa44f41435dec701580c8cfbe80', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'c5041f6918872db966a93e5b9f533e7707681893', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState(), tabIndex: this._preventFocus ? -1 : undefined }, h("slot", { key: 'f98ac76b8e6c297ac747eb8cd541d6c22da582cc' }))));
+            }), onScroll: () => this._setScrollState(), tabIndex: this._preventFocus ? -1 : undefined }, h("slot", { key: 'b8021f3b5aba48a53bd9d94cf61e2fe8846f184d' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-button/segmented-button.js

@@ -15,7 +15,7 @@ export class SegmentedButton {
         });
     }
     render() {
-        return (h("div", { key: 'c0f33653af6edbd39c8cb8f5d58ef0888c462e6e', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
+        return (h("div", { key: '5110546b2be5c36449c107bccadadd7535f12640', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
             return (h("label", null, h("input", { type: "radio", name: this.groupName, value: option.label, checked: this.activeOption === option, disabled: option.disabled, onClick: (event) => this.handleClick(option, event) }), h("span", { class: "segment-label" }, option.label)));
         })));
     }

package/dist/collection/components/selectable/selectable.css

@@ -8,10 +8,10 @@
   line-height: 24px;
   margin: 0;
 }
-:host input[type=checkbox][disabled] + label::before, :host input[type=checkbox][disabled]:active + label::before, :host input[type=checkbox][disabled]:focus + label::before,
-:host input[type=radio][disabled] + label::before,
-:host input[type=radio][disabled]:active + label::before,
-:host input[type=radio][disabled]:focus + label::before {
+:host input[type=checkbox]:disabled + label::before, :host input[type=checkbox]:disabled:active + label::before, :host input[type=checkbox]:disabled:focus + label::before,
+:host input[type=radio]:disabled + label::before,
+:host input[type=radio]:disabled:active + label::before,
+:host input[type=radio]:disabled:focus + label::before {
   background-color: #fff;
   box-shadow: 0 0 0 2px #e5e5e5;
 }
@@ -33,8 +33,8 @@
     opacity: 1;
   }
 }
-:host input[type=checkbox]:not([disabled]),
-:host input[type=radio]:not([disabled]) {
+:host input[type=checkbox]:not(:disabled),
+:host input[type=radio]:not(:disabled) {
   cursor: pointer;
 }
 :host input[type=checkbox] + label,

package/dist/collection/components/selectable/selectable.js

@@ -51,7 +51,7 @@ export class Selectable {
         const describedBy = [hasInfo && this.infoFixed ? this.describedById : undefined, this.errormessage]
             .filter((value) => value !== undefined)
             .join(" ") || undefined;
-        return (h(Fragment, { key: '4fcfaccfc2f046747059a236b95e94fd0ff63eda' }, h("div", { key: 'b157a7b0666bff6a70c6f73c8f01e0f404be59a6', class: "dso-selectable-container" }, h("div", { key: '0ae8a012600400a2ad5613a40b5edc7ed2e3697b', class: "dso-selectable-input-wrapper" }, h("input", { key: '3766067fdbd363f009d8e468efa744cff7806125', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '372012b7f352dbbec302bd8b8eb8ba06f61afb3b', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '9df3328a5f9e511ce3c3e47198f8962ad9fd8e5f', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '669eeac1998e756335e46e571f09ed128b510b88' }, h("slot", { key: '7988c3530d3b595a0bd8e276c5880bf23c32f480', name: "info" })))), h("slot", { key: '03944fb01644124409295f56dc44e7753d9d34e8', name: "options" })));
+        return (h(Fragment, { key: '68845031d900fd4e836859c6628a6049a3f27ade' }, h("div", { key: 'f177f07dce575305a6fb165ca81c02ae09d7afa7', class: "dso-selectable-container" }, h("div", { key: '0769aa30e6aaa1f6961d83ebaa7a0c083d42a009', class: "dso-selectable-input-wrapper" }, h("input", { key: 'c93ec1b0ada9abf961064c3bdfbe529fcf3933c2', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '56e99d443552b32995befbea8dc16b656f38ac92', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '59872ab73d6977023d5fd3fdecb3c30161877a6c', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '19f24fdacb00641989b95442a9c1b2c66a0bbdfd' }, h("slot", { key: '45b881d9baef21e4cefa662ec0e8d8620779bfe7', name: "info" })))), h("slot", { key: 'bdc7f35cd2d93d9d5710b250bfaa565b26d51e7f', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

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

@@ -23,7 +23,7 @@ export class ShoppingCart {
         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: '4ab8903267d21c49bb0d6134967573769f86655b', class: "shopping-cart" }, h("div", { key: 'b5c1c1c6c74187ec67e912537cabe7fb6bcb1d52', class: "header" }, h("slot", { key: '5f71e3cc839eae5ade72d04c72d7cf1cfbd94163', name: "heading" }), this.toggleable && this.renderToggle()), h("div", { key: 'b18e6324a3272c4a8921b8038de70cde83b1902e', class: "items" }, h("slot", { key: 'd56ca548761f51438075baa04bdbafa02124013d' }))));
+        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' }))));
     }
     static get is() { return "dso-shopping-cart"; }
     static get encapsulation() { return "shadow"; }

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: '937587918b1d40741510860278da2c73edbe6735', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'd911e0a1de7cb3cc20bee05d84452c8261aac952', icon: "chevron-right" })));
+        return (h("a", { key: 'ec97f39a3e830efad1c830f0c193794de45a09ae', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '719fe53204afac5f21fd31c71fb49db77493d971', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }

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: 'f223b48bd6d589546dc52d62c75e31ab99e0ef87' }, h("button", { key: 'b4590c86a7f8f70c8c55c860133a5a427ae02a65', 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: 'b2076589f34804cb099217efa9eaf124f39df6e5', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'd5916e9d40ff2c98715c48447c1e06042322dd8e', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '8f50a3a0f1bb71ee5bacd20d7c5ad2209c23a270', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '422b4a4d496a8f7f2332849a9f59030d118ac93e', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'f43a29b79dbe3860647f33d42fac4ff6183910f5', htmlFor: this.identifier }, h("slot", { key: 'e73863c80c3a35b007c9cce7c6a7a9c01edf5ef9' })))));
+        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' })))));
     }
     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: 'a1e6eea42d3a72e8e35d4321e2e08694bc9bd281', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '88bb1cebae164f7e2b49b4b2a0bd6c9cc73c5e1b', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'b08654c69e56c45cb9f63a78f78122210e5eab1a' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: 'f25990862da6afa7f424f1cce2e189cb44e8f27d', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'c199c41e390f142411a9716f2a731d8571099e1d', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'bccb906e701e942afc821ef44246c262a8d9a92b' }, "Heel moeilijk"), h("span", { key: '3c76e8c0df2fd4570506f4c4c42cf35b6cd4856f' }, "Heel makkelijk")), h("div", { key: '9e0ac271c8a8bf13e6e3ee27fc5531f8d9c544d7', role: "radiogroup" }, ratings.map((rating, index) => {
+        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) => {
             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: 'cc40fc4662afb4ff4c55c87babcddf4f166ec8ef', type: "submit", class: "dso-secondary" }, h("span", { key: 'ef997bdf90814a3a898eba461f51455af6f96933' }, "Antwoord verzenden")))));
+        })), h("button", { key: '41e151e08f5e9e83498b07e9f512d5c19ae92d03', type: "submit", class: "dso-secondary" }, h("span", { key: '10ea4788787c0d3c360ed371ab76eb7fbbbc1ec2' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

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: '8fc50f457933f687048719f717917d959252d288', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: 'f1371e96868734154cb211d0f1001051f9de2656', 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: '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))))));
     }
     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: 'f9840526a41e0ce6bdd945e3f26a981dc4592cd8' }, h("div", { key: '8f1d74bde554f0dd2731dd9e607105c656e0f696', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'b0793d048219d61afefbbde716c7cb7128a8c1fe' })), h("div", { key: '6af0ed80dd887924bc59f746b689fa4dbeca23ab', role: "tabpanel", tabindex: "0" }, h("slot", { key: '1eacaa24eaac109889d5a564d7e6c038a51bc7e8', name: "panel" }))));
+        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" }))));
     }
     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: 'f4b50add4852438c4b4ead8f0ec589c22f7e9a17' }, h("dso-icon", { key: 'ca2af418fad4711a923bdf00c44b748055b0e4e0', icon: "clock-outline" }), h("slot", { key: '8b70dc2f2cc48b82b728616a213e89db987e88cb' }), h("slot", { key: '7e194fb4b295b1aebf8edfc8ba7a7ad480a8c263', name: "button" })));
+        return (h(Fragment, { key: '8c13ab50b35a92848d72b776ce5b3875c5e67086' }, h("dso-icon", { key: 'a3b0e70442176974a04b9fe2bea036e5361f7bed', icon: "clock-outline" }), h("slot", { key: 'a482014428a92ad7fdea8f56ee28ce1716be2725' }), h("slot", { key: '8bcd260f712ecdcc67e0b70433e7b9a8e7af6012', 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: 'f2a3ebdc132ce89aa5ae288a1843c67a287c8a7e', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '5c26ca0a616ab1dd0f4a4c9c89de12857e3b94aa', 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: '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 }))))));
     }
     static get is() { return "dso-tree-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,67 @@
+.dso-tooltip {
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
+  background-color: #fff;
+  color: #191919;
+  border-radius: 4px;
+  overflow: unset;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
+  opacity: 0;
+  visibility: hidden;
+  max-inline-size: 640px;
+}
+.dso-tooltip .tooltip-inner {
+  --_dso-span-role-paragraph-margin-block: 8px;
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
+  background-color: #fff;
+  color: #191919;
+  font-family: Asap, sans-serif;
+  font-size: 1rem;
+  font-weight: normal;
+  padding-block: 8px;
+  padding-inline: 16px;
+  border-radius: 4px;
+  line-height: 1.5;
+}
+.dso-tooltip .tooltip-arrow {
+  position: absolute;
+  background-color: #fff;
+  border-start-start-radius: 4px;
+  block-size: 10px;
+  inline-size: 10px;
+  pointer-events: none;
+  z-index: -1;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}
+
+.dso-truncate-content {
+  display: inline-block;
+  max-inline-size: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  text-decoration: inherit;
+}
+.dso-truncate-content:focus-visible {
+  border-radius: 2px;
+  outline-offset: 3px;
+  outline: 3px solid #008ccc;
+}