@dso-toolkit/core 85.0.0 → 87.0.0

package/dist/esm/dso-cursor-tooltip.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, h, a as Host } from './index-Dx5skKSq.js';
+
+const cursorTooltipCss = () => `*,*::after,*::before{box-sizing:border-box}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}:host{--_dso-icon-button-tertiary-color:#fff;background-color:rgba(0, 0, 0, 0.75);color:#fff;position:relative;display:inline-block;pointer-events:none;overflow:unset;max-inline-size:360px;margin-inline:8px;padding-inline:16px;padding-block:8px;border-radius:4px;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4))}:host::before{content:"";position:absolute;inset-inline-start:50%;inset-block-start:0;transform:translateX(-50%) translateY(-100%);border-inline-start:8px solid transparent;border-inline-end:8px solid transparent;border-block-end:8px solid rgba(0, 0, 0, 0.75);filter:none;pointer-events:none}`;
+
+const CursorTooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: 'fe3c40f9ab20b3172e840b353cf4b2eeca1a96fe', class: "dso-cursor-tooltip" }, h("slot", { key: '11c043f041dce83de7740ffdb0b62481c4d10516' })));
+    }
+};
+CursorTooltip.style = cursorTooltipCss();
+
+export { CursorTooltip as dso_cursor_tooltip };
+//# sourceMappingURL=dso-cursor-tooltip.entry.js.map

package/dist/esm/dso-cursor-tooltip.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dso-cursor-tooltip.entry.js","sources":["src/components/cursor-tooltip/cursor-tooltip.scss?tag=dso-cursor-tooltip&encapsulation=shadow","src/components/cursor-tooltip/cursor-tooltip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include set-colors.apply(rgba(colors.$zwart, 0.75), \"tooltip\");\r\n\r\n  position: relative;\r\n  display: inline-block;\r\n  pointer-events: none;\r\n  overflow: unset;\r\n  max-inline-size: 360px;\r\n  margin-inline: units.$u1;\r\n  padding-inline: units.$u2;\r\n  padding-block: units.$u1;\r\n  border-radius: 4px;\r\n  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n\r\n  &::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset-inline-start: 50%;\r\n    inset-block-start: 0;\r\n    transform: translateX(-50%) translateY(-100%);\r\n    border-inline-start: units.$u1 solid transparent;\r\n    border-inline-end: units.$u1 solid transparent;\r\n    border-block-end: units.$u1 solid rgba(colors.$zwart, 0.75);\r\n    filter: none;\r\n    pointer-events: none;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-cursor-tooltip\",\r\n  styleUrl: \"cursor-tooltip.scss\",\r\n  shadow: true,\r\n})\r\nexport class CursorTooltip implements ComponentInterface {\r\n  render() {\r\n    return (\r\n      <Host class=\"dso-cursor-tooltip\">\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,2pDAA2pD,CAAC;;MCO/qD,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC9B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;"}

package/dist/esm/dso-date-picker.entry.js

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

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, d as createEvent, f as forceUpdate, h, g as getElement } from './index-Dx5skKSq.js';
 import { i as isModifiedEvent } from './is-modified-event-Hgv-pDpy.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) {
@@ -26,8 +26,11 @@ const DocumentCard = class {
     get metaSlottedElement() {
         return this.host.querySelector("[slot='meta']");
     }
+    get interactionsSlottedElement() {
+        return this.host.querySelector("[slot='interactions']");
+    }
     render() {
-        return (h("div", { key: 'fa7b46b5f893de1939b774c925d34f7f18e15571', class: "dso-document-card-container" }, h("div", { key: '682a8fa1673b1c38ca16fc6f4f1a274719adb9f4', class: "dso-document-card-heading" }, h("a", { key: 'ee6c434a98e009753e38f92ef38580970025a58b', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'a14a1a16baafedd1806bf3417dea1135b9cfdb41', class: "icon-container" }, h("dso-icon", { key: '843ee861b72689523ce5af6479a3aa1a9ffd84c2', icon: "chevron-right" }), h("slot", { key: '918b8e3797b99bd07902ab849f95e3a5b2bf1531', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '226986aeeb3d0091f274697b67ebd8de3c358c53', name: "meta" })), h("div", { key: 'e0d5195cfa6feb274e4df486b4ca5869f6654ada', class: "dso-document-card-type" }, h("slot", { key: '089ae1f70596e1bff98b74acad76a0c6f00e665e', name: "type" })), h("div", { key: '6ae6d7023a4b045f7120977d5bccd9b3edaf5ccd', class: "dso-document-card-status" }, h("slot", { key: '832d0c2fda8e6fab9ff211d3fbbdd3a8bdf3bbce', name: "status" }))));
+        return (h("div", { key: '424a1e6058327ca1892f41626288909fdbe28972', class: "dso-document-card-container" }, h("div", { key: 'bf0e9dc501a1850af4dd64d36590de0d2103b164', class: "dso-document-card-heading" }, h("a", { key: 'fa110e3c6f1984741d02b515082e847b11aea781', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '32cd23687a349abef9083164795ebb17e833baf2', class: "icon-container" }, h("dso-icon", { key: 'f796e32f7d8c7e1ee350aa1b7a3de65be51fed36', icon: "chevron-right" }), h("slot", { key: 'a23262482804914228c0320525f41c2bbf35314e', name: "heading" })))), h("div", { key: '75734d9e95ded9f4fdde9c999d7a4233b8314f06', class: "dso-document-card-type" }, h("slot", { key: 'b18ce3010ae3cb4736ae92108e014fe51a2e2484', name: "type" })), h("div", { key: '46673ebfc66c849b1ba48337f1fb2f864b182759', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: '45418a415877277de76dcf3a6f8df0ad86c4f732', name: "meta" }), h("slot", { key: 'cd8bf629833394d19d423ba7b8912be3a7af5f53', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: '3996b4f72f7658ef760dfcf7f6578b4b8951e0a0', name: "interactions" }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-document-card.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-document-card.entry.js","sources":["src/components/document-card/document-card.scss?tag=dso-document-card&encapsulation=shadow","src/components/document-card/document-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/components/document-card\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-document-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n\r\n  .dso-document-card-heading {\r\n    align-items: center;\r\n    display: flex;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n      flex-wrap: wrap;\r\n    }\r\n  }\r\n\r\n  &:has(.dso-document-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: document-card.$background-color-hover;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-document-card-container {\r\n    background-color: document-card.$background-color-active;\r\n  }\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n  display: flex !important;\r\n  justify-content: space-between !important;\r\n  flex-shrink: 0 !important;\r\n  align-self: end !important;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    flex-basis: 100% !important;\r\n    margin-block-start: units.$u2 !important;\r\n  }\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  display: inline !important;\r\n  color: colors.$bosgroen !important;\r\n  font-size: 1.125em !important;\r\n  font-weight: 700 !important;\r\n  line-height: 1.25 !important;\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !important;\r\n}\r\n\r\n.heading-anchor {\r\n  color: document-card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: document-card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: document-card.$heading-anchor-color;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n\r\n  .icon-container {\r\n    position: relative;\r\n    padding-inline-end: units.$u3;\r\n\r\n    dso-icon {\r\n      position: absolute;\r\n      inset-inline-end: 0;\r\n      inset-block-end: -3px;\r\n      block-size: units.$u3;\r\n      inline-size: units.$u3;\r\n    }\r\n  }\r\n}\r\n\r\n::slotted([slot=\"type\"]) {\r\n  --_dt-info-button-margin-inline-start: 0;\r\n\r\n  display: flex !important;\r\n  gap: units.$u1 !important;\r\n}\r\n\r\n.dso-document-card-heading + .dso-document-card-type,\r\n.dso-document-card-heading + .dso-document-card-status,\r\n.dso-document-card-type + .dso-document-card-status {\r\n  margin-block-start: units.$u1;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DocumentCardClickEvent } from \"./document-card.interfaces\";\r\n\r\n/**\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot type - A slot to hold type of document with an optional `Toggletip`.\r\n * @slot status - A slot to hold some status information on the document.\r\n */\r\n@Component({\r\n  tag: \"dso-document-card\",\r\n  styleUrl: \"document-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoDocumentCardElement;\r\n\r\n  /**\r\n   * The URL to which the DocumentCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Makes the DocumentCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the DocumentCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoDocumentCardClick!: EventEmitter<DocumentCardClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoDocumentCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"dso-document-card-container\">\r\n        <div class=\"dso-document-card-heading\">\r\n          <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n            <span class=\"icon-container\">\r\n              <dso-icon icon=\"chevron-right\" />\r\n              <slot name=\"heading\" />\r\n            </span>\r\n          </a>\r\n          {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n        </div>\r\n        <div class=\"dso-document-card-type\">\r\n          <slot name=\"type\" />\r\n        </div>\r\n        <div class=\"dso-document-card-status\">\r\n          <slot name=\"status\" />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,2xDAA2xD,CAAC;;MCiB9yD,YAAY,GAAA,MAAA;;;;;IAwBvB,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAE1E,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGjF,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QAEnC,OAAO,IAAI,CAAC,gBAAgB;;AAGtB,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD;;AAGF,QAAA,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;AAGlG,IAAA,IAAI,kBAAkB,GAAA;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;;IAGjD,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAClF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC1B,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EAAG,CAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CAClB,CACL,EACH,IAAI,CAAC,kBAAkB,KAAK,IAAI,IAAI,6DAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CACrD,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF;;;;;;;;"}
+{"version":3,"file":"dso-document-card.entry.js","sources":["src/components/document-card/document-card.scss?tag=dso-document-card&encapsulation=shadow","src/components/document-card/document-card.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/components/document-card\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.dso-document-card-container {\r\n  padding-block: units.$u2;\r\n  padding-inline: units.$u2;\r\n  inline-size: 100%;\r\n\r\n  .dso-document-card-heading {\r\n    align-items: center;\r\n    display: flex;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n      flex-wrap: wrap;\r\n    }\r\n  }\r\n\r\n  &:has(.dso-document-card-heading a:is(:hover, :focus-visible)) {\r\n    background-color: document-card.$background-color-hover;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  .dso-document-card-container {\r\n    background-color: document-card.$background-color-active;\r\n  }\r\n}\r\n::slotted([slot=\"heading\"]) {\r\n  display: inline !important;\r\n  color: colors.$bosgroen !important;\r\n  font-size: 1.125em !important;\r\n  font-weight: 700 !important;\r\n  line-height: 1.25 !important;\r\n  margin-block-end: 0 !important;\r\n  margin-block-start: 0 !important;\r\n}\r\n\r\n.heading-anchor {\r\n  color: document-card.$heading-anchor-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: document-card.$heading-anchor-hover-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: document-card.$heading-anchor-color;\r\n  }\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n\r\n  .icon-container {\r\n    position: relative;\r\n    padding-inline-end: units.$u3;\r\n\r\n    dso-icon {\r\n      position: absolute;\r\n      inset-inline-end: 0;\r\n      inset-block-end: -3px;\r\n      block-size: units.$u3;\r\n      inline-size: units.$u3;\r\n    }\r\n  }\r\n}\r\n\r\n::slotted([slot=\"type\"]) {\r\n  --_dt-info-button-margin-inline-start: 0;\r\n\r\n  display: flex !important;\r\n  gap: units.$u1 !important;\r\n}\r\n\r\n.dso-document-card-heading + .dso-document-card-type,\r\n.dso-document-card-heading + .dso-document-card-status,\r\n.dso-document-card-type + .dso-document-card-status {\r\n  margin-block-start: units.$u1;\r\n}\r\n\r\n::slotted([slot=\"meta\"]) {\r\n  margin-inline-end: units.$u1;\r\n}\r\n\r\n::slotted([slot=\"status\"]) {\r\n  margin-inline-end: units.$u1;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, forceUpdate, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { DocumentCardClickEvent } from \"./document-card.interfaces\";\r\n\r\n/**\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot type - A slot to hold type of document with an optional `Toggletip`.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot status - A slot to hold some status information on the document.\r\n * @slot interactions - An optional slot for one or more `Badge`'s.\r\n */\r\n@Component({\r\n  tag: \"dso-document-card\",\r\n  styleUrl: \"document-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoDocumentCardElement;\r\n\r\n  /**\r\n   * The URL to which the DocumentCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Makes the DocumentCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the DocumentCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoDocumentCardClick!: EventEmitter<DocumentCardClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoDocumentCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  get interactionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='interactions']\");\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"dso-document-card-container\">\r\n        <div class=\"dso-document-card-heading\">\r\n          <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n            <span class=\"icon-container\">\r\n              <dso-icon icon=\"chevron-right\" />\r\n              <slot name=\"heading\" />\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"dso-document-card-type\">\r\n          <slot name=\"type\" />\r\n        </div>\r\n        <div class=\"dso-document-card-status\">\r\n          {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n          <slot name=\"status\" />\r\n          {this.interactionsSlottedElement !== null && <slot name=\"interactions\" />}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,inDAAinD,CAAC;;MCkBpoD,YAAY,GAAA,MAAA;;;;;IAwBvB,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAE1E,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGjF,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QAEnC,OAAO,IAAI,CAAC,gBAAgB;;AAGtB,IAAA,iBAAiB,CAAC,CAAa,EAAA;AACrC,QAAA,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACpD;;AAGF,QAAA,OAAO,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;AAGlG,IAAA,IAAI,kBAAkB,GAAA;QACpB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC;;AAGjD,IAAA,IAAI,0BAA0B,GAAA;QAC5B,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC;;IAGzD,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAA,EAClF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC1B,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EAAG,CAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAG,CAAA,CAClB,CACL,CACA,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EAClC,IAAI,CAAC,kBAAkB,KAAK,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,EACzD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACrB,IAAI,CAAC,0BAA0B,KAAK,IAAI,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAG,CACrE,CACF;;;;;;;;"}

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

@@ -176,7 +176,7 @@ const DropdownMenu = class {
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: 'cb2c5a2237719a61e590aca29c4eddae1987f88e', onFocusout: this.focusOutListener }, h("slot", { key: '96a6a5570d7904dad8e906a1e86427addc9bcb1b', name: "toggle" }), h("div", { key: '864f70e5ccdbc9366ddc2fce8593112bf3dcd557', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: 'da97c38c3dc0d8476e59d76bbc9442cc60b7fc5f' }))));
+        return (h(Host, { key: '28f8eb6a00bf4a1b139c917e44ce8de42067e8c6', onFocusout: this.focusOutListener }, h("slot", { key: 'fcf093b872932b1f604ae3d5f93391189ac60bbb', name: "toggle" }), h("div", { key: '2a621a9cdcf5817faf1354640a0062caa5c5fe04', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '68633d9a0c505d120acac96e15058d44e01d9a00' }))));
     }
     get host() { return getElement(this); }
 };

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

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

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

@@ -9,7 +9,7 @@ const HighlightBox = class {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: 'baa2e7b69d8594b34bb3f87b10e50155fcb8bbeb', "has-counter": hasCounter }, hasCounter && h("div", { key: 'e1a29441395455061a92191c2a0d09cac29a1e3d', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'db2bf2c61f04cc0f0a6ac8cd17af5c083cea10f5', name: "icon" })), h("slot", { key: '9ab5693fccdaed92f15dce9c7a76b954f5b53693' })));
+        return (h(Host, { key: '3e6f545e389b9e0b11886e6512a56ff578f4b8a1', "has-counter": hasCounter }, hasCounter && h("div", { key: '7ba0529e57274b47810171a3737f3436900e1c5e', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '4d1114f4372274819c24208a0d5839933523cae7', name: "icon" })), h("slot", { key: '5e77702dfc379e466a6178beb82257b41b040f46' })));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/dso-highlight-box.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-highlight-box.entry.js","sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n  @include highlight-box.root();\r\n\r\n  display: block;\r\n  container-type: inline-size;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a while Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop({ reflect: true })\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n    return (\r\n      <Host has-counter={hasCounter}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,uuBAAuuB,CAAC;;MCO1vB,YAAY,GAAA,MAAA;;;;IAkCvB,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AAE3E,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAc,UAAU,EAAA,EAC1B,UAAU,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,IAAE,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,mCAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}
+{"version":3,"file":"dso-highlight-box.entry.js","sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n  @include highlight-box.root();\r\n\r\n  display: block;\r\n  container-type: inline-size;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a white Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For a green Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  green?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop({ reflect: true })\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n    return (\r\n      <Host has-counter={hasCounter}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,uuBAAuuB,CAAC;;MCO1vB,YAAY,GAAA,MAAA;;;;IAwCvB,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AAE3E,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAc,UAAU,EAAA,EAC1B,UAAU,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,IAAE,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,mCAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}

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

@@ -41,7 +41,7 @@ const HistoryItem = class {
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h(Fragment, { key: '2e77d236980aed9e08e35161d001d17f1728a83b' }, h("div", { key: 'c0c0be85009c8f7d97c321a5bdbf43bda7a6f64b', class: "history-item-date" }, h("slot", { key: '099aefc48360345b5d55f6aebe5f9d29aefe59c9', name: "date" })), h("div", { key: 'c4da694c8b9659aecbd6a4594bb5f46dfa372456', class: "history-item-content" }, h("div", { key: '9fd28a25b87a15bf57442a7648834d57e6f260e6', class: "history-item-status-message" }, h("dso-icon", { key: 'cf331e4b19413148a68bafc6bc1849551bb6f435', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '8aa1952d43a8bdf28f63d81e3723e8634be9a0be', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '7128bf286bf5f92c4e061f7b06ad8a709fb88d87', class: "history-item-title" }, h("a", { key: '38635bb3ff0de20d5fdb8633bd5699112cfa753b', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '6a0efc08c7f7d4283f6417505bb727dc4bab75d4', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '505111ed0bf510619c6814b89f01a4ed96f8e2bd', class: "history-item-explanation" }, h("slot", { key: '2b27be5812d5b62e11da7b1a1d4da0c68dd1f625', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '6f6b7e404bf94a00c0835098470d00b70ba5203b', class: "history-item-warning" }, h("dso-icon", { key: '1e8c8c07ebed9ccb58f21f9b2a6c279510b19e4b', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'df67c18e8aea8dfabf5e9ca5cbd33cb0cba0d47b', name: "warning" }))))));
+        return (h(Fragment, { key: 'a2c558b685f6c6658732bb2b98bddf709ebb94b4' }, h("div", { key: 'e0d2aa64e6ecda1538a21371f8658daf611ff731', class: "history-item-date" }, h("slot", { key: '436465cae9f9e28bc1ba2d7469359be5940354a8', name: "date" })), h("div", { key: 'd7a4485394a43cc1bb8e5db9fddcb977ed5cf5a1', class: "history-item-content" }, h("div", { key: 'd73c9368ecb65fc1b8fc54393416d3e619586caf', class: "history-item-status-message" }, h("dso-icon", { key: '8debd5c78e2595fd4d4c300fbc55ab01aca3e1fc', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'd5324a4d4551c44aae17b4b66eee9c2f1f480d2d', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '7f9d7fd07a9404b5587a1f54393152d5415ceac4', class: "history-item-title" }, h("a", { key: 'b05dff01d271490082467ad9b8e10e4864568c9a', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '52a904617d6c8acb0da75324772696344e11087c', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '6accc3de05b6122d9540ff2cdf26dda7dc9066e4', class: "history-item-explanation" }, h("slot", { key: '40ca448364c8aa1c35f014a8cf2e5de79bed6769', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: 'fefcad7ef764dcf6918d1b409456820e5949c719', class: "history-item-warning" }, h("dso-icon", { key: '96c357399ec8b5aa49e8f5e6254e4c60563972b0', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'b8848b26ab839a4eb00e8239447eaa879672066f', name: "warning" }))))));
     }
     get host() { return getElement(this); }
 };

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

@@ -706,7 +706,7 @@ const Icon = class {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: 'd5680e2f282290bae1f770e157c8495e874d1274', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: '5f01bf5d366f95e1f47af95c3bd8eda1c103b353', class: "icon-container", innerHTML: icon.svg });
         }
     }
 };
@@ -752,6 +752,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;
@@ -977,6 +978,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 {
@@ -1181,8 +1188,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 {
@@ -1276,7 +1286,7 @@ const IconButton = class {
         this.cleanUp = undefined;
     }
     render() {
-        return (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 }, h("dso-icon", { key: '3ce28c59e0f6c2a137c9f65958765e5ac3d4f239', icon: this.icon }), h(Tooltip, { key: 'ed39dd1770074c20e3103067ddc1d32db8d0d2d1', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
+        return (h("button", { key: 'cfa3c7d98955a1965d46abe68e9faea867c55679', 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 }, h("dso-icon", { key: 'f6978374915ba3e9d27c19582114ab2a36838115', icon: this.icon }), h(Tooltip, { key: '21e7bd67dd9800cd4d596b41aabf9c338c100e17', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
     }
 };
 IconButton.style = iconButtonCss();

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

@@ -25,7 +25,7 @@ const InfoButton = class {
         this.dsoToggle.emit({ originalEvent, active: this.active });
     }
     render() {
-        return (h(Host, { key: '5fc1ae354bfc278bedbca0f2aaaff7a15deb5449', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.hover ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
+        return (h(Host, { key: '081ec92479c56bc53665fc9fb909838cff959c9e', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.hover ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
         // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working
         h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.hover ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label)))));
     }

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

@@ -8,7 +8,7 @@ const Info = class {
         this.dsoClose = createEvent(this, "dsoClose", 7);
     }
     render() {
-        return (h(Fragment, { key: '6ea8fd02c7e0df97ecf3c57a895334f312c513c3' }, h("slot", { key: '1721e91318a52c8c4208b2acac069c723c748ec5' }), !this.fixed && (h("dso-icon-button", { key: 'fac469f4c2ee028d3f45b83353f038f7cb95fe58', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '3e0e4c7174c343e0ffe3395a3fb0e4b54c7e6dd1' }, h("slot", { key: 'd50d49ce8f6bc9c185e4d8e16a28d1d31d0de520' }), !this.fixed && (h("dso-icon-button", { key: '82c25d9bb8b6d203837f23113c8f0bd676ae4064', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
 };
 Info.style = infoCss();
@@ -75,7 +75,7 @@ const Selectable = class {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: 'a406bc01d2ece87d87bafc3e83b1011b0eec2853' }, h("div", { key: '9e6b486edc6c7e6ad8db1d1d504d502c9adb2267', class: "dso-selectable-container" }, h("div", { key: 'c654ecf00751275acf93eb53d82d1c02918957ef', class: "dso-selectable-input-wrapper" }, 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 ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '53993c8ad0b15394901fdb6d67bc83aa89385844', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'ce3e9bc660c7a5beb36eef42ea1e6089abc9bf96', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'b3bf8765cb0d2e616475dfdf0a25998e3d9a637e' }, h("slot", { key: '93121b79a8018d9661e9518855147e79d3d917fc', name: "info" })))), h("slot", { key: '537024a58257ceecb7abba3b0eb69eac7ef5cc1b', name: "options" })));
+        return (h(Fragment, { key: '5f11873e66e481aa5bab33f6306445e2f35545c2' }, h("div", { key: '2b0176b66b0dce43d57a8b41beac0d62f51ca97c', class: "dso-selectable-container" }, h("div", { key: '5fcae509cca4d34d2e0e230a2979bc350d27cc02', class: "dso-selectable-input-wrapper" }, h("input", { key: '5aa5ebb20b52467ce6107cf8aa840edb0ad14055', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: 'ad7d2150640df363f14eefa8a9f843a2962b58e6', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'ebf5eeafc5d6077cf8403c76cff4aca7336fedf5', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '729d228a00b1c36e3eb1e9cb6d088b081a8847b9' }, h("slot", { key: '082ba9b15cf8ea5129aacad5c1de40fc896ffbad', name: "info" })))), h("slot", { key: 'c217d7cab8dcc8f34ae0bcc841fdb8d37cde05d6', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, d as createEvent, h, F as Fragment, g as getElement } from './index-Dx5skKSq.js';
 
-const inputRangeCss = () => `:host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-runnable-track{border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-webkit-slider-thumb{border-radius:50%}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-track{border:1px solid #666;border-radius:0.5rem}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c}.input::-moz-range-thumb:hover{background-color:#275937}.input::-moz-range-thumb{border-color:transparent;border-radius:50%}`;
+const inputRangeCss = () => `:host{display:flex;align-items:center;gap:0.625rem;padding-block:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:20px}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-radius:50%;border-color:transparent}.input::-moz-range-thumb:hover{background-color:#275937}`;
 
 const InputRange = class {
     constructor(hostRef) {
@@ -15,13 +15,13 @@ const InputRange = class {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: 'f3796a5bbd719af7fe23c285ba4f1519eaaaf1b9', id: "description", hidden: true }, this.description)), h("span", { key: '91eeb869d8529a793ab25c766cb38b75dd388ba7', class: "counter min", "aria-hidden": "true" }, min, this.unit), 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 (h(Fragment, null, this.description && (h("span", { key: '7bf4d5d30b928c993bae1f5d25325e73f4b2f760', id: "description", hidden: true }, this.description)), h("span", { key: '3806477e5f52f5f95a62d766cd2bb5e9ef60668c', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'bfb6213eb4dc7ed7c52f2645952fbeb53a611d8e', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '04774c80c6ac969cf1338d3b4ea39dabf531539b', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: 'bdd86302b7c2ef717a40f2103faff3dbadd691df', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-input-range.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-input-range.entry.js","sources":["src/components/input-range/input-range.scss?tag=dso-input-range&encapsulation=shadow","src/components/input-range/input-range.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n\r\n  padding: 0.5rem;\r\n\r\n  inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.counter {\r\n  flex-shrink: 0;\r\n\r\n  min-inline-size: 5ch;\r\n\r\n  &.min {\r\n    text-align: end;\r\n  }\r\n\r\n  &.max {\r\n    text-align: start;\r\n  }\r\n}\r\n\r\n.input {\r\n  flex-grow: 1;\r\n\r\n  appearance: none;\r\n\r\n  background-color: transparent;\r\n\r\n  cursor: pointer;\r\n\r\n  &::-webkit-slider-runnable-track {\r\n    block-size: 0.5rem;\r\n\r\n    background-color: colors.$grijs-10;\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n  }\r\n\r\n  &::-webkit-slider-thumb {\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n\r\n    appearance: none;\r\n\r\n    margin-block-start: -0.55rem;\r\n\r\n    background-color: colors.$grasgroen;\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n\r\n    border-radius: 50%;\r\n  }\r\n\r\n  &::-moz-range-track {\r\n    box-sizing: border-box;\r\n\r\n    block-size: 0.5rem;\r\n\r\n    background-color: colors.$grijs-10;\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n  }\r\n\r\n  &::-moz-range-thumb {\r\n    box-sizing: border-box;\r\n\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n\r\n    appearance: none;\r\n\r\n    margin-block-start: -0.5rem;\r\n\r\n    background-color: colors.$grasgroen;\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n\r\n    border-color: transparent;\r\n    border-radius: 50%;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { InputRangeChangeEvent } from \"./input-range.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-input-range\",\r\n  styleUrl: \"input-range.scss\",\r\n  shadow: true,\r\n})\r\nexport class InputRange implements ComponentInterface {\r\n  /**\r\n   * The minimum value of the range.\r\n   */\r\n  @Prop()\r\n  min?: number;\r\n\r\n  /**\r\n   * The maximum value of the range.\r\n   */\r\n  @Prop()\r\n  max?: number;\r\n\r\n  /**\r\n   * The value of the range.\r\n   */\r\n  @Prop()\r\n  value?: number;\r\n\r\n  /**\r\n   * The step to increment the value by.\r\n   */\r\n  @Prop()\r\n  step?: number;\r\n\r\n  /**\r\n   * The label of the range.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The unit of the range.\r\n   */\r\n  @Prop()\r\n  unit: string = \"\";\r\n\r\n  /**\r\n   * The description of the range.\r\n   */\r\n  @Prop()\r\n  description?: string;\r\n\r\n  /**\r\n   * Emitted when the value has changed.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<InputRangeChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoInputRangeElement;\r\n\r\n  render() {\r\n    const min = this.min || 0;\r\n    const max = this.max || 100;\r\n    const step = this.step || 1;\r\n\r\n    return (\r\n      <>\r\n        {this.description && (\r\n          <span id=\"description\" hidden>\r\n            {this.description}\r\n          </span>\r\n        )}\r\n        <span class=\"counter min\" aria-hidden=\"true\">\r\n          {min}\r\n          {this.unit}\r\n        </span>\r\n        <input\r\n          type=\"range\"\r\n          min={this.min}\r\n          max={this.max}\r\n          value={this.value}\r\n          class=\"input\"\r\n          aria-label={this.label}\r\n          aria-describedby={this.description ? \"description\" : undefined}\r\n          onChange={(event) =>\r\n            this.dsoChange.emit({\r\n              originalEvent: event,\r\n              value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,\r\n              max,\r\n              min,\r\n              step,\r\n            })\r\n          }\r\n        />\r\n        <span class=\"counter max\" aria-hidden=\"true\">\r\n          {max}\r\n          {this.unit}\r\n        </span>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,6uCAA6uC,CAAC;;MCS9vC,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAoCE;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AA0DlB;IAzCC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;AACzB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG;AAC3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;AAE3B,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAI,CAAC,WAAW,KACf,6DAAM,EAAE,EAAC,aAAa,EAAC,MAAM,EAC1B,IAAA,EAAA,EAAA,IAAI,CAAC,WAAW,CACZ,CACR,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,aAAA,EAAa,MAAM,EAAA,EACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,EACP,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,OAAO,EACD,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,kBAAA,EACJ,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC9D,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,gBAAA,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,SAAS;gBAC9F,GAAG;gBACH,GAAG;gBACH,IAAI;AACL,aAAA,CAAC,EAEJ,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,aAAA,EAAa,MAAM,EAAA,EACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,CACN;;;;;;;;"}
+{"version":3,"file":"dso-input-range.entry.js","sources":["src/components/input-range/input-range.scss?tag=dso-input-range&encapsulation=shadow","src/components/input-range/input-range.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.625rem;\r\n  padding-block: 0.5rem;\r\n  inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.counter {\r\n  flex-shrink: 0;\r\n  min-inline-size: 20px;\r\n}\r\n\r\n.input {\r\n  flex-grow: 1;\r\n  appearance: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n\r\n  &::-webkit-slider-runnable-track {\r\n    block-size: 0.5rem;\r\n    background-color: colors.$grijs-10;\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n  }\r\n\r\n  &::-webkit-slider-thumb {\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n    appearance: none;\r\n    margin-block-start: -0.55rem;\r\n    background-color: colors.$grasgroen;\r\n    border-radius: 50%;\r\n\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n  }\r\n\r\n  &::-moz-range-track {\r\n    box-sizing: border-box;\r\n    block-size: 0.5rem;\r\n    background-color: colors.$grijs-10;\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n  }\r\n\r\n  &::-moz-range-thumb {\r\n    box-sizing: border-box;\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n    appearance: none;\r\n    margin-block-start: -0.5rem;\r\n    background-color: colors.$grasgroen;\r\n    border-radius: 50%;\r\n    border-color: transparent;\r\n\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { InputRangeChangeEvent } from \"./input-range.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-input-range\",\r\n  styleUrl: \"input-range.scss\",\r\n  shadow: true,\r\n})\r\nexport class InputRange implements ComponentInterface {\r\n  /**\r\n   * The minimum value of the range.\r\n   */\r\n  @Prop()\r\n  min?: number;\r\n\r\n  /**\r\n   * The maximum value of the range.\r\n   */\r\n  @Prop()\r\n  max?: number;\r\n\r\n  /**\r\n   * The value of the range.\r\n   */\r\n  @Prop()\r\n  value?: number;\r\n\r\n  /**\r\n   * The step to increment the value by.\r\n   */\r\n  @Prop()\r\n  step?: number;\r\n\r\n  /**\r\n   * The label of the range.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The unit of the range.\r\n   */\r\n  @Prop()\r\n  unit: string = \"\";\r\n\r\n  /**\r\n   * The description of the range.\r\n   */\r\n  @Prop()\r\n  description?: string;\r\n\r\n  /**\r\n   * Emitted when the value has changed.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<InputRangeChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoInputRangeElement;\r\n\r\n  render() {\r\n    const min = this.min || 0;\r\n    const max = this.max || 100;\r\n    const step = this.step || 1;\r\n\r\n    return (\r\n      <>\r\n        {this.description && (\r\n          <span id=\"description\" hidden>\r\n            {this.description}\r\n          </span>\r\n        )}\r\n        <span class=\"counter\" aria-hidden=\"true\">\r\n          {min}\r\n          {this.unit}\r\n        </span>\r\n        <input\r\n          type=\"range\"\r\n          min={this.min}\r\n          max={this.max}\r\n          value={this.value}\r\n          class=\"input\"\r\n          aria-label={this.label}\r\n          aria-describedby={this.description ? \"description\" : undefined}\r\n          onChange={(event) =>\r\n            this.dsoChange.emit({\r\n              originalEvent: event,\r\n              value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,\r\n              max,\r\n              min,\r\n              step,\r\n            })\r\n          }\r\n        />\r\n        <span class=\"counter\" aria-hidden=\"true\">\r\n          {max}\r\n          {this.unit}\r\n        </span>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,ukCAAukC,CAAC;;MCSxlC,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAoCE;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AA0DlB;IAzCC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;AACzB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG;AAC3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;AAE3B,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAI,CAAC,WAAW,KACf,6DAAM,EAAE,EAAC,aAAa,EAAC,MAAM,EAC1B,IAAA,EAAA,EAAA,IAAI,CAAC,WAAW,CACZ,CACR,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,aAAA,EAAa,MAAM,EAAA,EACrC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,EACP,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,OAAO,EACD,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,kBAAA,EACJ,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC9D,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,gBAAA,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,SAAS;gBAC9F,GAAG;gBACH,GAAG;gBACH,IAAI;AACL,aAAA,CAAC,EAEJ,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,aAAA,EAAa,MAAM,EAAA,EACrC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,CACN;;;;;;;;"}

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

@@ -100,13 +100,13 @@ const Label = class {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: 'f868c06841bb1f9a6f39db8598141634cbe59f5f' }, h("span", { key: '935d20891b9df19b37cf38242892428c81c12631', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: '7441c0e54f721845869c63348d2e5dff35f24434' }, h("span", { key: '8cea7acfa1e735eb8a6cdd66d2d447976c84c950', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: 'e3d5f4d753cf5ca6ef1bef6fae698b3b4c03e5da', name: "symbol" }), h("span", { key: '242c774421051469948ff841d7b55bf06e9481fd', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: '77b62b31482300784b58fb372e28e246773a183f', name: "symbol" }), h("span", { key: 'f40f50f36c78fec1bcc15c1244defcaac94d5a11', class: 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) }, h("slot", { key: '93ae4502166a8c246371249f6b25423ab066e5b7' })), this.removable && (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 && (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) }, h("slot", { key: '839f0bdcf8271806e9dfdb9c01ba6dd9ba4b9413' })), this.removable && (h("dso-icon-button", { key: 'df12c751642d42f36d54feeaaf8a53755a5b3b4c', 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 && (h("dso-tooltip", { key: 'e38e943fcdf3f05161c24861a31581ff4ca0b2ab', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -197,7 +197,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, { key: '0f34c376fadba8a62707d91e84f25677fc5690a3' }, 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 } : {})), h("svg", { key: '40073a0bd05c1009811be9e892ee4a323a2d9439', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '9b8ee2e81cd7390998c6e5700a6f7bcb662b876f', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '5399256e45dc823a7722831e64c7dd5ec0d152f9', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '2ea153fc376c0889c3c74f8f4440ed1d9dc69659', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '4bd14e28d33e7af47c386acd8f6e85ad54b6ce84', htmlFor: this.identifier }, h("slot", { key: 'af963203c5fe7fae6f38d518e11be6e69f75b421' })))));
+        return (h(Fragment, { key: '5d9cd03cfa9b00948acd598f149ba1f0ce114cc6' }, h("button", Object.assign({ key: '1e25ca1b3da0d4292c0fe1219924658e7baaff87', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '6dd2f4d1634d50e4cf393387ccadaac6d5a4f55b', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'b780f9b330d44fdd41d31a9563ab49fc94424d54', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '326b18d7ab0e104aed97d8c92d221812c174cde9', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '4cbdc7cd543f4b5497f943392cd210fcc3c4fa5b', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '21fe8e599aa5d1e266d2fc606b55607e2570d962', htmlFor: this.identifier }, h("slot", { key: '4a89a597d67ff4610e42f0d4b2c96cea056e65a4' })))));
     }
     get host() { return getElement(this); }
 };

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

@@ -38,7 +38,7 @@ const LegendItem = class {
         if (label === null || label === void 0 ? void 0 : label.textContent) {
             accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;
         }
-        return (h(Host, { key: '24af81db658898c1bc2317422cbb6ab38196083d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '174173193d7302d22d265e02a4147c6877241d0f', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '568089b5a568b92d12665a7c0eb78d3315c2c947' }, h("slot", { key: '325f14f024dca0edf52c2684097be1ca5eb6f014', name: "symbol" }))), h("div", { key: 'e72d3ac238b30577082a0edc4ab68de1d3b16f15' }, h("slot", { key: 'a1b4d6b740bd8a5ee32adcc5e40268bfd472c680', name: "label" })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '9bc17eafc23c61d8b53005d02fa4aacad6ca2d8d', position: "bottom" }, this.disabledMessage)), h("div", { key: '9208ae5adae3f59e0ab0a20c0a32b65cc3fbc40f', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (h("dso-icon-button", { key: '6489bc065e692b8dce8edb7a56d1d5672f8d21cd', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: 'bb79e502289dd11de8db82d78e00bade9b0a451c', accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'a3c74cdd73815b7519c9126d278da02c0281dfb6', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: 'b932318fd0ccb55f02e60e5e49e339453b61d955', name: "options" })))));
+        return (h(Host, { key: '78c1588776ea46722066f98c3cd5e42fee691658', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '98d16208d8bb78e5b446fea828cee7984e221840', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '470282bf59dee595953ab23d504bac55561a05e9' }, h("slot", { key: '18704fee63e5155a903faf696943438d4d5a16f3', name: "symbol" }))), h("div", { key: '66ed8e3809ec17de8e4336d994bfbc5b2ce03c6e' }, h("slot", { key: '9253e5bf4f42f4aaa65b0b5fb46ee81680ec577a', name: "label" })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: 'c85fbeb0ed74f3e19d1d63cd6ee4d2c8aa77c87e', position: "bottom" }, this.disabledMessage)), h("div", { key: '0a990a9375a973f43e3613144d33afe3b304b046', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (h("dso-icon-button", { key: 'acfb6d31e56c1227cc26d61becfc0247d84cdebe', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '51f63c178766a4cc1dd6aa3065a50392ce051f83', accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: '6a2f222442d5209c44a637609ca55eba58531d1f', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: 'f07fa29b0c6378e627cd314102cf36ac70291653', name: "options" })))));
     }
     get host() { return getElement(this); }
 };

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

@@ -68,7 +68,7 @@ const Legend = class {
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: '4f1295cd75af42eeaf438cc7b92604054993bdeb' }, h("div", { key: 'f1473d16ec2b6b5035c9aa88dbad40a4233a1529', class: "topbar" }, h("div", { key: 'f33777d4ab012cecb17105abb8299426995c86d2', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", Object.assign({ class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), h("dso-icon-button", { key: '8fc17eeefc63ca51e296212eeeadbfc8ab731d18', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), h("dso-scrollable", { key: '553566be6236dde866e739364e7a19aa918d32a8', class: "content" }, h("div", { key: '9348aad31e38e42f208301773d58fa784d71c751', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '55fd88c643f65474bb691e4100e493c28b22a358' })))));
+        return (h(Host, { key: '1e38de893c8ff076a6ad83c26cf407a5cdf17073' }, h("div", { key: '4fe41e44062895138f58963a7ff10ddab4adbd43', class: "topbar" }, h("div", { key: '18c9d483a25d7145de4b3dd3170f05b3ae974715', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", Object.assign({ class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), h("dso-icon-button", { key: '512f7f454bc0468da2cebd48fdce4fd0ce116731', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), h("dso-scrollable", { key: 'c761e3abfd57fc98147f4434139d0eba7ef82582', class: "content" }, h("div", { key: '0f929de386c1b639bb992ed80151acea164bbc0d', role: "tabpanel", tabIndex: 0 }, h("slot", { key: 'c99a9f942498246e90b5a528783856d5eccdb116' })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-list-button.entry.js

@@ -354,7 +354,7 @@ const ListButton = class {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'a155334345712bda3dd58924d60ccd467923f6fc', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '1ac7dbc69f1e7b00fa8cd71b03ae0bbc7c3f98ee', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '5f1430413821bc31c793b2ccaed2a00509a3cfc6', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '97302b35983f8659e51b7993619c5d007b9eadc5', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '8324e5ebf88187d5042e4074a7b5a12cd8eb1fb5', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '6e0fe1caffbfdfa878b904f558b695def1c18f6f', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '9bfec93907458641755c109304a453ebf728b4ad', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'e3feb6e6f3aa1f42efa2e632180459b61a22a7a0', class: "subcontent" }, h("slot", { key: '2971bc8037dabb734ecaf3faf1c338a3537fcac6', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '46543874c528b6db91fed7dd19249dc7547bb86b', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'cf2305047c3bf6f8384829c694ef57642bdd9bbf' }, h("dso-icon-button", { key: '6170297a6ce2a60762ba4bf96e59f49097e80d38', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'e5c419497219f628e34bfdb997fe3b357a9331bd', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '225eed4514828a7f1afa06f2c6de8af19ada8b8d', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: '93ea558f2766c2aa185b8b204e480aea0f3e597b', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'fe50410a42fc9c949f483acaed5d2d579088ba65', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: 'a9f0a70891b445c61edfc4fed6a97bbdd5384b54', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: 'cad789afe5296230d3ec8efebfc8e4810f674819', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '6e27d9a2ba1688ef799109e54f3af23e71aafb25', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'a8282c51989d9c075e1cdacbce12ed3cd06a66e4', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: '3e61110adb2ebfa8aceeca0ffdc39a37b9a725fe', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '4da19e8864ae1f759ad923e3de185ffc6f25e916', class: "subcontent" }, h("slot", { key: 'ea645bd579dbd69e0f7f0a88a857a96fcb68b5c9', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'e729bcde79f91f3f2b6e1cd3dfd8b5ae0fdfbd4d', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '9e8f8b48a771b8fb9e5da71a6453c7317850fbd1' }, h("dso-icon-button", { key: '1db9cca2ccbf6cf62989f51b2870ccde61b51b61', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '994e601af4668a677db361f2e8eb8e84e8553036', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: 'd72fa5ee6e3fd75fc266a94d1a4a26b3e3805cab', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-logo.entry.js

@@ -167,7 +167,7 @@ const Logo = class {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: 'e3dc493316f373195f1f8cf1c5e190282486796e', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: 'fe0303b5cd53f11ff30171515fe78a221bbd9d8f', class: "logo-ribbon" }, this.ribbon)));
     }
 };
 Logo.style = logoCss();

package/dist/esm/dso-map-base-layers.entry.js

@@ -44,7 +44,7 @@ const MapBaseLayers = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'b4e11afffa1cfeda374e2298e0a127c51733fb9d', class: "form-group dso-radios" }, h("legend", { key: '5d5d9deaa63fd457eca1503f460925ca4e51ba25', class: "sr-only" }, "Achtergrond"), h("div", { key: 'd804f723a44d4085a7e983d2587da5bde72b4fec', class: "dso-label-container" }, h("span", { key: 'da3e550984bbe1b3a055d09100cf3d37cab9fe25', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '419aebdce0570fba7d194c285858c2ced4e416ed', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: 'f42b4397a73e8b35829c5182ddd79ade3dcd499a', class: "form-group dso-radios" }, h("legend", { key: 'b3cdc3e7947dacb4328ed561a3b07f7c806fd494', class: "sr-only" }, "Achtergrond"), h("div", { key: 'a59771dceed9a61d3177bd1dda41b0532b22a153', class: "dso-label-container" }, h("span", { key: '938d6bca8571175a6a1af729ae1b058b743d4b71', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '0ecb78a9ecf1d28ca2649849427ee996e9924938', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     get host() { return getElement(this); }
 };