@dso-toolkit/core 79.0.1 → 80.0.0

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

@@ -6,7 +6,7 @@ const wijzigactieLabels = {
     voegtoe: "Toegevoegd",
 };
 const Dimmer = ({ active, src, alt, ref, click }, children) => active &&
-    src && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: ref }, children[2], children[0], h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: click }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten")), children[1])));
+    src && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: ref }, children[2], children[0], h("img", { src: src, alt: alt }), h("dso-icon-button", { icon: "times", variant: "map", class: "close", label: "Sluiten", onDsoClick: click }), children[1])));
 export class ImageOverlay {
     constructor() {
         this.active = false;
@@ -76,14 +76,14 @@ export class ImageOverlay {
         var _a;
         const { src, alt } = (_a = this.host.querySelector("img")) !== null && _a !== void 0 ? _a : {};
         const editActionLabel = (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) || undefined;
-        const button = this.zoomable && (h("button", { type: "button", class: "open", ref: (element) => (this.buttonElement = element), onClick: () => (this.active = true) }, h("dso-icon", { icon: "external-link" }), h("span", null, "Afbeelding vergroot weergeven")));
+        const button = this.zoomable && (h("dso-icon-button", { icon: "external-link", class: "open", variant: "map", label: "Afbeelding vergroot weergeven", ref: (element) => (this.iconButtonElement = element), onDsoClick: () => (this.active = true) }));
         if (this.wijzigactie === "verwijder") {
-            return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("del", { class: "editaction-remove" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
+            return (h(Host, { onClick: () => { var _a; return (_a = this.iconButtonElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } }, h("del", { class: "editaction-remove" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
         }
         if (this.wijzigactie === "voegtoe") {
-            return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h("ins", { class: "editaction-add" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
+            return (h(Host, { onClick: () => { var _a; return (_a = this.iconButtonElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } }, h("ins", { class: "editaction-add" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
         }
-        return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))), h("slot", null), button));
+        return (h(Host, { onClick: () => { var _a; return (_a = this.iconButtonElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } }, h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))), h("slot", null), button));
     }
     componentDidRender() {
         var _a, _b;
@@ -97,8 +97,11 @@ export class ImageOverlay {
                     }
                     return true;
                 },
-                setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
+                setReturnFocus: (_a = this.iconButtonElement) !== null && _a !== void 0 ? _a : false,
                 onDeactivate: () => (this.active = false),
+                tabbableOptions: {
+                    getShadowRoot: (node) => { var _a; return (_a = node.shadowRoot) !== null && _a !== void 0 ? _a : undefined; },
+                },
             }).activate();
         }
         else if (!this.active && this.trap) {

package/dist/collection/components/image-overlay/image-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-overlay.js","sourceRoot":"","sources":["../../../../src/components/image-overlay/image-overlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  FunctionalComponent,\r\n  Host,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\n\r\ntype ImageOverlayWijzigactie = \"voegtoe\" | \"verwijder\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in ImageOverlayWijzigactie]: string } = {\r\n  verwijder: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst Dimmer: FunctionalComponent<{\r\n  active: boolean;\r\n  src: string | undefined;\r\n  alt: string | undefined;\r\n  ref: (element: HTMLHeadingElement | undefined) => void;\r\n  click: () => void;\r\n}> = ({ active, src, alt, ref, click }, children) =>\r\n  active &&\r\n  src && (\r\n    <div class=\"dimmer\">\r\n      <div class=\"wrapper\" ref={ref}>\r\n        {children[2]}\r\n        {children[0]}\r\n        <img src={src} alt={alt} />\r\n        <button type=\"button\" class=\"close\" onClick={click}>\r\n          <dso-icon icon=\"times\"></dso-icon>\r\n          <span>Sluiten</span>\r\n        </button>\r\n        {children[1]}\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n@Component({\r\n  tag: \"dso-image-overlay\",\r\n  styleUrl: \"./image-overlay.scss\",\r\n  shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoImageOverlayElement;\r\n\r\n  /**\r\n   * The wijzigactie.\r\n   */\r\n  @Prop()\r\n  wijzigactie?: string;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  @State()\r\n  zoomable = false;\r\n\r\n  private buttonElement: HTMLButtonElement | undefined;\r\n\r\n  private wrapperElement: HTMLDivElement | undefined;\r\n\r\n  private trap: FocusTrap | undefined;\r\n\r\n  private titelSlot: HTMLElement | null = null;\r\n\r\n  private bijschriftSlot: HTMLElement | null = null;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  @Listen(\"load\", { capture: true })\r\n  loadListener(event: Event) {\r\n    if (event.target instanceof HTMLImageElement) {\r\n      this.setZoomable(event.target);\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n    this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.resizeObserver = new ResizeObserver(\r\n      debounce(() => {\r\n        const imgElement = this.host.querySelector(\"img\");\r\n\r\n        if (imgElement instanceof HTMLImageElement) {\r\n          this.setZoomable(imgElement);\r\n        }\r\n      }, 200),\r\n    );\r\n\r\n    this.mutationObserver = new MutationObserver((e) => {\r\n      forceUpdate(this.host);\r\n\r\n      if (e[0]?.type === \"childList\") {\r\n        this.resizeObserver?.disconnect();\r\n        // <img> is gone or a new element.\r\n        this.initZoomableImage();\r\n      }\r\n    });\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      attributes: true,\r\n      subtree: true,\r\n      attributeFilter: [\"src\", \"alt\"],\r\n      childList: true,\r\n    });\r\n\r\n    this.initZoomableImage();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.trap?.deactivate();\r\n    this.mutationObserver?.disconnect();\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  private initZoomableImage(): void {\r\n    const imgElement = this.host.querySelector(\"img\");\r\n\r\n    if (!(imgElement instanceof HTMLImageElement)) {\r\n      return;\r\n    }\r\n\r\n    // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n    if (imgElement.complete) {\r\n      this.setZoomable(imgElement);\r\n    }\r\n\r\n    this.resizeObserver?.observe(imgElement);\r\n  }\r\n\r\n  private setZoomable(imageElement: HTMLImageElement): void {\r\n    const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n    this.zoomable = width < naturalWidth || height < naturalHeight;\r\n  }\r\n\r\n  private isWijzigactie(wijzigactie: string): wijzigactie is ImageOverlayWijzigactie {\r\n    return wijzigactie === \"voegtoe\" || wijzigactie === \"verwijder\";\r\n  }\r\n\r\n  render() {\r\n    const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n    const editActionLabel: string | undefined =\r\n      (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) || undefined;\r\n\r\n    const button = this.zoomable && (\r\n      <button\r\n        type=\"button\"\r\n        class=\"open\"\r\n        ref={(element) => (this.buttonElement = element)}\r\n        onClick={() => (this.active = true)}\r\n      >\r\n        <dso-icon icon=\"external-link\"></dso-icon>\r\n        <span>Afbeelding vergroot weergeven</span>\r\n      </button>\r\n    );\r\n\r\n    if (this.wijzigactie === \"verwijder\") {\r\n      return (\r\n        <Host onClick={() => this.buttonElement?.focus()}>\r\n          <del class=\"editaction-remove\">\r\n            <div class=\"editaction-label\">{editActionLabel}:</div>\r\n            <Dimmer\r\n              active={this.active}\r\n              src={src}\r\n              alt={alt}\r\n              ref={(element) => (this.wrapperElement = element)}\r\n              click={() => (this.active = false)}\r\n            >\r\n              {this.titelSlot && (\r\n                <div class=\"title\">\r\n                  <slot name=\"titel\" />\r\n                </div>\r\n              )}\r\n              <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n                <slot name=\"bijschrift\" />\r\n              </div>\r\n              {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n            </Dimmer>\r\n            <slot />\r\n            {button}\r\n          </del>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    if (this.wijzigactie === \"voegtoe\") {\r\n      return (\r\n        <Host onClick={() => this.buttonElement?.focus()}>\r\n          <ins class=\"editaction-add\">\r\n            <div class=\"editaction-label\">{editActionLabel}:</div>\r\n            <Dimmer\r\n              active={this.active}\r\n              src={src}\r\n              alt={alt}\r\n              ref={(element) => (this.wrapperElement = element)}\r\n              click={() => (this.active = false)}\r\n            >\r\n              {this.titelSlot && (\r\n                <div class=\"title\">\r\n                  <slot name=\"titel\" />\r\n                </div>\r\n              )}\r\n              <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n                <slot name=\"bijschrift\" />\r\n              </div>\r\n              {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n            </Dimmer>\r\n            <slot />\r\n            {button}\r\n          </ins>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Host onClick={() => this.buttonElement?.focus()}>\r\n        <Dimmer\r\n          active={this.active}\r\n          src={src}\r\n          alt={alt}\r\n          ref={(element) => (this.wrapperElement = element)}\r\n          click={() => (this.active = false)}\r\n        >\r\n          {this.titelSlot && (\r\n            <div class=\"title\">\r\n              <slot name=\"titel\" />\r\n            </div>\r\n          )}\r\n          <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n            <slot name=\"bijschrift\" />\r\n          </div>\r\n        </Dimmer>\r\n        <slot />\r\n        {button}\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.active && this.wrapperElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.wrapperElement, {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {\r\n            this.active = false;\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => (this.active = false),\r\n      }).activate();\r\n    } else if (!this.active && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"image-overlay.js","sourceRoot":"","sources":["../../../../src/components/image-overlay/image-overlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  FunctionalComponent,\r\n  Host,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\n\r\ntype ImageOverlayWijzigactie = \"voegtoe\" | \"verwijder\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in ImageOverlayWijzigactie]: string } = {\r\n  verwijder: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst Dimmer: FunctionalComponent<{\r\n  active: boolean;\r\n  src: string | undefined;\r\n  alt: string | undefined;\r\n  ref: (element: HTMLHeadingElement | undefined) => void;\r\n  click: () => void;\r\n}> = ({ active, src, alt, ref, click }, children) =>\r\n  active &&\r\n  src && (\r\n    <div class=\"dimmer\">\r\n      <div class=\"wrapper\" ref={ref}>\r\n        {children[2]}\r\n        {children[0]}\r\n        <img src={src} alt={alt} />\r\n        <dso-icon-button icon=\"times\" variant=\"map\" class=\"close\" label=\"Sluiten\" onDsoClick={click} />\r\n        {children[1]}\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n@Component({\r\n  tag: \"dso-image-overlay\",\r\n  styleUrl: \"./image-overlay.scss\",\r\n  shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoImageOverlayElement;\r\n\r\n  /**\r\n   * The wijzigactie.\r\n   */\r\n  @Prop()\r\n  wijzigactie?: string;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  @State()\r\n  zoomable = false;\r\n\r\n  private iconButtonElement: HTMLDsoIconButtonElement | undefined;\r\n\r\n  private wrapperElement: HTMLDivElement | undefined;\r\n\r\n  private trap: FocusTrap | undefined;\r\n\r\n  private titelSlot: HTMLElement | null = null;\r\n\r\n  private bijschriftSlot: HTMLElement | null = null;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  @Listen(\"load\", { capture: true })\r\n  loadListener(event: Event) {\r\n    if (event.target instanceof HTMLImageElement) {\r\n      this.setZoomable(event.target);\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n    this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.resizeObserver = new ResizeObserver(\r\n      debounce(() => {\r\n        const imgElement = this.host.querySelector(\"img\");\r\n\r\n        if (imgElement instanceof HTMLImageElement) {\r\n          this.setZoomable(imgElement);\r\n        }\r\n      }, 200),\r\n    );\r\n\r\n    this.mutationObserver = new MutationObserver((e) => {\r\n      forceUpdate(this.host);\r\n\r\n      if (e[0]?.type === \"childList\") {\r\n        this.resizeObserver?.disconnect();\r\n        // <img> is gone or a new element.\r\n        this.initZoomableImage();\r\n      }\r\n    });\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      attributes: true,\r\n      subtree: true,\r\n      attributeFilter: [\"src\", \"alt\"],\r\n      childList: true,\r\n    });\r\n\r\n    this.initZoomableImage();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.trap?.deactivate();\r\n    this.mutationObserver?.disconnect();\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  private initZoomableImage(): void {\r\n    const imgElement = this.host.querySelector(\"img\");\r\n\r\n    if (!(imgElement instanceof HTMLImageElement)) {\r\n      return;\r\n    }\r\n\r\n    // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n    if (imgElement.complete) {\r\n      this.setZoomable(imgElement);\r\n    }\r\n\r\n    this.resizeObserver?.observe(imgElement);\r\n  }\r\n\r\n  private setZoomable(imageElement: HTMLImageElement): void {\r\n    const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n    this.zoomable = width < naturalWidth || height < naturalHeight;\r\n  }\r\n\r\n  private isWijzigactie(wijzigactie: string): wijzigactie is ImageOverlayWijzigactie {\r\n    return wijzigactie === \"voegtoe\" || wijzigactie === \"verwijder\";\r\n  }\r\n\r\n  render() {\r\n    const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n    const editActionLabel: string | undefined =\r\n      (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) || undefined;\r\n\r\n    const button = this.zoomable && (\r\n      <dso-icon-button\r\n        icon=\"external-link\"\r\n        class=\"open\"\r\n        variant=\"map\"\r\n        label=\"Afbeelding vergroot weergeven\"\r\n        ref={(element) => (this.iconButtonElement = element)}\r\n        onDsoClick={() => (this.active = true)}\r\n      />\r\n    );\r\n\r\n    if (this.wijzigactie === \"verwijder\") {\r\n      return (\r\n        <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n          <del class=\"editaction-remove\">\r\n            <div class=\"editaction-label\">{editActionLabel}:</div>\r\n            <Dimmer\r\n              active={this.active}\r\n              src={src}\r\n              alt={alt}\r\n              ref={(element) => (this.wrapperElement = element)}\r\n              click={() => (this.active = false)}\r\n            >\r\n              {this.titelSlot && (\r\n                <div class=\"title\">\r\n                  <slot name=\"titel\" />\r\n                </div>\r\n              )}\r\n              <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n                <slot name=\"bijschrift\" />\r\n              </div>\r\n              {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n            </Dimmer>\r\n            <slot />\r\n            {button}\r\n          </del>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    if (this.wijzigactie === \"voegtoe\") {\r\n      return (\r\n        <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n          <ins class=\"editaction-add\">\r\n            <div class=\"editaction-label\">{editActionLabel}:</div>\r\n            <Dimmer\r\n              active={this.active}\r\n              src={src}\r\n              alt={alt}\r\n              ref={(element) => (this.wrapperElement = element)}\r\n              click={() => (this.active = false)}\r\n            >\r\n              {this.titelSlot && (\r\n                <div class=\"title\">\r\n                  <slot name=\"titel\" />\r\n                </div>\r\n              )}\r\n              <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n                <slot name=\"bijschrift\" />\r\n              </div>\r\n              {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n            </Dimmer>\r\n            <slot />\r\n            {button}\r\n          </ins>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n        <Dimmer\r\n          active={this.active}\r\n          src={src}\r\n          alt={alt}\r\n          ref={(element) => (this.wrapperElement = element)}\r\n          click={() => (this.active = false)}\r\n        >\r\n          {this.titelSlot && (\r\n            <div class=\"title\">\r\n              <slot name=\"titel\" />\r\n            </div>\r\n          )}\r\n          <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n            <slot name=\"bijschrift\" />\r\n          </div>\r\n        </Dimmer>\r\n        <slot />\r\n        {button}\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.active && this.wrapperElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.wrapperElement, {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {\r\n            this.active = false;\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.iconButtonElement ?? false,\r\n        onDeactivate: () => (this.active = false),\r\n        tabbableOptions: {\r\n          getShadowRoot: (node) => node.shadowRoot ?? undefined,\r\n        },\r\n      }).activate();\r\n    } else if (!this.active && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n}\r\n"]}

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

@@ -5,11 +5,18 @@
   position: relative;
 }
 :host {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --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: #f2f2f2;
-  border-color: #f2f2f2;
   color: #191919;
 }
 :host a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -24,14 +31,6 @@
 :host a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
-:host > button {
-  background-color: transparent;
-  border-style: none;
-  padding: 0;
-  position: absolute;
-  inset-inline-end: 8px;
-  inset-block-start: 8px;
-}
 
 :host(:not([active], [fixed])),
 :host([active=false]:not([fixed])),
@@ -39,24 +38,10 @@
   display: none;
 }
 
-button {
-  -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;
-}
-button[disabled] {
-  cursor: default;
-}
-button::-moz-focus-inner {
-  border: 0;
-  padding: 0;
+dso-icon-button {
+  position: absolute;
+  inset-inline-end: 8px;
+  inset-block-start: 8px;
 }
 
 *,

package/dist/collection/components/info/info.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class Info {
     render() {
-        return (h(Fragment, { key: '5819c33391f64495faebc5b480e6cf4146f06e21' }, h("slot", { key: 'b7e232a77cab0b9f32c3b7053a2b02c1a42402d8' }), !this.fixed && (h("button", { key: 'bcb06304bf67ed32bfc0063fdda0f20b79658374', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '17998edf989e2de6d49ec3fa0cbf02a0207a14a9', icon: "times" }), h("span", { key: 'fc858fe44cf7ed69fb0b4883554998f0fc3cb872', class: "sr-only" }, "Sluiten")))));
+        return (h(Fragment, { key: 'e56d65f7ab90eb011507a5576f1460cdc8bb38b9' }, h("slot", { key: '12a120e754039ddadcb368569859c8dd1106dc4f' }), !this.fixed && (h("dso-icon-button", { key: 'efa35e83f593f354fca58c176e27579f86f0ab3c', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"info.js","sourceRoot":"","sources":["../../../../src/components/info/info.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOlF,MAAM,OAAO,IAAI;IAmBf,MAAM;QACJ,OAAO,CACL,EAAC,QAAQ;YACP,8DAAa;YACZ,CAAC,IAAI,CAAC,KAAK,IAAI,CACd,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;gBACzD,iEAAU,IAAI,EAAC,OAAO,GAAY;gBAClC,6DAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"info.js","sourceRoot":"","sources":["../../../../src/components/info/info.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOlF,MAAM,OAAO,IAAI;IAmBf,MAAM;QACJ,OAAO,CACL,EAAC,QAAQ;YACP,8DAAa;YACZ,CAAC,IAAI,CAAC,KAAK,IAAI,CACd,wEACE,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,GAC7D,CACH,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <dso-icon-button\r\n            label=\"Sluiten\"\r\n            variant=\"tertiary\"\r\n            icon=\"times\"\r\n            onDsoClick={(e) => this.dsoClose.emit(e.detail.originalEvent)}\r\n          />\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -25,13 +25,14 @@ button {
   border: 0;
   margin-inline-start: var(--_dt-info-button-margin-inline-start, 8px);
   padding: 0;
-  cursor: pointer;
   vertical-align: top;
+  line-height: 1;
 }
 button.dso-info-secondary {
   color: #666;
 }
 
-dso-icon {
-  display: block;
+dso-icon-button {
+  margin-inline-start: var(--_dt-info-button-margin-inline-start, 8px);
+  vertical-align: top;
 }

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

@@ -1,5 +1,4 @@
 import { Host, h } from "@stencil/core";
-import clsx from "clsx";
 export class InfoButton {
     constructor() {
         this.hover = false;
@@ -12,15 +11,18 @@ export class InfoButton {
      * To set focus to the toggle button.
      */
     async setFocus() {
-        var _a;
-        (_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
+        var _a, _b;
+        (_a = this.button) === null || _a === void 0 ? void 0 : _a.setFocus();
+        (_b = this.buttonSecondary) === null || _b === void 0 ? void 0 : _b.focus();
     }
-    handleToggle(e) {
+    handleToggle(originalEvent) {
         this.active = !this.active;
-        this.dsoToggle.emit({ originalEvent: e, active: this.active });
+        this.dsoToggle.emit({ originalEvent, active: this.active });
     }
     render() {
-        return (h(Host, { key: 'eb293ebed30eed249b8be309def6ead14b1cf24a', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '3e288bbba8b56cc92ca338df47811cbdded8a3df', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '9c11b0fcb3d77c441e7732d098fe14f4538cb2f5', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: 'aff325d3fefac7a17259b40753104177dc3ac8f6', class: "sr-only" }, this.label))));
+        return (h(Host, { key: '2a72a80cba88504aca92b8ae300cd35499c9ba09', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.hover ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
+        // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working
+        h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.hover ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label)))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info-button/info-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"info-button.js","sourceRoot":"","sources":["../../../../src/components/info-button/info-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB,MAAM,OAAO,UAAU;IALvB;QAeE,UAAK,GAAG,KAAK,CAAC;QAQd;;WAEG;QAEH,UAAK,GAAG,uBAAuB,CAAC;KAqCjC;IA7BC;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;IACvB,CAAC;IAEO,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACrF,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,mBACnE,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;gBAEzC,iEAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,GAAa;gBAC/E,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, Method, Prop, State, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-info-button\",\r\n  shadow: true,\r\n  styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n  private button?: HTMLButtonElement;\r\n\r\n  /**\r\n   * Whether the InfoButton is active.\r\n   */\r\n  @Prop({ mutable: true, reflect: true })\r\n  active?: boolean;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  /**\r\n   * For secondary Info Button.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  /**\r\n   * The label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting bij optie\";\r\n\r\n  /**\r\n   * Emitted when the user activates the Info Button.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n  /**\r\n   * To set focus to the toggle button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    this.button?.focus();\r\n  }\r\n\r\n  private handleToggle(e: MouseEvent) {\r\n    this.active = !this.active;\r\n    this.dsoToggle.emit({ originalEvent: e, active: this.active });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n        <button\r\n          type=\"button\"\r\n          class={clsx({ \"dso-open\": !!this.active, \"dso-info-secondary\": !!this.secondary })}\r\n          aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n          onClick={(e) => this.handleToggle(e)}\r\n          ref={(element) => (this.button = element)}\r\n        >\r\n          <dso-icon icon={this.active || this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n          <span class=\"sr-only\">{this.label}</span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"info-button.js","sourceRoot":"","sources":["../../../../src/components/info-button/info-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAS7F,MAAM,OAAO,UAAU;IALvB;QAgBE,UAAK,GAAG,KAAK,CAAC;QAQd;;WAEG;QAEH,UAAK,GAAG,uBAAuB,CAAC;KAiDjC;IAzCC;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,EAAE,CAAC;QACxB,MAAA,IAAI,CAAC,eAAe,0CAAE,KAAK,EAAE,CAAC;IAChC,CAAC;IAEO,YAAY,CAAC,aAAyB;QAC5C,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IACpF,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACjB,uBACE,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAC5D,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,EACxD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,GACzC,CACH,CAAC,CAAC,CAAC;QACF,sHAAsH;QACtH,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,oBAAoB,mBACX,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;YAElD,gBAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,GAAa;YAC/E,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, Method, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-info-button\",\r\n  shadow: true,\r\n  styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n  private button?: HTMLDsoIconButtonElement;\r\n  private buttonSecondary?: HTMLButtonElement;\r\n\r\n  /**\r\n   * Whether the InfoButton is active.\r\n   */\r\n  @Prop({ mutable: true, reflect: true })\r\n  active?: boolean;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  /**\r\n   * For secondary Info Button.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  /**\r\n   * The label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting bij optie\";\r\n\r\n  /**\r\n   * Emitted when the user activates the Info Button.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n  /**\r\n   * To set focus to the toggle button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    this.button?.setFocus();\r\n    this.buttonSecondary?.focus();\r\n  }\r\n\r\n  private handleToggle(originalEvent: MouseEvent) {\r\n    this.active = !this.active;\r\n    this.dsoToggle.emit({ originalEvent, active: this.active });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n        {!this.secondary ? (\r\n          <dso-icon-button\r\n            variant=\"tertiary\"\r\n            label={this.label}\r\n            onDsoClick={(e) => this.handleToggle(e.detail.originalEvent)}\r\n            icon={this.active || this.hover ? \"info-active\" : \"info\"}\r\n            ref={(element) => (this.button = element)}\r\n          />\r\n        ) : (\r\n          // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-info-secondary\"\r\n            aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n            onClick={(e) => this.handleToggle(e)}\r\n            ref={(element) => (this.buttonSecondary = element)}\r\n          >\r\n            <dso-icon icon={this.active || this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n            <span class=\"sr-only\">{this.label}</span>\r\n          </button>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/input-range/input-range.js

@@ -10,13 +10,13 @@ export class InputRange {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: '7ac9735224c60c717a0ebff59e2f8c40623e2f34', id: "description", hidden: true }, this.description)), h("span", { key: 'fd65b63bda56de9516e6bef05781777b13cc8245', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '8a0a67fff0a51267565ad447c572e4ba0d20009a', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '10cce6802d9237ac16b82cab7c22c96ba6c6351a', id: "description", hidden: true }, this.description)), h("span", { key: '752793eb65c306843b90d281fc4b43dbd8f39bcd', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'f2ccb4d8a20c54a1a7f506cf240b7ea7ea101e8b', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '3d22eb9d281b35f52a0cdaa3565448375e1435c9', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: 'ffafaf37c7681a94df522f66e1bc4c8ce35494cc', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,7 @@
 :host {
   display: inline-block;
   max-inline-size: 100%;
+  font-weight: normal;
 }
 
 *,
@@ -31,59 +32,165 @@
 .dso-label:focus-within, .dso-label.dso-hover {
   text-decoration: line-through;
 }
-.dso-label button {
-  background: none;
-  border: 0;
-  border-radius: 0 4px 4px 0;
-  color: inherit;
-  float: inline-end;
-  font-size: 1rem;
-  margin-block-end: -4px;
-  margin-inline-start: 8px;
-  margin-inline-end: -4px;
-  margin-block-start: 0;
-  padding: 0;
-}
-.dso-label button:hover {
-  cursor: pointer;
-}
-.dso-label button > dso-icon,
-.dso-label button > svg.di {
-  display: block;
-}
 .dso-label {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --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: #f2f2f2;
-  border-color: #f2f2f2;
   color: #191919;
 }
+.dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+.dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+.dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+.dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+}
 .dso-label.dso-label-info {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --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: #6ca4d9;
-  border-color: #6ca4d9;
   color: #191919;
 }
+.dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+.dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+.dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+.dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+}
 .dso-label.dso-label-primary {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #fff;
   background-color: #275937;
-  border-color: #275937;
   color: #fff;
 }
+.dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
 .dso-label.dso-label-success {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #fff;
   background-color: #39870c;
-  border-color: #39870c;
   color: #fff;
 }
+.dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
 .dso-label.dso-label-warning {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --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: #dcd400;
-  border-color: #dcd400;
   color: #191919;
 }
+.dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+.dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+.dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+.dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+}
 .dso-label.dso-label-error {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #fff;
   background-color: #ce3f51;
-  border-color: #ce3f51;
   color: #fff;
 }
+.dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
 .dso-label.dso-label-bright {
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
   background-color: #fff;
-  border-color: #fff;
   color: #191919;
 }
 .dso-label.dso-label-bright {
@@ -91,24 +198,72 @@
   outline-offset: -1px;
 }
 .dso-label.dso-label-attention {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  --_dso-icon-button-tertiary-color: #fff;
   background-color: #8b4a6a;
-  border-color: #8b4a6a;
   color: #fff;
 }
+.dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
 .dso-label.dso-label-filter {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --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;
 }
+.dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+.dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+.dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+.dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+}
 .dso-label.dso-label-filter {
   border-inline-start: 5px solid #6ca4d9;
 }
 .dso-label.dso-label-toegevoegd {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --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;
 }
 .dso-label.dso-label-toegevoegd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -127,11 +282,18 @@
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
 }
 .dso-label.dso-label-verwijderd {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --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;
 }
 .dso-label.dso-label-verwijderd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
@@ -173,4 +335,10 @@
 
 :host([removable]) .dso-truncate.dso-label-content {
   max-inline-size: calc(100% - 28px);
+}
+
+dso-icon-button {
+  float: inline-end;
+  margin-inline-start: 8px;
+  margin-inline-end: -4px;
 }