@dso-toolkit/core 76.0.0 → 78.0.0

package/dist/collection/components/map-controls/map-controls.js

@@ -15,10 +15,10 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _MapControls_closeButtonElement, _MapControls_toggleButtonElement;
-import { Fragment, h } from "@stencil/core";
+import { Fragment, h, } from "@stencil/core";
 import { i18n } from "../../utils/i18n";
 import { translations } from "./map-controls.i18n";
-// Sync with $transition-duration in ./map-controls.scss
+// Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts
 const transitionDuration = 300;
 export class MapControls {
     constructor() {
@@ -58,7 +58,7 @@ export class MapControls {
         });
     }
     render() {
-        return (h(Fragment, null, h("button", { key: '6910a4a9be0eb8267a8e305962027f44c9d60a1e', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'c55b0f10ed785a745e07f7a0af5da24bced8fe02', icon: "layers" }), h("span", { key: '61b2c123dd7cdeb30364587e6b1aea7bf504be64' }, this.text("layersButton"))), h("div", { key: '18d016183fc053aa8c7b933a34cc50123f892671', class: "zoom-buttons" }, h("button", { key: '68b37ec1d54998a821079e982bb3769e97efc67d', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '404196e4e461df859ad73751eb99f33b23fda174' }, this.text("zoomIn")), h("dso-icon", { key: '427980899dacea9a6c8a7130185f7d3eb19a2b04', icon: "plus" })), h("button", { key: '62e15348d6aad13a4f7f9625a7ed73d67d4e4f78', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'e23c9c48aeaf44a9e0a141b8e07e316ae033c484' }, this.text("zoomOut")), h("dso-icon", { key: 'ed4b2f4e4b70cbc358ac6135d381e12d87b3e0e8', icon: "minus" }))), h("section", { key: '2e5b1c61260efcd1590f2ec6a36f0ab1cd8d38ca', hidden: this.hideContent }, h("header", { key: '4531f3594314f1751503c69464cf448045714fd4' }, h("h2", { key: 'a8125f12a12779ac63e2925a83c4a6c9c62c2a31' }, this.text("title")), h("button", { key: '24e8a5ba9e2c4d09b1b16a718c8db1505f47e28f', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '8100f53d71441bb268e0bc665b01fe7c31bb7297' }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: 'e016c5aa0587d33df67ed49978f98fd02fe2156a', icon: "times" }))), h("dso-scrollable", { key: '89f0920e511e162b13a60c88deac948be68d1f4f' }, h("div", { key: '072bf431a8ddb40a332e2b215e64d73710e01a15', class: "content" }, h("slot", { key: '5c3cf64aff9c3c8dfbbee5870602cf4c265636b3' }))))));
+        return (h(Fragment, null, h("button", { key: 'd7e6ce0c193d20c2bd1b81155d4456700726c773', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '4537da9f1f1fc94b321c0e054a69a52f8d8e0290', icon: "layers" }), h("span", { key: 'c50693906513a98899f46af62bb2ccd24d2877e4' }, this.text("layersButton"))), h("dso-button-group", { key: '937990ef60cf209ca4272823723ff959e9b6aecc', class: "zoom-buttons", direction: "column" }, h("button", { key: '6e9bf00f366ddd54a2d9223f3cf2f826700360ba', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'd2b3fb068bfb21cf4f3eb3a5533569e53642e72b', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: '8590e566a0ba65eab342ff1017cae264372ba85b', icon: "plus" })), h("button", { key: 'ccf0fb53608fd3e64529569490156708705ababe', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '2573c3ed65cca3e05bd373ec164b409ce340a6be', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: '89f126f4cd1a4cc3e8d23969874a83770290c893', icon: "minus" }))), h("section", { key: '7a30f147b660050db68e9789231fad6b2556564e', hidden: this.hideContent }, h("header", { key: 'ce63cfb65e6a7f4effa00816c90d9a1a8e8d66a5' }, h("h2", { key: 'e420b15999f01833dc4320a021e3bacf0657b965' }, this.text("title")), h("button", { key: '3f455700599a250226a7660a737695aeb2545806', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'b7f50087e93c0cce75913d26ee000d3c0ccd8a46', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '49964958035f2807507bbcd2593039c50c7a1c33', icon: "times" }))), h("dso-scrollable", { key: '1d22e283d773b9f3a379ac008f9f468ce6c351d8' }, h("div", { key: 'f965f466faa0c68fdf5f50718399f56a193f6065', class: "content" }, h("slot", { key: 'c445dfcb3a6416b893d1bf2a0041173179d1f1cf' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-controls/map-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"map-controls.js","sourceRoot":"","sources":["../../../../src/components/map-controls/map-controls.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, Method, Prop, State, Watch, h } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n  tag: \"dso-map-controls\",\r\n  styleUrl: \"./map-controls.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapControls {\r\n  @Element()\r\n  host!: HTMLDsoMapControlsElement;\r\n\r\n  /**\r\n   * To show and hide the Map Controls.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * To disable the zoom controls:\r\n   *\r\n   * * `in`: Disable zoom in button.\r\n   * * `out`: Disable zoom out button.\r\n   * * `both`: Disable zoom in and zoom out.\r\n   */\r\n  @Prop()\r\n  disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom in button.\r\n   */\r\n  @Event()\r\n  dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom out button.\r\n   */\r\n  @Event()\r\n  dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * emits when the panel opens or closes.\r\n   *\r\n   * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n   * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n  @State()\r\n  hideContent = !this.open;\r\n\r\n  @Watch(\"open\")\r\n  watchOpen(open: boolean) {\r\n    if (open) {\r\n      this.hideContent = false;\r\n\r\n      setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n    } else {\r\n      setTimeout(() => {\r\n        this.hideContent = true;\r\n\r\n        this.#toggleButtonElement?.focus();\r\n      }, transitionDuration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted when the visibility is toggled.\r\n   *\r\n   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n   * @param e\r\n   */\r\n  @Method()\r\n  async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open: this.open,\r\n    });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  #closeButtonElement: HTMLButtonElement | undefined;\r\n  #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          type=\"button\"\r\n          id=\"toggle-visibility-button\"\r\n          class=\"toggle-visibility-button\"\r\n          onClick={(e) => this.toggleVisibility(e)}\r\n          ref={(element) => (this.#toggleButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"layers\"></dso-icon>\r\n          <span>{this.text(\"layersButton\")}</span>\r\n        </button>\r\n        <div class=\"zoom-buttons\">\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomIn.emit(e)}\r\n            disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>{this.text(\"zoomIn\")}</span>\r\n            <dso-icon icon=\"plus\"></dso-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomOut.emit(e)}\r\n            disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>{this.text(\"zoomOut\")}</span>\r\n            <dso-icon icon=\"minus\"></dso-icon>\r\n          </button>\r\n        </div>\r\n        <section hidden={this.hideContent}>\r\n          <header>\r\n            <h2>{this.text(\"title\")}</h2>\r\n            <button\r\n              type=\"button\"\r\n              class=\"close-button\"\r\n              onClick={(e) => this.toggleVisibility(e)}\r\n              ref={(element) => (this.#closeButtonElement = element)}\r\n            >\r\n              <span>{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          </header>\r\n          <dso-scrollable>\r\n            <div class=\"content\">\r\n              <slot></slot>\r\n            </div>\r\n          </dso-scrollable>\r\n        </section>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"map-controls.js","sourceRoot":"","sources":["../../../../src/components/map-controls/map-controls.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACL,SAAS,EAET,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,+EAA+E;AAC/E,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAO/B,MAAM,OAAO,WAAW;IALxB;QASE;;WAEG;QAEH,SAAI,GAAG,KAAK,CAAC;QAkCb,gBAAW,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAiCjB,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QAEnD,kDAAmD;QACnD,mDAAoD;KAyDrD;IA1FC,SAAS,CAAC,IAAa;QACrB,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAEzB,UAAU,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,uBAAA,IAAI,uCAAoB,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,kBAAkB,CAAC,CAAC;QAC1E,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,GAAG,EAAE;;gBACd,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAExB,MAAA,uBAAA,IAAI,wCAAqB,0CAAE,KAAK,EAAE,CAAC;YACrC,CAAC,EAAE,kBAAkB,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;;;;OAKG;IAEH,KAAK,CAAC,gBAAgB,CAAC,CAA6B;QAClD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAEvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,aAAa,EAAE,CAAC;YAChB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAOD,MAAM;QACJ,OAAO,CACL;YACE,+DACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,kCAAkC,EACxC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,uBAAA,IAAI,oCAAwB,OAAO,MAAA,CAAC;gBAEvD,iEAAU,IAAI,EAAC,QAAQ,GAAY;gBACnC,+DAAO,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAQ,CACjC;YACT,yEAAkB,KAAK,EAAC,cAAc,EAAC,SAAS,EAAC,QAAQ;gBACvD,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM;oBAElE,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAQ;oBAClD,iEAAU,IAAI,EAAC,MAAM,GAAY,CAC1B;gBACT,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM;oBAEnE,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAQ;oBACnD,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACQ;YACnB,gEAAS,MAAM,EAAE,IAAI,CAAC,WAAW;gBAC/B;oBACE,6DAAK,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAM;oBAC7B,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,uBAAA,IAAI,mCAAuB,OAAO,MAAA,CAAC;wBAEtD,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAQ;wBACpF,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACF;gBACT;oBACE,4DAAK,KAAK,EAAC,SAAS;wBAClB,8DAAa,CACT,CACS,CACT,CACT,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n  tag: \"dso-map-controls\",\r\n  styleUrl: \"./map-controls.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapControls implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoMapControlsElement;\r\n\r\n  /**\r\n   * To show and hide the Map Controls.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * To disable the zoom controls:\r\n   *\r\n   * * `in`: Disable zoom in button.\r\n   * * `out`: Disable zoom out button.\r\n   * * `both`: Disable zoom in and zoom out.\r\n   */\r\n  @Prop()\r\n  disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom in button.\r\n   */\r\n  @Event()\r\n  dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom out button.\r\n   */\r\n  @Event()\r\n  dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * emits when the panel opens or closes.\r\n   *\r\n   * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n   * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n  @State()\r\n  hideContent = !this.open;\r\n\r\n  @Watch(\"open\")\r\n  watchOpen(open: boolean) {\r\n    if (open) {\r\n      this.hideContent = false;\r\n\r\n      setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n    } else {\r\n      setTimeout(() => {\r\n        this.hideContent = true;\r\n\r\n        this.#toggleButtonElement?.focus();\r\n      }, transitionDuration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted when the visibility is toggled.\r\n   *\r\n   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n   * @param e\r\n   */\r\n  @Method()\r\n  async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open: this.open,\r\n    });\r\n  }\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  #closeButtonElement: HTMLButtonElement | undefined;\r\n  #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          type=\"button\"\r\n          id=\"toggle-visibility-button\"\r\n          class=\"dso-map toggle-visibility-button\"\r\n          onClick={(e) => this.toggleVisibility(e)}\r\n          ref={(element) => (this.#toggleButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"layers\"></dso-icon>\r\n          <span>{this.text(\"layersButton\")}</span>\r\n        </button>\r\n        <dso-button-group class=\"zoom-buttons\" direction=\"column\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-map\"\r\n            onClick={(e) => this.dsoZoomIn.emit(e)}\r\n            disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span class=\"sr-only\">{this.text(\"zoomIn\")}</span>\r\n            <dso-icon icon=\"plus\"></dso-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-map\"\r\n            onClick={(e) => this.dsoZoomOut.emit(e)}\r\n            disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span class=\"sr-only\">{this.text(\"zoomOut\")}</span>\r\n            <dso-icon icon=\"minus\"></dso-icon>\r\n          </button>\r\n        </dso-button-group>\r\n        <section hidden={this.hideContent}>\r\n          <header>\r\n            <h2>{this.text(\"title\")}</h2>\r\n            <button\r\n              type=\"button\"\r\n              class=\"dso-tertiary close-button\"\r\n              onClick={(e) => this.toggleVisibility(e)}\r\n              ref={(element) => (this.#closeButtonElement = element)}\r\n            >\r\n              <span class=\"sr-only\">{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          </header>\r\n          <dso-scrollable>\r\n            <div class=\"content\">\r\n              <slot></slot>\r\n            </div>\r\n          </dso-scrollable>\r\n        </section>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/map-overlays/map-overlays.js

@@ -28,7 +28,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '17d49da4cf49827cc1081907a4321d4259fa4b79', class: "form-group dso-checkboxes" }, h("legend", { key: 'e3cd3607c88721307decf3228f45db36c7c8e77c', class: "sr-only" }, "Kaartlagen"), h("div", { key: '7030038a2638ad08d9687f7d09291c74063c5941', class: "dso-label-container" }, h("span", { key: 'e837df93dd5ae5895c394d252e04fe9d0784bb02', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'c935ad0e8ea54012322cc56f3221a6a5a2a57c69', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: '912b3952f7f5e647cd41a29ddfd9c9944f0968ad', class: "form-group dso-checkboxes" }, h("legend", { key: '4a00206699febc7cce55074a8ccc656ccadf88af', class: "sr-only" }, "Kaartlagen"), h("div", { key: '0b26d2deddd8fc32b9ecad91b317ff478c31add0', class: "dso-label-container" }, h("span", { key: '03b7e1541b138e5bd3547ba39e8c59612e906da9', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '70f4823f693900a9061395c486c2a0e75b6e8a78', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mark-bar/mark-bar.js

@@ -42,7 +42,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '5e4b3b30ffdaf84c8251cbc9d8d89453cdc2acf5', class: "dso-mark-bar" }, h("div", { key: 'f491fadc18c7a8cf8ef2ffe2c7f0d450c5338563', class: "dso-mark-bar-input" }, h("input", { key: '7ed9c49bd30a930db13392ba97f68a4afd0962cf', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'd1904e050f58e4c0dc50353c04546355674b28a8', htmlFor: "search-input" }, h("dso-icon", { key: 'c6cdcd538d55888f590463014a3de721303cca83', class: "dso-search-icon", icon: "search" }), h("span", { key: 'a4181d23fb6eab285ce6a2c8a802d03f0c93a9b3', class: "label-text" }, this.label)), h("button", { key: '98256eec68eff28aff833fe0a3b5c194533c7e90', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '76dcb2abbbd0ca7149c0eead579997d833f1fd59', icon: "times" }), h("span", { key: '3579a015862bced793c02757f0e0619955e18d31', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'da25e59a17a0244cc355a1a1cf3ab28143787d17', class: "dso-button-container" }, h("span", { key: '3b6adc855bf2ab01e0cd3d6e72d5d9481521591f', class: "divider" }), h("button", { key: 'e94b767b091148c51f8f4fd9d4a97b5100c13738', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '0da1525cd64489aa608f0b54489b62df022e6fa0', icon: "chevron-up", class: "hydrated" }), h("span", { key: '4093a2745a9adb78f0a20afed07e9a9309869819', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'f699a674ca41cd489d276f636cb9aa7ba7b0c88e' }, current, "/", totalCount), h("button", { key: '50aa7175ab3bf69129b2fee157ad8423c1404d13', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: 'e0a84fc40af53355b23ba53277f2b66123fa2743', icon: "chevron-down", class: "hydrated" }), h("span", { key: '6f65e491f011886ce2a51fd8a6e22adedbfaad57', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: 'd4653b33ca3755f4b4474cfa809a4a6717c69882', class: "dso-mark-bar" }, h("div", { key: 'a85daadbea28aa4e7fff259947ea9fd4230b3de3', class: "dso-mark-bar-input" }, h("input", { key: 'aec4982d6b8a4cfa13483b5b29fc4343aea8c8d1', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '667522efbfa1943a7a437b53992ce3bc0835c898', htmlFor: "search-input" }, h("dso-icon", { key: '0467c19e9c71c10e7df15ef4ae9e22e5c5404e37', class: "dso-search-icon", icon: "search" }), h("span", { key: '51bdce5ab2db5af561858b6f04a24eb7911dc257', class: "label-text" }, this.label)), h("button", { key: '51087e416b01b925d655ec6406fbe08b451be50d', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'a1cfdcc6b8e43a55894e614c0c8e3f31479e3f83', icon: "times" }), h("span", { key: 'c7b60699a9f0fd4dd5267eb44dafa3fec42cdcdc', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '699cd06de17cfeb920300ab30cc1f1b710dcc6f4', class: "dso-button-container" }, h("span", { key: '51f5f1e8832969752e1d55808d67270300039889', class: "divider" }), h("button", { key: 'd25aead7bf7dea6712729fdf9df1ea34978256ce', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '7b7074ee232b70cec35e944adb2a272483e33a80', icon: "chevron-up", class: "hydrated" }), h("span", { key: '27684b1b27f556d089b977c2ef13f0671227a543', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'f920e39db742b95470657577784b1550a05b0610' }, current, "/", totalCount), h("button", { key: '0f78de38dac6f51c7a410a7b31b9fc562b045075', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '929fbb0b495988105ac7e878b8091310d8e018cf', icon: "chevron-down", class: "hydrated" }), h("span", { key: '33d434ce78876accd97e66a451ae868bd37d678d', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.js

@@ -65,7 +65,7 @@ export class Modal {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '9b88b6c76e1057cf0ef456f422b3bd76c823ed94', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: 'db90e7564ce7e40759157c6b8c0eff1f6bb34527', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'b33e73f4c853656290ace76869e931af70e21e95' }, h("div", { key: '710ca8e18d30739635f0afb34112fd445ba7bf7f', class: "dso-body", tabIndex: 0 }, h("slot", { key: '95f8bab79fd14f9f9bd6e1aa51648fb5a13b5b8f', name: "body" }))), this.hasFooter && (h("div", { key: '9f9303ccdd4d1da9aaf45138eedeae5ee18b3a3c', class: "dso-footer" }, h("slot", { key: '87fa3fe46817b3f739ad5cbbdee7bdaf5d05182d', name: "footer" }))))));
+        return (h("dialog", { key: '8c58e168c33679096563b2eef8719857f00ed141', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '97582f1720de811a578109065eb6fa54d1f5e432', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'a401bd110e0fe51c0094f5ebb4559942ce573251' }, h("div", { key: 'f6d0abadd33c8d13e6ed99cf9288118fa800e4d3', class: "dso-body", tabIndex: 0 }, h("slot", { key: '93fcba6a6dfcf8150fbcf4cc1eaa892f7c35cafc', name: "body" }))), this.hasFooter && (h("div", { key: '903615ea035080cabeb34e01765a2836782f4fa0', class: "dso-footer" }, h("slot", { key: '966b6ff8073cde52d8e5f08a4c5ec4487e184d60', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/onboarding-tip/onboarding-tip.js

@@ -116,7 +116,7 @@ export class OnboardingTip {
         });
     }
     render() {
-        return (h(Host, { key: 'f1f8a73517cb7c42c3f7db641aa9a9bd1d99b3ff', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '239bbc0f4e594b9961158554ede26773abb040e2', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '9418125c3b3cef6105b93b1e709fa49cffa059db', class: "onboarding-tip-inner" }, h("div", { key: '7625bdd68b348ae7261d35919b53428b0159b6a9', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '5c0b5e4384e5dcd9d8f0c25bc08556bc7db8157b', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'cba3187c63913c7de1e0752cb6528fb4eb1f3450', icon: "light-bulb" }), h("slot", { key: '43c11f9a8c6992ff4009ff4a7ec70941faa44f28', name: "heading" }))), h("button", { key: '2771456240f878a1df2f562a595422757b630744', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: '850b446c17f5c29602d725187737d53561682cf3', icon: "times" }), h("span", { key: '43b7b9eb4fbff09a0c44672c34f26d91d8fe6f84', class: "sr-only" }, "Sluiten")), h("slot", { key: 'aaafc3f27276fee1a8137a94c990c99c16521c39' }))), h("div", { key: '7e6723f289ef52cd31beab6751ea356c6be080a7', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'b77a88b622c4449698f911155e0454278d28aae2', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '904f17d3e1cdf1c74a50e6089b1a5507c98c5570', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '60027d656f407b80f1bc62b1d8b394675d8a4c29', class: "onboarding-tip-inner" }, h("div", { key: 'b87378ba4b6e9ce851d0b565b052c53ea54c86e3', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '6c9326b09ce2e823c381554c97229909e4754829', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'fb6e5837b5ac53c06df7ce28f03282b9fe584ce6', icon: "light-bulb" }), h("slot", { key: '4eee646004474e2b79eb17a5957b791926234ba9', name: "heading" }))), h("button", { key: '3dd74214ac6e1c91d37ebd33064615868f10c566', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: 'b297506aa8e5a8796ab9452f4e4ebc63d753452a', icon: "times" }), h("span", { key: '50a9aface85ef552e4ac7493c7231f2d47b0a1da', class: "sr-only" }, "Sluiten")), h("slot", { key: '826a6d61dbd82d06ade187d5e4e1f2f1b823bea8' }))), h("div", { key: '8914f8ec556c28b0df6f783c93e86a70234311b3', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

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

@@ -272,14 +272,14 @@ a.dso-secondary:hover,
 button.dso-secondary:hover,
 label.dso-secondary:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
-  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);
-  color: var(--_dso-button-secondary-hover-color, #39870c);
+  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
+  color: var(--_dso-button-secondary-hover-color, #275937);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
 label.dso-secondary:active {
-  background-color: var(--_dso-button-secondary-active-background-color, #39870c);
-  border-color: var(--_dso-button-secondary-active-border-color, #39870c);
+  background-color: var(--_dso-button-secondary-active-background-color, #275937);
+  border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
@@ -677,6 +677,224 @@ label.dso-tertiary.extern:not([disabled]):hover::after,
 label.dso-tertiary.extern:not([disabled]):active::after {
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));
 }
+a.dso-map,
+button.dso-map,
+label.dso-map {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+}
+a.dso-map:focus, a.dso-map:focus-visible,
+button.dso-map:focus,
+button.dso-map:focus-visible,
+label.dso-map:focus,
+label.dso-map:focus-visible {
+  outline-offset: 2px;
+}
+a.dso-map:active,
+button.dso-map:active,
+label.dso-map:active {
+  outline: 0;
+}
+a.dso-map,
+button.dso-map,
+label.dso-map {
+  background-color: var(--_dso-button-secondary-background-color, #fff);
+  border-color: var(--_dso-button-secondary-border-color, #39870c);
+  color: var(--_dso-button-secondary-color, #39870c);
+}
+a.dso-map,
+button.dso-map,
+label.dso-map {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
+a.dso-map:hover,
+button.dso-map:hover,
+label.dso-map:hover {
+  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
+  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
+  color: var(--_dso-button-secondary-hover-color, #275937);
+}
+a.dso-map:active,
+button.dso-map:active,
+label.dso-map:active {
+  background-color: var(--_dso-button-secondary-active-background-color, #275937);
+  border-color: var(--_dso-button-secondary-active-border-color, #275937);
+  color: var(--_dso-button-secondary-active-color, #fff);
+}
+a.dso-map[disabled], a.dso-map[disabled]:hover,
+button.dso-map[disabled],
+button.dso-map[disabled]:hover,
+label.dso-map[disabled],
+label.dso-map[disabled]:hover {
+  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
+  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
+  color: var(--_dso-button-secondary-disabled-color, #afcf9d);
+}
+a.dso-map.dso-small,
+button.dso-map.dso-small,
+label.dso-map.dso-small {
+  line-height: 1rem;
+}
+a.dso-map.dso-small dso-icon,
+a.dso-map.dso-small svg.di, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,
+button.dso-map.dso-small dso-icon,
+button.dso-map.dso-small svg.di,
+button.dso-map.dso-small.extern::after,
+button.dso-map.dso-small.download::after,
+button.dso-map.dso-small.dso-spinner::before,
+label.dso-map.dso-small dso-icon,
+label.dso-map.dso-small svg.di,
+label.dso-map.dso-small.extern::after,
+label.dso-map.dso-small.download::after,
+label.dso-map.dso-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-map.dso-small.dso-spinner-left::before,
+button.dso-map.dso-small.dso-spinner-left::before,
+label.dso-map.dso-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-map.dso-small.dso-spinner-right::after,
+button.dso-map.dso-small.dso-spinner-right::after,
+label.dso-map.dso-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-map dso-icon:has(+ span:not(.sr-only)),
+a.dso-map svg.di:has(+ span:not(.sr-only)),
+button.dso-map dso-icon:has(+ span:not(.sr-only)),
+button.dso-map svg.di:has(+ span:not(.sr-only)),
+label.dso-map dso-icon:has(+ span:not(.sr-only)),
+label.dso-map svg.di:has(+ span:not(.sr-only)) {
+  margin-inline-start: -8px;
+}
+a.dso-map span:not(.sr-only) + dso-icon,
+a.dso-map span:not(.sr-only) + svg.di,
+button.dso-map span:not(.sr-only) + dso-icon,
+button.dso-map span:not(.sr-only) + svg.di,
+label.dso-map span:not(.sr-only) + dso-icon,
+label.dso-map span:not(.sr-only) + svg.di {
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
+}
+a.dso-map dso-icon + span:not(.sr-only),
+a.dso-map svg.di + span:not(.sr-only),
+button.dso-map dso-icon + span:not(.sr-only),
+button.dso-map svg.di + span:not(.sr-only),
+label.dso-map dso-icon + span:not(.sr-only),
+label.dso-map svg.di + span:not(.sr-only) {
+  margin-inline-start: 8px;
+}
+a.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled],
+button.dso-map.dso-spinner-left[disabled],
+button.dso-map.dso-spinner-right[disabled],
+label.dso-map.dso-spinner-left[disabled],
+label.dso-map.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+a.dso-map.dso-spinner-left::before,
+button.dso-map.dso-spinner-left::before,
+label.dso-map.dso-spinner-left::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+a.dso-map.dso-spinner-left:not([disabled]):hover::before,
+button.dso-map.dso-spinner-left:not([disabled]):hover::before,
+label.dso-map.dso-spinner-left:not([disabled]):hover::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+a.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,
+button.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,
+label.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-map.dso-spinner-right::after,
+button.dso-map.dso-spinner-right::after,
+label.dso-map.dso-spinner-right::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+a.dso-map.dso-spinner-right:not([disabled]):hover::after,
+button.dso-map.dso-spinner-right:not([disabled]):hover::after,
+label.dso-map.dso-spinner-right:not([disabled]):hover::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: top;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+a.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,
+button.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,
+label.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-map,
+button.dso-map,
+label.dso-map {
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+  border: 0;
+  font-weight: 600;
+  margin-inline-end: 16px;
+  padding-block: 8px;
+  padding-inline: 16px;
+  white-space: nowrap;
+}
+a.dso-map:focus, a.dso-map:focus-visible,
+button.dso-map:focus,
+button.dso-map:focus-visible,
+label.dso-map:focus,
+label.dso-map:focus-visible {
+  outline-offset: -1px;
+}
+a.dso-map:has(span.sr-only):has(dso-icon, svg.di),
+button.dso-map:has(span.sr-only):has(dso-icon, svg.di),
+label.dso-map:has(span.sr-only):has(dso-icon, svg.di) {
+  padding: 8px;
+  min-inline-size: auto;
+  block-size: 40px;
+  inline-size: 40px;
+}
 
 a.dso-primary {
   text-decoration: none;
@@ -691,7 +909,7 @@ a.dso-secondary, a.dso-secondary:visited {
   color: #39870c;
 }
 a.dso-secondary:hover, a.dso-secondary:visited:hover {
-  color: #39870c;
+  color: #275937;
 }
 a.dso-tertiary {
   text-decoration: none;
@@ -1338,6 +1556,9 @@ a :is(dso-icon, svg.di) + span,
 a span + :is(dso-icon, svg.di) {
   margin-inline-start: 8px;
 }
+a .sr-only + :is(dso-icon, svg.di) {
+  margin-inline-start: 0;
+}
 a:visited {
   color: var(--link-visited-color);
 }

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

@@ -27,7 +27,7 @@ export class OzonContent {
             urlResolver: this.urlResolver,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '807b835205a7e3e3e13fb7faaeb6e6ec124c895c' }, transformed);
+        return h(Fragment, { key: 'f526a9017cccb1fd7036c63dbf05e0168c52810e' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.css

@@ -47,8 +47,7 @@
   padding-block: 2px;
   padding-inline: 2px;
 }
-.pagination ul > li > a:active,
-.pagination ul > li > span:active {
+.pagination ul > li > a:active {
   background-color: #ebf3e6;
 }
 .pagination ul > li > span {

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: '7fa95cadea1910729707d999a4ce378ad9127996', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '18b6cf01422a5d19e11ebcd7d830fc1f128b047f', wijzigactie: this.wijzigactie }, h("div", { key: '8dac1d02ef55c29deb97912754aa1a30d405fa95', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'f5e5482bf7c2bacb4f1d52acb7db8745f09a6eea', name: "symbol" })), h("div", { key: '34a0537c4f4f727dd22f9ec1b74eb93b15b08c35', 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: '5a389154b442082a092bae4e6b78c387b8459596', name: "meta" }), this.interaction !== null && h("slot", { key: '1e9b703da2a436a34bf66fec740fa2a995200899', name: "interaction" })), h("div", { key: '25d2c0652e6019d333f6c63ba5684fde9e279d01', class: "dso-plekinfo-card-content" }, h("slot", { key: '628c7e09d222c5a2b6a9bc18190a2d92e0805747', name: "content" })))));
+        return (h(Host, { key: 'a201b895003155d7f25e64519b36b531cf0ce24c', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'd17c9e4c9bebfa7b39fc683be3b764985d1253dc', wijzigactie: this.wijzigactie }, h("div", { key: '904e313b8d4edb9a79e082b797bb437e8924c9fb', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '3d82760ef3828843baadea7e3afa70544e0770c7', name: "symbol" })), h("div", { key: '17af89a7ba640f49a0466a36c9afbd28250218b8', 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: '9f1347080e45dd3926591107cedc254ff10af7b1', name: "meta" }), this.interaction !== null && h("slot", { key: '62b3273f54f1e448b015a7f5e53cca2410b90f2d', name: "interaction" })), h("div", { key: '1cc348a9741110027cffcb5221834418bf24d5ca', class: "dso-plekinfo-card-content" }, h("slot", { key: '90eab293c95b9972c59cc9c1e0eff1a4f55e5a9a', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class ProgressBar {
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: 'f0cda484e657779646d8395cdcdf67a215c21788', class: "progress" }, h("span", { key: 'ad5ae8c70e41cefbc0ef53ba37ff65b8ca9b4592', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '99083468d84238774d389784e01b48dabff3a3b5', style: { width: `${progressPercentage}` } })), h("span", { key: '2053ba9b11475818c3eca80600a0140f7ca6b95a', id: "progress-bar-label" }, h("slot", { key: '1e5884c115f37ef51a9f38a5048ea099074df4d6' }))));
+        return (h("div", { key: '40521f2c53b54f7850a17554f6243aec2c57c03e', class: "progress" }, h("span", { key: '074d5842a7de6677e65b273738dbda4acc9c935d', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '4d8427286c61cd604549665dd9f4c648b4c663bd', style: { width: `${progressPercentage}` } })), h("span", { key: '71876a2059c564cde39196b50950a1598809aba1', id: "progress-bar-label" }, h("slot", { key: '39979bcb43c3e258934e5d0d80ca2e4584677b81' }))));
     }
     static get is() { return "dso-progress-bar"; }
     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: 'ac03a42c6efa09eb029b70109d69dc3d29b18bc6' }, h("span", { key: '373c57f5004a80eee93c54e7779ef35d2b4ac11c', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '755cb0f7a6f47f900aa1823281560cfe0c444160', icon: "spinner" })), h("span", { key: '7b1cd957a3ecc1a141e5741b363391afbe331a15', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '1cae1ecc0189ba8e3f398be733261208bff72507' }, h("span", { key: '18c9e94d07e685e9e628ea962e3e5a92d4942a8e', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'c3621e2064b6dcd7100a5bab325938b5f4979467', icon: "spinner" })), h("span", { key: '5540253b6a6a40d130b2b8e5f8341981ed708396', 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, null, h("div", { key: 'c4ba960fe7bbe6ca054f7d3fa91dbe15929fe007', class: "project-item-header" }, h("div", { key: 'cee7bb40fa04ea7d84bbb3e78bc037f576900482', class: "project-item-title" }, h("slot", { key: 'a2ec4e0de292bf9cc75ef2abdec1254c4414e2e1', name: "title" }), this.label && (h("dso-label", { key: 'f9ff96e5377974f73610b8dea201ee15bc4749a8', status: "error", compact: true }, this.label))), h("div", { key: 'a016befbe32b4577bbee97d4ad81409f4dd39bf7', class: "project-item-actions" }, h("slot", { key: 'd0c0f67dc0687eb4d66c994e7847a91fd4068c93', name: "actions" }))), h("div", { key: '3af69d4212bc4ef38105219cbd55368b1f8b4577', class: "project-item-info" }, h("div", { key: '9175540a26adecddf0c3778d66a0779757301a92', class: "project-item-progress" }, h("slot", { key: 'cd26cee869f16db4f86b67bffccddea1be1edceb', name: "progress" })), h("div", { key: '23f23564c970b32b367cf4a0e4dadfb1297dc4d7', class: "project-item-status" }, h("slot", { key: 'a26a6851e6b215997f09acb15985becf16e0fc47', name: "status" })))));
+        return (h(Fragment, null, h("div", { key: 'af232d23ec7307a08cfd541e9cd6a7c9d101f442', class: "project-item-header" }, h("div", { key: '3310dd878965eb7a8338f92a7a475a8a2e5d1ed8', class: "project-item-title" }, h("slot", { key: '2a7a705075ba857ebec0db96fed670eb2f37e38e', name: "title" }), this.label && (h("dso-label", { key: 'e6b771509298d10fee06b2db5a5814abf6b39073', status: "error", compact: true }, this.label))), h("div", { key: 'a850f520e5b1f749e5981c02c3013ba189e7e12f', class: "project-item-actions" }, h("slot", { key: 'bd1e274fecd646bfdcea22ee9f287ec9b36a623f', name: "actions" }))), h("div", { key: 'a6637e1b65e227d288c7570e04898f1bf56f4e99', class: "project-item-info" }, h("div", { key: '07b60fe8df706537cd65c7d58a0e3a475edbbfc1', class: "project-item-progress" }, h("slot", { key: 'b472f3fb67d00ff25cfc90005f87f7ac12e8f9ce', name: "progress" })), h("div", { key: '9e72c54ec0489b67b0ec68ec5b7b2ceef5a7a605', class: "project-item-status" }, h("slot", { key: 'd4bb5471f42e7799ca2d388c39a4c3a8c7e30475', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

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: '858508e3f0e7cb0d262b85a8fe3d1560bea33928', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '5c5d8a737a57cf6835d551e6634efda0d71bd155' })));
+        return (h(Host, { key: 'e91c4381f1dbed450ac401d4da518280a8c29779', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '41e3674a479ce776ef848b0752b928cb89a3dd4b' })));
     }
     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: '27a5dac53adb8c1b424464b6fae0e95f5e960ba7', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '9412b6861a8b78e170e46e5dec9ecf815bf9e6d2', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '8731a96c831972ad8f3ab111c24977bfb8ab3b49', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'b2af22551c7847525bbf52ab8fef0a71cc84da7e', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'ea2b880a17bc51c9e6b288a06bc58758cb2fcae0' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: '69233c37151fc601b20b938d828dba01ec98033a' }))));
     }
     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: 'e57c370cd97bd93a8771778d1f272a221fc18360' }, h("div", { key: '7612404086ef5b4f6c94b1a9c5204d491dd5232e', class: "dso-selectable-container" }, h("div", { key: '1020efc6687fa9d58f6f7ebb469d73abeb7992b0', class: "dso-selectable-input-wrapper" }, h("input", { key: '59a47be1da13cd779ae2979222b6984647381b6c', 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: 'abf95b249893b8e3b5f4f775aebc6182f6afa0e9', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '03239cd235c922892ea0a986c6dd1d666b6d7999', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '06cbabbf9535b9cdc5b9f6d45b356b655ee62fd4' }, h("slot", { key: 'e0265c860d4dd17f3dac626aab785baaf50b6c22', name: "info" })))), h("slot", { key: '58a311812380a2130690696945618e31889058d6', name: "options" })));
+        return (h(Fragment, { key: 'd1ac7e7b96a5ae26b6bcbbd6be4e831d9f17073e' }, h("div", { key: '790e415174f84dd639429fa110edc78359e8bc1e', class: "dso-selectable-container" }, h("div", { key: 'c9092d85b8067406ad5e5fa289d3d3c445ed1061', class: "dso-selectable-input-wrapper" }, h("input", { key: '2804a9faced594cd59cf79a8a7d189a2ff43b7f3', 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: '628b1c558a78e2cddf2582edb3898415cb5093b6', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '1547be169f3f85655025bf031333565298425b81', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '26d8eb7d5938f1c79e86425eaa59c6b9430484f0' }, h("slot", { key: 'ca9a1ba6b6b4124a05784780e193b81f1a9c16c1', name: "info" })))), h("slot", { key: 'f0e200a88d892b50e41cb9b129a41b9fb6055f84', 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: '419ca75639e9132fee27795cdb68ee651851c5dd', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'b6a35fa4e76ebdbd13ed854e9000f6dc902489f2', icon: "chevron-right" })));
+        return (h("a", { key: '9d91efb96653b3344f79386814633d08520d6ab0', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '3d79ed32ff98d7e1e7eea58307d03892756dbbf1', 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, null, h("button", Object.assign({ key: '0a7d621a2386dc45cbb6ed81147cebfa2b65497b', 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: '9a84d784edbe2e28e44d6036c603a05298b83662', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'e57f0b3af5dead00fee4ac83da16cd5fd625627a', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'db795007a85f973152665194894412b149d49788', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '023ef5278f1079477fa4083410118c6075b694db', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '5efbb31b7f2a2f5af6f2b28f6a0f9c941eda9c73', htmlFor: this.identifier }, h("slot", { key: '392472d6455c7ced4921403b99979b014b9ad70a' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: '2687a8e260347da037c9042e52e77671b67ecb7f', 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: '0274a0de7b39ca3c8d49498e6d9f8f20feedb3d9', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '29a2cd9081df854eeb432313ede37642f1940d27', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '676f0c561f27aae117d52017b0988cc2715f44dd', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '7e55a33bb6e47a543e6c9f1b0f3c3271b714cba6', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '20928974be6f841a43d41a23a980070d9df81b42', htmlFor: this.identifier }, h("slot", { key: '6b00a5c5956eb38d2a05c02e8b44fd38a38c428a' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -315,12 +315,12 @@ button.dso-secondary {
 }
 button.dso-secondary:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
-  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);
-  color: var(--_dso-button-secondary-hover-color, #39870c);
+  border-color: var(--_dso-button-secondary-hover-border-color, #275937);
+  color: var(--_dso-button-secondary-hover-color, #275937);
 }
 button.dso-secondary:active {
-  background-color: var(--_dso-button-secondary-active-background-color, #39870c);
-  border-color: var(--_dso-button-secondary-active-border-color, #39870c);
+  background-color: var(--_dso-button-secondary-active-background-color, #275937);
+  border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
 }
 button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {

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

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '9fef83f445505926d3fbd17b94f45ee360c1414b', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '2604020f112b1fa81d4353737642bb402e83f124', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '846647b2404641e81b6499a6551839fea34eda05' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: 'ccdcee738c159ef921a3367113b3b121ce2eb31b', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '752a671ccd61785d52d28081d7a1eedccf106e7e', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '690b90664181f3f839648dbc92b2a252e444a347' }, "Heel moeilijk"), h("span", { key: 'abb6f5858f5ec732ff7f3fe04809043c2ec2d48a' }, "Heel makkelijk")), h("div", { key: 'a0dfe5f6a48d7d9739b740fd1f674c831e932e63', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '81016f7594822935a6ae309ed6318b77bc406827', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'dac3edef0341cc1002e0744182d1a7e067b1ee8b', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '90262990003ecebe19ff7c369c9c8b2ed60a5267' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: 'b7c091b8dc46acca220d84f7177d0b659dcd421a', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '79601a8c24e799a5aeaf6b84e344b6b627a434c9', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'f68646c5634aea4fe1389508c179f7c0c6535bcc' }, "Heel moeilijk"), h("span", { key: '43242db84c7c9e2fa4d19b68467dc12f785f5429' }, "Heel makkelijk")), h("div", { key: 'f73be9a133488ca779c807279ba101eaa390497e', 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: '6325b5751d68812075d4bde1571d8997a64b17b8', type: "submit", class: "dso-secondary" }, h("span", { key: 'a0bff1e54ad525861ff6eab7939a39464769f4ec' }, "Antwoord verzenden")))));
+        })), h("button", { key: '46aa917170f7a02185c118d1ca4dfe8db7c4a8ab', type: "submit", class: "dso-secondary" }, h("span", { key: '955d1cde7295127ce3328c56e42cf5b1c1e9a77a' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }