@dso-toolkit/core 94.0.0 → 95.1.0

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

@@ -10,10 +10,12 @@ export class Selectable {
         this.infoActive = false;
         this.fallbackIdentifier = createIdentifier("DsoSelectable");
         this.handleOnChange = (e) => {
-            const { target } = e;
+            const inputTarget = e.target instanceof HTMLInputElement ? e.target : undefined;
             this.dsoChange.emit({
                 originalEvent: e,
-                checked: target instanceof HTMLInputElement && target.checked,
+                checked: !!inputTarget?.checked,
+                name: this.name,
+                value: this.value,
             });
             forceUpdate(this.host);
         };
@@ -46,7 +48,7 @@ export class Selectable {
     }
     render() {
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '5410abfaf50d7322265385857e2f12344bb492af' }, h("div", { key: '06bdebb73196de12c6298be11e60b98e7e6bd135', class: "dso-selectable-container" }, h("div", { key: '329560e74e007d57a3ffb63d2d6ad758323c3887', class: "dso-selectable-input-wrapper" }, h("input", { key: '86e9e64b27464689f78a16b3cdc7939f9f2a8af0', 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: 'a23c9b19cac577d5e7e8f82eb3e42b27dcd767c9', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'c1148c96b99875608bac0dbf1e0eba04134216c5', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'bbae1e175d6dc0cd1fa18500f2c8579dd06a42e9' }, h("slot", { key: '6c3bbf1ce3f5005450ab8794d4de2827a2885185', name: "info" })))), h("slot", { key: '383aa686357ecc4c1e8e222fd629864e7c07a97f', name: "options" })));
+        return (h(Fragment, { key: '3d98b23e1aff2b9d87f491373a236c4d3c4d6506' }, h("div", { key: '8b2c1a74048ebae12bde50719593f4dfbdcae3dd', class: "dso-selectable-container" }, h("div", { key: '43098a94f1b95ccc8f69b4e8f2c60f99eb283229', class: "dso-selectable-input-wrapper" }, h("input", { key: '7c0a0d708184b5aeda327e52ffa03872b1c248d9', 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: '53e497962ec33ded495671181f858baada63b3b3', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '0ad6f2f0c18725cd84c42879c5fa9fd0a38f0000', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'b70e5c5e7682a0face7d7f8225af88d32285dd6f' }, h("slot", { key: '4b66be88a0dcef32606a12707ac4dd3ae16d53ee', name: "info" })))), h("slot", { key: '3c3e9d3b63d567be2d000732ab7f8bc826466ec6', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {
@@ -132,11 +134,11 @@ export class Selectable {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The value of the Selectable."

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: '6272ff4ac153043a24cce71e4eb873f572ea532d', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '8986359d60c02746f4f0fcf37d869fb3fe79aecb', icon: "chevron-right" })));
+        return (h("a", { key: '4bbe2beca1e700b7c9c690751ff7383cbd32eb22', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'fd89fa4d570b5902cd443646e990699bb54c18f8', 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: '50edc998dadf5520c4535be2041ba83c82a2e5a5' }, h("button", { key: '5533a3d6b6d4563844540d1b74cf071e9cbd5e8c', 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: 'd4f1835fb09009d124b82a4d5f0a275414fb9096', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '6cd505236a332bd7a5189f7bc48cb01111c197e1', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'bcc074eb2642b202018bcb56b7fe70640e8cd903', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '4c991ff3fe274158b4aff20fa49f4a276b268145', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'b66498ac0e40ceef29deeb7439c9626d361cd924', htmlFor: this.identifier }, h("slot", { key: '9a4ea064380ce3364b0935eb8fea28101c92f2cc' })))));
+        return (h(Fragment, { key: 'e874372b9924ff9fde733d5e3018a7aef3d9ff3e' }, h("button", { key: '08f03b06692ec0339e47373293425b0c987f9064', 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: 'd866e732368bdadc59b12c378e319a54e17ed77a', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'f8a9f05a98b948caa99418d55e87df39c1ac4cef', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'bb9bb4da86533006b4a28ee46e637ec2de849884', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'becff9d37908c63ed3bf72f2e4557473f33864be', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'e15e27c77547bf587af1a206504ec72840238d0b', htmlFor: this.identifier }, h("slot", { key: 'e412f82c66edc0c1870bae53ab9bc8619a4f1709' })))));
     }
     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: 'acafdfc063471b8d84bbf88eb9d6a63523fb1a2c', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '33aed8858723743e671bf05da4ccac6d77b75adb', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'f257dac855e12e6c2a2cc0cd32dd010a0a094697' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '0cc8da20b5a63dac3a081edfa0384e32580a7555', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '45e9ded430e3f630e8c59576d3277b30b0bce35d', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'a1f5eadf1c4ffd790e0e10a957747a3343f8f90f' }, "Heel moeilijk"), h("span", { key: '792b1e46f56c0bc574caf54bf37b6cd16a528cda' }, "Heel makkelijk")), h("div", { key: '50781e609bf9501d2f60cc6bf21042afeca91d62', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '886a7873e55563734f1f92bbc16acda7444c3fd5', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '1322fbf91f68d407b780874718426bce6f85a84f', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '8476d2c687efb7e123fa68647a36816a890c1d6d' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '2d19c6840a218db161201403d416f308823a95e1', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '89ae14ee04ca0180e4491030cf2cae5d0e128c65', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '1a97088de2e8e5b124e1a034e173ef23aeed3395' }, "Heel moeilijk"), h("span", { key: '53c3a2d92e833254faa16955b835d29417309fe7' }, "Heel makkelijk")), h("div", { key: 'c5b5b9bc780ddcfde1349a8cf92dd3fc72bdd37f', 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: '632969c59d644db477d89fa40bff566356a159e3', type: "submit", class: "dso-secondary" }, h("span", { key: '8b603a6816f662842d84f6e0f3952ff0911def27' }, "Antwoord verzenden")))));
+        })), h("button", { key: 'b5d82b6b382a2c7bc376aabc460e9b9d83e0de0c', type: "submit", class: "dso-secondary" }, h("span", { key: '7bceeca13f9a7f589b32ae456cb1671b30d3e1c0' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

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

@@ -659,22 +659,6 @@ button.dso-tertiary.dso-extra-small,
 label.dso-tertiary.dso-extra-small {
   padding-block: 9px;
 }
-a.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
-button.dso-tertiary dso-icon:has(+ span:not(.sr-only)),
-label.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
-  margin-inline-start: -8px;
-}
-a.dso-tertiary span:not(.sr-only) + dso-icon,
-button.dso-tertiary span:not(.sr-only) + dso-icon,
-label.dso-tertiary span:not(.sr-only) + dso-icon {
-  margin-inline-start: 8px;
-  margin-inline-end: -8px;
-}
-a.dso-tertiary dso-icon + span:not(.sr-only),
-button.dso-tertiary dso-icon + span:not(.sr-only),
-label.dso-tertiary dso-icon + span:not(.sr-only) {
-  margin-inline-start: 8px;
-}
 a.dso-tertiary,
 button.dso-tertiary,
 label.dso-tertiary {

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

@@ -23,7 +23,7 @@ export class Table {
     render() {
         const caption = this.host.querySelector(":scope > table > caption")?.textContent?.trim();
         const dialogLabel = caption || "Uitvergrote tabel";
-        return (h(Host, { key: '2fe24a3a4ef9884afc25e5bb36f0e5f19a5173f8', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '701e3c1c18a073857dea5070b3a9844b96ca305f', 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: 'db1c75206b568297a2b6371a470baf2bd3ac0a0b', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: 'a2c8226b04cacd8745f4ad3df29dac7f2fff5a40', 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/tabs.js

@@ -60,7 +60,7 @@ export class Tabs {
         this.mutationObserver?.disconnect();
     }
     render() {
-        return (h(Host, { key: '349c801fdadbfd077ca6cc68f5d1f48dea0d4ff4' }, h("div", { key: '1413312c78b126135b10295690aa957d99304acf', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '3b4cbf35c3d29ba1f6158853d755335dd8a05b5e' })), h("div", { key: '95e97aa712722fc019bbf1578dfb1c6224ecebb5', role: "tabpanel", tabindex: "0" }, h("slot", { key: '305195dcc64770963bb740d64c5cc0d08f0c16bc', name: "panel" }))));
+        return (h(Host, { key: 'eda4f3cabd4f4a373ebf5e5b2fce9c5a336f4680' }, h("div", { key: '445a0b6a745a1f45eca44ca59def6f4557904748', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'd344d2c68cc0bd6d0abbea591a7ffa22b17dbdf7' })), h("div", { key: 'c17a1774b3cf81c30e07c0c8446f05d8a6e86b95', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'c32d940c2e5fe01b67919d7253bb5d2666146f6f', 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: '18bdd5a23ce800c978c9bd615b2938bfb6d7433b' }, h("dso-icon", { key: '4024b551cf62594af15b8ba69146a12cd473f1fc', icon: "clock-outline" }), h("slot", { key: 'dd60e4e49ffec85d82ec60990bbaf117a732ca77' }), h("slot", { key: 'd54e0d89bec8d710060a0289e81cfab7478ec46f', name: "button" })));
+        return (h(Fragment, { key: 'b65c1136049ad6b7918279ca9fa86a121a3a7229' }, h("dso-icon", { key: 'd43d86fe908ab5e18cb8a0c9f0250581df87cd69', icon: "clock-outline" }), h("slot", { key: 'cec5c61d9cb0607709a4c91ff4002096b2b5beca' }), h("slot", { key: '7593a8ee780a5223cfd95e94b89a515e64a96596', 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: 'e135617ff5cdcd407ab621c5d2817c3880ea5ec0', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '8300e1d5dbe8bc049ebfda3003cdca9669972bcb', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'fb62658d4a18bd6f393581bc90377593d1a15406', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '7a0d1b88e34212976d924c1cd45a8cb40fd545dc', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '3f9a2930c20e9daba63542f37b08b236ca36b527' })))));
+        return (h(Host, { key: '9a75836090377cb7879137ee38c035fa26cc80bb', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '052ac3644a784807e9ae1f4cdff9768c2c963ea5', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '7fe84463e825db6555683ec5ec67cb3379c5e597', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'f6d16f4d5f3a8cb1bd32df5f1648e70e286210c7', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '75b902c9d43ca01c48973c5043cb55a387c292f6' })))));
     }
     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: 'f6f6832d0613dcb1eb30f1170cc848e5dd5a47f3', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: 'aaea2cfc733ff714e907758e41ea31fa2f460b68', 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: 'e90b2994f145f8ac781f67f53e1f65859dce9ef4', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '1f84ee285eb80bbb485c147bbd3f32de2e324e9c', 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

@@ -203,7 +203,7 @@ button::-moz-focus-inner {
   }
 }
 
-@media screen and (min-width: 808px) {
+@media screen and (min-width: 1032px) {
   :host([main-size=small]) .dso-main-panel,
   :host([document-panel-size=small]) .dso-document-panel {
     flex-basis: 375px;
@@ -211,7 +211,7 @@ button::-moz-focus-inner {
     max-inline-size: 375px;
   }
 }
-@media screen and (min-width: 808px) and (max-width: 375px) {
+@media screen and (min-width: 1032px) and (max-width: 375px) {
   :host([main-size=small]) .dso-main-panel,
   :host([document-panel-size=small]) .dso-document-panel {
     flex-basis: 100vw;
@@ -220,7 +220,7 @@ button::-moz-focus-inner {
     transition: none;
   }
 }
-@media screen and (min-width: 808px) {
+@media screen and (min-width: 1032px) {
   :host([main-size=medium]) .dso-main-panel,
   :host([document-panel-size=medium]) .dso-document-panel {
     flex-basis: 624px;
@@ -228,7 +228,7 @@ button::-moz-focus-inner {
     max-inline-size: 624px;
   }
 }
-@media screen and (min-width: 808px) and (max-width: 624px) {
+@media screen and (min-width: 1032px) and (max-width: 624px) {
   :host([main-size=medium]) .dso-main-panel,
   :host([document-panel-size=medium]) .dso-document-panel {
     flex-basis: 100vw;
@@ -237,7 +237,7 @@ button::-moz-focus-inner {
     transition: none;
   }
 }
-@media screen and (min-width: 808px) {
+@media screen and (min-width: 1032px) {
   :host([main-size=large]) .dso-main-panel,
   :host([document-panel-size=large]) .dso-document-panel {
     flex-basis: 60%;
@@ -245,7 +245,7 @@ button::-moz-focus-inner {
     max-inline-size: 1024px;
   }
 }
-@media screen and (min-width: 808px) and (max-width: 768px) {
+@media screen and (min-width: 1032px) and (max-width: 768px) {
   :host([main-size=large]) .dso-main-panel,
   :host([document-panel-size=large]) .dso-document-panel {
     flex-basis: 100vw;
@@ -254,7 +254,7 @@ button::-moz-focus-inner {
     transition: none;
   }
 }
-@media screen and (min-width: 808px) {
+@media screen and (min-width: 1032px) {
   :host {
     display: flex;
     flex-direction: column;
@@ -294,7 +294,7 @@ button::-moz-focus-inner {
     margin-inline: auto 0;
   }
 }
-@media screen and (min-width: 808px) and (max-width: 1031.99px) {
+@media screen and (min-width: 1032px) and (max-width: 1031.99px) {
   :host([filter-panel-open]) .dso-main-panel {
     margin-inline-start: 380px;
     max-inline-size: calc(100vw - 380px);
@@ -304,7 +304,7 @@ button::-moz-focus-inner {
     inset-inline-start: -380px;
   }
 }
-@media screen and (max-width: 807.99px) {
+@media screen and (max-width: 1031.99px) {
   .dso-navbar {
     min-block-size: 32px;
   }
@@ -322,12 +322,12 @@ button::-moz-focus-inner {
     margin-inline-end: 8px;
   }
 }
-@media screen and (max-width: 807.99px) and (min-width: 992px) {
+@media screen and (max-width: 1031.99px) and (min-width: 992px) {
   .dso-navbar .dso-navbar-toggle {
     display: none;
   }
 }
-@media screen and (max-width: 807.99px) {
+@media screen and (max-width: 1031.99px) {
   .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {
     margin-inline-end: 8rem;
   }
@@ -509,16 +509,6 @@ button::-moz-focus-inner {
   .dso-tertiary.dso-extra-small {
     padding-block: 9px;
   }
-  .dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
-    margin-inline-start: -8px;
-  }
-  .dso-tertiary span:not(.sr-only) + dso-icon {
-    margin-inline-start: 8px;
-    margin-inline-end: -8px;
-  }
-  .dso-tertiary dso-icon + span:not(.sr-only) {
-    margin-inline-start: 8px;
-  }
   .dso-tertiary {
     border: 0;
     line-height: 1;

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

@@ -13,7 +13,7 @@ function isDsoViewerGridComponent(element) {
     return element.tagName === "DSO-VIEWER-GRID";
 }
 const buttonWidth = 40;
-const tabViewBreakpoint = 768 + buttonWidth;
+const tabViewBreakpoint = 992 + buttonWidth;
 const minMapElementWidth = 440;
 /**
  * @slot top-bar - Een slot die bovenaan de viewer over de hele breedte kan worden gevuld met bijv een banner.
@@ -155,7 +155,7 @@ export class ViewerGrid {
         }
     }
     render() {
-        return (h(Fragment, { key: '26275e4bd63ea9988a40dd30a06e35d8f84aee18' }, h("slot", { key: 'a6a26816f3c7354ca20e689d66a1f7f34ca0ca28', name: "top-bar" }), h("div", { key: '80a5bec1d9f4046a37386a06dd869df34d60a694', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '1219d573f9c161bda5dabbdcc42e9da2a1b3da6f', class: "dso-navbar" }, h("ul", { key: 'f1773d2c30d5233802dce6b786c9a70d0bf9532f', 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")) && (h(MainPanel, { key: '584b42ba1c23e38b2ff05149a05ac223eadcd837', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: '4898758cd63336f2be1cec62ba8940d375b329a4', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '42bc78262e2bcb6641c6603c8f8c0ee766a7c8c8', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'a1abef1e962e95fd325b33dd0d5d6c96f9d4a347', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '4ec9cc86758ad75f846a868e968975d520d98370', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'f4838336213eb44a98a08678606ea0e865edf6e7', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+        return (h(Fragment, { key: '107327f469c7793fd1fc1c90b0367936ded7c88a' }, h("slot", { key: 'a6139fd224901aefc82e551f30f38f237168a29d', name: "top-bar" }), h("div", { key: '5c92640e25e5ef42f86bcef3e00b1b521cbd4293', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '9172291d20e7e758fb4e53b054617169602c36e0', class: "dso-navbar" }, h("ul", { key: '40f1a4bdee9491b38799d010053482bd7b48ab99', 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")) && (h(MainPanel, { key: '306084b98dc9ed3e4400cfd9f6ab30b7cef2a374', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: '425c35dd78e48924d9f61308ac10744d206a9074', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'c9a9d4d612b592bfe5d8d3aa8266a89771a1b4cc', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '162a97b0413668dfe6020a427c0523f8fae87fd6', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '678ac7f6c01a58c157c8e9337d2740e00590f0b8', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'c7adca136159a2810210f51c7a09381b38452b29', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/i18n.js

@@ -21,7 +21,6 @@ export function i18n(getElement, resources) {
         resources,
         defaultNS: element.tagName.toLowerCase(),
         interpolation: { escapeValue: false },
-        showSupportNotice: false,
     });
     let detectedLanguage = false;
     return (key, variables) => {