@dso-toolkit/core 99.1.0 → 99.3.0

package/dist/collection/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.js

@@ -65,7 +65,7 @@ export class OzonContentToggletip {
         this.cleanUpFunction = undefined;
     }
     render() {
-        return (h(Fragment, { key: '840d60f374326fc3dd86f9a8554a416bbed111df' }, h("span", { key: '7b54ff0c3b6b57821eb39db76f532aa0348920c9', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: 'a46cd133bfe9bbaecf73422769cca14e9fac8095' }, h("span", { key: 'dc6ca3aea0795605d023ec0e2bc879588e77b6cd', class: "toggletip-label" }, h("slot", { key: '4538271c14d24e289535e3148e2d1b21539ca43b', name: "label" })), "\u2060", h("dso-icon", { key: '1ab4a483bec4ed6aefd700823c54fea94eb2ff93', icon: this.icon }))), !this.icon && h("slot", { key: '1ecf2346bfc5e24e12d1805ec6ffbc726a6ba1ff', name: "label" })), h(Tooltip, { key: '21f230ceea76e90431b1e3cd9aab7ff5ebd78854', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: 'b17af01bde722e752745bdbafce3f06e451217cf', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '22b9640c4bd7208c19115a8644febad417ff01b2' })))));
+        return (h(Fragment, { key: '054b1fc1100947196245910b357fb80c29182c54' }, h("span", { key: 'e3ade161d65fe3322ae0651dae6b529593c60a07', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: 'ba60e0ba165e0bb01781e89c9461bbc0e077ea3f' }, h("span", { key: 'e29b2372fd93624b5a7cc8c5181bb4ca68a5cccc', class: "toggletip-label" }, h("slot", { key: '21e96fe27e6ea3a86f03184f41c36a66aeb1596b', name: "label" })), "\u2060", h("dso-icon", { key: 'b4ab7245c3042967aff5dd4db73075edb751f3b4', icon: this.icon }))), !this.icon && h("slot", { key: '4aa818c5599151181a219b71ae23a8fb4d600e8a', name: "label" })), h(Tooltip, { key: '78420c36405e0076a8c8d8fce22bf866afe8e0ac', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '21a1c7363cc32b4bc8637e7bc28b2ffcd35ba000', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '93e1e8ac4e49b4d28eee9079e78c0369177ed0f9' })))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ozon-content/ozon-content.css

@@ -5,6 +5,7 @@ button {
   font: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
   overflow: visible;

package/dist/collection/components/ozon-content/ozon-content.js

@@ -33,7 +33,7 @@ export class OzonContent {
             annotated: this.annotated,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '9f84987b4c059e17ca3e42856ec35dff55ac560d' }, transformed);
+        return h(Fragment, { key: '1927b2fc3ffe8dfa33268a2ed3a8980b2601b5de' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/panel/panel.js

@@ -15,7 +15,7 @@ export class Panel {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h("div", { key: 'fdcef28b2c5de26f2213133d70a7bba233169e70', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: '103979cf987d46596d5c8b440163bf72e5bb3d74', class: "panel-heading" }, h("slot", { key: '75816074542c74dce6c2142a87f641ea35287476', name: "heading" }), h("dso-icon-button", { key: 'aa89b842cd9159f0a136668b391f7c0e3a97d328', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: '11fe6ce29a384f5bf53fd3ae3e49ac910ba391f5', class: "panel-body" }, h("slot", { key: '10d6c013559e598e027c604eba614707fd0d8423' }))));
+        return (h("div", { key: '67ada8aa839bc1bbf2b2f4287dafa1dd083fa948', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: '5bb094e65e22665d8440bfa5963e447f049c3142', class: "panel-heading" }, h("slot", { key: '3c45923be0acb79a9ae9490c258ba3451d4ed22c', name: "heading" }), h("dso-icon-button", { key: 'dc09ab8819ff3d9dd8ee17ef6cfec58b52ea1e23', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: '58a2bf0c6ac622062d60842303d3648d595e70ff', class: "panel-body" }, h("slot", { key: '04fd70c30319215c827fed78fe3be42a3a76d608' }))));
     }
     static get is() { return "dso-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,7 +41,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: 'a75c69064b86d78983450a7d2292ac0853c4320e', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'e1f0132df6901123050343bd69afaf426bc39db6', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: '52034db203768490b772ab2df50506bf25f06033', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'bd23225ec33b0a93380299dc1a91c34862b83b79', name: "symbol" })), h("div", { key: '4908e9208fd6939cbb1dc7f7255cdca3e0ed5e01', 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: '6000a878476bfcf2dd592cfa09defb077f1d4d0b', name: "meta" }), this.interaction !== null && h("slot", { key: '595030bbbc74ee345ef866fd5949cc80ae880644', name: "interaction" })), h("div", { key: '17b61edfcc78c8af0c438512704d780d850a837a', class: "dso-plekinfo-card-content" }, h("slot", { key: '4d7b8bb3cec6fc0405d58901c2bb64c03aeed8b1', name: "content" })))));
+        return (h(Host, { key: '04a03ddc2aec20e38f7de8a2195a93435e1a1f03', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'c267438b6fdb1f28c5ed8d8a249f97a25134a6bf', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: '48bed56012a2ed540aeee5cc3455b53e11406bc2', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '3f0a73e4b3f6a145c07147b86e64789f532a3f49', name: "symbol" })), h("div", { key: '184289023c49d898a3fba857528c78543d896fa6', 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: '262ed6cc2fcd856ed5c2ad9242a2104b80b75c5d', name: "meta" }), this.interaction !== null && h("slot", { key: '1a3da7c4ac5e66724301e37aa07334d3f07dbaad', name: "interaction" })), h("div", { key: '391825de86e308361ba4496a9dcd885fc1354ad1', class: "dso-plekinfo-card-content" }, h("slot", { key: '5064056cbbfee42319f27e62edf7a0d6dee08fa1', 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: 'd14a202e5409b7d3cc1d0901853678db73fd87a8' }, h("span", { key: 'bb7c1e497d3566256db92bb2a778eaa38221cb97', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '05370257d2a941b3c24fa42b9289aa3eb03eb230', icon: "spinner" })), h("span", { key: 'f4b6963a3d5c9d004b00076873f15b963d696b7b', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: 'e402d0ec2c2b45b293c8f26902934a2793785f11' }, h("span", { key: 'b7ece49dcb89895db3481e434b560d39043e1ba4', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '09ee99d87723c31afe6dbb2c0649956237ee61d9', icon: "spinner" })), h("span", { key: 'a80c70df92ed32cb10dbd723022e299a8bea33fe', 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

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: '447c6d9887401b305eac7c56e2056413b6a7b375' }, h("div", { key: '959949635e952831c815162bb096055ec5d84389', class: "project-item-header" }, h("div", { key: 'b7b829516001abee5de3da5566ad08eca169c98b', class: "project-item-title" }, h("slot", { key: '7f5958491e6a929d3ebdb5df48debab82df24f83', name: "title" }), this.label && (h("dso-label", { key: '9f3546615ab8d5efd12aa0bfeaa771a6cd8ba851', status: "error", compact: true }, this.label))), h("div", { key: 'e44a29b7356e5ee1483727161d163930de5cb9cb', class: "project-item-actions" }, h("slot", { key: '984bd922fc47d18518159a5322e31998edbcf2ca', name: "actions" }))), h("div", { key: '4067852a2ecf49b32806d613db5dd5cca95e4691', class: "project-item-info" }, h("div", { key: '12ac2875146a554dfbdc0923830c8538afb739f5', class: "project-item-progress" }, h("slot", { key: '409dea9404ddc4db683040a0cc1dbcb68cb1f401', name: "progress" })), h("div", { key: 'ed7d7028099bd637539b73b8db834fa37702eb50', class: "project-item-status" }, h("slot", { key: 'a0246bd1d806c19578e9faa1e249b4dcedb9b8ac', name: "status" })))));
+        return (h(Fragment, { key: '51ea303051a8e3ab5e406390872be0dcb7648bc3' }, h("div", { key: '2857e9d69cfe614abc8a0c8e8c6b62ad0f350a04', class: "project-item-header" }, h("div", { key: 'd203ee91ffe4a45dabacc80697e6f93fbe7220c3', class: "project-item-title" }, h("slot", { key: '509814470a58601a8fa0851c2fec38f3ad74d990', name: "title" }), this.label && (h("dso-label", { key: 'a38f0be207e4d31fae870f10bb04534c88f9e58e', status: "error", compact: true }, this.label))), h("div", { key: 'a08754ab2b09bf45977d977999cea844c9f75ccf', class: "project-item-actions" }, h("slot", { key: '702756f5fe1746d325027b0993ee18b3d2bc624a', name: "actions" }))), h("div", { key: '53d5ebd9895697b6e1227b26e4461b3c9830221c', class: "project-item-info" }, h("div", { key: '1140f2c0c8b3ef5c7bca5bddf1a2c430bea57ab9', class: "project-item-progress" }, h("slot", { key: '564f3e4d3eb5ba3bb8f98bce6603798b3ea28b04', name: "progress" })), h("div", { key: 'e20ddc7a8dc4fbdb60bfd2278b27b7c89c020fa8', class: "project-item-status" }, h("slot", { key: 'd8ac3b2df80b4cc24ff3f011b66b64108d0bce6b', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: 'dc322c03eda44d435029f593ab4cf45d106dfb73', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '845f84ad9f2ba2177e06fce1ee24b40cb36e6b02' })));
+        return (h(Host, { key: '8810a98831ec68281fdb4b932207a58a6cdb63da', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'd9605668d6f91bba83aeb69abadf099387d7c72f' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,6 +42,8 @@ export class Scrollable {
             }
             this._setScrollState();
         }));
+        /** @internal Prevent the dso-scroll-container from receiving focus */
+        this._preventFocus = false;
         this.scrollPosition = "noScroll";
     }
     /**
@@ -104,9 +106,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: '6ad01a54cb6214f0387b154412d0fd820a660080', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'a6c59257fa530ae92b744d8078277ff4996b72b8', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '39886c77763609df1091051fbb068bf85e46b50d', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'd68080f2402ad6fa0f002f791efa7500206a3668', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'ea4d750205a487814b040d2797c5026a7e8ce298' }))));
+            }), onScroll: () => this._setScrollState(), tabIndex: this._preventFocus ? -1 : undefined }, h("slot", { key: '459ded76d0d5876c6fe5d326da81dd901a5f9e25' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -120,6 +122,33 @@ export class Scrollable {
             "$": ["scrollable.css"]
         };
     }
+    static get properties() {
+        return {
+            "_preventFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Prevent the dso-scroll-container from receiving focus"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_prevent-focus",
+                "defaultValue": "false"
+            }
+        };
+    }
     static get states() {
         return {
             "scrollPosition": {}

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

@@ -15,7 +15,7 @@ export class SegmentedButton {
         });
     }
     render() {
-        return (h("div", { key: '97f901e92ff416f68bf272804a877bb571eeb97e', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
+        return (h("div", { key: 'f5177c3667563f988ee7325755871f6e1af4d2ee', 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.js

@@ -48,7 +48,7 @@ export class Selectable {
     }
     render() {
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '19b7b689cc40ce3ec7986b66e05f8b479c74d8f3' }, h("div", { key: '73d7886eee0da5d7f20c25388b04f14772256476', class: "dso-selectable-container" }, h("div", { key: '99f700718a7ecd57281a042e1b35c97865020de0', class: "dso-selectable-input-wrapper" }, h("input", { key: '82b1ddf180b11ba068675ced5ccd9f8cc08407cd', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "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: 'ee874565f8085d415e6279032663d48c831099f6', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '28f5df3a32933933c288a5dbb6004178ea7c3c88', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '8ed3760a79fa95902bf24898641ff1a92a83ef12' }, h("slot", { key: '4e1124ed873ec37839bfbbaf6831c14779da6c4c', name: "info" })))), h("slot", { key: '0997d1b15deda5753418e1073acf15003d3c1273', name: "options" })));
+        return (h(Fragment, { key: '95f3d9e70e5e84af47aaeb22717b24e512f60b69' }, h("div", { key: 'b476892628f8d31b7d7c02943b176d4556fdfc3d', class: "dso-selectable-container" }, h("div", { key: '34a9f1229fc3dfad9680fed68e96a8cde4462d0d', class: "dso-selectable-input-wrapper" }, h("input", { key: '63bbaf3a1c42c4cf7a5ea5096b947d7b61d2e01c', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "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: 'af36de898ee7482871fb01d6d9efa21f0eb5d500', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '40624e717f271af06aee5ba7fc5d272483929750', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'ffa7a4635c7334676988c52e48d5c7960a38f62a' }, h("slot", { key: 'f47c40ef36bb8b84ef55de6cdcc80a9f50b17e0a', name: "info" })))), h("slot", { key: 'a72b777da30dfbea0124a3b75adf0280128dd0e5', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

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: '99088e9ff4a1eb24a73acd28a71631a492489e40', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '9c7bcee7a86e7b996172a69fd87755a867ffdac6', icon: "chevron-right" })));
+        return (h("a", { key: 'e12cfaf0004c50f66121104c124548082d521a8c', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'da2e4f459b2ceb176fa8f88484943b3a00809246', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, { key: '41c810bdf439f37f13a74b42bb5bd66209408bf7' }, h("button", { key: 'c7c3a43e80543fdd1eace6ec9602d4d32a7762ee', 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: '1c755fb16ff775fddbd929ed99e9deb6ee5985cc', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '2c9ac43ead1447e1a765e5343ad01ae95228f52d', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '38441c37affcedbc173d866af8406972957332d9', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'bda97311ec5deebf3a8baeceaac9382e5ca0b1bf', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '546db33855ff3a79a86b14c42737b2b935c624ac', htmlFor: this.identifier }, h("slot", { key: '857e3dd92783a8a36d66d39aabe2879b7b8fced7' })))));
+        return (h(Fragment, { key: '7291becfe58cfdec1c9e21a50eef04b5dff72339' }, h("button", { key: 'c42b7de446e15d26d311e8e2b85bd61afacf0137', 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: '93cebbaa53dd978b48ba60863749856f03a5204b', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'fac4d1de935a905682dfc2b7ac3800c81c012881', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'd40be60369da898f6cc08813bc97326959affe31', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '9d57223f2aa69d6e1b739c650afe34bdaae4c32f', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '4542bb62c22b73aac39bf2e87a740e8d77d43780', htmlFor: this.identifier }, h("slot", { key: '1110114d4b96e4f9b87182bc7b8cc4805d07705d' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -443,6 +443,7 @@ button {
   font: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
   overflow: visible;

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

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '5a4099fc5d6ce14b20b587d8e62bfc11918b6d86', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'f03325417ab807016ccefcfa24a4da835f4dbb68', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '6ef7c26ffde99057fcf886ef0316788127d420d2' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: 'eb8514e4cc4e89bc55c49d0976a9c3ecf653efa7', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '68fea48419eac3912dc30ef73949aaa832c1a871', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'fca067c067668615de7808598625480acb9b2eaf' }, "Heel moeilijk"), h("span", { key: '51a76e96cba6667434b244244a02c5534b8d4f03' }, "Heel makkelijk")), h("div", { key: '9d6477945ef3676a2b5b083546aa896c59c9bac6', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '6ca6b26ed474a78d633d09e35804b79f9d63b3d9', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'df15ccd200b3cf97986061649d30cf0c29eacbcf', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'aa873e2a3a66edd83cb2201b4b67a6b870ae7cf7' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: 'f06e716b611998ee3041b120e3ab9bcc2ac9daa3', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'f776d80c9821095bc2d57c473ca41067ed337040', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '8a5c8731ebe09e5304ca55d41d2f56dd730a9152' }, "Heel moeilijk"), h("span", { key: 'ed77602612e229c6297192d74ce1bd54663b4b53' }, "Heel makkelijk")), h("div", { key: 'b056b09f7d8d371ffd5dc4db9e605680befa4d4b', 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: '659e0df5fee571799ec9bf0a56dff2ea909b871c', type: "submit", class: "dso-secondary" }, h("span", { key: '4062e16418955a900706e9d98fc653b1fbc70dd8' }, "Antwoord verzenden")))));
+        })), h("button", { key: '01f22023d3f1b066b6d6707cc7fc6185e2263cad', type: "submit", class: "dso-secondary" }, h("span", { key: '2dd146d805c4f096cc0a25f264e4b2fd7d9b197c' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,6 +5,7 @@ button {
   font: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
   overflow: visible;

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

@@ -46,7 +46,7 @@ export class Table {
     render() {
         const caption = this.host.querySelector(":scope > table > caption")?.textContent?.trim();
         const dialogLabel = caption || "Uitvergrote tabel";
-        return (h(Host, { key: '002a89f3ef0418d8833d15c5b3fbf7c8718f46c7', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '96e3812f62c4a2dc1a08b9e54c525b08a0c71a5e', 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("button", { type: "button", class: "dso-tertiary open-modal-button", onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption ?? "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" })))), h("div", { class: "dso-table-body" }, h("slot", null))))));
+        return (h(Host, { key: 'a95e11e99ecccb0a19db29df6bb54ade6dd5732c', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '232ede1b0f1a58f9801c50652def10551c6641b4', 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("button", { type: "button", class: "dso-tertiary open-modal-button", onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption ?? "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" })))), h("div", { class: "dso-table-body" }, h("slot", null))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

package/dist/collection/components/tabs/components/tab.css

@@ -62,6 +62,7 @@ a:visited {
 button {
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   background-color: transparent;
 }
 

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

@@ -60,7 +60,7 @@ export class Tabs {
         this.mutationObserver?.disconnect();
     }
     render() {
-        return (h(Host, { key: '4a44a3f5b4183fba668eb37e9083bb71866aef9a' }, h("div", { key: 'cbf2e18cc35725d846549d557bead0d8133a278b', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'cafbccebd54d9ec8002b5595fc02b0d3a11a5471' })), h("div", { key: 'a86c75fc090ae36b4fcae2b8ff9cb4433cbca18b', role: "tabpanel", tabindex: "0" }, h("slot", { key: '83ed8f4078f347d8a43682cbeca57a52a996be9c', name: "panel" }))));
+        return (h(Host, { key: '3c676d294bdb129c9321902ff081954c4551bc12' }, h("div", { key: 'aeb78fe7afdad4e4c4217eed202c50a3eb770a29', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '41bcc4eecb74bd8b5fd873ab59efd891e643bd67' })), h("div", { key: 'c17061b7b3e98161610b1e666ee0c6a0a1b3e27c', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'e45b459c3a90976f90bf7b24f5f86a27fa83ebe2', name: "panel" }))));
     }
     static get is() { return "dso-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class TijdreisBanner {
     render() {
-        return (h(Fragment, { key: 'ef5f6d647c3998d1bd562a904470710e1bbb1177' }, h("dso-icon", { key: 'af96dc3009774785a74fe60fe71271f3d30b4c6d', icon: "clock-outline" }), h("slot", { key: '92be636223afd77de6f5ec34ff2b9761961a18c6' }), h("slot", { key: '6113c5ba3be8f56779da8548e8153dbdd0f70e59', name: "button" })));
+        return (h(Fragment, { key: '3b509399cb18265b87630898b9b7f875f4585c85' }, h("dso-icon", { key: '6fcf4915bcab665a27ef1a3cefeb89f692b22d4b', icon: "clock-outline" }), h("slot", { key: '38ab4337882a2b43b5d6a09643b18ca2239f196d' }), h("slot", { key: '13be4d3ee34a92b4595f251069950ee1ac62bb68', name: "button" })));
     }
     static get is() { return "dso-tijdreis-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -186,7 +186,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'd2293d3a4c732b2baf750ae941d5c9589202afe5', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: 'a31be198ba1b8972ea5b1b85569294b8bb6f08c8', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'e9394ee672085986caf5b2b67f859e95bb449ec0', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '9aa15980b1cb905cb5cff9e5d70e6d8423c1985e', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '91d6af37985c5d236633bd92484d50a30cced3f6' })))));
+        return (h(Host, { key: '6f0adb2c86ef41db812225635aaf4572a9b66ee3', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '608e0dabdd84836113adb9b7f7fb6e216d748d05', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '69e082b52547d254f1d183ea9fc72b63667b2b3f', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '7d17b7f5d9711e6f055d644c3082bbc0df74830d', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '49ee9aa97a61c765a296b58ace247aac181c0841' })))));
     }
     activatePopper() {
         this.hidden = false;

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

@@ -170,7 +170,7 @@ export class TreeView {
         return false;
     }
     render() {
-        return (h("div", { key: 'ad891987ac4fbf1120c72bf99baf49065b027d1a', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: 'ee5eb8e7c3fafc0474e611e0472fa1c7353042d1', 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: 'f2a4a8eefce8c9a30941491babe5de9693b0c45d', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '8f0575f2b75c1f273177987ca4692fe64878274e', 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/viewer-grid/viewer-grid.css

@@ -20,6 +20,7 @@ button {
   font: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
   overflow: visible;

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

@@ -163,9 +163,9 @@ export class ViewerGrid {
         }
     }
     render() {
-        return (h(Fragment, { key: 'd3e07bfe359bdd209b2437fedeb942b56f07a92c' }, h("slot", { key: '327ba98ac9d4b068e831cfffda6ded0fab796e39', name: "top-bar" }), h("div", { key: '1034f0a63b6119227d15d9003646e44e47afddf9', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '7eb4e4d09cfdeba61f864be816ebe4814d2e4748', class: "dso-navbar" }, h("ul", { key: 'c76b58643ea1b17f581fbd665303a7d2a2525e79', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search") || this.print) && (h(MainPanel, { key: 'a14e194bf2736726d8c870011301f8ce4fcbc32d', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: 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: 'e77020813df59dea58c92c0db08a9fcea8bc8548', class: "map-area" }, h("div", { key: 'd521ad8995d0bec6f4ac83558bfa7933904375b1', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'a02dfd3c7f645cb99719fecb41f1b021a5feee48', name: "map" })), h("slot", { key: 'becd3ff545ecdebf3cc4da79d98bdf6a19fcb8e6', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
+        return (h(Fragment, { key: '16cae7711656255b0992b78cb1f41509e867713c' }, h("slot", { key: 'cbd3beeed3f6f74d7d0bf756c33ef606db038fb8', name: "top-bar" }), h("div", { key: '2f3a4b4491770671c947e42a1451c68bd66e318a', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: 'b6ccffe3fe51911b3959fa1004f0861f333086d9', class: "dso-navbar" }, h("ul", { key: 'bfab17de5e24c41135941e111af897f5e69d8f0c', class: "dso-nav dso-nav-sub" }, viewerGridTabs.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: 'a2541b32db8acaa908f4687eec9264feea61cfd7', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: 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: '3f491a1d03aba112a9028078c00548a9da752065', class: "map-area" }, h("div", { key: '2fa11d4c920cdb1a32bcadffc5b80c8d7687fba0', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '6c12662d360dbe3309ee70c7dc1371ae612e14c4', name: "map" })), h("slot", { key: '8ce32d8e578d8c6371bb968f66b8aaf880a2b270', name: "legend" }))), ((!this.tabView && this.documentPanelOpen) ||
             (this.tabView && this.activeTab === "document") ||
-            this.print) && (h(DocumentPanel, { key: '68708e1fdf9e58ff0fe8971ebbca4bd2bc221d47', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'f822233e592af9c820438a82263baf7b114c03a3', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+            this.print) && (h(DocumentPanel, { key: '96449f71d3438b2288aada97980ede0d0c2f069d', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'f66a95abaec46655244a5228f17682c7dab3e6a2', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }