@dso-toolkit/core 84.1.0 → 85.0.0

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDpKNH_F.js');
+var index = require('./index-2aek-b9X.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {

package/dist/cjs/{parse-wijzigactie-from-node.function-wjDjfhnI.js → parse-wijzigactie-from-node.function-rda6XbHZ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDpKNH_F.js');
+var index = require('./index-2aek-b9X.js');
 
 const MarkText = ({ mark, text, emitMarkItemHighlight }) => {
     const result = mark(text);
@@ -37,6 +37,6 @@ function parseWijzigactieFromNode(node) {
 exports.MarkText = MarkText;
 exports.parseWijzigactieFromNode = parseWijzigactieFromNode;
 exports.parseXml = parseXml;
-//# sourceMappingURL=parse-wijzigactie-from-node.function-wjDjfhnI.js.map
+//# sourceMappingURL=parse-wijzigactie-from-node.function-rda6XbHZ.js.map
 
-//# sourceMappingURL=parse-wijzigactie-from-node.function-wjDjfhnI.js.map
+//# sourceMappingURL=parse-wijzigactie-from-node.function-rda6XbHZ.js.map

package/dist/cjs/{parse-wijzigactie-from-node.function-wjDjfhnI.js.map → parse-wijzigactie-from-node.function-rda6XbHZ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"parse-wijzigactie-from-node.function-wjDjfhnI.js","sources":["src/functional-components/mark-text/mark-text.functional-component.tsx","src/utils/parse-xml.ts","src/components/ozon-content/functions/parse-wijzigactie-from-node.function.ts"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { MarkTextMarkFunction } from \"./mark-text.interfaces\";\r\n\r\nexport interface MarkTextProps {\r\n  mark: MarkTextMarkFunction;\r\n  text: string;\r\n  emitMarkItemHighlight(text: string, elementRef: HTMLElement): void;\r\n}\r\n\r\nexport const MarkText: FunctionalComponent<MarkTextProps> = ({ mark, text, emitMarkItemHighlight }) => {\r\n  const result = mark(text);\r\n\r\n  return !result || result.length === 0 ? (\r\n    <Fragment>{text}</Fragment>\r\n  ) : (\r\n    <Fragment>\r\n      {result.map((value) => {\r\n        if (typeof value === \"string\") {\r\n          return <Fragment>{value}</Fragment>;\r\n        }\r\n\r\n        return (\r\n          <mark\r\n            class={value.highlight ? \"dso-highlight\" : undefined}\r\n            ref={(ref) => value.highlight && ref && emitMarkItemHighlight(value.text, ref)}\r\n          >\r\n            {value.text}\r\n          </mark>\r\n        );\r\n      })}\r\n    </Fragment>\r\n  );\r\n};\r\n","const parser = new DOMParser();\r\n\r\nexport function parseXml(input: string): XMLDocument | undefined {\r\n  if (!input) {\r\n    return undefined;\r\n  }\r\n\r\n  const doc = parser.parseFromString(input, \"application/xml\");\r\n\r\n  if (doc.querySelector(\"parsererror\")) {\r\n    console.error(\r\n      {\r\n        message: \"Unable to parse XML\",\r\n        input,\r\n        document: doc,\r\n      },\r\n      null,\r\n      2,\r\n    );\r\n\r\n    return undefined;\r\n  }\r\n\r\n  return doc;\r\n}\r\n","import { OzonContentWijzigActie } from \"../ozon-content.interfaces\";\r\n\r\nexport function parseWijzigactieFromNode(node: Node): OzonContentWijzigActie | undefined {\r\n  const wijzigactie = node instanceof Element ? node.getAttribute(\"wijzigactie\") : undefined;\r\n\r\n  return wijzigactie === \"voegtoe\" || wijzigactie === \"verwijder\" ? wijzigactie : undefined;\r\n}\r\n"],"names":["h","Fragment"],"mappings":";;;;AAUO,MAAM,QAAQ,GAAuC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAI;AACpG,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;AAEzB,IAAA,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IACnCA,OAAA,CAACC,cAAQ,EAAE,IAAA,EAAA,IAAI,CAAY,KAE3BD,QAACC,cAAQ,EAAA,IAAA,EACN,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AACpB,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAOD,OAAC,CAAAC,cAAQ,EAAE,IAAA,EAAA,KAAK,CAAY;;QAGrC,QACED,OACE,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,eAAe,GAAG,SAAS,EACpD,GAAG,EAAE,CAAC,GAAG,KAAK,KAAK,CAAC,SAAS,IAAI,GAAG,IAAI,qBAAqB,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,EAE7E,EAAA,KAAK,CAAC,IAAI,CACN;KAEV,CAAC,CACO,CACZ;AACH;;ACjCA,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE;AAExB,SAAU,QAAQ,CAAC,KAAa,EAAA;IACpC,IAAI,CAAC,KAAK,EAAE;AACV,QAAA,OAAO,SAAS;;IAGlB,MAAM,GAAG,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,iBAAiB,CAAC;AAE5D,IAAA,IAAI,GAAG,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE;QACpC,OAAO,CAAC,KAAK,CACX;AACE,YAAA,OAAO,EAAE,qBAAqB;YAC9B,KAAK;AACL,YAAA,QAAQ,EAAE,GAAG;AACd,SAAA,EACD,IAAI,EACJ,CAAC,CACF;AAED,QAAA,OAAO,SAAS;;AAGlB,IAAA,OAAO,GAAG;AACZ;;ACtBM,SAAU,wBAAwB,CAAC,IAAU,EAAA;AACjD,IAAA,MAAM,WAAW,GAAG,IAAI,YAAY,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,SAAS;AAE1F,IAAA,OAAO,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,WAAW,GAAG,WAAW,GAAG,SAAS;AAC3F;;;;;;"}
+{"version":3,"file":"parse-wijzigactie-from-node.function-rda6XbHZ.js","sources":["src/functional-components/mark-text/mark-text.functional-component.tsx","src/utils/parse-xml.ts","src/components/ozon-content/functions/parse-wijzigactie-from-node.function.ts"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { MarkTextMarkFunction } from \"./mark-text.interfaces\";\r\n\r\nexport interface MarkTextProps {\r\n  mark: MarkTextMarkFunction;\r\n  text: string;\r\n  emitMarkItemHighlight(text: string, elementRef: HTMLElement): void;\r\n}\r\n\r\nexport const MarkText: FunctionalComponent<MarkTextProps> = ({ mark, text, emitMarkItemHighlight }) => {\r\n  const result = mark(text);\r\n\r\n  return !result || result.length === 0 ? (\r\n    <Fragment>{text}</Fragment>\r\n  ) : (\r\n    <Fragment>\r\n      {result.map((value) => {\r\n        if (typeof value === \"string\") {\r\n          return <Fragment>{value}</Fragment>;\r\n        }\r\n\r\n        return (\r\n          <mark\r\n            class={value.highlight ? \"dso-highlight\" : undefined}\r\n            ref={(ref) => value.highlight && ref && emitMarkItemHighlight(value.text, ref)}\r\n          >\r\n            {value.text}\r\n          </mark>\r\n        );\r\n      })}\r\n    </Fragment>\r\n  );\r\n};\r\n","const parser = new DOMParser();\r\n\r\nexport function parseXml(input: string): XMLDocument | undefined {\r\n  if (!input) {\r\n    return undefined;\r\n  }\r\n\r\n  const doc = parser.parseFromString(input, \"application/xml\");\r\n\r\n  if (doc.querySelector(\"parsererror\")) {\r\n    console.error(\r\n      {\r\n        message: \"Unable to parse XML\",\r\n        input,\r\n        document: doc,\r\n      },\r\n      null,\r\n      2,\r\n    );\r\n\r\n    return undefined;\r\n  }\r\n\r\n  return doc;\r\n}\r\n","import { OzonContentWijzigActie } from \"../ozon-content.interfaces\";\r\n\r\nexport function parseWijzigactieFromNode(node: Node): OzonContentWijzigActie | undefined {\r\n  const wijzigactie = node instanceof Element ? node.getAttribute(\"wijzigactie\") : undefined;\r\n\r\n  return wijzigactie === \"voegtoe\" || wijzigactie === \"verwijder\" ? wijzigactie : undefined;\r\n}\r\n"],"names":["h","Fragment"],"mappings":";;;;AAUO,MAAM,QAAQ,GAAuC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAI;AACpG,IAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;AAEzB,IAAA,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IACnCA,OAAA,CAACC,cAAQ,EAAE,IAAA,EAAA,IAAI,CAAY,KAE3BD,QAACC,cAAQ,EAAA,IAAA,EACN,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,KAAI;AACpB,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAOD,OAAC,CAAAC,cAAQ,EAAE,IAAA,EAAA,KAAK,CAAY;;QAGrC,QACED,OACE,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,eAAe,GAAG,SAAS,EACpD,GAAG,EAAE,CAAC,GAAG,KAAK,KAAK,CAAC,SAAS,IAAI,GAAG,IAAI,qBAAqB,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,EAE7E,EAAA,KAAK,CAAC,IAAI,CACN;KAEV,CAAC,CACO,CACZ;AACH;;ACjCA,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE;AAExB,SAAU,QAAQ,CAAC,KAAa,EAAA;IACpC,IAAI,CAAC,KAAK,EAAE;AACV,QAAA,OAAO,SAAS;;IAGlB,MAAM,GAAG,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,iBAAiB,CAAC;AAE5D,IAAA,IAAI,GAAG,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE;QACpC,OAAO,CAAC,KAAK,CACX;AACE,YAAA,OAAO,EAAE,qBAAqB;YAC9B,KAAK;AACL,YAAA,QAAQ,EAAE,GAAG;AACd,SAAA,EACD,IAAI,EACJ,CAAC,CACF;AAED,QAAA,OAAO,SAAS;;AAGlB,IAAA,OAAO,GAAG;AACZ;;ACtBM,SAAU,wBAAwB,CAAC,IAAU,EAAA;AACjD,IAAA,MAAM,WAAW,GAAG,IAAI,YAAY,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,SAAS;AAE1F,IAAA,OAAO,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,WAAW,GAAG,WAAW,GAAG,SAAS;AAC3F;;;;;;"}

package/dist/cjs/{tooltip.functional-component-BQpcPpgi.js → tooltip.functional-component-DaIoD81Q.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DDpKNH_F.js');
+var index = require('./index-2aek-b9X.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 const Tooltip = ({ visible, onAfterHidden, tipElementRef, tipArrowElementRef }, children) => (index.h("div", { popover: "manual", id: "tooltip", class: clsx.clsx(["dso-tooltip", { visible }]), ref: tipElementRef, onTransitionEnd: (e) => {
@@ -11,6 +11,6 @@ const Tooltip = ({ visible, onAfterHidden, tipElementRef, tipArrowElementRef },
     } }, index.h("span", { class: "tooltip-arrow", ref: tipArrowElementRef }), index.h("div", { class: "tooltip-inner" }, children)));
 
 exports.Tooltip = Tooltip;
-//# sourceMappingURL=tooltip.functional-component-BQpcPpgi.js.map
+//# sourceMappingURL=tooltip.functional-component-DaIoD81Q.js.map
 
-//# sourceMappingURL=tooltip.functional-component-BQpcPpgi.js.map
+//# sourceMappingURL=tooltip.functional-component-DaIoD81Q.js.map

package/dist/cjs/{tooltip.functional-component-BQpcPpgi.js.map → tooltip.functional-component-DaIoD81Q.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tooltip.functional-component-BQpcPpgi.js","sources":["src/functional-components/tooltip/tooltip.functional-component.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\ninterface TooltipProps {\r\n  visible: boolean;\r\n  onAfterHidden: () => void;\r\n  tipElementRef: (ref: HTMLDivElement | undefined) => void;\r\n  tipArrowElementRef: (ref: HTMLSpanElement | undefined) => void;\r\n}\r\n\r\nexport const Tooltip: FunctionalComponent<TooltipProps> = (\r\n  { visible, onAfterHidden, tipElementRef, tipArrowElementRef },\r\n  children,\r\n) => (\r\n  <div\r\n    popover=\"manual\"\r\n    id=\"tooltip\"\r\n    class={clsx([\"dso-tooltip\", { visible }])}\r\n    ref={tipElementRef}\r\n    onTransitionEnd={(e) => {\r\n      e.stopPropagation();\r\n\r\n      if (e.propertyName === \"opacity\" && !visible) {\r\n        onAfterHidden();\r\n      }\r\n    }}\r\n  >\r\n    <span class=\"tooltip-arrow\" ref={tipArrowElementRef}></span>\r\n    <div class=\"tooltip-inner\">{children}</div>\r\n  </div>\r\n);\r\n"],"names":["h","clsx"],"mappings":";;;;;AAUa,MAAA,OAAO,GAAsC,CACxD,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAC7D,QAAQ,MAERA,OAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAC,SAAS,EACZ,KAAK,EAAEC,SAAI,CAAC,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EACzC,GAAG,EAAE,aAAa,EAClB,eAAe,EAAE,CAAC,CAAC,KAAI;QACrB,CAAC,CAAC,eAAe,EAAE;QAEnB,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,EAAE;AAC5C,YAAA,aAAa,EAAE;;AAEnB,KAAC,EAAA,EAEDD,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,kBAAkB,EAAS,CAAA,EAC5DA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EAAE,QAAQ,CAAO,CACvC;;;;"}
+{"version":3,"file":"tooltip.functional-component-DaIoD81Q.js","sources":["src/functional-components/tooltip/tooltip.functional-component.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\ninterface TooltipProps {\r\n  visible: boolean;\r\n  onAfterHidden: () => void;\r\n  tipElementRef: (ref: HTMLDivElement | undefined) => void;\r\n  tipArrowElementRef: (ref: HTMLSpanElement | undefined) => void;\r\n}\r\n\r\nexport const Tooltip: FunctionalComponent<TooltipProps> = (\r\n  { visible, onAfterHidden, tipElementRef, tipArrowElementRef },\r\n  children,\r\n) => (\r\n  <div\r\n    popover=\"manual\"\r\n    id=\"tooltip\"\r\n    class={clsx([\"dso-tooltip\", { visible }])}\r\n    ref={tipElementRef}\r\n    onTransitionEnd={(e) => {\r\n      e.stopPropagation();\r\n\r\n      if (e.propertyName === \"opacity\" && !visible) {\r\n        onAfterHidden();\r\n      }\r\n    }}\r\n  >\r\n    <span class=\"tooltip-arrow\" ref={tipArrowElementRef}></span>\r\n    <div class=\"tooltip-inner\">{children}</div>\r\n  </div>\r\n);\r\n"],"names":["h","clsx"],"mappings":";;;;;AAUa,MAAA,OAAO,GAAsC,CACxD,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAC7D,QAAQ,MAERA,OAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAC,SAAS,EACZ,KAAK,EAAEC,SAAI,CAAC,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EACzC,GAAG,EAAE,aAAa,EAClB,eAAe,EAAE,CAAC,CAAC,KAAI;QACrB,CAAC,CAAC,eAAe,EAAE;QAEnB,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,EAAE;AAC5C,YAAA,aAAa,EAAE;;AAEnB,KAAC,EAAA,EAEDD,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,kBAAkB,EAAS,CAAA,EAC5DA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EAAE,QAAQ,CAAO,CACvC;;;;"}

package/dist/collection/components/accordion/components/accordion-section.css

@@ -315,8 +315,6 @@
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;

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

@@ -98,8 +98,6 @@
   inset-block: 4px auto;
   inset-inline: -20px auto;
   border-radius: 50%;
-}
-.group .option-label::before {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;

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

@@ -100,8 +100,6 @@
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-.alert.alert-success {
   border-color: var(--_dso-alert-success-border-color, #e4f1d4);
 }
 .alert.alert-success.dso-compact::before {
@@ -131,8 +129,6 @@
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-.alert.alert-error {
   border-color: var(--_dso-alert-error-border-color, #f5d8dc);
 }
 .alert.alert-error.dso-compact::before {
@@ -162,8 +158,6 @@
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f8f6cc;
   color: #191919;
-}
-.alert.alert-warning {
   border-color: var(--_dso-alert-warning-border-color, #f8f6cc);
 }
 .alert.alert-warning.dso-compact::before {
@@ -193,8 +187,6 @@
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e1ecf7;
   color: #191919;
-}
-.alert.alert-info {
   border-color: var(--_dso-alert-info-border-color, #e1ecf7);
 }
 .alert.alert-info.dso-compact::before {

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

@@ -26,8 +26,6 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download {
   background-size: 1.25em 1.25em;
   padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
   background-position: bottom 0 right 0;
-}
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download {
   background-image: var(--_dso-di-background-image, url("./di.svg#download"));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:focus-visible {
@@ -38,8 +36,6 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern {
   background-size: 1.25em 1.25em;
   padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
   background-position: bottom 0 right 0;
-}
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern {
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link"));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:focus-visible {
@@ -50,8 +46,6 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"] {
   background-size: 1.25em 1.25em;
   padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
   background-position: bottom 0 left 0;
-}
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"] {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-grasgroen"));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:focus-visible {
@@ -62,8 +56,6 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"] {
   background-size: 1.25em 1.25em;
   padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
   background-position: bottom 0 left 0;
-}
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"] {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-grasgroen"));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:focus-visible {
@@ -103,8 +95,6 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-:host([wijzigactie=voegtoe]) {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
@@ -137,8 +127,6 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-:host([wijzigactie=verwijder]) {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;

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

@@ -30,8 +30,6 @@
   padding-block: 4px;
   padding-inline: 8px;
   text-align: center;
-}
-.dso-badge {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
@@ -56,8 +54,6 @@
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #666;
   color: #fff;
-}
-.dso-badge {
   border-color: #666;
 }
 .dso-badge.badge-info {
@@ -85,8 +81,6 @@
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #2b5780;
   color: #fff;
-}
-.dso-badge.badge-info {
   border-color: #2b5780;
 }
 .dso-badge.badge-primary {
@@ -114,8 +108,6 @@
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #275937;
   color: #fff;
-}
-.dso-badge.badge-primary {
   border-color: #275937;
 }
 .dso-badge.badge-success {
@@ -143,8 +135,6 @@
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #39870c;
   color: #fff;
-}
-.dso-badge.badge-success {
   border-color: #39870c;
 }
 .dso-badge.badge-warning {
@@ -175,8 +165,6 @@
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #dcd400;
   color: #191919;
-}
-.dso-badge.badge-warning {
   border-color: #dcd400;
 }
 .dso-badge.badge-error {
@@ -204,8 +192,6 @@
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #ce3f51;
   color: #fff;
-}
-.dso-badge.badge-error {
   border-color: #ce3f51;
 }
 .dso-badge.badge-outline {
@@ -215,8 +201,6 @@
   --_dso-alert-warning-border-color: initial;
   background-color: #fff;
   color: #191919;
-}
-.dso-badge.badge-outline {
   border-color: #191919;
 }
 .dso-badge.badge-attention {
@@ -244,7 +228,5 @@
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #8b4a6a;
   color: #fff;
-}
-.dso-badge.badge-attention {
   border-color: #8b4a6a;
 }

package/dist/collection/components/card/card.css

@@ -26,8 +26,6 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download {
   background-size: 1.25em 1.25em;
   padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
   background-position: bottom 0 right 0;
-}
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download {
   background-image: var(--_dso-di-background-image, url("./di.svg#download"));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:focus-visible {
@@ -38,8 +36,6 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern {
   background-size: 1.25em 1.25em;
   padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
   background-position: bottom 0 right 0;
-}
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern {
   background-image: var(--_dso-di-background-image, url("./di.svg#external-link"));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:focus-visible {
@@ -50,8 +46,6 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"] {
   background-size: 1.25em 1.25em;
   padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
   background-position: bottom 0 left 0;
-}
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"] {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-grasgroen"));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:focus-visible {
@@ -62,8 +56,6 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"] {
   background-size: 1.25em 1.25em;
   padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
   background-position: bottom 0 left 0;
-}
-a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"] {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-grasgroen"));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:focus-visible {

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

@@ -58,10 +58,6 @@ label.dso-primary {
   background-color: var(--_dso-button-primary-background-color, #39870c);
   border-color: var(--_dso-button-primary-border-color, #39870c);
   color: var(--_dso-button-primary-color, #fff);
-}
-a.dso-primary,
-button.dso-primary,
-label.dso-primary {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -263,10 +259,6 @@ label.dso-secondary {
   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-secondary,
-button.dso-secondary,
-label.dso-secondary {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -702,10 +694,6 @@ 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;
@@ -986,9 +974,6 @@ mark.dso-highlight {
 :host([wijzigactie=verwijderContainer]) .heading-container,
 :host(:where([wijzigactie=verwijder])) {
   --_dso-document-component-text-decoration: line-through;
-}
-:host([wijzigactie=verwijderContainer]) .heading-container,
-:host(:where([wijzigactie=verwijder])) {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
@@ -1021,9 +1006,6 @@ mark.dso-highlight {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-:host([wijzigactie=verwijderContainer]) .heading-container,
-:host(:where([wijzigactie=verwijder])) {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
 
@@ -1073,9 +1055,6 @@ mark.dso-highlight {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-:host([wijzigactie=nieuweContainer]) .heading-container,
-:host([wijzigactie=voegtoe]) {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }

package/dist/collection/components/icon-button/icon-button.css

@@ -23,8 +23,6 @@
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #666;
   color: #fff;
-}
-.dso-tooltip {
   border-radius: 4px;
   overflow: unset;
   margin: 0;
@@ -64,8 +62,6 @@
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #666;
   color: #fff;
-}
-.dso-tooltip .tooltip-inner {
   font-family: Asap, sans-serif;
   font-size: 1rem;
   font-weight: normal;
@@ -100,8 +96,6 @@
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #666;
   color: #fff;
-}
-.dso-tooltip .tooltip-arrow {
   position: absolute;
   border-start-start-radius: 4px;
   block-size: 8px;
@@ -147,8 +141,6 @@
   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);
-}
-.dso-secondary {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -333,8 +325,6 @@
   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);
-}
-.dso-map {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;

package/dist/collection/components/image-overlay/image-overlay.css

@@ -62,8 +62,6 @@ ins.editaction-add {
   margin-block-end: 8px;
   padding: 8px;
   text-decoration: none;
-}
-ins.editaction-add {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
@@ -91,16 +89,12 @@ ins.editaction-add {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-ins.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
 ins.editaction-add .wrapper {
   outline: none;
   padding: 8px;
-}
-ins.editaction-add .wrapper {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
@@ -128,8 +122,6 @@ ins.editaction-add .wrapper {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-ins.editaction-add .wrapper {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
@@ -147,8 +139,6 @@ del.editaction-remove {
   display: inline-block;
   margin-block-end: 8px;
   padding: 8px;
-}
-del.editaction-remove {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
@@ -176,8 +166,6 @@ del.editaction-remove {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-del.editaction-remove {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
@@ -190,8 +178,6 @@ del.editaction-remove {
 del.editaction-remove .wrapper {
   outline: none;
   padding: 8px;
-}
-del.editaction-remove .wrapper {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
@@ -219,8 +205,6 @@ del.editaction-remove .wrapper {
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-del.editaction-remove .wrapper {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;

package/dist/collection/components/info/info.css

@@ -3,8 +3,6 @@
   padding-block: 16px;
   padding-inline: 16px 32px;
   position: relative;
-}
-:host {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;

package/dist/collection/components/label/label.css

@@ -204,8 +204,6 @@
   --_dso-alert-warning-border-color: initial;
   background-color: #fff;
   color: #191919;
-}
-.dso-label.dso-label-bright {
   outline: 1px solid #ccc;
   outline-offset: -1px;
 }
@@ -263,8 +261,6 @@
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e1ecf7;
   color: #191919;
-}
-.dso-label.dso-label-filter {
   border-inline-start: 5px solid #6ca4d9;
 }
 .dso-label.dso-label-toegevoegd {
@@ -295,8 +291,6 @@
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
   color: #191919;
-}
-.dso-label.dso-label-toegevoegd {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
 }
@@ -328,8 +322,6 @@
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-}
-.dso-label.dso-label-verwijderd {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;

package/dist/collection/components/legend-item/legend-item.js

@@ -1,7 +1,8 @@
 import { Host, forceUpdate, h, } from "@stencil/core";
 import { clsx } from "clsx";
 /**
- * @slot The label for this Legend Item
+ * @slot label - The label for this Legend Item. Should be targetted with either `<h3 slot="label">...</h3>` or
+ * `<span slot="label">...</span>`
  * @slot symbol - A span where the symbol is styled upon
  * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.
  */
@@ -15,7 +16,7 @@ export class LegendItem {
     }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
-        this.mutationObserver.observe(this.host, { attributes: true, childList: true });
+        this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
     }
     disconnectedCallback() {
         var _a;
@@ -31,7 +32,12 @@ export class LegendItem {
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
-        return (h(Host, { key: 'f753caaecc4aeab79b89a20e1557a655b04cb260', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'a75c1d97fbbe89266574689c01f7a32df686d69b', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'a7f6cc12d291a5cd177a2d32c7ad3630ab389ea2' }, h("slot", { key: 'ba092f9b9282783c791b9a866aa553d5de0dff7f', name: "symbol" }))), h("div", { key: '89ba0029501e16008fc591447abf5da85064a247' }, h("slot", { key: 'ea1eddba325f2ee5dc3d993a796bcd08035ca3c1' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '7ae2b598a535263de28dcaa2cb285f21a25ca29e', position: "bottom" }, this.disabledMessage)), h("div", { key: '8b5ea6746505207e4aec98ef9ea794b2263f8a3a', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (h("dso-icon-button", { key: 'f1cbd32b832722464e312efb7fed5b73e5985952', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '99a2ff880a4de5fc5167fc1ca3fadf467e83f70d', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'e38b48835e20002548cc8c5bdf14543a077983f0', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '216cf4002d7666e9ae8452efa219dd8f8eed250d', name: "options" })))));
+        const label = this.host.querySelector("span[slot='label']");
+        let accessibleLabel = "Maak actief";
+        if (label === null || label === void 0 ? void 0 : label.textContent) {
+            accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;
+        }
+        return (h(Host, { key: '24af81db658898c1bc2317422cbb6ab38196083d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '174173193d7302d22d265e02a4147c6877241d0f', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '568089b5a568b92d12665a7c0eb78d3315c2c947' }, h("slot", { key: '325f14f024dca0edf52c2684097be1ca5eb6f014', name: "symbol" }))), h("div", { key: 'e72d3ac238b30577082a0edc4ab68de1d3b16f15' }, h("slot", { key: 'a1b4d6b740bd8a5ee32adcc5e40268bfd472c680', name: "label" })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '9bc17eafc23c61d8b53005d02fa4aacad6ca2d8d', position: "bottom" }, this.disabledMessage)), h("div", { key: '9208ae5adae3f59e0ab0a20c0a32b65cc3fbc40f', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (h("dso-icon-button", { key: '6489bc065e692b8dce8edb7a56d1d5672f8d21cd', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: 'bb79e502289dd11de8db82d78e00bade9b0a451c', accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'a3c74cdd73815b7519c9126d278da02c0281dfb6', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: 'b932318fd0ccb55f02e60e5e49e339453b61d955', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend-item/legend-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"legend-item.js","sourceRoot":"","sources":["../../../../src/components/legend-item/legend-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot The label for this Legend Item\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Controls whether this Legend Item can be active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  activatable?: boolean;\r\n\r\n  /**\r\n   * Controls whether this Legend Item is active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showOptions = false;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get optionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='options']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n          {hasSymbol && (\r\n            <div>\r\n              <slot name=\"symbol\" />\r\n            </div>\r\n          )}\r\n          <div>\r\n            <slot />\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n\r\n          <div class=\"legend-item-right-content\">\r\n            {this.active && hasOptions && !this.disabled && (\r\n              <dso-icon-button\r\n                label=\"Opties\"\r\n                icon=\"more\"\r\n                variant=\"tertiary\"\r\n                class={{ active: this.showOptions }}\r\n                id=\"edit-button\"\r\n                onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n              />\r\n            )}\r\n            {this.activatable && (\r\n              <dso-slide-toggle\r\n                accessibleLabel=\"Maak actief\"\r\n                checked={this.active}\r\n                disabled={this.disabled}\r\n                onDsoActiveChange={(e) =>\r\n                  this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n        {hasOptions && (\r\n          <div hidden={this.disabled || !this.showOptions} class=\"options\">\r\n            <slot name=\"options\" />\r\n          </div>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"legend-item.js","sourceRoot":"","sources":["../../../../src/components/legend-item/legend-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot label - The label for this Legend Item. Should be targetted with either `<h3 slot=\"label\">...</h3>` or\r\n * `<span slot=\"label\">...</span>`\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Controls whether this Legend Item can be active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  activatable?: boolean;\r\n\r\n  /**\r\n   * Controls whether this Legend Item is active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showOptions = false;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get optionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='options']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n    const label = this.host.querySelector(\"span[slot='label']\");\r\n    let accessibleLabel = \"Maak actief\";\r\n    if (label?.textContent) {\r\n      accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;\r\n    }\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n          {hasSymbol && (\r\n            <div>\r\n              <slot name=\"symbol\" />\r\n            </div>\r\n          )}\r\n          <div>\r\n            <slot name=\"label\" />\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n\r\n          <div class=\"legend-item-right-content\">\r\n            {this.active && hasOptions && !this.disabled && (\r\n              <dso-icon-button\r\n                label=\"Opties\"\r\n                icon=\"more\"\r\n                variant=\"tertiary\"\r\n                class={{ active: this.showOptions }}\r\n                id=\"edit-button\"\r\n                onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n              />\r\n            )}\r\n            {this.activatable && (\r\n              <dso-slide-toggle\r\n                accessibleLabel={accessibleLabel}\r\n                checked={this.active}\r\n                disabled={this.disabled}\r\n                onDsoActiveChange={(e) =>\r\n                  this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n        {hasOptions && (\r\n          <div hidden={this.disabled || !this.showOptions} class=\"options\">\r\n            <slot name=\"options\" />\r\n          </div>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/list-button/list-button.css

@@ -125,8 +125,6 @@
   background-color: #fff;
   border-color: #e5e5e5;
   color: #666;
-}
-.dso-button-group.dso-disabled > * {
   pointer-events: none;
 }
 .dso-button-group > * {
@@ -150,8 +148,6 @@
   flex-wrap: nowrap;
   padding-block: 0;
   padding-inline: 16px;
-}
-.dso-button-group > .dso-input-number {
   background-color: #fff;
   border-color: #ccc;
   color: #191919;
@@ -169,8 +165,6 @@
 }
 .dso-button-group > *.dso-selected + .dso-input-number {
   box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;
-}
-.dso-button-group > *.dso-selected + .dso-input-number {
   background-color: #fff;
   border-color: #39870c;
   color: #191919;
@@ -186,10 +180,6 @@
 .dso-button-group > *[disabled] + .dso-input-number,
 .dso-button-group > *[disabled] + .dso-input-number:hover {
   opacity: 1;
-}
-.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,
-.dso-button-group > *[disabled] + .dso-input-number,
-.dso-button-group > *[disabled] + .dso-input-number:hover {
   background-color: #fff;
   border-color: #ccc;
   color: #666;
@@ -219,8 +209,6 @@
   background-color: #fff;
   border-color: #ccc;
   color: #191919;
-}
-.dso-list-button {
   border-radius: 4px;
   border-width: 1px;
   border-style: solid;
@@ -247,8 +235,6 @@
   background-color: #fff;
   border-color: #ccc;
   color: #666;
-}
-.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {
   opacity: 1;
 }
 .dso-list-button dso-selectable:not(:last-child) {