@dso-toolkit/core 85.0.0 → 86.0.0

package/dist/bundle/{p-Dz-kOE9B.js.map → p-q0UGoBNE.js.map}

@@ -1 +1 @@
-{"file":"p-Dz-kOE9B.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  max-inline-size: 100%;\r\n  font-weight: normal;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n  @include label.root();\r\n\r\n  &.dso-hover {\r\n    .dso-label-content {\r\n      text-decoration: line-through;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n  display: inline-block;\r\n  max-inline-size: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n  vertical-align: bottom;\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n  .dso-truncate.dso-label-content {\r\n    max-inline-size: calc(100% - (units.$u3 + 4px));\r\n  }\r\n}\r\n\r\ndso-icon-button {\r\n  float: inline-end;\r\n  margin-inline-start: units.$u1;\r\n  margin-inline-end: units.$u1 * -0.5;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries: ResizeObserverEntry[]) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop({ reflect: true })\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop({ reflect: true })\r\n  status?: LabelStatus;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated = false;\r\n\r\n  @State()\r\n  labelText = \"\";\r\n\r\n  @Watch(\"removable\")\r\n  watchRemovable(removable: boolean) {\r\n    if (removable) {\r\n      this.startMutationObserver();\r\n    } else {\r\n      this.stopMutationObserver();\r\n    }\r\n  }\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent?.trim() ?? \"\";\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n\r\n    this.stopMutationObserver(true);\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.syncLabelText();\r\n  }\r\n\r\n  private stopMutationObserver(force = false): void {\r\n    if (force || !(this.truncate && this.removable)) {\r\n      this.mutationObserver?.disconnect();\r\n\r\n      delete this.mutationObserver;\r\n    }\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    resizeObserver.unobserve(this.host);\r\n    this.stopMutationObserver();\r\n    this.isTruncated = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby={this.isTruncated ? \"toggle-anchor\" : null}\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <dso-icon-button\r\n              variant=\"tertiary\"\r\n              icon=\"times\"\r\n              label={`Verwijder: ${this.labelText}`}\r\n              onDsoClick={(e) => this.dsoRemoveClick.emit(e.detail.originalEvent)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            />\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-q0UGoBNE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  max-inline-size: 100%;\r\n  font-weight: normal;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n  @include label.root();\r\n\r\n  &.dso-hover {\r\n    .dso-label-content {\r\n      text-decoration: line-through;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n  display: inline-block;\r\n  max-inline-size: 100%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n  vertical-align: bottom;\r\n  white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n  .dso-truncate.dso-label-content {\r\n    max-inline-size: calc(100% - (units.$u3 + 4px));\r\n  }\r\n}\r\n\r\ndso-icon-button {\r\n  float: inline-end;\r\n  margin-inline-start: units.$u1;\r\n  margin-inline-end: units.$u1 * -0.5;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce((entries: ResizeObserverEntry[]) => {\r\n    entries.forEach(({ target }) => {\r\n      if (isDsoLabelComponent(target)) {\r\n        target._truncateLabel();\r\n      }\r\n    });\r\n  }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n  return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n  return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-label\",\r\n  styleUrl: \"label.scss\",\r\n  shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n  private labelContent: HTMLSpanElement | undefined;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoLabelElement;\r\n\r\n  /**\r\n   * For compact Label\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * Shows a button that can be used to remove the Label.\r\n   */\r\n  @Prop({ reflect: true })\r\n  removable?: boolean;\r\n\r\n  /**\r\n   * The status of this Label.\r\n   */\r\n  @Prop({ reflect: true })\r\n  status?: LabelStatus;\r\n\r\n  /**\r\n   * Emitted when the user activates the remove button.\r\n   */\r\n  @Event()\r\n  dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n  @State()\r\n  removeHover?: boolean;\r\n\r\n  @State()\r\n  removeFocus?: boolean;\r\n\r\n  /**\r\n   * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  truncate?: boolean;\r\n\r\n  @State()\r\n  textHover?: boolean;\r\n\r\n  @State()\r\n  textFocus?: boolean;\r\n\r\n  @State()\r\n  isTruncated = false;\r\n\r\n  @State()\r\n  labelText = \"\";\r\n\r\n  @Watch(\"removable\")\r\n  watchRemovable(removable: boolean) {\r\n    if (removable) {\r\n      this.startMutationObserver();\r\n    } else {\r\n      this.stopMutationObserver();\r\n    }\r\n  }\r\n\r\n  @Watch(\"truncate\")\r\n  watchTruncate(truncate: boolean) {\r\n    if (truncate) {\r\n      this.startTruncate();\r\n    } else {\r\n      this.stopTruncate();\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (event.key === \"Escape\") {\r\n      this.textHover = false;\r\n      this.textFocus = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _truncateLabel() {\r\n    setTimeout(() => {\r\n      this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n    });\r\n  }\r\n\r\n  private syncLabelText() {\r\n    this.labelText = this.host.textContent?.trim() ?? \"\";\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.truncate) {\r\n      this.startTruncate();\r\n    }\r\n\r\n    if (this.removable) {\r\n      this.startMutationObserver();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTruncate();\r\n\r\n    this.stopMutationObserver(true);\r\n  }\r\n\r\n  /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n  private startMutationObserver(): void {\r\n    this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n    });\r\n\r\n    this.syncLabelText();\r\n  }\r\n\r\n  private stopMutationObserver(force = false): void {\r\n    if (force || !(this.truncate && this.removable)) {\r\n      this.mutationObserver?.disconnect();\r\n\r\n      delete this.mutationObserver;\r\n    }\r\n  }\r\n\r\n  private startTruncate(): void {\r\n    resizeObserver.observe(this.host);\r\n    this.startMutationObserver();\r\n    this._truncateLabel();\r\n  }\r\n\r\n  private stopTruncate(): void {\r\n    resizeObserver.unobserve(this.host);\r\n    this.stopMutationObserver();\r\n    this.isTruncated = false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <span\r\n          aria-describedby={this.isTruncated ? \"toggle-anchor\" : null}\r\n          class={clsx(\"dso-label\", {\r\n            [`dso-label-${this.status}`]: this.status,\r\n            \"dso-compact\": this.compact && !this.removable,\r\n            \"dso-hover\": this.removeHover || this.removeFocus,\r\n          })}\r\n        >\r\n          <slot name=\"symbol\"></slot>\r\n          <span\r\n            class={clsx(\"dso-label-content\", {\r\n              \"dso-truncate\": !!this.truncate,\r\n            })}\r\n            ref={(element) => (this.labelContent = element)}\r\n            tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n            onMouseEnter={() => (this.textHover = true)}\r\n            onMouseLeave={() => (this.textHover = false)}\r\n            onFocus={() => (this.textFocus = true)}\r\n            onBlur={() => (this.textFocus = false)}\r\n          >\r\n            <slot></slot>\r\n          </span>\r\n          {this.removable && (\r\n            <dso-icon-button\r\n              variant=\"tertiary\"\r\n              icon=\"times\"\r\n              label={`Verwijder: ${this.labelText}`}\r\n              onDsoClick={(e) => this.dsoRemoveClick.emit(e.detail.originalEvent)}\r\n              onMouseEnter={() => (this.removeHover = true)}\r\n              onMouseLeave={() => (this.removeHover = false)}\r\n              onFocus={() => (this.removeFocus = true)}\r\n              onBlur={() => (this.removeFocus = false)}\r\n            />\r\n          )}\r\n        </span>\r\n        {this.isTruncated && (\r\n          <dso-tooltip\r\n            stateless\r\n            id=\"toggle-anchor\"\r\n            active={this.textHover || this.textFocus}\r\n            position=\"top\"\r\n            strategy=\"absolute\"\r\n          >\r\n            {this.labelText}\r\n          </dso-tooltip>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/p-r5BYffta.js

@@ -0,0 +1,63 @@
+import { p as proxyCustomElement, H, f as forceUpdate, h, t as transformTag } from './p-DBWrx_3r.js';
+import { c as clsx } from './p-ChV9xqsO.js';
+
+const buttonGroupCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}.container{display:inline-flex;border-radius:4px}.container.has-map-buttons{box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);background-color:#ccc;gap:1px;--_dt-icon-button-map-box-shadow:0}::slotted(*){margin:0 !important}:host([direction=row]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-end-start-radius:0 !important;--_dt-icon-button-border-start-start-radius:0;--_dt-icon-button-border-end-start-radius:0}:host([direction=row]) ::slotted(:not(:last-child)){border-start-end-radius:0 !important;border-end-end-radius:0 !important;--_dt-icon-button-border-start-end-radius:0;--_dt-icon-button-border-end-end-radius:0;--_dt-icon-button-border-inline-end-width:0}:host([direction=row]) ::slotted(.dso-secondary){margin-inline-start:-1px !important}:host([direction=column]) .container{flex-direction:column}:host([direction=column]) ::slotted(*){text-align:center !important}:host([direction=column]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-start-end-radius:0 !important;--_dt-icon-button-border-start-start-radius:0;--_dt-icon-button-border-start-end-radius:0}:host([direction=column]) ::slotted(:not(:last-child)){border-end-start-radius:0 !important;border-end-end-radius:0 !important;--_dt-icon-button-border-end-start-radius:0;--_dt-icon-button-border-end-end-radius:0;--_dt-icon-button-border-block-end-width:0}:host([direction=column]) ::slotted(.dso-secondary){margin-block-start:-1px !important}::slotted(:focus-visible){z-index:1 !important}::slotted(.dso-map){box-shadow:none !important}`;
+
+const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * The direction in which the buttons are displayed.
+         *
+         * Defaults to `row`.
+         */
+        this.direction = "row";
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => {
+            forceUpdate(this);
+        });
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+            attributes: true,
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    get hasMapButton() {
+        const hasMapIconButton = this.host.querySelector(":scope > dso-icon-button[variant='map']") !== null;
+        const hasMapClass = this.host.querySelector(":scope > .dso-map") !== null;
+        return hasMapIconButton || hasMapClass;
+    }
+    render() {
+        return (h("div", { key: '0cd0a65e9b4ed512a7f51248628b5729e591e5a9', class: clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, h("slot", { key: '529bd12bf8558e3d8f0a7d76bb49c9c0200714ed' })));
+    }
+    get host() { return this; }
+    static get style() { return buttonGroupCss(); }
+}, [257, "dso-button-group", {
+        "direction": [513]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-button-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-button-group":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), ButtonGroup);
+            }
+            break;
+    } });
+}
+
+export { ButtonGroup as B, defineCustomElement as d };
+//# sourceMappingURL=p-r5BYffta.js.map
+
+//# sourceMappingURL=p-r5BYffta.js.map

package/dist/bundle/p-r5BYffta.js.map

@@ -0,0 +1 @@
+{"file":"p-r5BYffta.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,8lDAA8lD,CAAC;;MCUhnD,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;AAIG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAyB,KAAK;AAoCxC;IA7BC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAK;YAChD,WAAW,CAAC,IAAI,CAAC;AACnB,SAAC,CAAC;QAEF,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;AACvC,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,UAAU,EAAE,IAAI;AACjB,SAAA,CAAC;;IAGJ,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;;AAGrC,IAAA,IAAI,YAAY,GAAA;AACd,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,yCAAyC,CAAC,KAAK,IAAI;AACpG,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,KAAK,IAAI;QAEzE,OAAO,gBAAgB,IAAI,WAAW;;IAGxC,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI,EAAC,OAAO,EAAA,EACnF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/button-group/button-group.scss?tag=dso-button-group&encapsulation=shadow","src/components/button-group/button-group.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n.container {\r\n  display: inline-flex;\r\n  border-radius: button.$border-radius;\r\n\r\n  &.has-map-buttons {\r\n    @include button.map-box-shadow();\r\n\r\n    background-color: colors.$grijs-20;\r\n    gap: 1px;\r\n\r\n    --_dt-icon-button-map-box-shadow: 0;\r\n  }\r\n}\r\n\r\n::slotted(*) {\r\n  margin: 0 !important;\r\n}\r\n\r\n:host([direction=\"row\"]) {\r\n  ::slotted(:not(:first-child)) {\r\n    border-start-start-radius: 0 !important;\r\n    border-end-start-radius: 0 !important;\r\n\r\n    --_dt-icon-button-border-start-start-radius: 0;\r\n    --_dt-icon-button-border-end-start-radius: 0;\r\n  }\r\n\r\n  ::slotted(:not(:last-child)) {\r\n    border-start-end-radius: 0 !important;\r\n    border-end-end-radius: 0 !important;\r\n\r\n    --_dt-icon-button-border-start-end-radius: 0;\r\n    --_dt-icon-button-border-end-end-radius: 0;\r\n\r\n    --_dt-icon-button-border-inline-end-width: 0;\r\n  }\r\n\r\n  ::slotted(.dso-secondary) {\r\n    margin-inline-start: -1px !important;\r\n  }\r\n}\r\n\r\n:host([direction=\"column\"]) {\r\n  .container {\r\n    flex-direction: column;\r\n  }\r\n\r\n  ::slotted(*) {\r\n    text-align: center !important;\r\n  }\r\n\r\n  ::slotted(:not(:first-child)) {\r\n    border-start-start-radius: 0 !important;\r\n    border-start-end-radius: 0 !important;\r\n\r\n    --_dt-icon-button-border-start-start-radius: 0;\r\n    --_dt-icon-button-border-start-end-radius: 0;\r\n  }\r\n\r\n  ::slotted(:not(:last-child)) {\r\n    border-end-start-radius: 0 !important;\r\n    border-end-end-radius: 0 !important;\r\n\r\n    --_dt-icon-button-border-end-start-radius: 0;\r\n    --_dt-icon-button-border-end-end-radius: 0;\r\n\r\n    --_dt-icon-button-border-block-end-width: 0;\r\n  }\r\n\r\n  ::slotted(.dso-secondary) {\r\n    margin-block-start: -1px !important;\r\n  }\r\n}\r\n\r\n::slotted(:focus-visible) {\r\n  z-index: 1 !important;\r\n}\r\n\r\n::slotted(.dso-map) {\r\n  box-shadow: none !important;\r\n}\r\n","import { Component, ComponentInterface, Element, Prop, forceUpdate, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { ButtonGroupDirection } from \"./button-group.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-button-group\",\r\n  styleUrl: \"button-group.scss\",\r\n  shadow: true,\r\n})\r\nexport class ButtonGroup implements ComponentInterface {\r\n  /**\r\n   * The direction in which the buttons are displayed.\r\n   *\r\n   * Defaults to `row`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  direction: ButtonGroupDirection = \"row\";\r\n\r\n  @Element()\r\n  private host!: HTMLDsoButtonGroupElement;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => {\r\n      forceUpdate(this);\r\n    });\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n      attributes: true,\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  get hasMapButton(): boolean {\r\n    const hasMapIconButton = this.host.querySelector(\":scope > dso-icon-button[variant='map']\") !== null;\r\n    const hasMapClass = this.host.querySelector(\":scope > .dso-map\") !== null;\r\n\r\n    return hasMapIconButton || hasMapClass;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={clsx(\"container\", { \"has-map-buttons\": this.hasMapButton })} role=\"group\">\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-alert_7.cjs.entry.js

@@ -2758,8 +2758,14 @@ span[role=paragraph] {
   display: block;
 }
 
+span[role=paragraph] {
+  margin-block: var(--_dt-span-role-paragraph-margin-block, 0);
+}
 span[role=paragraph] + span[role=paragraph] {
-  margin-block: 16px 0;
+  margin-block: var(--_dt-span-role-paragraph-margin-block, 16px 0);
+}
+span[role=paragraph] + span[role=paragraph] .dso-tertiary {
+  margin-block-start: -3px;
 }
 
 :host(:not([inline])) .fallback {
@@ -3551,7 +3557,7 @@ const OzonContent = class {
             annotated: this.annotated,
         };
         const transformed = mapper.transform(this.content, context);
-        return index.h(index.Fragment, { key: '71bf1fc9de6ed6e967c1344f904be839d0f7e87d' }, transformed);
+        return index.h(index.Fragment, { key: 'd9e13c0c7a3e5ffc6e8a3f7068381995bb901443' }, transformed);
     }
     static get watchers() { return {
         "content": ["contentWatcher"]
@@ -3559,7 +3565,7 @@ const OzonContent = class {
 };
 OzonContent.style = ozonContentCss();
 
-const ozonContentToggletipCss = () => `*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_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;color:#191919;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;transition:opacity 0.15s}.dso-tooltip.visible{opacity:1;visibility:visible}.dso-tooltip .tooltip-inner{--_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;color:#191919;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:8px;padding-inline:16px;border-radius:4px;line-height:1.5;max-inline-size:480px}.dso-tooltip .tooltip-arrow{--_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;color:#191919;position:absolute;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}:host{display:inline;--_dt-rich-content-margin-block:8px}::slotted(:not([slot=label])){cursor:default !important}.toggletip-button{display:inline-block;font-size:1em;font-weight:500;margin-block-end:0;text-decoration:none;touch-action:manipulation;text-align:start;user-select:none;vertical-align:middle}.toggletip-button:focus,.toggletip-button:focus-visible{outline-offset:2px}.toggletip-button:active{outline:0}.toggletip-button{border:0;color:var(--_dso-ozon-content-toggletip-color, #2b5780);line-height:1;padding:0;background-color:transparent;cursor:pointer;vertical-align:baseline;display:inline;overflow-wrap:break-word}.toggletip-button,.toggletip-button:hover,.toggletip-button:focus-visible,.toggletip-button:active{text-decoration-line:var(--_dso-ozon-content-toggletip-text-decoration, underline);text-decoration-style:dotted;text-underline-offset:15%}.toggletip-button dso-icon{margin-inline-start:4px;vertical-align:middle}.icon-container{position:relative;padding-inline-end:28px}.icon-container dso-icon{position:absolute}`;
+const ozonContentToggletipCss = () => `*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_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;color:#191919;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;transition:opacity 0.15s}.dso-tooltip.visible{opacity:1;visibility:visible}.dso-tooltip .tooltip-inner{--_dt-span-role-paragraph-margin-block:8px;--_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;color:#191919;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:8px;padding-inline:16px;border-radius:4px;line-height:1.5;max-inline-size:480px}.dso-tooltip .tooltip-arrow{--_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;color:#191919;position:absolute;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}:host{display:inline;--_dt-rich-content-margin-block:8px}::slotted(:not([slot=label])){cursor:default !important}.toggletip-button{display:inline-block;font-size:1em;font-weight:500;margin-block-end:0;text-decoration:none;touch-action:manipulation;text-align:start;user-select:none;vertical-align:middle}.toggletip-button:focus,.toggletip-button:focus-visible{outline-offset:2px}.toggletip-button:active{outline:0}.toggletip-button{border:0;color:var(--_dso-ozon-content-toggletip-color, #2b5780);line-height:1;padding:0;background-color:transparent;cursor:pointer;vertical-align:baseline;display:inline;overflow-wrap:break-word;user-select:text}.toggletip-button,.toggletip-button:hover,.toggletip-button:focus-visible,.toggletip-button:active{text-decoration-line:var(--_dso-ozon-content-toggletip-text-decoration, underline);text-decoration-style:dotted;text-underline-offset:15%}.toggletip-button dso-icon{margin-inline-start:4px;vertical-align:middle}.icon-container{position:relative;padding-inline-end:28px}.icon-container dso-icon{position:absolute}`;
 
 const ozonContentToggletip = class {
     constructor(hostRef) {
@@ -3625,7 +3631,7 @@ const ozonContentToggletip = class {
         }
     }
     render() {
-        return (index.h(index.Fragment, { key: 'ea34c93439597d65072cb7e4cceb45f2775e5403' }, index.h("span", { key: '3e7dfe0cf9ec29260cedb736a5bf9c37306e9a81', class: "toggletip-button", role: "button", tabindex: 0, onClick: this.toggle, onKeyDown: this.keyUpHandler, onFocusout: this.focusOutHandler, ref: (element) => (this.container = element) }, index.h("span", { key: '60a75f14d4546603a34f85f993f550f1fb0f1b34', class: "icon-container" }, index.h("slot", { key: 'cfe50bcc158ad33051c1946ce9599ecaa0f448ce', name: "label" }), index.h("dso-icon", { key: 'e31aad7d5cd522e324184f380d983ab2b9caf770', icon: this.icon })), index.h(tooltip_functionalComponent.Tooltip, { key: 'fa3098858227e954e377539761f02d9b4a6820ce', visible: true, onAfterHidden: () => { }, tipElementRef: (element) => (this.tooltip = element), tipArrowElementRef: (element) => (this.tooltipArrow = element) }, index.h("slot", { key: 'cedc773ae4b66ef0c1bf0b199dafb226072b5093' })))));
+        return (index.h(index.Fragment, { key: '461010eb2eafbf5ba97aed6bf49261fcc790e755' }, index.h("span", { key: '182c96c0f91b8a871bfbcd34f1dffe704cbee0f5', class: "toggletip-button", role: "button", tabindex: 0, onClick: this.toggle, onKeyDown: this.keyUpHandler, onFocusout: this.focusOutHandler, ref: (element) => (this.container = element) }, index.h("span", { key: '2450aa008e277ba04bb1acf010b13cde6c2d5d6d', class: "icon-container" }, index.h("slot", { key: 'df4f968b7a33aaa90c5205a9a82a8cb37f624168', name: "label" }), index.h("dso-icon", { key: '65430abf4a67ffb447518055a45db4deb5ef62ed', icon: this.icon }))), index.h(tooltip_functionalComponent.Tooltip, { key: '31455a4c8dca198feb8471682022c19bd7095a03', visible: true, onAfterHidden: () => { }, tipElementRef: (element) => (this.tooltip = element), tipArrowElementRef: (element) => (this.tooltipArrow = element) }, index.h("slot", { key: '098d9db719a1f412ccb49a8a5a4bfac5f5cab2ca' }))));
     }
     get host() { return index.getElement(this); }
 };
@@ -4925,7 +4931,7 @@ const Table = class {
     render() {
         var _a, _b, _c;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (index.h(index.Host, { key: 'bcaf2967ab097410366d0b5d37a9c8b6ac42cef8', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (index.h("div", { key: '2bb16134f324f13653defb6c2651c414cb7b7c6b', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (index.h("dialog", { class: "dso-modal", ref: (element) => (this.dialogElement = element), onClose: this.dialogCloseEventListener }, index.h("div", { class: "dso-dialog dso-table-dialog", "aria-labelledby": this.labelledbyId }, index.h("div", { class: "dso-header" }, index.h("h2", { id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), index.h("button", { type: "button", class: "dso-close", onClick: () => this.closeModal() }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten"))), index.h("div", { class: "dso-body dso-table-body" }, index.h("slot", null))))) : (index.h(index.Fragment, null, index.h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (index.h("div", { class: "dso-responsive-message" }, index.h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (index.h("button", { type: "button", class: "dso-tertiary open-modal-button", onClick: () => this.openModal() }, index.h("span", { class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), index.h("span", null, "vergroten"), index.h("dso-icon", { icon: "external-link" })))), index.h("div", { class: "dso-table-body" }, index.h("slot", null))))));
+        return (index.h(index.Host, { key: '4aa3930ee445f9d4ddac187964f004158e36b917', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (index.h("div", { key: '4a3efeef65f242fdd54eaa7c2f4f9fac2f670c32', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (index.h("dialog", { class: "dso-modal", ref: (element) => (this.dialogElement = element), onClose: this.dialogCloseEventListener }, index.h("div", { class: "dso-dialog dso-table-dialog", "aria-labelledby": this.labelledbyId }, index.h("div", { class: "dso-header" }, index.h("h2", { id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), index.h("dso-icon-button", { icon: "times", variant: "tertiary", class: "dso-close", label: "Sluiten", onClick: () => this.closeModal() })), index.h("div", { class: "dso-body dso-table-body" }, index.h("slot", null))))) : (index.h(index.Fragment, null, index.h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (index.h("div", { class: "dso-responsive-message" }, index.h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (index.h("button", { type: "button", class: "dso-tertiary open-modal-button", onClick: () => this.openModal() }, index.h("span", { class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), index.h("span", null, "vergroten"), index.h("dso-icon", { icon: "external-link" })))), index.h("div", { class: "dso-table-body" }, index.h("slot", null))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js

@@ -1494,8 +1494,8 @@ const DocumentComponent = class {
             this.alternativeTitle ||
             this.bevatOntwerpInformatie ||
             this.annotated);
-        return (index.h(index.Host, { key: '36ab426cfb2130bf474c3232b191447f01860343', "not-collapsible": !collapsible }, showHeading && (index.h("div", { key: '641d209eb86ceeea204647fe923f8abf445529db', class: "heading-container", part: "_heading-container" }, this.wijzigactie && index.h("span", { key: 'c5bfbadd27ee536a7acd4983303343c06e13e36e', class: "editaction-label" }, this.wijzigactieLabel, ":"), index.h("div", { key: 'c83b345463b36048557472e2a325a7e74f42119f', class: "heading" }, index.h(Heading, { key: '39155283828000393d3f59aceea96ad61abba1a2', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (index.h("dso-icon-button", { key: '12f4eb10033cb0c63c4ab57d0c113cc7531a275d', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), index.h("div", { key: '7764bfe3323f1b602a7a4b8d9340f2ee30627694' }, this.notApplicable && index.h("span", { key: '0affec0e7b54f9188e9d042b6e8abd312c804794', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (index.h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "kop"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "kop" })), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (index.h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
-            (this.mark && this.alternativeTitle && (index.h(parseWijzigactieFromNode_function.MarkText, { mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "alternativeTitle"); }), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), index.h(AantekenStatus, { key: 'cef5cc7ff493b91cdfaf9620642a8a4039e50412', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (index.h("dso-icon-button", { key: 'df215f601309cd8787105ad06825303cc0cd3984', label: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", class: "recursive-toggle", icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showOntwerpBadge() && (index.h(index.Fragment, { key: 'c2914d7f1d67585f18205655c144f2b9179b4399' }, index.h("dso-badge", { key: 'b2d9b50252f84fc42a24ea14d2c37e6782d92ec5', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), index.h("dso-tooltip", { key: '9c53081478a277311f03c71447ff92bc24189ca3', id: "nested-draft-description" }, "Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp."))), (this.bevatOntwerpInformatie || this.annotated) && (index.h("div", { key: 'fd3fa5acaa37cdbd794c8cd4b4ec9fc93befc3cb', class: "addons" }, this.bevatOntwerpInformatie && (index.h("dso-label", { key: '1b63aec2ee2df5c4f9c9459c4edcc92819dc363d', status: "warning", compact: true }, "Ontwerp")), this.annotated && this.mode === "document" && (index.h("dso-icon-button", { key: 'e2349aa63961b4967fdd87b28cff901eba9d044b', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e.detail.originalEvent }) }))))))), this.openAnnotation && (index.h("div", { key: 'baefe2cae5ec013cd01d40ebd6224825fdfae0d3', class: "annotation-container", part: "_annotation-container" }, index.h("dso-panel", { key: '475cfce4a114b23473649621a06dea2ee4d903c4', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, index.h("h2", { key: '372049c8d26faaa7d1260d4c64d9e11b37a5584c', slot: "heading" }, "Kenmerken en kaart"), index.h("slot", { key: 'cfa2f6ceff337228a0520214dc8e259c14e34c04', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (index.h("div", { key: '14192e605a1db5a3b59ea0f337961730877c3d3c', class: "content", part: "_content" }, index.h(AantekenAlert, { key: '5d7a3b758fb1f4ff99e5f2555a37547746c735f8', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (index.h("dso-ozon-content", { key: 'd70aceb93869844744f1ecdd161518631d7bf6c8', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), index.h("div", { key: '59cbc0624a0a66182aba7b0c83e41207e1756beb', class: "children-container", part: "_children-container" }, index.h("slot", { key: 'f8a25a2f71f26c72d5d17e84b5425191305dd0c7' }))));
+        return (index.h(index.Host, { key: 'aba44499e6433ece6ce7920d5de75d733193c6c1', "not-collapsible": !collapsible }, showHeading && (index.h("div", { key: '428693873d24b98363506af29513f0466bc6b227', class: "heading-container", part: "_heading-container" }, this.wijzigactie && index.h("span", { key: '1d082eecc352d1ef736c91d32cd2749a081a6079', class: "editaction-label" }, this.wijzigactieLabel, ":"), index.h("div", { key: 'f9beebfca3d7fb28122cc4290b95b16adc942929', class: "heading" }, index.h(Heading, { key: 'f3181a88fbf4385fe95f3274e4a296be7cde1b1e', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (index.h("dso-icon-button", { key: '7c308cd8450bf0858de5e977d4798ed76b967a7d', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), index.h("div", { key: 'f962ec3f762dfe2edf38abbfcb1eef6a2fc9d8ac' }, this.notApplicable && index.h("span", { key: 'da0dfdbea6e6a483bb0cf7f15a00d44502906c62', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (index.h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "kop"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "kop" })), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (index.h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
+            (this.mark && this.alternativeTitle && (index.h(parseWijzigactieFromNode_function.MarkText, { mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "alternativeTitle"); }), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), index.h(AantekenStatus, { key: '108b2ac7b0886363e403a142f3e43148c97c70ab', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (index.h("dso-icon-button", { key: '823bb9d3feedc66dcfbdedffb94299a7083d6634', label: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", class: "recursive-toggle", icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showOntwerpBadge() && (index.h(index.Fragment, { key: '20a17e1166a7779658503bdf18e52bcb68d44c42' }, index.h("dso-badge", { key: 'e109deb510c0ed2c5ea53acca1f00a98f262cfa4', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), index.h("dso-tooltip", { key: '847fb8eee56a1ada1f51a7e3c7c52cb5c3424c2b', id: "nested-draft-description" }, "Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp."))), (this.bevatOntwerpInformatie || this.annotated) && (index.h("div", { key: '05374922a421136c714f023ef34c8e6fec4129df', class: "addons" }, this.bevatOntwerpInformatie && (index.h("dso-label", { key: '98157a2cea6a8aafd3687d461f16653649bc2e3a', status: "warning", compact: true }, "Ontwerp")), this.annotated && this.mode === "document" && (index.h("dso-icon-button", { key: '2080afb69362ab3579965cc0b36f94a74626290e', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e.detail.originalEvent }) }))))))), this.openAnnotation && (index.h("div", { key: '5c0b7b8911cdc4153c14054db4302fddec4d016a', class: "annotation-container", part: "_annotation-container" }, index.h("dso-panel", { key: '094db70fe17b34a4483523776960fe58e1e9aa69', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, index.h("h2", { key: '17d3d1fbcb6698fd4a47f902c3ba84bb309a025c', slot: "heading" }, "Kenmerken en kaart"), index.h("slot", { key: 'b27d50059da4a8555802fffd9870f62e9cc64ae2', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (index.h("div", { key: '06e578f8ca178e2fa8838d5a52bafea07622634d', class: "content", part: "_content" }, index.h(AantekenAlert, { key: '9214f832e8b9b6911c2ee163fb22a32778e65fe8', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (index.h("dso-ozon-content", { key: '423588f125b1b24c278bdfc9a052adf47d28e8e5', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), index.h("div", { key: '5df1ce18b08eb2d5334e7caf81285dd15dfcd033', class: "children-container", part: "_children-container" }, index.h("slot", { key: 'db965cd6915d97bff3f63f11750ecaf0599a4340' }))));
     }
 };
 DocumentComponent.style = documentComponentCss();

package/dist/cjs/dso-button-group.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-2aek-b9X.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
-const buttonGroupCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}.container{display:inline-flex;border-radius:4px}.container.has-map-buttons{box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);background-color:#ccc;gap:1px}::slotted(*){margin:0 !important}:host([direction=row]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-end-start-radius:0 !important}:host([direction=row]) ::slotted(:not(:last-child)){border-start-end-radius:0 !important;border-end-end-radius:0 !important}:host([direction=row]) ::slotted(.dso-secondary){margin-inline-start:-1px !important}:host([direction=column]) .container{flex-direction:column}:host([direction=column]) ::slotted(*){text-align:center !important}:host([direction=column]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-start-end-radius:0 !important}:host([direction=column]) ::slotted(:not(:last-child)){border-end-start-radius:0 !important;border-end-end-radius:0 !important}:host([direction=column]) ::slotted(.dso-secondary){margin-block-start:-1px !important}::slotted(:focus-visible){z-index:1 !important}::slotted(.dso-map){box-shadow:none !important}`;
+const buttonGroupCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}.container{display:inline-flex;border-radius:4px}.container.has-map-buttons{box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);background-color:#ccc;gap:1px;--_dt-icon-button-map-box-shadow:0}::slotted(*){margin:0 !important}:host([direction=row]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-end-start-radius:0 !important;--_dt-icon-button-border-start-start-radius:0;--_dt-icon-button-border-end-start-radius:0}:host([direction=row]) ::slotted(:not(:last-child)){border-start-end-radius:0 !important;border-end-end-radius:0 !important;--_dt-icon-button-border-start-end-radius:0;--_dt-icon-button-border-end-end-radius:0;--_dt-icon-button-border-inline-end-width:0}:host([direction=row]) ::slotted(.dso-secondary){margin-inline-start:-1px !important}:host([direction=column]) .container{flex-direction:column}:host([direction=column]) ::slotted(*){text-align:center !important}:host([direction=column]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-start-end-radius:0 !important;--_dt-icon-button-border-start-start-radius:0;--_dt-icon-button-border-start-end-radius:0}:host([direction=column]) ::slotted(:not(:last-child)){border-end-start-radius:0 !important;border-end-end-radius:0 !important;--_dt-icon-button-border-end-start-radius:0;--_dt-icon-button-border-end-end-radius:0;--_dt-icon-button-border-block-end-width:0}:host([direction=column]) ::slotted(.dso-secondary){margin-block-start:-1px !important}::slotted(:focus-visible){z-index:1 !important}::slotted(.dso-map){box-shadow:none !important}`;
 
 const ButtonGroup = class {
     constructor(hostRef) {
@@ -21,17 +21,20 @@ const ButtonGroup = class {
         });
         this.mutationObserver.observe(this.host, {
             childList: true,
+            attributes: true,
         });
     }
     disconnectedCallback() {
         var _a;
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
-    get hasMapButtons() {
-        return !!this.host.querySelector(":scope > .dso-map");
+    get hasMapButton() {
+        const hasMapIconButton = this.host.querySelector(":scope > dso-icon-button[variant='map']") !== null;
+        const hasMapClass = this.host.querySelector(":scope > .dso-map") !== null;
+        return hasMapIconButton || hasMapClass;
     }
     render() {
-        return (index.h("div", { key: '19bca6e1fa5b009b83c5ba09d190393b73408438', class: clsx.clsx("container", { "has-map-buttons": this.hasMapButtons }), role: "group" }, index.h("slot", { key: '3aa3142304986e0b3fcf2c204ea7e51ac963926b' })));
+        return (index.h("div", { key: '0cd0a65e9b4ed512a7f51248628b5729e591e5a9', class: clsx.clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, index.h("slot", { key: '529bd12bf8558e3d8f0a7d76bb49c9c0200714ed' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-document-card.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-2aek-b9X.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.js');
 
-const documentCardCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:16px !important}}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dt-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status{margin-block-start:8px}`;
+const documentCardCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dt-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status{margin-block-start:8px}::slotted([slot=meta]){margin-inline-end:8px}::slotted([slot=status]){margin-inline-end:8px}`;
 
 const DocumentCard = class {
     constructor(hostRef) {
@@ -28,8 +28,11 @@ const DocumentCard = class {
     get metaSlottedElement() {
         return this.host.querySelector("[slot='meta']");
     }
+    get interactionsSlottedElement() {
+        return this.host.querySelector("[slot='interactions']");
+    }
     render() {
-        return (index.h("div", { key: 'fa7b46b5f893de1939b774c925d34f7f18e15571', class: "dso-document-card-container" }, index.h("div", { key: '682a8fa1673b1c38ca16fc6f4f1a274719adb9f4', class: "dso-document-card-heading" }, index.h("a", { key: 'ee6c434a98e009753e38f92ef38580970025a58b', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("span", { key: 'a14a1a16baafedd1806bf3417dea1135b9cfdb41', class: "icon-container" }, index.h("dso-icon", { key: '843ee861b72689523ce5af6479a3aa1a9ffd84c2', icon: "chevron-right" }), index.h("slot", { key: '918b8e3797b99bd07902ab849f95e3a5b2bf1531', name: "heading" }))), this.metaSlottedElement !== null && index.h("slot", { key: '226986aeeb3d0091f274697b67ebd8de3c358c53', name: "meta" })), index.h("div", { key: 'e0d5195cfa6feb274e4df486b4ca5869f6654ada', class: "dso-document-card-type" }, index.h("slot", { key: '089ae1f70596e1bff98b74acad76a0c6f00e665e', name: "type" })), index.h("div", { key: '6ae6d7023a4b045f7120977d5bccd9b3edaf5ccd', class: "dso-document-card-status" }, index.h("slot", { key: '832d0c2fda8e6fab9ff211d3fbbdd3a8bdf3bbce', name: "status" }))));
+        return (index.h("div", { key: '7ad84c77cd9cad0cfe796d71d9889cd42a46dcff', class: "dso-document-card-container" }, index.h("div", { key: 'cd01ffeccf94bdf273afb2f0356610895ee2209c', class: "dso-document-card-heading" }, index.h("a", { key: '1272f0fb728edeb32ce9ad2dba93a3cb44f4c69a', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("span", { key: 'acedac80a682a895706e45846230656d381c46cc', class: "icon-container" }, index.h("dso-icon", { key: '0808cc4158363e032e566f55783d4d81d8d00f7b', icon: "chevron-right" }), index.h("slot", { key: '0523647b2f8aafffabe191a0d0e985055581737f', name: "heading" })))), index.h("div", { key: 'bc5e9ca39e326cd9fdd0849b890b864de925f774', class: "dso-document-card-type" }, index.h("slot", { key: '22d9f6b73539a9e0a414b59a7c92c9bcddb70a52', name: "type" })), index.h("div", { key: 'a891f27126d774e6c50277d25fb4c72cc16d62a5', class: "dso-document-card-status" }, this.metaSlottedElement !== null && index.h("slot", { key: '64199f7e9d2e0ae1fe039083d79a868b9760139b', name: "meta" }), index.h("slot", { key: '9dfbe5e04c8abfd93aff4982f9bd383170d711d5', name: "status" }), this.interactionsSlottedElement !== null && index.h("slot", { key: '7855de2e14a64d8b68c1840264082f96f48d895b', name: "interactions" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-dropdown-menu.cjs.entry.js

@@ -178,7 +178,7 @@ const DropdownMenu = class {
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (index.h(index.Host, { key: 'cb2c5a2237719a61e590aca29c4eddae1987f88e', onFocusout: this.focusOutListener }, index.h("slot", { key: '96a6a5570d7904dad8e906a1e86427addc9bcb1b', name: "toggle" }), index.h("div", { key: '864f70e5ccdbc9366ddc2fce8593112bf3dcd557', popover: "manual", ref: (element) => (this.popoverElement = element) }, index.h("slot", { key: 'da97c38c3dc0d8476e59d76bbc9442cc60b7fc5f' }))));
+        return (index.h(index.Host, { key: 'bf7687d8c1f0832d2966ebdbc482ce71a7ab8376', onFocusout: this.focusOutListener }, index.h("slot", { key: '20f2ab2831f5d2c717bfb95795f1c00fb6eeb7d6', name: "toggle" }), index.h("div", { key: '030420adaad80a6cf6030c4527a7198abab16fe5', popover: "manual", ref: (element) => (this.popoverElement = element) }, index.h("slot", { key: '76007e3d341828741a96a2e7e9250cbb9711e4fb' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-header.cjs.entry.js

@@ -156,7 +156,7 @@ const Header = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'be2307ac0dd7b904dab98b9939934a66b826b58e', "is-compact": this.isCompact }, index.h("div", { key: 'df33364ae9b770ff89cb1b2fa744bbe444d9aa48', class: "dso-header" }, index.h("div", { key: 'aa283ab329b3ad2ff95c287a14c9ab2e9ce9107b', class: "logo-container" }, index.h("slot", { key: '150276e26091fb0d259a4b6235286dcd47150bdd', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (index.h(index.Host, { key: '228fb75a1651e9674939baf063450690f28c4976', "is-compact": this.isCompact }, index.h("div", { key: '33568c3eb674b8d22e62ceb4efd9ea78a73b5ea3', class: "dso-header" }, index.h("div", { key: '895c3dc52a24defdb752cd1961dd5219b1d505a2', class: "logo-container" }, index.h("slot", { key: '5f911f80f477c4d902bb96cc6ca1d941aa80324e', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     renderCompact() {
         return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (index.h("div", { class: "dropdown" }, index.h("dso-dropdown-menu", { "dropdown-align": "right", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, index.h("button", { type: "button", slot: "toggle" }, index.h("span", null, this.text("menu")), index.h("dso-icon", { icon: "chevron-down" })), index.h("div", { class: "dso-dropdown-options" }, index.h("ul", null, this.mainMenu.map((menuItem) => (index.h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (index.h("li", null, index.h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (index.h("li", null, index.h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, index.h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (index.h("li", null, this.loginUrl ? (index.h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (index.h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (index.h("li", null, this.logoutUrl ? (index.h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (index.h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (index.h("li", null, this.helpUrl ? (index.h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, index.h("span", null, this.text("help")), index.h("dso-icon", { icon: "help" }))) : (index.h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, index.h("span", null, this.text("help")), index.h("dso-icon", { icon: "help" })))))))))));

package/dist/cjs/dso-highlight-box.cjs.entry.js

@@ -11,7 +11,7 @@ const HighlightBox = class {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (index.h(index.Host, { key: 'baa2e7b69d8594b34bb3f87b10e50155fcb8bbeb', "has-counter": hasCounter }, hasCounter && index.h("div", { key: 'e1a29441395455061a92191c2a0d09cac29a1e3d', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : index.h("slot", { key: 'db2bf2c61f04cc0f0a6ac8cd17af5c083cea10f5', name: "icon" })), index.h("slot", { key: '9ab5693fccdaed92f15dce9c7a76b954f5b53693' })));
+        return (index.h(index.Host, { key: '49ad2a72f1a776d093c82afbc2843084575c2cdf', "has-counter": hasCounter }, hasCounter && index.h("div", { key: '76d449915cb077afa494e3527824b721772defa9', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : index.h("slot", { key: '640640745b99f80117b9e97a80f9eb00b285b330', name: "icon" })), index.h("slot", { key: 'cdf119170cc1c86332eb9a8c249a741aa7174d94' })));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/dso-history-item.cjs.entry.js

@@ -43,7 +43,7 @@ const HistoryItem = class {
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (index.h(index.Fragment, { key: '2e77d236980aed9e08e35161d001d17f1728a83b' }, index.h("div", { key: 'c0c0be85009c8f7d97c321a5bdbf43bda7a6f64b', class: "history-item-date" }, index.h("slot", { key: '099aefc48360345b5d55f6aebe5f9d29aefe59c9', name: "date" })), index.h("div", { key: 'c4da694c8b9659aecbd6a4594bb5f46dfa372456', class: "history-item-content" }, index.h("div", { key: '9fd28a25b87a15bf57442a7648834d57e6f260e6', class: "history-item-status-message" }, index.h("dso-icon", { key: 'cf331e4b19413148a68bafc6bc1849551bb6f435', icon: this.typeIcons[this.type], "aria-hidden": "true" }), index.h("slot", { key: '8aa1952d43a8bdf28f63d81e3723e8634be9a0be', name: "status" })), this.titleSlottedElement !== null && this.href && (index.h("div", { key: '7128bf286bf5f92c4e061f7b06ad8a709fb88d87', class: "history-item-title" }, index.h("a", { key: '38635bb3ff0de20d5fdb8633bd5699112cfa753b', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("slot", { key: '6a0efc08c7f7d4283f6417505bb727dc4bab75d4', name: "title" })))), this.explanationSlottedElement !== null && (index.h("div", { key: '505111ed0bf510619c6814b89f01a4ed96f8e2bd', class: "history-item-explanation" }, index.h("slot", { key: '2b27be5812d5b62e11da7b1a1d4da0c68dd1f625', name: "explanation" }))), this.warningSlottedElement !== null && (index.h("div", { key: '6f6b7e404bf94a00c0835098470d00b70ba5203b', class: "history-item-warning" }, index.h("dso-icon", { key: '1e8c8c07ebed9ccb58f21f9b2a6c279510b19e4b', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), index.h("slot", { key: 'df67c18e8aea8dfabf5e9ca5cbd33cb0cba0d47b', name: "warning" }))))));
+        return (index.h(index.Fragment, { key: '540840de191624a2a899117ab993346ad010addf' }, index.h("div", { key: 'a6c83fd5a9f776ff6a9af660bc52f6c9aa40e609', class: "history-item-date" }, index.h("slot", { key: 'cbec4ec21d97bcd969f2d757d118378e5bc99b80', name: "date" })), index.h("div", { key: '5d2ebd3b7669d770b1f6c4f87aab2dfef24ecb7d', class: "history-item-content" }, index.h("div", { key: 'da987825824c7b0b9d77d55b6a7756c2a057d9b5', class: "history-item-status-message" }, index.h("dso-icon", { key: '1efaac069ba0b9a9809f574ff87d0bd72e00fc54', icon: this.typeIcons[this.type], "aria-hidden": "true" }), index.h("slot", { key: '4a0cb1eb1af2997086c895e50d79d9d60916d402', name: "status" })), this.titleSlottedElement !== null && this.href && (index.h("div", { key: '6f469044cc80f25ea3b8e29b572e4832a9c05cd3', class: "history-item-title" }, index.h("a", { key: '1b8872feb8d4fe27c8849abc804da2159ca57882', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("slot", { key: 'ecb8d1339350840104fa20ce9809feadc507f100', name: "title" })))), this.explanationSlottedElement !== null && (index.h("div", { key: '68e8f7a37f9a9dc77723ab7c1e357acf0c1ec107', class: "history-item-explanation" }, index.h("slot", { key: '964f77c8f75253092be241b72fe8e189ef908a46', name: "explanation" }))), this.warningSlottedElement !== null && (index.h("div", { key: 'b7687ba9fb1ba7ca3c9d87a3a3225e2e535e7d0f', class: "history-item-warning" }, index.h("dso-icon", { key: '02d0b36eb925ba6a6b187f329066c9326b014e00', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), index.h("slot", { key: 'b2a75c28f4523afa1c96409fbd7d970ac6772d90', name: "warning" }))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-icon_2.cjs.entry.js

@@ -708,7 +708,7 @@ const Icon = class {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return index.h("span", { key: 'd5680e2f282290bae1f770e157c8495e874d1274', class: "icon-container", innerHTML: icon.svg });
+            return index.h("span", { key: 'dc1f3170309895f687b045900f29994f61006754', class: "icon-container", innerHTML: icon.svg });
         }
     }
 };
@@ -754,6 +754,7 @@ const iconButtonCss = () => `.dso-tooltip {
   visibility: visible;
 }
 .dso-tooltip .tooltip-inner {
+  --_dt-span-role-paragraph-margin-block: 8px;
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
@@ -979,6 +980,12 @@ const iconButtonCss = () => `.dso-tooltip {
 .dso-secondary {
   padding-inline: calc(8px - 1px);
   padding-block: calc(8px - 1px);
+  border-start-start-radius: var(--_dt-icon-button-border-start-start-radius, 4px);
+  border-start-end-radius: var(--_dt-icon-button-border-start-end-radius, 4px);
+  border-end-end-radius: var(--_dt-icon-button-border-end-end-radius, 4px);
+  border-end-start-radius: var(--_dt-icon-button-border-end-start-radius, 4px);
+  border-block-end-width: var(--_dt-icon-button-border-block-end-width, 1px);
+  border-inline-end-width: var(--_dt-icon-button-border-inline-end-width, 1px);
 }
 
 .dso-tertiary {
@@ -1183,8 +1190,11 @@ const iconButtonCss = () => `.dso-tooltip {
   padding-block: 8px;
   border: 0;
   margin-inline-end: 0;
-  box-shadow: var(--_dso-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3));
-  border-radius: var(--_dso-icon-button-map-border-radius, 4px);
+  box-shadow: var(--_dt-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3));
+  border-start-start-radius: var(--_dt-icon-button-border-start-start-radius, 4px);
+  border-start-end-radius: var(--_dt-icon-button-border-start-end-radius, 4px);
+  border-end-end-radius: var(--_dt-icon-button-border-end-end-radius, 4px);
+  border-end-start-radius: var(--_dt-icon-button-border-end-start-radius, 4px);
 }
 
 .icon-button {
@@ -1278,7 +1288,7 @@ const IconButton = class {
         this.cleanUp = undefined;
     }
     render() {
-        return (index.h("button", { key: '5045ce3b4d8d0bf8538501dee9f573ee8f6cee38', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, index.h("dso-icon", { key: '3ce28c59e0f6c2a137c9f65958765e5ac3d4f239', icon: this.icon }), index.h(tooltip_functionalComponent.Tooltip, { key: 'ed39dd1770074c20e3103067ddc1d32db8d0d2d1', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
+        return (index.h("button", { key: '0b109ec22c88e4fae7a3b51b6092746bd5bebae6', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, index.h("dso-icon", { key: 'a520208655de770f8b2dc58ae42ce4cb488e0e36', icon: this.icon }), index.h(tooltip_functionalComponent.Tooltip, { key: 'b577cada7261b7c69da8c9cc52c1fe8a22390238', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
     }
 };
 IconButton.style = iconButtonCss();

package/dist/cjs/dso-info-button.cjs.entry.js

@@ -27,7 +27,7 @@ const InfoButton = class {
         this.dsoToggle.emit({ originalEvent, active: this.active });
     }
     render() {
-        return (index.h(index.Host, { key: '5fc1ae354bfc278bedbca0f2aaaff7a15deb5449', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, !this.secondary ? (index.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) })) : (
+        return (index.h(index.Host, { key: '664a78b759c6216aa2df88b003ec4324f6f55b2c', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, !this.secondary ? (index.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
         index.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) }, index.h("dso-icon", { icon: this.active || this.hover ? "info-active" : "info" }), index.h("span", { class: "sr-only" }, this.label)))));
     }

package/dist/cjs/dso-info_2.cjs.entry.js

@@ -10,7 +10,7 @@ const Info = class {
         this.dsoClose = index.createEvent(this, "dsoClose", 7);
     }
     render() {
-        return (index.h(index.Fragment, { key: '6ea8fd02c7e0df97ecf3c57a895334f312c513c3' }, index.h("slot", { key: '1721e91318a52c8c4208b2acac069c723c748ec5' }), !this.fixed && (index.h("dso-icon-button", { key: 'fac469f4c2ee028d3f45b83353f038f7cb95fe58', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (index.h(index.Fragment, { key: '400c6c9a5a24dea0dbb640bc11cad2f45ba778ac' }, index.h("slot", { key: 'b0e3f9fc32139c6aef78782216211c2f85a9c0e5' }), !this.fixed && (index.h("dso-icon-button", { key: '281e825b492e3c548057900a467ed8f19cf9235b', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
 };
 Info.style = infoCss();
@@ -77,7 +77,7 @@ const Selectable = class {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (index.h(index.Fragment, { key: 'a406bc01d2ece87d87bafc3e83b1011b0eec2853' }, index.h("div", { key: '9e6b486edc6c7e6ad8db1d1d504d502c9adb2267', class: "dso-selectable-container" }, index.h("div", { key: 'c654ecf00751275acf93eb53d82d1c02918957ef', class: "dso-selectable-input-wrapper" }, index.h("input", { key: 'a85b3fb074e5207e34407debd0b04da0524f3955', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '53993c8ad0b15394901fdb6d67bc83aa89385844', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: 'ce3e9bc660c7a5beb36eef42ea1e6089abc9bf96', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: 'b3bf8765cb0d2e616475dfdf0a25998e3d9a637e' }, index.h("slot", { key: '93121b79a8018d9661e9518855147e79d3d917fc', name: "info" })))), index.h("slot", { key: '537024a58257ceecb7abba3b0eb69eac7ef5cc1b', name: "options" })));
+        return (index.h(index.Fragment, { key: 'fd39e588c2e7192251aaa1ba2ce0059c5a148bf8' }, index.h("div", { key: 'c10126ae1366c0ac63e50414a3fc5fdd2b7d7279', class: "dso-selectable-container" }, index.h("div", { key: '7151d4e9a53473a6784a4fa7db2cc6b46619caed', class: "dso-selectable-input-wrapper" }, index.h("input", { key: 'c4767583ea01d20c2261928c7abba2e1baa82bd9', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '786376c68173bc0fabbe21b3fcd0361ebd46a0cf', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: 'e16c0653024466ac4435e19063700c8a8c7ac933', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: 'db608fea9f32208bda0e87c72defd98deca6a8bd' }, index.h("slot", { key: '2230755391a6141cde8e431566c11746ccc4c9f2', name: "info" })))), index.h("slot", { key: '0c15f2a50d082f7d2f0d7184a004c5bd701ba6f8', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/cjs/dso-input-range.cjs.entry.js

@@ -17,13 +17,13 @@ const InputRange = class {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (index.h(index.Fragment, null, this.description && (index.h("span", { key: 'f3796a5bbd719af7fe23c285ba4f1519eaaaf1b9', id: "description", hidden: true }, this.description)), index.h("span", { key: '91eeb869d8529a793ab25c766cb38b75dd388ba7', class: "counter min", "aria-hidden": "true" }, min, this.unit), index.h("input", { key: '98734659f11a5d9793f76b7ebd170b56fe1ef965', 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 (index.h(index.Fragment, null, this.description && (index.h("span", { key: 'd187af008bb6acdfacf391f509ab83d17eaef891', id: "description", hidden: true }, this.description)), index.h("span", { key: 'f1041606979f3cb05eec80fae45d2ea8c901fadf', class: "counter min", "aria-hidden": "true" }, min, this.unit), index.h("input", { key: '18d055df50d550b68b11511fab87cc3e9bd17bae', 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,
-            }) }), index.h("span", { key: '04774c80c6ac969cf1338d3b4ea39dabf531539b', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), index.h("span", { key: '0c10b36570bf6ccbadf38e5b110d3b8f5c950521', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-label_3.cjs.entry.js

@@ -102,13 +102,13 @@ const Label = class {
         this.isTruncated = false;
     }
     render() {
-        return (index$1.h(index$1.Fragment, { key: 'f868c06841bb1f9a6f39db8598141634cbe59f5f' }, index$1.h("span", { key: '935d20891b9df19b37cf38242892428c81c12631', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx.clsx("dso-label", {
+        return (index$1.h(index$1.Fragment, { key: 'e71e00c923743364639854082369f922d12dae81' }, index$1.h("span", { key: '36a7ba8f865de6ee9581b569f2454dc04c88e622', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx.clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, index$1.h("slot", { key: 'e3d5f4d753cf5ca6ef1bef6fae698b3b4c03e5da', name: "symbol" }), index$1.h("span", { key: '242c774421051469948ff841d7b55bf06e9481fd', class: clsx.clsx("dso-label-content", {
+            }) }, index$1.h("slot", { key: '0d6a2ac20e09e7e2b523e20effa9cbd9128796a4', name: "symbol" }), index$1.h("span", { key: '95db09c39709060af1275740f79bdca6bfb09a6c', class: clsx.clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, index$1.h("slot", { key: '93ae4502166a8c246371249f6b25423ab066e5b7' })), this.removable && (index$1.h("dso-icon-button", { key: '35c535b0943aef1ffc59871b43e2222c7490c6d2', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (index$1.h("dso-tooltip", { key: '0c0a556cc61f34f782e9da771138e8b0e37e6647', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, index$1.h("slot", { key: '198f0d577131b02242aae4d803f5b6cfe542012f' })), this.removable && (index$1.h("dso-icon-button", { key: '9e331fc1fedd7c972d3f4a6bc74bbe27cb2177f5', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (index$1.h("dso-tooltip", { key: '7ce757b70f99910b834545d495827baa3fafb90f', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -199,7 +199,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (index$1.h(index$1.Fragment, { key: '0f34c376fadba8a62707d91e84f25677fc5690a3' }, index$1.h("button", Object.assign({ key: 'caa9fb16fe1781b355a3f0b9859a07d460c5ec85', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index$1.h("svg", { key: '40073a0bd05c1009811be9e892ee4a323a2d9439', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: '9b8ee2e81cd7390998c6e5700a6f7bcb662b876f', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: '5399256e45dc823a7722831e64c7dd5ec0d152f9', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: '2ea153fc376c0889c3c74f8f4440ed1d9dc69659', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: '4bd14e28d33e7af47c386acd8f6e85ad54b6ce84', htmlFor: this.identifier }, index$1.h("slot", { key: 'af963203c5fe7fae6f38d518e11be6e69f75b421' })))));
+        return (index$1.h(index$1.Fragment, { key: '7951732521fe2f5492e98f577a8db95368701a00' }, index$1.h("button", Object.assign({ key: 'dee277ad2f9588b83134762429e69e049a7968bf', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index$1.h("svg", { key: '18c6aa1f628fac44a1fc461419e5a53d27ce2385', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index$1.h("g", { key: '130f15a202fd726f2db7ba6100e63f735dcfd590', fill: "none", "fill-rule": "evenodd" }, index$1.h("rect", { key: '8f3f8c42d45032d4c1624875a635d204b5ca03be', width: "40", height: "20", fill: "currentColor", rx: "10" }), index$1.h("circle", { key: '20641da17a34b9cdf9960d7b640746f2d3be2fb0', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index$1.h("label", { key: 'd03a0107701ab2dcf1e771d9f08596e3c286d44b', htmlFor: this.identifier }, index$1.h("slot", { key: '57ea87e3101fc832b88f74e0dd7b0134e38ea386' })))));
     }
     get host() { return index$1.getElement(this); }
 };

package/dist/cjs/dso-legend-item.cjs.entry.js

@@ -40,7 +40,7 @@ const LegendItem = class {
         if (label === null || label === void 0 ? void 0 : label.textContent) {
             accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;
         }
-        return (index.h(index.Host, { key: '24af81db658898c1bc2317422cbb6ab38196083d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '174173193d7302d22d265e02a4147c6877241d0f', class: clsx.clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (index.h("div", { key: '568089b5a568b92d12665a7c0eb78d3315c2c947' }, index.h("slot", { key: '325f14f024dca0edf52c2684097be1ca5eb6f014', name: "symbol" }))), index.h("div", { key: 'e72d3ac238b30577082a0edc4ab68de1d3b16f15' }, index.h("slot", { key: 'a1b4d6b740bd8a5ee32adcc5e40268bfd472c680', name: "label" })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: '9bc17eafc23c61d8b53005d02fa4aacad6ca2d8d', position: "bottom" }, this.disabledMessage)), index.h("div", { key: '9208ae5adae3f59e0ab0a20c0a32b65cc3fbc40f', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (index.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 && (index.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 && (index.h("div", { key: 'a3c74cdd73815b7519c9126d278da02c0281dfb6', hidden: this.disabled || !this.showOptions, class: "options" }, index.h("slot", { key: 'b932318fd0ccb55f02e60e5e49e339453b61d955', name: "options" })))));
+        return (index.h(index.Host, { key: '113e4cc95985fed9befcc75cf7dd49d431a6a724', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, index.h("div", { key: '32b00c02feaa2107691c0f57cb508be44417033b', class: clsx.clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (index.h("div", { key: '7fedb010d0ff7d53acddef537be6c6009f250f84' }, index.h("slot", { key: 'a566482b9b60fe5e69f74d2af4c3c093f01c8665', name: "symbol" }))), index.h("div", { key: 'd6c4fbe4e9dfbf52dd02255d3bad704de7edb313' }, index.h("slot", { key: 'bfa9d87992c0cab9d034260153e634158f4b6c3a', name: "label" })), this.disabled && this.disabledMessage && (index.h("dso-toggletip", { key: '13927a8346bf1c2b34c83bcc5ab9fed9e3394789', position: "bottom" }, this.disabledMessage)), index.h("div", { key: 'daf55817441d0156625630afb68be8209a7ff96a', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (index.h("dso-icon-button", { key: '15d1448d3338cda2bae8c395f1a376f5c8b37449', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (index.h("dso-slide-toggle", { key: '851d2b0d696a8c2271f3ae5a610115606773899c', accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (index.h("div", { key: 'b29ccf455d9326c56ec6f9d5cbc3d07302718773', hidden: this.disabled || !this.showOptions, class: "options" }, index.h("slot", { key: '8ce07dd6a490e7853ab464690af7a07f23bc7cae', name: "options" })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-legend.cjs.entry.js

@@ -70,7 +70,7 @@ const Legend = class {
         this.moveFocusToTab(next);
     }
     render() {
-        return (index.h(index.Host, { key: '4f1295cd75af42eeaf438cc7b92604054993bdeb' }, index.h("div", { key: 'f1473d16ec2b6b5035c9aa88dbad40a4233a1529', class: "topbar" }, index.h("div", { key: 'f33777d4ab012cecb17105abb8299426995c86d2', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (index.h("button", Object.assign({ class: clsx.clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), index.h("dso-icon-button", { key: '8fc17eeefc63ca51e296212eeeadbfc8ab731d18', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), index.h("dso-scrollable", { key: '553566be6236dde866e739364e7a19aa918d32a8', class: "content" }, index.h("div", { key: '9348aad31e38e42f208301773d58fa784d71c751', role: "tabpanel", tabIndex: 0 }, index.h("slot", { key: '55fd88c643f65474bb691e4100e493c28b22a358' })))));
+        return (index.h(index.Host, { key: '26e817d9f760e220fcba00aed980bf2bd7ee1697' }, index.h("div", { key: 'd9fed11954d8f4df4480fae12d361e134aafe7f3', class: "topbar" }, index.h("div", { key: 'e9f21c805928ffee5ee26293011704983ca46ebd', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (index.h("button", Object.assign({ class: clsx.clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), index.h("dso-icon-button", { key: '1c51e117733829cd351074be0ace4dad008f1eeb', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), index.h("dso-scrollable", { key: 'ef59ecc0c8221fbbec78df269b476aa43872a138', class: "content" }, index.h("div", { key: '6f4f8d627425c6d85c39953e0355ee2c48b969d5', role: "tabpanel", tabIndex: 0 }, index.h("slot", { key: '2a57288315327f31330eb2389f0b0d01de51a783' })))));
     }
     get host() { return index.getElement(this); }
 };