@dso-toolkit/core 83.1.0 → 84.0.0

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

@@ -50,7 +50,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '5ef7f04fc52d56058cfb83f2cf7f38ee2aaa514d', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '86a0e087b6e22898e7e0ba95c5a87066dce35840', wijzigactie: this.wijzigactie }, h("div", { key: '499a0c1c2664447f632377363d1979cc096d912f', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'b7fa148ff184f4d27daf08be8836e57cdb9c89b5', name: "symbol" })), h("div", { key: 'bd54a1896341a6daf78e419d1e22945ba585be22', 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: "icon-container" }, 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" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'c944131256aee248600ae0c4cb3c3fe28e8c8de4', name: "meta" }), this.interaction !== null && h("slot", { key: 'a7a47b50626fa6082043f2b7e4b084cd94717732', name: "interaction" })), h("div", { key: 'd8ec5b6c520ef1b921360764407301c2b21f6065', class: "dso-plekinfo-card-content" }, h("slot", { key: '8937b99ba8bf6238cfc28abb12fc94ef704bbe7d', name: "content" })))));
+        return (h(Host, { key: '6aaecfcce7d84584571fbbb40b79d143ac79779e', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '0c22b39580fead2392e72641345329588ef18e91', wijzigactie: this.wijzigactie }, h("div", { key: '8b2882c9a98c2f75a5c64a2058fc2be6496b4623', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'b967d6a1c7abcd6e5bf3d535bc3645306e931f88', name: "symbol" })), h("div", { key: '66efb9d7642e6a6a77c8bef9413b06e36e59a7a5', 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: "icon-container" }, 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" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '448d3c56d45cd086f86495fa91a5c867fa70ed15', name: "meta" }), this.interaction !== null && h("slot", { key: 'b753670011c4628c188a069b18cac0daff756836', name: "interaction" })), h("div", { key: '36994c07c528b9d80f7825fc1bdec22626c82098', class: "dso-plekinfo-card-content" }, h("slot", { key: 'dc8ae54f969a6d49adb536daf9b934752512ad11', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -68,7 +68,6 @@ export class PlekinfoCard {
         return {
             "wijzigactie": {
                 "type": "string",
-                "attribute": "wijzigactie",
                 "mutable": false,
                 "complexType": {
                     "original": "PlekinfoWijzigactie",
@@ -89,11 +88,11 @@ export class PlekinfoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "wijzigactie"
             },
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -108,11 +107,11 @@ export class PlekinfoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "href"
             },
             "targetBlank": {
                 "type": "boolean",
-                "attribute": "target-blank",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -128,11 +127,11 @@ export class PlekinfoCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "target-blank",
                 "defaultValue": "false"
             },
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -147,7 +146,8 @@ export class PlekinfoCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "active"
             }
         };
     }

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: 'fe3ed32cb40c637e15a60fe52108652e6210c6e1' }, h("span", { key: 'e0882cbbb4eb0a6c6a753c058cfcb3dd6d9b474c', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '1414aab51a8ba1658526aa1c1c9f314bbe499dc6', icon: "spinner" })), h("span", { key: 'b36ce3620fe5035d55c111af9d511affab06cc9e', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '2e428774d55f0e4cde46d20b97f67b371a43f30e' }, h("span", { key: 'edb218f5d97b7abfe0576dda047975cbef17f1ba', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '5fcb04209e9039db06efb3b3cb4017ae78c91d03', icon: "spinner" })), h("span", { key: 'b4870d9ec95a61b18310f76dd84e37bc24d152b7', 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"; }
@@ -24,7 +24,6 @@ export class Progressindicator {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -39,11 +38,11 @@ export class Progressindicator {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"small\" | \"medium\" | \"large\"",
@@ -58,11 +57,11 @@ export class Progressindicator {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "size"
             },
             "block": {
                 "type": "boolean",
-                "attribute": "block",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -77,7 +76,8 @@ export class Progressindicator {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "block"
             }
         };
     }

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: '8228a048a78405da3a40fd877144f71ee6b3a792' }, h("div", { key: '3a293d639e56021f92b0b9afcb7f4fac2af148fc', class: "project-item-header" }, h("div", { key: 'c3f722c3d10810fc4b1bf533aab80fcf7a762131', class: "project-item-title" }, h("slot", { key: 'e96a0219db04ffe53499a80d83b668953418bbb8', name: "title" }), this.label && (h("dso-label", { key: '9264283168d6b878426dd3d5ddd143bba4c3c82b', status: "error", compact: true }, this.label))), h("div", { key: '9043376e7bac186caf20529887901e150163ff40', class: "project-item-actions" }, h("slot", { key: '2aa279b874905b79bbc8dc1608e5c09fa8cd4ce7', name: "actions" }))), h("div", { key: '2bfecdfd0023cd8f9abe64d62fbc802ad72f35c1', class: "project-item-info" }, h("div", { key: '717e7993e6f0dfbb77961870ed28d7782e94393b', class: "project-item-progress" }, h("slot", { key: 'ac2830d161e2f8f516737f6099946aafa242ce31', name: "progress" })), h("div", { key: 'fa354ecee575ad7095f57519eeb2a284c1a37d9f', class: "project-item-status" }, h("slot", { key: '0db06b8abb6b43253bea3348a438a1c492cd09c4', name: "status" })))));
+        return (h(Fragment, { key: '6b39c617b40770b3076b70b5b63aa93e95829134' }, h("div", { key: 'daa1d7bd80cfbfeaf3b6fdb9ffe549c48f8db464', class: "project-item-header" }, h("div", { key: '57da35b5b40e040282cf9c97ac6888ecb2c79496', class: "project-item-title" }, h("slot", { key: 'e2c8c1ecb5f11990bbc51729210675269c8156b5', name: "title" }), this.label && (h("dso-label", { key: '88756e5ee807c0472c165997f43ca47a7ce91dfd', status: "error", compact: true }, this.label))), h("div", { key: '138e696bc9a822d2ac0dec289be642c0f031fec2', class: "project-item-actions" }, h("slot", { key: '9fb45bb9dc6f89bc0936a1485c94ac8d8c392a64', name: "actions" }))), h("div", { key: '058d938dc1ab817c46f3332c48ced575b7957ab6', class: "project-item-info" }, h("div", { key: '8b390f8a4a8b755693ab6011c34850d6e269f340', class: "project-item-progress" }, h("slot", { key: '89d63034a6fc531f294296dc88c858b9034619b9', name: "progress" })), h("div", { key: '1f984b3debf64830de6994e1b9cc6ebddece5e93', class: "project-item-status" }, h("slot", { key: '9e36860de3c052cf09ada29236ff5ad3ae49cdd3', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }
@@ -19,7 +19,6 @@ export class ProjectItem {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -34,7 +33,8 @@ export class ProjectItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             }
         };
     }

package/dist/collection/components/renvooi/renvooi.js

@@ -34,7 +34,6 @@ export class Renvooi {
         return {
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "RenvooiValue | RenvooiValue[]",
@@ -55,11 +54,11 @@ export class Renvooi {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "mark": {
                 "type": "unknown",
-                "attribute": "mark",
                 "mutable": false,
                 "complexType": {
                     "original": "RenvooiMarkFunction",

package/dist/collection/components/renvooi/renvooi.js.map

@@ -1 +1 @@
-{"version":3,"file":"renvooi.js","sourceRoot":"","sources":["../../../../src/components/renvooi/renvooi.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEtG,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD;;GAEG;AAMH,MAAM,OAAO,OAAO;IALpB;QAgCU,4BAAuB,GAAG,CAAC,IAAY,EAAE,UAAuB,EAAE,EAAE;YAC1E,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC;KAeH;IAzBC,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/D,CAAC;IAMD,MAAM;QACJ,OAAO,CACL,kBACG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACtB,EAAC,aAAa,IACZ,KAAK,EAAE,CAAC,EACR,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,IAAI,qDAAG,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA,EAAA,CAAC,EAChE,mBAAmB,EAAE,IAAI,CAAC,uBAAuB,GACjD,CACH,CAAC,CACD,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: RenvooiMarkFunction;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n  get values(): RenvooiValue[] {\r\n    if (!this.value) {\r\n      return [];\r\n    }\r\n\r\n    return Array.isArray(this.value) ? this.value : [this.value];\r\n  }\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.values.map((v) => (\r\n          <RenvooiRender\r\n            value={v}\r\n            mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n            onMarkItemHighlight={this.handleMarkItemHighlight}\r\n          />\r\n        ))}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"renvooi.js","sourceRoot":"","sources":["../../../../src/components/renvooi/renvooi.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEtG,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD;;GAEG;AAMH,MAAM,OAAO,OAAO;IALpB;QAgCU,4BAAuB,GAAG,CAAC,IAAY,EAAE,UAAuB,EAAE,EAAE;YAC1E,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC;KAeH;IAzBC,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/D,CAAC;IAMD,MAAM;QACJ,OAAO,CACL,kBACG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACtB,EAAC,aAAa,IACZ,KAAK,EAAE,CAAC,EACR,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,IAAI,qDAAG,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA,EAAA,CAAC,EAChE,mBAAmB,EAAE,IAAI,CAAC,uBAAuB,GACjD,CACH,CAAC,CACD,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiRender } from \"./renvooi-render\";\r\nimport { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: RenvooiMarkFunction;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRenvooiMarkItemHighlight!: EventEmitter<RenvooiMarkItemHighlightEvent>;\r\n\r\n  get values(): RenvooiValue[] {\r\n    if (!this.value) {\r\n      return [];\r\n    }\r\n\r\n    return Array.isArray(this.value) ? this.value : [this.value];\r\n  }\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoRenvooiMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.values.map((v) => (\r\n          <RenvooiRender\r\n            value={v}\r\n            mark={this.mark && ((text) => this.mark?.(text, v, this.values))}\r\n            onMarkItemHighlight={this.handleMarkItemHighlight}\r\n          />\r\n        ))}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -40,7 +40,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '3d8ac5ae8c8562c6e0733a57fa5a3732f83c032c', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '996ac6893b43300e24942c340776d198f7cc1e05' })));
+        return (h(Host, { key: '826f5b0f98bc6658ef8c7e847e6ad8087a586626', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'b667e74cdcb8b0314a8cb12c9770c7a9b553d515' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

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

@@ -84,9 +84,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: 'd927646db39d5e7f300721ab28165c83521ac18f', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '70776125b8823d8464143a806c70221698149414', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '842ad8c1e4357cdc597d3d5c29bb150d679354fa', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '9a67f0aca69c30da42e313420dda9cebc8f142fc', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'db9fd5c5301de84c34a25f8d71260e3b917c4ca0' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: '8e264a36ad1b1eba2f194e3e93c60af2b481003c' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,7 +49,7 @@ export class Selectable {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: 'b5cd39ea4642a56a750114f10b02b6aebb4c59fc' }, h("div", { key: 'f962feb3bfdd81907a77e1ac733510890e213b00', class: "dso-selectable-container" }, h("div", { key: '6acd9e0e2586b0f590e70141e40c5d0e7ab1d101', class: "dso-selectable-input-wrapper" }, h("input", { key: 'fb1e91c5fe6be65f56ad21dc4a150702fb0f7648', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.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: '8537ebfe40af43117cc804c3ac6e80f94fb0e067', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '6c914966bb2e527481fbe26b9822bca9950895dc', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '531effb5a94ff980bd7f979dacd3ec965af76cde' }, h("slot", { key: '59d5b87cee41c9eb449301d183310aba56d9b505', name: "info" })))), h("slot", { key: '95eb1dc6c9f24f68143725e283cc165019f8f6b2', name: "options" })));
+        return (h(Fragment, { key: 'a55fb2054b681d52958d148268deae88e68c1537' }, h("div", { key: 'd909064a63e008267559be99ea0468da95832ef7', class: "dso-selectable-container" }, h("div", { key: '74df5bd51d27a725a54b94725006886235cc425e', class: "dso-selectable-input-wrapper" }, h("input", { key: 'd6c7cd539f4a6709418c8001d7daad6ed92825c2', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.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: 'f93aab0f09595248ad9d42b60b877af5c4623c6a', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '363378682d4159a1475137278d47da607455eea1', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '484259d2cf6716497b3a888d294a1352adf4b8e3' }, h("slot", { key: 'efb26e3615fcbb47d5bbd4f5e4da5d5be80a74bb', name: "info" })))), h("slot", { key: 'bee889f79b7f36a66735d39557df63a10b11a589', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {
@@ -76,7 +76,6 @@ export class Selectable {
         return {
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"checkbox\" | \"radio\"",
@@ -91,11 +90,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "type"
             },
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -110,11 +109,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "identifier"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -129,11 +128,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "name"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -148,11 +147,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -167,11 +166,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "invalid"
             },
             "describedById": {
                 "type": "string",
-                "attribute": "described-by-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -186,11 +185,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "described-by-id"
             },
             "labelledById": {
                 "type": "string",
-                "attribute": "labelled-by-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -205,11 +204,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "labelled-by-id"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -224,11 +223,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "disabled"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -243,11 +242,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "required"
             },
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -262,11 +261,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "checked"
             },
             "indeterminate": {
                 "type": "boolean",
-                "attribute": "indeterminate",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -281,11 +280,11 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "indeterminate"
             },
             "infoFixed": {
                 "type": "boolean",
-                "attribute": "info-fixed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -300,7 +299,8 @@ export class Selectable {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "info-fixed"
             }
         };
     }

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: '0a20014eec2f813b12bfdb187c48c6901ad616b6', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '10e1388497853966680fb5f71659b42ca9f911ab', icon: "chevron-right" })));
+        return (h("a", { key: 'aa7c29b52781f7692d292e4a7d1f5294394f7f24', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '03c37ac90379a91a8698bbfae50fd8b09ab6ac6e', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }
@@ -26,7 +26,6 @@ export class Skiplink {
         return {
             "to": {
                 "type": "string",
-                "attribute": "to",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -41,11 +40,11 @@ export class Skiplink {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "to"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -60,7 +59,8 @@ export class Skiplink {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "label"
             }
         };
     }

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: 'f8a8e2b9a88a0b6c58ab05366959f370b2fce9cc' }, h("button", Object.assign({ key: '7cab565228754ba0147a5e490fc937762ed05fc3', 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: 'a7b0a1ab32f6a62d852fb8b883c233231cfc81e2', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '52f7a2f1e5570dd64304226b5f4c829be8764da9', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '7cd2bac2969d4f8099a55270b61ee4531e035b38', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '8478a53d616dc58b4eac20ab9fb182164678d53e', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '948c39e71c85f62986514d9b9042bc1c330c7265', htmlFor: this.identifier }, h("slot", { key: 'ebb386259de8b07c6eafff0aa32d582b86f46be3' })))));
+        return (h(Fragment, { key: '1529a7bb19c7d520afe3680c2f24ff2cead4f86d' }, h("button", Object.assign({ key: '4ee12c87128604cfc5ad871805bcac388ed4bb69', 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: 'f1ba967c118604c6ccecda9c0fc0f26c50640515', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'aa2124e210b38429e4e0ac00a7da7f6c25f94f60', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '563e438bb5c49bbba49d30cbe476eebb28102375', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '68c9f233ce1c6ef2be07048927596635c9050f49', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '0fc8fb13283ea99826a75c585d374d71ba6aef1a', htmlFor: this.identifier }, h("slot", { key: '33a03979232fbcb4b54d8dcf43f7092b893e3739' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }
@@ -43,7 +43,6 @@ export class SlideToggle {
         return {
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -59,11 +58,11 @@ export class SlideToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "checked",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -79,11 +78,11 @@ export class SlideToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "accessibleLabel": {
                 "type": "string",
-                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -98,11 +97,11 @@ export class SlideToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "accessible-label"
             },
             "labelledbyId": {
                 "type": "string",
-                "attribute": "labelledby-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -117,11 +116,11 @@ export class SlideToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "labelledby-id"
             },
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -137,6 +136,7 @@ export class SlideToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "identifier",
                 "defaultValue": "v4()"
             }
         };

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

@@ -33,7 +33,7 @@
   margin: -1px;
   border: 0;
   overflow: hidden;
-  clip-path: inset(0);
+  clip-path: rect(0 0 0 0);
 }
 
 .visual-rating-labels {

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

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '01a5ddb99af6a43c5c6c084b65f39c58b30ba614', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'b58dfad1fc08c8bea31ea7f56587070dc848f83c', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '8db9a730003aef73678876b03030cc2a4ea796ed' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '2fc2e5ac490f5767ddbfed4521582fed650d16de', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'bd6959ff78da6abc23885c6c14db7ed86145694e', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'a28a329f0fa45f468d3d01963a927d021b539dae' }, "Heel moeilijk"), h("span", { key: 'fbf4e943cb15e4305450c7eb5c6c147ca128ddda' }, "Heel makkelijk")), h("div", { key: 'b84fb18bb3fe190174bda8edeac06d4954835bce', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '2b650913a217ebf15a8a43d222daf68fff5ff025', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'e82a7d6d917d901d01e733e10bbc2f725dbb43f4', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '8d65846826d1003b5beedb5854c270ea226c2329' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '44fad25374e454f48bd5f7404468c9d8e9c92b0c', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'd059b0edc0e4fa802066c7b72db381edd2c59375', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'd61d29faebb535631dea37ce396a3383f96988b3' }, "Heel moeilijk"), h("span", { key: '4b1e3c4a453b8dbc5139b40ebddb94d8c2d1c465' }, "Heel makkelijk")), h("div", { key: '1e6a9f6611e66d9ddc7815e2424d0d7f71539c49', 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: '99605c67dd666f2ac4425535562bf5ad8b59feac', type: "submit", class: "dso-secondary" }, h("span", { key: '409e8990f6a7708e8b8f0724f2284d845bb0b122' }, "Antwoord verzenden")))));
+        })), h("button", { key: '0bea66d144e1b52cfc14ff8ede655215abf2b130', type: "submit", class: "dso-secondary" }, h("span", { key: 'd3b0233d4a22cea3739a0d49db7bf750c59c215c' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

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

@@ -972,10 +972,9 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 
 :host .dso-modal {
-  inset: 0px;
-  block-size: 100%;
-  position: fixed;
-  z-index: 530;
+  margin: 0;
+  background-color: transparent;
+  inline-size: 100dvi;
   overflow: visible;
   padding: 0;
   border: 0;
@@ -1174,10 +1173,9 @@ a.dso-tertiary, a.dso-tertiary:visited {
 
 .dso-modal .dso-dialog.dso-table-dialog {
   margin-block-start: 1rem;
-  max-inline-size: calc(100% - 2rem);
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  inline-size: auto;
+  margin-inline-start: 1rem;
+  margin-inline-end: 1rem;
+  inline-size: 100%;
 }
 .dso-modal .dso-dialog.dso-table-dialog .dso-body {
   max-block-size: calc(100vh - 112px - 1.5em - 2rem);
@@ -1198,19 +1196,19 @@ a.dso-tertiary, a.dso-tertiary:visited {
   inline-size: calc(100% - 64px);
 }
 
-.dso-table-utilities {
+.dso-table-utilities:not([hidden]) {
   align-items: center;
   display: flex;
   justify-content: space-between;
   margin-block-end: 8px;
 }
-.dso-table-utilities .dso-responsive-message {
+.dso-table-utilities:not([hidden]) .dso-responsive-message {
   margin-block-end: 0;
 }
-.dso-table-utilities .dso-responsive-message:only-child {
+.dso-table-utilities:not([hidden]) .dso-responsive-message:only-child {
   inline-size: 100%;
 }
-.dso-table-utilities .open-modal-button:only-child {
+.dso-table-utilities:not([hidden]) .open-modal-button:only-child {
   margin-inline-start: auto;
 }
 
@@ -1229,15 +1227,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
   margin: -1px;
   border: 0;
   overflow: hidden;
-  clip-path: inset(0);
-}
-
-.dso-modal-overlay {
-  background-color: rgba(255, 255, 255, 0.8);
-  display: block;
-  position: fixed;
-  inset: 0;
-  z-index: 529;
+  clip-path: rect(0 0 0 0);
 }
 
 .dso-table-placeholder {