@dso-toolkit/core 79.0.0 → 79.1.0

package/dist/collection/components/advanced-select/advanced-select.js

@@ -76,12 +76,12 @@ export class AdvancedSelect {
     }
     render() {
         var _a, _b;
-        return (h(Fragment, null, h("button", { key: '57d5cbcc817c119c470a08d43b92832bed397a2a', "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h(ActiveGroupLabel, { key: 'b91590eabccc667dcaf3e331522dfe90c8b137e6', active: this.active, options: this.options }), h("span", { key: 'ef0cff05fac02406b2e4df6b762a917044554a16', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), h("span", { key: '61b2dda775ac610cc3c36e2e8795e58efaafb3fd', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (h("span", { key: 'e264d64ad86adf4a8daa5fe3be4d20815f4468c3', class: "badges" }, this.options
+        return (h(Fragment, null, h("button", { key: '15ec55636d5b8e8c60310dec5e5b6a5822ba4931', "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h(ActiveGroupLabel, { key: '78fd61b57eb5bb1b902fb78ded529194bff85a90', active: this.active, options: this.options }), h("span", { key: '0be891dd5ae2a168f1b18bfd1d5e56dd6a085750', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), h("span", { key: '13559e8e947fe668da61e548206397443dc79f4c', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (h("span", { key: '2e3a7464939c9ebf7546983926d6cfb1258a74a0', class: "badges" }, this.options
             .filter((option) => "options" in option && "summaryCounter" in option && !!(option === null || option === void 0 ? void 0 : option.summaryCounter))
             .map((group) => {
             var _a;
             return (h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length));
-        }))), h("dso-icon", { key: 'cb475802c2552024418f1911d442ac05b9cf4791', icon: "caret-down" }))), this.open && (h("div", { key: '19b91e26c714cdcd810f7be9cde41da1e1b8598f', class: "groups-container" }, h("ul", { key: 'ca00d61058824d3f3eb29f15b77d52ecf9d7e605', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h("li", null, h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
+        }))), h("dso-icon", { key: '1cd8b93ecdfdc2c1cc2a0f6e2600b35e0980d224', icon: "caret-down" }))), this.open && (h("div", { key: '97b17d979ed45ac46e24a134cb6379a97a6f74ce', class: "groups-container" }, h("ul", { key: 'bf0c881272a3c3b6dfab624710acf8de0abc6dbf', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h("li", null, h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
             ("placeholder" in optionOrGroup && (h("li", { class: "group" }, h("p", { class: "group-label" }, optionOrGroup.label), h("p", { class: "placeholder" }, optionOrGroup.placeholder), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (h("li", null, h(OptionButton, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))))))));
     }
     static get is() { return "dso-advanced-select"; }

package/dist/collection/components/alert/alert.css

@@ -27,6 +27,10 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   border-color: #e4f1d4;
   color: #191919;
@@ -52,6 +56,10 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   border-color: #f5d8dc;
   color: #191919;
@@ -77,6 +85,10 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f8f6cc;
   border-color: #f8f6cc;
   color: #191919;
@@ -102,6 +114,10 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e1ecf7;
   border-color: #e1ecf7;
   color: #191919;
@@ -174,33 +190,10 @@
   inset-inline-start: 16px;
   position: absolute;
 }
-.alert .dso-close {
-  -webkit-appearance: button;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
+.alert dso-icon-button {
   position: absolute;
-  inset-block-start: 4px;
-  inset-inline-end: 4px;
-  block-size: 32px;
-  inline-size: 32px;
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-  text-align: center;
-}
-.alert .dso-close[disabled] {
-  cursor: default;
-}
-.alert .dso-close::-moz-focus-inner {
-  border: 0;
-  padding: 0;
+  inset-block-start: 8px;
+  inset-inline-end: 8px;
 }
 .alert.dso-compact {
   min-block-size: 16px;

package/dist/collection/components/alert/alert.js

@@ -15,7 +15,7 @@ export class Alert {
         if (!status) {
             throw new Error(`Invalid status ${this.status}`);
         }
-        return (h("div", { key: 'ef986366723194f13a8a837a4d795592c84ec75f', class: clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && h("dso-icon", { key: 'fa21e7726fbc5c2d2fa5c67d1ee57b91321af092', class: "icon-status", icon: "status-" + this.status }), h("span", { key: '01ea73bbf610e68ccea1e53a1529a06de55dfc9b', class: "sr-only" }, status, ":"), h("slot", { key: '8557f712cafebe78bcdf5e66f3f47ca5542f38f3' }), this.closable && (h("button", { key: 'bdd404219119fe31dd0759007714f3fb8fa952fa', type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { key: '082fa1243552fb7a7ccb245945789e3d29963194', icon: "times" }), h("span", { key: 'adf165881b7fbc3a285471363cc64bb5115be836', class: "sr-only" }, this.text("close"))))));
+        return (h("div", { key: 'd86186a40f37724d98aca01e18444cff009143a8', class: clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && h("dso-icon", { key: '17bb451ee5b59cd87ebda168807d72daa5b48c0f', class: "icon-status", icon: "status-" + this.status }), h("span", { key: '1a5b0acf53ac59b2887c72ccd8e2e57090a518ae', class: "sr-only" }, status, ":"), h("slot", { key: 'e25e6decf31ec3aa181cfdf947e8b70ff5dbc8c7' }), this.closable && (h("dso-icon-button", { key: '465d53662ed1f00a0486c0378a50c3625493036e', label: this.text("close"), variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }))));
     }
     static get is() { return "dso-alert"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQ5C,MAAM,OAAO,KAAK;IALlB;QA2BE;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAQT,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KA0BpD;IAxBC,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,IAAI,KAAK,CAAC,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACnD,CAAC;QAED,OAAO,CACL,4DACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;YAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,iEAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,GAAI;YACjF,6DAAM,KAAK,EAAC,SAAS;gBAAE,MAAM;oBAAS;YACtC,8DAAa;YAEZ,IAAI,CAAC,QAAQ,IAAI,CAChB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC;gBAC9F,iEAAU,IAAI,EAAC,OAAO,GAAY;gBAClC,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAQ,CAC1C,CACV,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./alert.i18n\";\r\nimport { AlertCloseEvent } from \"./alert.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  @Element()\r\n  host!: HTMLDsoAlertElement;\r\n\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  /**\r\n   * Show alert as compact variant (without icon)\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * When `false` the close button in the alert will not be rendered.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  /**\r\n   * Emitted when the user closes the Alert.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<AlertCloseEvent>;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    const status = this.text(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div\r\n        class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n        role={this.roleAlert ? \"alert\" : undefined}\r\n      >\r\n        {!this.compact && <dso-icon class=\"icon-status\" icon={\"status-\" + this.status} />}\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n\r\n        {this.closable && (\r\n          <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">{this.text(\"close\")}</span>\r\n          </button>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQ5C,MAAM,OAAO,KAAK;IALlB;QA2BE;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAQT,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KA4BpD;IA1BC,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACtC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,IAAI,KAAK,CAAC,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACnD,CAAC;QAED,OAAO,CACL,4DACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;YAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,iEAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,GAAI;YACjF,6DAAM,KAAK,EAAC,SAAS;gBAAE,MAAM;oBAAS;YACtC,8DAAa;YAEZ,IAAI,CAAC,QAAQ,IAAI,CAChB,wEACE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EACzB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC3D,CACH,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./alert.i18n\";\r\nimport { AlertCloseEvent } from \"./alert.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  @Element()\r\n  host!: HTMLDsoAlertElement;\r\n\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  /**\r\n   * Show alert as compact variant (without icon)\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * When `false` the close button in the alert will not be rendered.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  /**\r\n   * Emitted when the user closes the Alert.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<AlertCloseEvent>;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    const status = this.text(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div\r\n        class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n        role={this.roleAlert ? \"alert\" : undefined}\r\n      >\r\n        {!this.compact && <dso-icon class=\"icon-status\" icon={\"status-\" + this.status} />}\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n\r\n        {this.closable && (\r\n          <dso-icon-button\r\n            label={this.text(\"close\")}\r\n            variant=\"tertiary\"\r\n            icon=\"times\"\r\n            onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n          />\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/annotation/annotation-activiteit/annotation-activiteit.js

@@ -19,7 +19,7 @@ export class AnnotationActiviteit {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (h(AnnotationBody, { key: '5f7f95b4a735625893ea921bf4a063fb8f133f84', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h("dso-renvooi", { value: this.naam }), data: h(Fragment, null, h("span", { class: "content" }, this.regelKwalificatie && (h(Fragment, null, h("dso-renvooi", { value: this.regelKwalificatie }), " ")), this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `, h(AnnotationListRenvooiValues, { values: this.locatieNoemers })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: '185907ce82214791231917e4c53bee941b353e2d', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h("dso-renvooi", { value: this.naam }), data: h(Fragment, null, h("span", { class: "content" }, this.regelKwalificatie && (h(Fragment, null, h("dso-renvooi", { value: this.regelKwalificatie }), " ")), this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `, h(AnnotationListRenvooiValues, { values: this.locatieNoemers })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
     }
     static get is() { return "dso-annotation-activiteit"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/annotation/annotation-gebiedsaanwijzing/annotation-gebiedsaanwijzing.js

@@ -18,7 +18,7 @@ export class AnnotationGebiedsaanwijzing {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (h(AnnotationBody, { key: '6c300cca9c454f13bb3fb332dc9bec689dc079d1', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h("dso-renvooi", { value: this.naam })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: '1c2e9b1a174e6d1afd1dd70de5c702209d2823b8', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h("dso-renvooi", { value: this.naam })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
     }
     static get is() { return "dso-annotation-gebiedsaanwijzing"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/annotation/annotation-kaart/annotation-kaart.js

@@ -16,7 +16,7 @@ export class AnnotationKaart {
     }
     render() {
         const title = this.href ? (h("a", { class: "content", href: this.href, onClick: this.clickHandler }, h("dso-renvooi", { value: this.naam }))) : (h("span", { class: "content" }, h("dso-renvooi", { value: this.naam })));
-        return h(AnnotationBody, { key: '43c585932f9e2e1b01c100e32d64a893bd4c03c0', symbol: h("dso-icon", { icon: "land" }), title: title });
+        return h(AnnotationBody, { key: '680af669a24ea1a4834611e78339f482a592c8ec', symbol: h("dso-icon", { icon: "land" }), title: title });
     }
     static get is() { return "dso-annotation-kaart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/annotation/annotation-locatie/annotation-locatie.js

@@ -18,7 +18,7 @@ export class AnnotationLocatie {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (h(AnnotationBody, { key: 'fc08e2a53be97c74718fb33d5acd371186f3dcf7', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h("dso-renvooi", { value: this.locatieNoemer })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: '5dd14da69d583927dce47b326e4b78caf6f9f05d', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h("dso-renvooi", { value: this.locatieNoemer })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
     }
     static get is() { return "dso-annotation-locatie"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/annotation/annotation-omgevingsnormwaarde/annotation-omgevingsnormwaarde.js

@@ -21,7 +21,7 @@ export class AnnotationOmgevingsnormwaarde {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (h(AnnotationBody, { key: '7b118d1c32131742b38869b59683942e1d6f78e9', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active || false, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("dso-renvooi", { value: this.naam }), this.eenheid && (h(Fragment, null, " ", "(in ", h("dso-renvooi", { value: this.eenheid }), ")"))), data: h(Fragment, null, h("span", { class: "content" }, this.toelichting && h(Fragment, null, this.toelichting), this.waardes && this.waardes.length > 0 && (h(Fragment, null, ": ", h(AnnotationListRenvooiValues, { values: this.waardes })))), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: 'cfdf3412ce0519bea847163dee0750be8194a987', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active || false, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("dso-renvooi", { value: this.naam }), this.eenheid && (h(Fragment, null, " ", "(in ", h("dso-renvooi", { value: this.eenheid }), ")"))), data: h(Fragment, null, h("span", { class: "content" }, this.toelichting && h(Fragment, null, this.toelichting), this.waardes && this.waardes.length > 0 && (h(Fragment, null, ": ", h(AnnotationListRenvooiValues, { values: this.waardes })))), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
     }
     static get is() { return "dso-annotation-omgevingsnormwaarde"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/annotation/annotation.css

@@ -79,6 +79,10 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   border-color: #e4f1d4;
   color: #191919;
@@ -103,6 +107,10 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   border-color: #f5d8dc;
   color: #191919;

package/dist/collection/components/attachments-counter/attachments-counter.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class AttachmentsCounter {
     render() {
-        return (h("span", { key: '7bc1608fbe166e44971fe220ab4d6d5ee80aa6cd', class: "dso-attachments" }, this.count, " ", h("span", { key: '6a1ad89f68cff3c54069c0631fe823149fd57f06', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: '8f45aec5a772805bace01ae3b79e25b52e18a815', icon: "paperclip" })));
+        return (h("span", { key: 'b11de72fcb7669716ed27ed4bfb65ee395b6c4bd', class: "dso-attachments" }, this.count, " ", h("span", { key: '2b9017488e1a4d57983863b38f2bcf928d984a21', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: 'cf3647f6e9d3ad22d614323aae84d8eaa196b5df', icon: "paperclip" })));
     }
     static get is() { return "dso-attachments-counter"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/autosuggest/autosuggest.js

@@ -481,7 +481,7 @@ export class Autosuggest {
         else if (this.input) {
             this.input.removeAttribute("aria-controls");
         }
-        return (h(Fragment, null, h("slot", { key: '75db3245d7e2a85722c0a408bfa8c2d117000a4a' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element) }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
+        return (h(Fragment, null, h("slot", { key: '21764b36de5db37e44defc6473ea96e8e06d54e0' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element) }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
             this.showSuggestions &&
             this.suggestions &&
             this.suggestions.map((suggestion) => (h(Option, { id: this.listboxItemId(suggestion), mouseEnter: () => this.selectSuggestion(suggestion), mouseLeave: () => this.resetSelectedSuggestion(), click: () => this.pickSelectedValue(), selected: (suggestion === this.selectedSuggestion).toString(), suggestion: suggestion, ref: (element) => element && this.listboxItems.push(element), markedSuggestion: this.getMarkedSuggestions(suggestion) })))) ||

package/dist/collection/components/badge/badge.css

@@ -31,31 +31,40 @@
   text-align: center;
 }
 .dso-badge {
+  --_dso-icon-button-tertiary-color: #fff;
   background-color: #666;
   border-color: #666;
   color: #fff;
 }
 .dso-badge.badge-info {
+  --_dso-icon-button-tertiary-color: #fff;
   background-color: #2b5780;
   border-color: #2b5780;
   color: #fff;
 }
 .dso-badge.badge-primary {
+  --_dso-icon-button-tertiary-color: #fff;
   background-color: #275937;
   border-color: #275937;
   color: #fff;
 }
 .dso-badge.badge-success {
+  --_dso-icon-button-tertiary-color: #fff;
   background-color: #39870c;
   border-color: #39870c;
   color: #fff;
 }
 .dso-badge.badge-warning {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #dcd400;
   border-color: #dcd400;
   color: #191919;
 }
 .dso-badge.badge-error {
+  --_dso-icon-button-tertiary-color: #fff;
   background-color: #ce3f51;
   border-color: #ce3f51;
   color: #fff;
@@ -66,6 +75,7 @@
   color: #191919;
 }
 .dso-badge.badge-attention {
+  --_dso-icon-button-tertiary-color: #fff;
   background-color: #8b4a6a;
   border-color: #8b4a6a;
   color: #fff;

package/dist/collection/components/badge/badge.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import clsx from "clsx";
 export class Badge {
     render() {
-        return (h("span", { key: '13cd370ece543830dd2f80fdd8f89f9cd9a4cd8c', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: 'cc865288c79b6c431b28d415ed6e303f43d9224f' })));
+        return (h("span", { key: '5bc119f06c27f26c4d7d4ad913b727c98048bb7c', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: 'c7279ec156fd939d4d2d816373829564d2e31639' })));
     }
     static get is() { return "dso-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,9 +14,9 @@ export class Banner {
         this.icon = false;
     }
     render() {
-        return (h("section", { key: '6ec542fbb7b329d79fb6065c74be3c30edaa5bcc', class: clsx("dso-banner", `alert-${this.status}`, {
+        return (h("section", { key: 'd19ab00faab47b26f6cc5dbda513eabfebde19f6', class: clsx("dso-banner", `alert-${this.status}`, {
                 "dso-compact": this.compact,
-            }), role: "alert" }, h("slot", { key: 'c940029d0ad0ec681811cd6bb68446ccd41878c9' })));
+            }), role: "alert" }, h("slot", { key: '5b5a7b14ebf06f9d12a88ff89d9591aa643579bc' })));
     }
     static get is() { return "dso-banner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class ButtonGroup {
         return !!this.host.querySelector(":scope > .dso-map");
     }
     render() {
-        return (h("div", { key: '0833d62def3ca95de506748637bfb925c73f4b3a', class: clsx("container", { "has-map-buttons": this.hasMapButtons }), role: "group" }, h("slot", { key: '2185893b0e429692b16d40460cf4f877e2a0d1e5' })));
+        return (h("div", { key: 'd32c6176a41155f548387a437eb249fd867527f0', class: clsx("container", { "has-map-buttons": this.hasMapButtons }), role: "group" }, h("slot", { key: 'e62a071cf6fb4bcd779fcd086aa6825e1694ef86' })));
     }
     static get is() { return "dso-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,8 +30,8 @@ export class Card {
     }
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: '36c7e37e3565af414ebf091a9118b8c881ac18f7', "is-selectable": isSelectable }, h("div", { key: '69e0f342122bd4ac53ca18ea53ca9ea64c1802d1', class: "dso-card-container" }, h("div", { key: '880b4c8a61b841dfda3043f86f1b5ea37c742b44', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '985861bac731aecc3dc914a32db5bce35fc18da0', name: "selectable" })), h("div", { key: '3a77b0bcd5892f7e4a8d2e32c14d0d2eb7024144', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '756424c1507d093386d91ebd1b38f03f415071ac', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '052ff25dc558d89c3e674fb2efa4cfd9c83e385f', name: "heading" }), h("dso-icon", { key: '29f7e56fcdb75c2e4aaf2706e86197108239f1b3', icon: "external-link" }), h("span", { key: '1f8cff9385a86bd2fc4b20ee61f53019051d434d', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (h("a", { key: '3a18f6a6570b8967f16526503e2a23b8eea1937e', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'c50da6e83a090f725853154d3cbcd46b159ce893', name: "heading" }), h("dso-icon", { key: '06f7c304bffeab5264d2efb08490f00fe5ddf970', icon: "download" })))) || (h("a", { key: '17359530043bde8ca2c8c31a541667da26241c26', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'd6e44c271ee256b1f4ab024836854077dd7802ed', name: "heading" }), h("dso-icon", { key: '0d3445bd395ad3df910a42e93cdd3da375315fc9', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: '916c08c993eb995d6f572d0d3ae03eb69d17b755', name: "interactions" })), h("div", { key: '464f37a71643a16f2c63aa7ffaa9b0dda9b331fc', class: "dso-card-content" }, h("slot", { key: 'd05e86980f31e1af748768f5b8791fad464cc559', name: "content" })))));
+        return (h(Host, { key: '4054a302510ad07362d9089c942e58995baa99be', "is-selectable": isSelectable }, h("div", { key: '6bc8237ad90d02bfe4b3f051c616ce1fa5c2e93e', class: "dso-card-container" }, h("div", { key: '655658b4979420b339e0acd1e25d799b36ab8d33', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '441362e9baa84ea7366fd1eeda03bb694c3af304', name: "selectable" })), h("div", { key: 'b38fc0c9bbbb2fa228936039b6a4897ac1c27ad2', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: 'df8998e9b31aa38b61595cd49012b8f3ff51464e', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'b4685d2a490ed81e6eb7082a537a28fbae4d6072', name: "heading" }), h("dso-icon", { key: 'eb741b5b1d283c333e06ae0c87eb501aacb741b5', icon: "external-link" }), h("span", { key: '6f88b705b3967c9dd6b03419b6f18a7b1e77dc15', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
+            (this.mode === "download" && (h("a", { key: 'e0cf75a7c96ded19a96d96f4451c973336a1a507', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'c33e908eedae868f081bff313f0981449852de12', name: "heading" }), h("dso-icon", { key: 'ff774bc81320ea2f532f816de3a14c35899fb3ac', icon: "download" })))) || (h("a", { key: 'e0160cd81ad54b2665e5c87b49769aa8cf31fcfd', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '48dff93e79734127e2e578c1b8d28c2c6bf67085', name: "heading" }), h("dso-icon", { key: '89d2c5f135e95204702b1b76725c694da3e3ba8b', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: '177b551119e7b08ed23d501199d1ec57a60e6a95', name: "interactions" })), h("div", { key: '11a6c27534df33821844c9ff6ea602517f1602b0', class: "dso-card-content" }, h("slot", { key: '0145480ad4b5b50a80dcaa6c816e7cab3784d06f', name: "content" })))));
     }
     static get is() { return "dso-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class CardContainer {
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '90b07c1be81c9e8891fc3c56d9d67304347c2756', class: "dso-card-list" }, h("slot", { key: '28fd7e44a59870508de16cefaf245146004319bc' }))), this.mode === "grid" && (h("div", { key: '8a73e7edf8c218f0dee90aac272b148207c20d13', class: "dso-card-grid" }, h("slot", { key: '9406a30a0ddf5ac7d1c48b5e0003f61936945783' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: 'd593775800ecb1923ef9ad855255e7dd37ea591a', class: "dso-card-list" }, h("slot", { key: '7ea9f4b7e848bf3afa2039f5ec4ab14ce2573243' }))), this.mode === "grid" && (h("div", { key: 'b4ce1e46af681b37be5e7d53ee56be82a286d9c7', class: "dso-card-grid" }, h("slot", { key: '1d29ddba3f221ee0a507ba93a36869a24e4ad19f' })))));
     }
     static get is() { return "dso-card-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/contact-information/contact-information.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class ContactInformation {
     render() {
-        return (h("div", { key: 'a511c3b7e61371a74f3e55c0a71abaf56768cb52', class: "dso-contact-information" }, h("slot", { key: '98fae6e8614de0c46fb8fb5d55e77f5807dc4231', name: "heading" }), h("slot", { key: 'b84cd2bcc9a9874110d302b16ece15d37ab35896', name: "anchor-items" }), h("slot", { key: '32bae418af1a46f538c8cb4dde38e347f99cf7b1', name: "info-items" })));
+        return (h("div", { key: 'bbabd0b1c2088b6e7fffdd7c51dcbad08205a7e7', class: "dso-contact-information" }, h("slot", { key: 'e002381ccc600ede34f2d024d9ff6afa992d497b', name: "heading" }), h("slot", { key: 'f03b77b304836ccfe8cf48b310ea79f6fbdebb61', name: "anchor-items" }), h("slot", { key: 'b73bae3565c07464938d138c31fe5a9f3156e1f4', name: "info-items" })));
     }
     static get is() { return "dso-contact-information"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/date-picker.js

@@ -106,7 +106,7 @@ export class DsoDatePicker {
     }
     render() {
         var _a;
-        return (h("input", { key: 'a3e6335fedd3f1934ae485f331130c4975a7c009', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: 'f2fe8194c48bed2392736327c79db4420da4b14a', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     static get is() { return "dso-date-picker"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/date-picker-legacy/date-picker-legacy.js

@@ -449,14 +449,14 @@ export class DsoDatePickerLegacy {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '0b1ec6d7508b3bd54868d792da349f56723c49f7' }, h("div", { key: '3760db6ad5de67e53d9b663f21d9fa7c19c0c47a', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: 'f757525e60df0cd5566dba5c188cb9e6483f057d', class: "dso-date__input-wrapper" }, h("input", { key: 'c8ef8c3fb2524c1b996d0eedd5061b4c9b406738', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: '0b43d6689f0e9a450b3f5ea98bb7e61739552847', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: 'fd6f7ae09f4f28fc80f5e59022080a4340cd57ff', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'd956ec013af3fa9969e159093bdc9e83da2040cd', icon: "calendar" })), h("span", { key: '5fb48f01acb482324f576afb50884dfc8bf8ac5c', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'a9e593f6baedfd379febefd8b3259433314b7a03' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '58475a8e3df7056be4486e40c566d8f589bfc4b9', class: {
+        return (h(Host, { key: '396b32409bc093895e3f35d18dba8bd7e6777f46' }, h("div", { key: 'd5a5787fcc7f6a5126a266ff5add00b7ff586cba', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '85fd7e86974ab53580fb452ac1f18bc12a907c6d', class: "dso-date__input-wrapper" }, h("input", { key: 'b4f2997aa317cdf00396ff49d6c0a5f72764d503', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: 'e2b34c1e6d804f6bf96aaea34daea995c59cbec5', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '578b0315ed115d28f7906d585914bc6dae2a40cc', class: "dso-date__toggle-icon" }, h("dso-icon", { key: '90488726ea142805085372ed273ef6a10691f85a', icon: "calendar" })), h("span", { key: '34d925fe5facf889afa518e64150121df6e0ade7', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: '53471bfd4a6d8a3dd7a27582fadbf847f824f1dd' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '6a292ed13e8dfa5b972c8f1133238a535511cb8e', class: {
                 "dso-date__dialog": true,
                 "is-left": this.direction === "left",
                 "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'b9aaf2ee2e85356ebbb97c81ec6d2fc60d433aba', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'd5b24a9d0967a9389486c6d2d62c7df973092360', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'a7fa892c6141fb05cd9d5e25941b58d3f33103d8', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: '9ee19bb1e9323ded05446ea3f3e6a52817a32302', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '0b0f38cf720508e49a03b3336d22b484db8db0a9', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '55688d9e29a9d0e703cf9b05e064670f0eba97ae', icon: "times" }), h("span", { key: 'c851850368265c521ae301d7c9e0c753157d5739', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '0e768e06ffca70d595b49199cc43394f893f1936', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '650fce41916c3ddf60c5148d58300846cbc41bc2' }, h("h2", { key: '93e6938990982c205dbf34105dcfb7beeedfe5fb', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'e956e5066fbd5c56f33cdcacd9f4530a90bd1967', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'a4c988914df53fd0d0af4c808ee1094a72c15bdc', class: "dso-date__select" }, h("select", { key: 'ab5b9dd4f543d13278b4dd65edfae89c00339cc9', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'f8bb4ca24600a728f81e4247ef94641794ad84e3', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '1582c6e4e4d89c4339f791c43e3fc01e18f03989', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '3158d79a673e502aaa701fc41a2a15dd6ba5dc4b', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'fcc075c9782196ec11a77f5d6aa703b8e48cea78', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: 'bee7a83296c5f1f3bfe498c0392f41bebb9fd27d', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '3f66fe3d47a25baea3d7c148b1f5bec301f2bc29', icon: "times" }), h("span", { key: 'c5d4618409573374228a7e4489cdbfe1c66fdd7c', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: 'd9ba961084fb524b7f94139ce2a9857e9f7e1b0d', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '37d0dbcc0d777aafd31866d81dd758372585e908' }, h("h2", { key: 'de0e154dc96dc4e5cb3bcd2e588201a6cc5c9259', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'cd0ffce7c78da9bf2d49bdca4d0394341608e249', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '48230fd3e09c932282bbb4990eda095cb95fce06', class: "dso-date__select" }, h("select", { key: 'f00134b32f100aefd5c61a4de98e221ed09137a2', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
             const index = this.localization.monthNames.indexOf(month);
             return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-        })), h("div", { key: '55a1a117e095115fc80403ca836df2e69951f745', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd18823683d95dae481d4da151cd45637918c6e46' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '087bdd2d44ec99c7ded483fe930e166f91ccd0b4', icon: "chevron-down" }))), h("label", { key: 'f96ca586396432132d9482cbfac0a8896cf8c46d', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'ea7f1f0e42bf3344dab30e1a9aa9eff497ca11b5', class: "dso-date__select" }, h("select", { key: 'ab06d22ec2edd4b1d4828b47d4d495932ffd8e14', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '094f3bab580202d91c94658a5084812547c44017', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '1e4eabb3b6a4a546a79c43f91e18f8abffe9cf51' }, this.focusedDay.getFullYear()), h("dso-icon", { key: 'ecc4a276f2dd83053cb3759eda3a56bd4161f265', icon: "chevron-down" })))), h("div", { key: 'bbc9b3fad3a82919a006fd78befe7c88140ac97e', class: "dso-date__nav" }, h("button", { key: 'f8d45217ff383c4e140fc34e083fa163908510bb', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'f4a8cee55b8c3c8d5fa4db365e3a88137bc2ab3e', icon: "chevron-left" }), h("span", { key: '2f860a03cda77d7c9621906eb2ebb218635ef4cc', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '2222d594e39d8e7f39400777dc43a00d35f002a5', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '080cf2578b603e2c50e6bf4a50c3f1b4f9189db1', icon: "chevron-right" }), h("span", { key: 'b8388d0ccbd1a04a27737f6948d8bb6013b0322f', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: 'b9043d6761d0dbe9ce13ba0e4d26f646e0b2ffa5', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+        })), h("div", { key: 'a1670f7170408e13a577b9bb65ce222e02341af6', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c0878373562b07a3c4860c766219da9289734fd3' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '64b610f732f03334432be7ccdc60fa634b83b5b1', icon: "chevron-down" }))), h("label", { key: 'bb21bbcb63a45b503d26f9c50fa0ab987a7d7081', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '9a2ecf4ed6c4396a15ccadd40f2c04d9bf60dcbc', class: "dso-date__select" }, h("select", { key: 'a1a935ba195eca516b0a94e129ed320c64dd43ef', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'b16f15541e3637b65b39dd0b8e871710e36e59bb', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '64a6a5a00cbcf3ee9268c478cf2c1ff2d40e0abe' }, this.focusedDay.getFullYear()), h("dso-icon", { key: 'c0744674bcbba803aeaeca6ac1d684a1e7d3894a', icon: "chevron-down" })))), h("div", { key: '433d90659d6521b41a8cccd7683fad3da0bd4b2a', class: "dso-date__nav" }, h("button", { key: 'b40b6fd0c99e18e9f033cf1d41127194404408a1', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'e658b36996f0d2e3d9c164f746b66220a75dcbbf', icon: "chevron-left" }), h("span", { key: '499a5213ff977b13bd36ff4e91d83730a13ab51d', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'dcd28b6b36bfbf16de2fe529e5dbf4e65920c66b', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '034b916fa47349e82bdf2a95c9dab465784f1499', icon: "chevron-right" }), h("span", { key: '184cef66312cdcea2a50d0dcc218a55963577398', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '254d598e4ed0ca17332abef195292828262712c7', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
     }
     static get is() { return "dso-date-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

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

@@ -26,7 +26,7 @@ export class DocumentCard {
         return this.host.querySelector("[slot='meta']");
     }
     render() {
-        return (h("div", { key: 'a56e8db95294c83dfa5b558e47d72ee36c22c523', class: "dso-document-card-container" }, h("div", { key: '14fce780fceba683eb4e30cc6f060f7c7ff1dbce', class: "dso-document-card-heading" }, h("a", { key: '3423b19ac876cdd90135094d8d0b1430c4a53d0e', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '611617cd46d12105826465a46c3eb6ac41cb8dc4', class: "icon-container" }, h("dso-icon", { key: '84e9dc5793d9eb51b7748268df8c5b87cb27b24e', icon: "chevron-right" }), h("slot", { key: 'fdbb9ef5d508c67d7432e4aa6dd57d17f4bc730d', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '054d80082247a4eb97136f8e6d199229cb75edf6', name: "meta" })), h("div", { key: 'b7099c9ceaacf8691392fab1cfce9684b83babe2', class: "dso-document-card-type" }, h("slot", { key: '1e7a73fe9efa71d7362ae366ee1f4823b55720d6', name: "type" })), h("div", { key: '34309e92ede40ea37abfe3fc09d7e5270c56c7e9', class: "dso-document-card-status" }, h("slot", { key: 'c708100dfa943e139d3d17e5bd02dcffd02f185e', name: "status" }))));
+        return (h("div", { key: 'bbd724d0e936c3f7adb87aff14b8e30b85c7b0c9', class: "dso-document-card-container" }, h("div", { key: '4e8689ef58c31d4f490f105afe64b17c4f764cca', class: "dso-document-card-heading" }, h("a", { key: 'f8aa9dbc91f3307d6d7042599fab6d7d9ee110c7', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '35815a6a48d9ff6666197b0facbf30b4eef242cf', class: "icon-container" }, h("dso-icon", { key: '80a301e406813a4874aa64a565ef9cef7663a494', icon: "chevron-right" }), h("slot", { key: '79bb4598f8e89d9ac047347910c3e0dae3877fbf', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '94090520fef0be8297eeb50848e67ef2b3440367', name: "meta" })), h("div", { key: '5499a344d6a3b3e486df41e789cc1eb20634cbd2', class: "dso-document-card-type" }, h("slot", { key: '0f535e6c5b5574e9844e5ccb6a3fcb0f4fb15770', name: "type" })), h("div", { key: 'da465fb5a9994e922a87954beebfc95b64b04d06', class: "dso-document-card-status" }, h("slot", { key: 'eac2432d9123f912c7d37270c570e6dc23ca147b', name: "status" }))));
     }
     static get is() { return "dso-document-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/document-component/document-component.css

@@ -125,6 +125,43 @@ label.dso-primary.dso-small.dso-spinner-right::after {
   block-size: 16px;
   inline-size: 16px;
 }
+a.dso-primary.dso-extra-small,
+button.dso-primary.dso-extra-small,
+label.dso-primary.dso-extra-small {
+  line-height: 1rem;
+}
+a.dso-primary.dso-extra-small dso-icon,
+a.dso-primary.dso-extra-small svg.di, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before,
+button.dso-primary.dso-extra-small dso-icon,
+button.dso-primary.dso-extra-small svg.di,
+button.dso-primary.dso-extra-small.extern::after,
+button.dso-primary.dso-extra-small.download::after,
+button.dso-primary.dso-extra-small.dso-spinner::before,
+label.dso-primary.dso-extra-small dso-icon,
+label.dso-primary.dso-extra-small svg.di,
+label.dso-primary.dso-extra-small.extern::after,
+label.dso-primary.dso-extra-small.download::after,
+label.dso-primary.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-primary.dso-extra-small.dso-spinner-left::before,
+button.dso-primary.dso-extra-small.dso-spinner-left::before,
+label.dso-primary.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-primary.dso-extra-small.dso-spinner-right::after,
+button.dso-primary.dso-extra-small.dso-spinner-right::after,
+label.dso-primary.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-primary.dso-extra-small,
+button.dso-primary.dso-extra-small,
+label.dso-primary.dso-extra-small {
+  padding-block: 9px;
+}
 a.dso-primary dso-icon:has(+ span:not(.sr-only)),
 a.dso-primary svg.di:has(+ span:not(.sr-only)),
 button.dso-primary dso-icon:has(+ span:not(.sr-only)),
@@ -308,6 +345,43 @@ label.dso-secondary.dso-small.dso-spinner-right::after {
   block-size: 16px;
   inline-size: 16px;
 }
+a.dso-secondary.dso-extra-small,
+button.dso-secondary.dso-extra-small,
+label.dso-secondary.dso-extra-small {
+  line-height: 1rem;
+}
+a.dso-secondary.dso-extra-small dso-icon,
+a.dso-secondary.dso-extra-small svg.di, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before,
+button.dso-secondary.dso-extra-small dso-icon,
+button.dso-secondary.dso-extra-small svg.di,
+button.dso-secondary.dso-extra-small.extern::after,
+button.dso-secondary.dso-extra-small.download::after,
+button.dso-secondary.dso-extra-small.dso-spinner::before,
+label.dso-secondary.dso-extra-small dso-icon,
+label.dso-secondary.dso-extra-small svg.di,
+label.dso-secondary.dso-extra-small.extern::after,
+label.dso-secondary.dso-extra-small.download::after,
+label.dso-secondary.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-secondary.dso-extra-small.dso-spinner-left::before,
+button.dso-secondary.dso-extra-small.dso-spinner-left::before,
+label.dso-secondary.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-secondary.dso-extra-small.dso-spinner-right::after,
+button.dso-secondary.dso-extra-small.dso-spinner-right::after,
+label.dso-secondary.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-secondary.dso-extra-small,
+button.dso-secondary.dso-extra-small,
+label.dso-secondary.dso-extra-small {
+  padding-block: 9px;
+}
 a.dso-secondary dso-icon:has(+ span:not(.sr-only)),
 a.dso-secondary svg.di:has(+ span:not(.sr-only)),
 button.dso-secondary dso-icon:has(+ span:not(.sr-only)),
@@ -760,6 +834,43 @@ label.dso-map.dso-small.dso-spinner-right::after {
   block-size: 16px;
   inline-size: 16px;
 }
+a.dso-map.dso-extra-small,
+button.dso-map.dso-extra-small,
+label.dso-map.dso-extra-small {
+  line-height: 1rem;
+}
+a.dso-map.dso-extra-small dso-icon,
+a.dso-map.dso-extra-small svg.di, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before,
+button.dso-map.dso-extra-small dso-icon,
+button.dso-map.dso-extra-small svg.di,
+button.dso-map.dso-extra-small.extern::after,
+button.dso-map.dso-extra-small.download::after,
+button.dso-map.dso-extra-small.dso-spinner::before,
+label.dso-map.dso-extra-small dso-icon,
+label.dso-map.dso-extra-small svg.di,
+label.dso-map.dso-extra-small.extern::after,
+label.dso-map.dso-extra-small.download::after,
+label.dso-map.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+a.dso-map.dso-extra-small.dso-spinner-left::before,
+button.dso-map.dso-extra-small.dso-spinner-left::before,
+label.dso-map.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-map.dso-extra-small.dso-spinner-right::after,
+button.dso-map.dso-extra-small.dso-spinner-right::after,
+label.dso-map.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+a.dso-map.dso-extra-small,
+button.dso-map.dso-extra-small,
+label.dso-map.dso-extra-small {
+  padding-block: 9px;
+}
 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)),
@@ -951,6 +1062,10 @@ a.dso-tertiary, a.dso-tertiary:visited {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   border-color: #f5d8dc;
   color: #191919;
@@ -988,6 +1103,10 @@ a.dso-tertiary, a.dso-tertiary:visited {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   border-color: #e4f1d4;
   color: #191919;
@@ -1041,6 +1160,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 
 .recursive-toggle,
 .toggle-button {
+  --_dso-icon-button-tertiary-color: #275937;
   border: 0;
   padding: 0;
   background: 0;
@@ -1128,6 +1248,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 
 :host([mode=table-of-contents][type=ARTIKEL]) dso-ozon-content.kop::part(_kop) {
+  --_dso-icon-button-tertiary-color: inherit;
   color: inherit;
 }
 
@@ -1149,6 +1270,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 
 :host([type=ARTIKEL]) dso-ozon-content.kop::part(_kop),
 :host([type=ARTIKEL]) .toggle-button {
+  --_dso-icon-button-tertiary-color: colors.$zwart;
   color: #000;
 }