@dso-toolkit/core 87.0.0 → 88.1.0

package/dist/bundle/dso-icon.js

@@ -1,4 +1,4 @@
-import { I as Icon, d as defineCustomElement$1 } from './p-BRSHyfZz.js';
+import { I as Icon, d as defineCustomElement$1 } from './p-Btk7RWKm.js';
 
 const DsoIcon = Icon;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-image-overlay.js

@@ -1,4 +1,4 @@
-import { I as ImageOverlay, d as defineCustomElement$1 } from './p-CUKsRYtG.js';
+import { I as ImageOverlay, d as defineCustomElement$1 } from './p-Yu8u8KO1.js';
 
 const DsoImageOverlay = ImageOverlay;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-info-button.js

@@ -1,4 +1,4 @@
-import { I as InfoButton, d as defineCustomElement$1 } from './p-CY_jRhM0.js';
+import { I as InfoButton, d as defineCustomElement$1 } from './p-CVTNNCuw.js';
 
 const DsoInfoButton = InfoButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-info.js

@@ -1,4 +1,4 @@
-import { I as Info, d as defineCustomElement$1 } from './p-CJHh7I1P.js';
+import { I as Info, d as defineCustomElement$1 } from './p-VxbAefvg.js';
 
 const DsoInfo = Info;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-input-range.js

@@ -19,13 +19,13 @@ const InputRange = /*@__PURE__*/ proxyCustomElement(class InputRange extends H {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        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({
+        return (h(Fragment, null, this.description && (h("span", { key: 'f3796a5bbd719af7fe23c285ba4f1519eaaaf1b9', id: "description", hidden: true }, this.description)), h("span", { key: '1048b041a13dbf244b2d6fe76dccf8f97a2d7b4b', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '438056be852e2b4136de65cec13faa6a6c43418b', 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: 'bdd86302b7c2ef717a40f2103faff3dbadd691df', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '8b3f86e7c42f0dffdc2b550f365c4bdc91627ffc', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return this; }
     static get style() { return inputRangeCss(); }

package/dist/bundle/dso-label.js

@@ -1,4 +1,4 @@
-import { L as Label, d as defineCustomElement$1 } from './p-CI06uY23.js';
+import { L as Label, d as defineCustomElement$1 } from './p-BJqFBnN6.js';
 
 const DsoLabel = Label;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-legend-item.js

@@ -1,13 +1,14 @@
 import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$7 } from './p-BRSHyfZz.js';
-import { d as defineCustomElement$6 } from './p-DeccEoRQ.js';
-import { d as defineCustomElement$5 } from './p-CY_jRhM0.js';
-import { d as defineCustomElement$4 } from './p-DvY09j0_.js';
-import { d as defineCustomElement$3 } from './p-D-umefg-.js';
-import { d as defineCustomElement$2 } from './p-D8SsDcpI.js';
+import { d as defineCustomElement$8 } from './p-Btk7RWKm.js';
+import { d as defineCustomElement$7 } from './p-DpRZJt_D.js';
+import { d as defineCustomElement$6 } from './p-CVTNNCuw.js';
+import { d as defineCustomElement$5 } from './p-ecEmdirb.js';
+import { d as defineCustomElement$4 } from './p-kBBh-4zI.js';
+import { d as defineCustomElement$3 } from './p-zCo78EB0.js';
+import { d as defineCustomElement$2 } from './p-CBhOl8xD.js';
 
-const legendItemCss = () => `:host{display:block;padding-block:4px}*,*::after,*::before{box-sizing:border-box}::slotted(span[slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:26px;margin-block-start:0;margin-inline-end:8px;inline-size:30px;overflow:hidden;position:relative}::slotted(h3){margin:0 !important}::slotted([slot=options]){margin-block-start:8px}.legend-item{display:flex;position:relative}.legend-item.legend-item-symbol+.options{margin-block-start:8px}.legend-item dso-icon-button.active{--_dso-icon-button-tertiary-color:#173521}.legend-item-right-content{margin-inline-start:auto;display:flex;justify-content:center;align-content:center;align-items:center}.legend-item-right-content dso-slide-toggle{display:flex;align-self:center;line-height:1;margin-inline-start:8px;padding-block-start:0 !important}`;
+const legendItemCss = () => `:host{display:block;padding-block:4px}*,*::after,*::before{box-sizing:border-box}::slotted(span[slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:26px;margin-block-start:0;margin-inline-end:8px;inline-size:30px;overflow:hidden;position:relative}::slotted(h3){margin:0 !important}::slotted([slot=options]){margin-block-start:8px}.legend-item{display:flex;position:relative}.legend-item.legend-item-symbol+.options{margin-block-start:8px}.legend-item dso-icon-button.active{--_dso-icon-button-tertiary-color:#173521}.legend-item-right-content{margin-inline-start:auto;display:flex}.legend-item-right-content dso-slide-toggle{line-height:1;margin-inline-start:8px;padding-block-start:0 !important}`;
 
 const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends H {
     constructor(registerHost) {
@@ -48,7 +49,7 @@ const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends H {
         if (label === null || label === void 0 ? void 0 : label.textContent) {
             accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;
         }
-        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" })))));
+        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" })))));
     }
     get host() { return this; }
     static get style() { return legendItemCss(); }
@@ -63,7 +64,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-legend-item", "dso-icon", "dso-icon-button", "dso-info-button", "dso-slide-toggle", "dso-toggletip", "dso-tooltip"];
+    const components = ["dso-legend-item", "dso-icon", "dso-icon-button", "dso-info-button", "dso-scrollable", "dso-slide-toggle", "dso-toggletip", "dso-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-legend-item":
             if (!customElements.get(transformTag(tagName))) {
@@ -72,15 +73,20 @@ function defineCustomElement$1() {
             break;
         case "dso-icon":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "dso-icon-button":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "dso-info-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "dso-scrollable":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$5();
             }

package/dist/bundle/dso-legend-item.js.map

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

package/dist/bundle/dso-legend.js

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
 import { c as clsx } from './p-ChV9xqsO.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$4 } from './p-BRSHyfZz.js';
-import { d as defineCustomElement$3 } from './p-DeccEoRQ.js';
-import { d as defineCustomElement$2 } from './p-EGp7CTVS.js';
+import { d as defineCustomElement$4 } from './p-Btk7RWKm.js';
+import { d as defineCustomElement$3 } from './p-DpRZJt_D.js';
+import { d as defineCustomElement$2 } from './p-ecEmdirb.js';
 
-const legendCss = () => `*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3)}:host .topbar{padding-block:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dso-scrollable-container-padding-inline:16px;max-block-size:52vh}`;
+const legendCss = () => `*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3);border-radius:4px}:host .topbar{padding-block-start:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dt-scrollable-container-border-end-start-radius:4px;--_dt-scrollable-container-border-end-end-radius:4px;--_dt-scrollable-container-padding-inline:16px;max-block-size:52vh;border-end-start-radius:4px;border-end-end-radius:4px}`;
 
 const Legend = /*@__PURE__*/ proxyCustomElement(class Legend extends H {
     constructor(registerHost) {
@@ -75,7 +75,7 @@ const Legend = /*@__PURE__*/ proxyCustomElement(class Legend extends H {
         this.moveFocusToTab(next);
     }
     render() {
-        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' })))));
+        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' })))));
     }
     get host() { return this; }
     static get style() { return legendCss(); }

package/dist/bundle/dso-legend.js.map

@@ -1 +1 @@
-{"file":"dso-legend.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/legend/legend.scss?tag=dso-legend&encapsulation=shadow","src/components/legend/legend.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  position: relative;\r\n  display: block;\r\n  inline-size: 344px;\r\n  background-color: colors.$wit;\r\n  box-shadow: 0 0 units.$u1 0 rgba(0, 0, 0, 0.3);\r\n\r\n  .topbar {\r\n    padding-block: units.$u1;\r\n    padding-inline: units.$u2;\r\n\r\n    .tabs {\r\n      inline-size: 100%;\r\n      padding: 0;\r\n      list-style: none;\r\n      display: inline-flex;\r\n      border-block-end: 1px solid colors.$grijs-20;\r\n\r\n      .tab {\r\n        font-size: inherit;\r\n        font-family: inherit;\r\n        line-height: inherit;\r\n        background-color: transparent;\r\n        cursor: pointer;\r\n        display: block;\r\n        border: 0;\r\n        color: colors.$bosgroen;\r\n        padding-block: 6px;\r\n        padding-inline: units.$u1;\r\n        border-block-end: units.$u1 * 0.5 solid transparent;\r\n\r\n        &:hover {\r\n          text-decoration: underline;\r\n        }\r\n\r\n        &.active {\r\n          font-weight: bold;\r\n          border-color: colors.$mauve;\r\n        }\r\n      }\r\n    }\r\n\r\n    .close-button {\r\n      position: absolute;\r\n      inset-block-start: units.$u1;\r\n      inset-inline-end: units.$u1;\r\n    }\r\n  }\r\n\r\n  .content {\r\n    --_dso-form-group-margin-block-end: 0;\r\n    --_dso-scrollable-container-padding-inline: #{units.$u2};\r\n\r\n    max-block-size: 52vh;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { LegendCloseEvent, LegendContentSwitchEvent, LegendTabItem } from \"./legend.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-legend\",\r\n  styleUrl: \"legend.scss\",\r\n  shadow: true,\r\n})\r\nexport class Legend implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendElement;\r\n\r\n  /**\r\n   * TabItems in the legend topbar\r\n   */\r\n  @Prop()\r\n  tabItems: LegendTabItem[] = [];\r\n\r\n  /**\r\n   * Emitted when a tabItem is pressed.\r\n   */\r\n  @Event()\r\n  dsoContentSwitch!: EventEmitter<LegendContentSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted when the user closes the Legend.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<LegendCloseEvent>;\r\n\r\n  private get tabs() {\r\n    return Array.from(this.host.shadowRoot!.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]'));\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.tabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.tabs[this.tabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLButtonElement | undefined) {\r\n    tab?.focus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.tabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.tabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.tabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.tabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  // A button handles an \"enter\" and a \"space\" keypress as a normal click.\"\r\n  private clickHandler = (e: MouseEvent) => {\r\n    const index = this.tabs.findIndex((tab) => tab === e.currentTarget);\r\n    const tabItem = this.tabItems[index];\r\n\r\n    if (!tabItem || tabItem.active) {\r\n      return;\r\n    }\r\n\r\n    this.dsoContentSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"topbar\">\r\n          <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n            {this.tabItems.map((tabItem) => (\r\n              <button\r\n                class={clsx(\"tab\", { active: tabItem.active })}\r\n                role=\"tab\"\r\n                aria-selected={tabItem.active ? \"true\" : \"false\"}\r\n                {...(!tabItem.active ? { tabIndex: -1 } : {})}\r\n                onClick={this.clickHandler}\r\n              >\r\n                {tabItem.label}\r\n              </button>\r\n            ))}\r\n          </div>\r\n\r\n          <dso-icon-button\r\n            icon=\"times\"\r\n            variant=\"tertiary\"\r\n            label=\"Sluit legenda\"\r\n            class=\"close-button\"\r\n            onClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n          />\r\n        </div>\r\n\r\n        <dso-scrollable class=\"content\">\r\n          <div role=\"tabpanel\" tabIndex={0}>\r\n            <slot />\r\n          </div>\r\n        </dso-scrollable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-legend.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/legend/legend.scss?tag=dso-legend&encapsulation=shadow","src/components/legend/legend.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"legend.variables\" as legend-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  position: relative;\r\n  display: block;\r\n  inline-size: 344px;\r\n  background-color: colors.$wit;\r\n  box-shadow: 0 0 units.$u1 0 rgba(0, 0, 0, 0.3);\r\n  border-radius: legend-variables.$border-radius;\r\n\r\n  .topbar {\r\n    padding-block-start: units.$u1;\r\n    padding-inline: units.$u2;\r\n\r\n    .tabs {\r\n      inline-size: 100%;\r\n      padding: 0;\r\n      list-style: none;\r\n      display: inline-flex;\r\n      border-block-end: 1px solid colors.$grijs-20;\r\n\r\n      .tab {\r\n        font-size: inherit;\r\n        font-family: inherit;\r\n        line-height: inherit;\r\n        background-color: transparent;\r\n        cursor: pointer;\r\n        display: block;\r\n        border: 0;\r\n        color: colors.$bosgroen;\r\n        padding-block: 6px;\r\n        padding-inline: units.$u1;\r\n        border-block-end: units.$u1 * 0.5 solid transparent;\r\n\r\n        &:hover {\r\n          text-decoration: underline;\r\n        }\r\n\r\n        &.active {\r\n          font-weight: bold;\r\n          border-color: colors.$mauve;\r\n        }\r\n      }\r\n    }\r\n\r\n    .close-button {\r\n      position: absolute;\r\n      inset-block-start: units.$u1;\r\n      inset-inline-end: units.$u1;\r\n    }\r\n  }\r\n\r\n  .content {\r\n    --_dso-form-group-margin-block-end: 0;\r\n    --_dt-scrollable-container-border-end-start-radius: #{legend-variables.$border-radius};\r\n    --_dt-scrollable-container-border-end-end-radius: #{legend-variables.$border-radius};\r\n    --_dt-scrollable-container-padding-inline: #{units.$u2};\r\n\r\n    max-block-size: 52vh;\r\n    border-end-start-radius: legend-variables.$border-radius;\r\n    border-end-end-radius: legend-variables.$border-radius;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { LegendCloseEvent, LegendContentSwitchEvent, LegendTabItem } from \"./legend.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-legend\",\r\n  styleUrl: \"legend.scss\",\r\n  shadow: true,\r\n})\r\nexport class Legend implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendElement;\r\n\r\n  /**\r\n   * TabItems in the legend topbar\r\n   */\r\n  @Prop()\r\n  tabItems: LegendTabItem[] = [];\r\n\r\n  /**\r\n   * Emitted when a tabItem is pressed.\r\n   */\r\n  @Event()\r\n  dsoContentSwitch!: EventEmitter<LegendContentSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted when the user closes the Legend.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<LegendCloseEvent>;\r\n\r\n  private get tabs() {\r\n    return Array.from(this.host.shadowRoot!.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]'));\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.tabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.tabs[this.tabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLButtonElement | undefined) {\r\n    tab?.focus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.tabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.tabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.tabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.tabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  // A button handles an \"enter\" and a \"space\" keypress as a normal click.\"\r\n  private clickHandler = (e: MouseEvent) => {\r\n    const index = this.tabs.findIndex((tab) => tab === e.currentTarget);\r\n    const tabItem = this.tabItems[index];\r\n\r\n    if (!tabItem || tabItem.active) {\r\n      return;\r\n    }\r\n\r\n    this.dsoContentSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"topbar\">\r\n          <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n            {this.tabItems.map((tabItem) => (\r\n              <button\r\n                class={clsx(\"tab\", { active: tabItem.active })}\r\n                role=\"tab\"\r\n                aria-selected={tabItem.active ? \"true\" : \"false\"}\r\n                {...(!tabItem.active ? { tabIndex: -1 } : {})}\r\n                onClick={this.clickHandler}\r\n              >\r\n                {tabItem.label}\r\n              </button>\r\n            ))}\r\n          </div>\r\n\r\n          <dso-icon-button\r\n            icon=\"times\"\r\n            variant=\"tertiary\"\r\n            label=\"Sluit legenda\"\r\n            class=\"close-button\"\r\n            onClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n          />\r\n        </div>\r\n\r\n        <dso-scrollable class=\"content\">\r\n          <div role=\"tabpanel\" tabIndex={0}>\r\n            <slot />\r\n          </div>\r\n        </dso-scrollable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-list-button.js

@@ -1,10 +1,11 @@
 import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, F as Fragment, t as transformTag } from './p-DBWrx_3r.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$6 } from './p-BRSHyfZz.js';
-import { d as defineCustomElement$5 } from './p-DeccEoRQ.js';
-import { d as defineCustomElement$4 } from './p-CJHh7I1P.js';
-import { d as defineCustomElement$3 } from './p-CY_jRhM0.js';
-import { d as defineCustomElement$2 } from './p-DSKmaWtk.js';
+import { d as defineCustomElement$7 } from './p-Btk7RWKm.js';
+import { d as defineCustomElement$6 } from './p-DpRZJt_D.js';
+import { d as defineCustomElement$5 } from './p-VxbAefvg.js';
+import { d as defineCustomElement$4 } from './p-CVTNNCuw.js';
+import { d as defineCustomElement$3 } from './p-ecEmdirb.js';
+import { d as defineCustomElement$2 } from './p-BgkOiu3z.js';
 
 const listButtonCss = () => `*,
 *::after,
@@ -37,6 +38,7 @@ const listButtonCss = () => `*,
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 .dso-tertiary:focus, .dso-tertiary:focus-visible {
   outline-offset: 2px;
@@ -44,27 +46,107 @@ const listButtonCss = () => `*,
 .dso-tertiary:active {
   outline: 0;
 }
+.dso-tertiary {
+  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;
+  background-clip: padding-box;
+}
+.dso-tertiary:focus, .dso-tertiary:focus-visible {
+  outline-offset: 2px;
+}
+.dso-tertiary:active {
+  outline: 0;
+}
+.dso-tertiary {
+  background-color: var(--_dso-button-tertiary-background-color, );
+  border-color: var(--_dso-button-tertiary-border-color, );
+  color: var(--_dso-button-tertiary-color, #39870c);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
+.dso-tertiary:hover {
+  background-color: var(--_dso-button-tertiary-hover-background-color, );
+  border-color: var(--_dso-button-tertiary-hover-border-color, );
+  color: var(--_dso-button-tertiary-hover-color, #275937);
+}
+.dso-tertiary:active {
+  background-color: var(--_dso-button-tertiary-active-background-color, );
+  border-color: var(--_dso-button-tertiary-active-border-color, );
+  color: var(--_dso-button-tertiary-active-color, #173521);
+}
+.dso-tertiary[disabled], .dso-tertiary[disabled]:hover {
+  background-color: var(--_dso-button-tertiary-disabled-background-color, );
+  border-color: var(--_dso-button-tertiary-disabled-border-color, );
+  color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
+}
+.dso-tertiary.dso-small {
+  line-height: 1rem;
+}
+.dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+.dso-tertiary.dso-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-tertiary.dso-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-tertiary.dso-extra-small {
+  line-height: 1rem;
+}
+.dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {
+  margin-block-end: -4px;
+  margin-block-start: -4px;
+}
+.dso-tertiary.dso-extra-small.dso-spinner-left::before {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-tertiary.dso-extra-small.dso-spinner-right::after {
+  block-size: 16px;
+  inline-size: 16px;
+}
+.dso-tertiary.dso-extra-small {
+  padding-block: 9px;
+}
+.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {
+  margin-inline-start: -8px;
+}
+.dso-tertiary span:not(.sr-only) + dso-icon {
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
+}
+.dso-tertiary dso-icon + span:not(.sr-only) {
+  margin-inline-start: 8px;
+}
 .dso-tertiary {
   border: 0;
-  color: #39870c;
   line-height: 1;
   padding: 0;
   background-color: transparent;
 }
-.dso-tertiary[disabled] {
-  color: #afcf9d;
-}
 .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
   color: #39870c;
 }
 .dso-tertiary:not([disabled]):hover {
-  color: #275937;
   text-decoration: underline;
   text-underline-position: under;
 }
-.dso-tertiary:not([disabled]):active {
-  color: #173521;
-}
 .dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
   padding-block: 11px;
@@ -206,6 +288,7 @@ const listButtonCss = () => `*,
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 .dso-list-button:focus, .dso-list-button:focus-visible {
   outline-offset: 2px;
@@ -363,7 +446,7 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends H {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        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") })))));
+        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") })))));
     }
     get host() { return this; }
     static get style() { return listButtonCss(); }
@@ -381,7 +464,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-list-button", "dso-icon", "dso-icon-button", "dso-info", "dso-info-button", "dso-selectable"];
+    const components = ["dso-list-button", "dso-icon", "dso-icon-button", "dso-info", "dso-info-button", "dso-scrollable", "dso-selectable"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-list-button":
             if (!customElements.get(transformTag(tagName))) {
@@ -390,20 +473,25 @@ function defineCustomElement$1() {
             break;
         case "dso-icon":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "dso-icon-button":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "dso-info":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "dso-info-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "dso-scrollable":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }

package/dist/bundle/dso-list-button.js.map

@@ -1 +1 @@
-{"file":"dso-list-button.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC;AAC7B;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n  background-color: $background-color;\r\n  border-color: $border-color;\r\n  color: $color;\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n  align-items: center;\r\n  display: flex;\r\n\r\n  .dso-input-step-counter {\r\n    text-align: center;\r\n    inline-size: units.$ru3;\r\n    font-size: list-button-variables.$font-size-count;\r\n  }\r\n}\r\n\r\n.dso-button-group {\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  &.dso-disabled {\r\n    > * {\r\n      @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  > * {\r\n    border-radius: 0;\r\n\r\n    &:first-child {\r\n      border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n    }\r\n\r\n    &:not(:first-child) {\r\n      border-inline-start-style: none !important;\r\n    }\r\n\r\n    &:last-child {\r\n      border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n    }\r\n\r\n    &:only-child {\r\n      border-radius: list-button-variables.$border-radius;\r\n    }\r\n  }\r\n\r\n  > .dso-input-number {\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    flex-wrap: nowrap;\r\n    padding-block: 0;\r\n    padding-inline: units.$u2;\r\n\r\n    @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  > *:hover + .dso-input-number,\r\n  > *:focus + .dso-input-number {\r\n    @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n  }\r\n\r\n  > *.dso-selected + .dso-input-number {\r\n    box-shadow:\r\n      inset 0 -1px 0 0 button.$secondary-border-color,\r\n      inset 0 1px 0 0 button.$secondary-border-color,\r\n      inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n    @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n  }\r\n\r\n  > *:active + .dso-input-number,\r\n  > *.active + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  > *.disabled + .dso-input-number,\r\n  > *[disabled] + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      opacity: 1;\r\n\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n    }\r\n  }\r\n\r\n  .dso-list-button {\r\n    padding-inline-end: #{units.$u2 - 1};\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n  @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n  border-radius: button.$border-radius;\r\n  border-width: 1px;\r\n  border-style: solid;\r\n  font-weight: 600;\r\n  padding-block: #{units.$u2 - 1};\r\n  padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n  position: relative;\r\n  text-align: start;\r\n  white-space: normal;\r\n  inline-size: 100%;\r\n  cursor: pointer;\r\n\r\n  &:hover,\r\n  &:focus {\r\n    @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n  }\r\n\r\n  &:active,\r\n  &.active {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  &.disabled,\r\n  &[disabled] {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  dso-selectable:not(:last-child) {\r\n    margin-block-end: 0;\r\n  }\r\n\r\n  .dso-selectable-container label {\r\n    font-weight: 700;\r\n  }\r\n\r\n  &.dso-selected {\r\n    border-color: colors.$grasgroen;\r\n    border-width: 1px;\r\n    box-shadow:\r\n      inset 0px 0px 0px 1px colors.$grasgroen,\r\n      inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n    &.dso-single-count {\r\n      @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n        border-inline-end: 0;\r\n        box-shadow:\r\n          colors.$grasgroen 0px 1px 0px 0px inset,\r\n          colors.$grasgroen 1px 0px 0px 0px inset,\r\n          colors.$grasgroen 0px -1px 0px 0px inset;\r\n      }\r\n    }\r\n  }\r\n\r\n  label {\r\n    cursor: inherit;\r\n  }\r\n\r\n  > span {\r\n    display: block;\r\n  }\r\n\r\n  .dso-sublabel,\r\n  .subcontent {\r\n    font-weight: 400;\r\n    inline-size: 100%;\r\n    padding-inline-start: units.$u4;\r\n  }\r\n\r\n  dso-icon {\r\n    block-size: units.$u3;\r\n    color: colors.$grasgroen;\r\n    inset-block-start: #{units.$u2 - 1};\r\n    inset-inline-end: #{units.$u2 - 1};\r\n    inline-size: units.$u3;\r\n    break-before: page;\r\n    position: absolute;\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    &.dso-selected.dso-single-count {\r\n      &::after {\r\n        inline-size: 0;\r\n      }\r\n    }\r\n  }\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  Prop,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\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\r\n  componentDidRender(): void {\r\n    if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n      this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <dso-selectable type=\"checkbox\" value=\"list-button\" name=\"naam\" checked={selected} disabled={this.disabled}>\r\n            {this.label}\r\n            {this.sublabel && <span class=\"sr-only\"> {this.sublabel}</span>}\r\n            {this.subcontentSlot && (\r\n              <span class=\"sr-only\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}{\" \"}\r\n                <span innerHTML={this.subcontentSlot.innerHTML}></span>\r\n              </span>\r\n            )}\r\n          </dso-selectable>\r\n          {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n          {this.subcontentSlot && (\r\n            <div class=\"subcontent\">\r\n              <slot name=\"subcontent\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.count > 1 && (\r\n              <Fragment>\r\n                <dso-icon-button\r\n                  label=\"Aantal verlagen\"\r\n                  variant=\"tertiary\"\r\n                  icon=\"minus-circle\"\r\n                  disabled={this.count === Number(this.min) || this.disabled}\r\n                  onDsoClick={(e) => this.stepValue(e, \"decrement\")}\r\n                />\r\n                <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n                  {this.count}\r\n                </span>\r\n              </Fragment>\r\n            )}\r\n\r\n            <dso-icon-button\r\n              label=\"Aantal verhogen\"\r\n              variant=\"tertiary\"\r\n              icon=\"plus-circle\"\r\n              disabled={this.count === Number(this.max) || this.disabled}\r\n              onDsoClick={(e) => this.stepValue(e, \"increment\")}\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-list-button.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC;AAC7B;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC;;MCvVW,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AA6CE;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA6IjB;AAzLC,IAAA,IAAY,cAAc,GAAA;QACxB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAc,qBAAqB,CAAC;;IAiEpE,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE1E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;AACvC,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,UAAU,EAAE,IAAI;AACjB,SAAA,CAAC;;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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n  background-color: $background-color;\r\n  border-color: $border-color;\r\n  color: $color;\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.dso-input-number {\r\n  align-items: center;\r\n  display: flex;\r\n\r\n  .dso-input-step-counter {\r\n    text-align: center;\r\n    inline-size: units.$ru3;\r\n    font-size: list-button-variables.$font-size-count;\r\n  }\r\n}\r\n\r\n.dso-button-group {\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  &.dso-disabled {\r\n    > * {\r\n      @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  > * {\r\n    border-radius: 0;\r\n\r\n    &:first-child {\r\n      border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n    }\r\n\r\n    &:not(:first-child) {\r\n      border-inline-start-style: none !important;\r\n    }\r\n\r\n    &:last-child {\r\n      border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n    }\r\n\r\n    &:only-child {\r\n      border-radius: list-button-variables.$border-radius;\r\n    }\r\n  }\r\n\r\n  > .dso-input-number {\r\n    border-style: solid;\r\n    border-width: 1px;\r\n    flex-wrap: nowrap;\r\n    padding-block: 0;\r\n    padding-inline: units.$u2;\r\n\r\n    @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      justify-content: center;\r\n    }\r\n  }\r\n\r\n  > *:hover + .dso-input-number,\r\n  > *:focus + .dso-input-number {\r\n    @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n  }\r\n\r\n  > *.dso-selected + .dso-input-number {\r\n    box-shadow:\r\n      inset 0 -1px 0 0 button.$secondary-border-color,\r\n      inset 0 1px 0 0 button.$secondary-border-color,\r\n      inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n    @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n  }\r\n\r\n  > *:active + .dso-input-number,\r\n  > *.active + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  > *.disabled + .dso-input-number,\r\n  > *[disabled] + .dso-input-number {\r\n    &,\r\n    &:hover {\r\n      opacity: 1;\r\n\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n    }\r\n  }\r\n\r\n  .dso-list-button {\r\n    padding-inline-end: #{units.$u2 - 1};\r\n  }\r\n}\r\n\r\n.dso-list-button {\r\n  @include button.base($modifiers: false);\r\n  @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n  border-radius: button.$border-radius;\r\n  border-width: 1px;\r\n  border-style: solid;\r\n  font-weight: 600;\r\n  padding-block: #{units.$u2 - 1};\r\n  padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n  position: relative;\r\n  text-align: start;\r\n  white-space: normal;\r\n  inline-size: 100%;\r\n  cursor: pointer;\r\n\r\n  &:hover,\r\n  &:focus {\r\n    @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n  }\r\n\r\n  &:active,\r\n  &.active {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n    }\r\n  }\r\n\r\n  &.disabled,\r\n  &[disabled] {\r\n    &,\r\n    &:hover {\r\n      @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n      opacity: 1;\r\n    }\r\n  }\r\n\r\n  dso-selectable:not(:last-child) {\r\n    margin-block-end: 0;\r\n  }\r\n\r\n  .dso-selectable-container label {\r\n    font-weight: 700;\r\n  }\r\n\r\n  &.dso-selected {\r\n    border-color: colors.$grasgroen;\r\n    border-width: 1px;\r\n    box-shadow:\r\n      inset 0px 0px 0px 1px colors.$grasgroen,\r\n      inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n    &.dso-single-count {\r\n      @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n        border-inline-end: 0;\r\n        box-shadow:\r\n          colors.$grasgroen 0px 1px 0px 0px inset,\r\n          colors.$grasgroen 1px 0px 0px 0px inset,\r\n          colors.$grasgroen 0px -1px 0px 0px inset;\r\n      }\r\n    }\r\n  }\r\n\r\n  label {\r\n    cursor: inherit;\r\n  }\r\n\r\n  > span {\r\n    display: block;\r\n  }\r\n\r\n  .dso-sublabel,\r\n  .subcontent {\r\n    font-weight: 400;\r\n    inline-size: 100%;\r\n    padding-inline-start: units.$u4;\r\n  }\r\n\r\n  dso-icon {\r\n    block-size: units.$u3;\r\n    color: colors.$grasgroen;\r\n    inset-block-start: #{units.$u2 - 1};\r\n    inset-inline-end: #{units.$u2 - 1};\r\n    inline-size: units.$u3;\r\n    break-before: page;\r\n    position: absolute;\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    &.dso-selected.dso-single-count {\r\n      &::after {\r\n        inline-size: 0;\r\n      }\r\n    }\r\n  }\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  Prop,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-list-button\",\r\n  shadow: true,\r\n  styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoListButtonElement;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private get subcontentSlot() {\r\n    return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n  }\r\n\r\n  /**\r\n   * The label of the List Button.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The sublabel of the List Button.\r\n   */\r\n  @Prop()\r\n  sublabel?: string;\r\n\r\n  /**\r\n   * When defined the count can show on the List Button.\r\n   */\r\n  @Prop()\r\n  count?: number;\r\n\r\n  /**\r\n   * The minimum value.\r\n   */\r\n  @Prop()\r\n  min?: string | number;\r\n\r\n  /**\r\n   * The maximum value.\r\n   */\r\n  @Prop()\r\n  max?: string | number;\r\n\r\n  /**\r\n   * Whether the List Button is checked.\r\n   */\r\n  @Prop({ reflect: true })\r\n  checked = false;\r\n\r\n  /**\r\n   * Whether the List Button is disabled.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Prefix to subcontent for the purpose of screenreading.\r\n   */\r\n  @Prop()\r\n  subcontentPrefix?: string;\r\n\r\n  /**\r\n   * Emitted when the user changes the count.\r\n   */\r\n  @Event()\r\n  dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the List Button itself.\r\n   *\r\n   * Does not fire when the user activates the count controls.\r\n   */\r\n  @Event()\r\n  dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n  connectedCallback() {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\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\r\n  componentDidRender(): void {\r\n    if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n      this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private stepValue(e: Event, direction: \"increment\" | \"decrement\"): void {\r\n    if (typeof this.count === \"number\") {\r\n      const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n      if (!this.isNewCountValid(newValue)) {\r\n        return;\r\n      }\r\n\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: newValue,\r\n      });\r\n    }\r\n  }\r\n\r\n  private handleSelectClick(e: Event): void {\r\n    e.preventDefault();\r\n\r\n    if (this.count !== undefined) {\r\n      this.dsoCountChange.emit({\r\n        originalEvent: e,\r\n        count: this.count > 0 ? 0 : 1,\r\n      });\r\n\r\n      return;\r\n    }\r\n\r\n    this.dsoSelectedChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  private isNewCountValid(newValue: number): boolean {\r\n    return !(\r\n      this.min !== undefined &&\r\n      this.max !== undefined &&\r\n      (newValue < Number(this.min) || newValue > Number(this.max))\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const selected = this.checked || (this.count !== undefined && this.count > 0);\r\n\r\n    return (\r\n      <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n        <div\r\n          class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n          onClick={(e) => this.handleSelectClick(e)}\r\n        >\r\n          <dso-selectable type=\"checkbox\" value=\"list-button\" name=\"naam\" checked={selected} disabled={this.disabled}>\r\n            {this.label}\r\n            {this.sublabel && <span class=\"sr-only\"> {this.sublabel}</span>}\r\n            {this.subcontentSlot && (\r\n              <span class=\"sr-only\">\r\n                {this.subcontentPrefix && this.subcontentPrefix + \":\"}{\" \"}\r\n                <span innerHTML={this.subcontentSlot.innerHTML}></span>\r\n              </span>\r\n            )}\r\n          </dso-selectable>\r\n          {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n          {this.subcontentSlot && (\r\n            <div class=\"subcontent\">\r\n              <slot name=\"subcontent\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {this.count !== undefined && this.count > 0 && (\r\n          <div class=\"dso-input-number\">\r\n            {this.count > 1 && (\r\n              <Fragment>\r\n                <dso-icon-button\r\n                  label=\"Aantal verlagen\"\r\n                  variant=\"tertiary\"\r\n                  icon=\"minus-circle\"\r\n                  disabled={this.count === Number(this.min) || this.disabled}\r\n                  onDsoClick={(e) => this.stepValue(e, \"decrement\")}\r\n                />\r\n                <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n                  {this.count}\r\n                </span>\r\n              </Fragment>\r\n            )}\r\n\r\n            <dso-icon-button\r\n              label=\"Aantal verhogen\"\r\n              variant=\"tertiary\"\r\n              icon=\"plus-circle\"\r\n              disabled={this.count === Number(this.max) || this.disabled}\r\n              onDsoClick={(e) => this.stepValue(e, \"increment\")}\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-logo.js

@@ -171,7 +171,7 @@ const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends H {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo$1, { name: this.name }))) : (h(DsoLogo$1, { 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: 'fe0303b5cd53f11ff30171515fe78a221bbd9d8f', 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: 'e3dc493316f373195f1f8cf1c5e190282486796e', class: "logo-ribbon" }, this.ribbon)));
     }
     static get style() { return logoCss(); }
 }, [257, "dso-logo", {