@dso-toolkit/core 81.1.0 → 83.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { IconButtonClickEvent, IconButtonVariant } from \"./icon-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-icon-button\",\r\n  styleUrl: \"icon-button.scss\",\r\n  shadow: true,\r\n})\r\nexport class IconButton implements ComponentInterface {\r\n  /**\r\n   * The alias of the icon in the button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  icon!: string | undefined;\r\n\r\n  /**\r\n   * The label of the Icon Button which is shown on hover in a tooltip.\r\n   */\r\n  @Prop({ reflect: true })\r\n  label!: string | undefined;\r\n\r\n  /**\r\n   * The variant of the Icon Button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  variant?: IconButtonVariant = \"secondary\";\r\n\r\n  /**\r\n   * The placement of the tooltip on hover and focus of the Icon Button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  tooltipPlacement: TooltipPlacement = \"top\";\r\n\r\n  /**\r\n   * To disable the Icon Button\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Emitted when the user clicks the Icon Button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<IconButtonClickEvent>;\r\n\r\n  @State()\r\n  showTooltip = false;\r\n\r\n  /**\r\n   * Focuses the button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    this.buttonElRef?.focus();\r\n  }\r\n\r\n  private buttonElRef?: HTMLButtonElement;\r\n  private tooltipElRef?: HTMLDivElement;\r\n  private tipArrowElRef?: HTMLSpanElement;\r\n  private tooltipTimeout?: number;\r\n  private cleanUp: TooltipClean | undefined;\r\n  private lastClickTime = 0;\r\n  private tooltipShowDelay = 500;\r\n\r\n  private handleShowTooltip = () => {\r\n    if (this.disabled) {\r\n      return;\r\n    }\r\n\r\n    // Don't show the tooltip if the button is clicked within 500ms of the last click\r\n    if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {\r\n      return;\r\n    }\r\n\r\n    if (this.tooltipTimeout) {\r\n      clearTimeout(this.tooltipTimeout);\r\n    }\r\n\r\n    this.tooltipTimeout = window.setTimeout(() => {\r\n      this.showTooltip = true;\r\n      this.tooltipElRef?.showPopover();\r\n\r\n      if (!this.cleanUp && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {\r\n        this.cleanUp = positionTooltip({\r\n          referenceElement: this.buttonElRef,\r\n          tipRef: this.tooltipElRef,\r\n          tipArrowRef: this.tipArrowElRef,\r\n          placementTip: this.tooltipPlacement,\r\n          topPositionSmallViewPort: false,\r\n          halfMainAxisOffset: false,\r\n          forceVisible: true,\r\n        });\r\n      }\r\n    }, this.tooltipShowDelay);\r\n  };\r\n\r\n  private handleHideTooltip = () => {\r\n    if (this.tooltipTimeout) {\r\n      clearTimeout(this.tooltipTimeout);\r\n    }\r\n\r\n    this.showTooltip = false;\r\n    this.tooltipElRef?.hidePopover();\r\n\r\n    if (!this.showTooltip && this.cleanUp) {\r\n      this.cleanUp();\r\n      this.cleanUp = undefined;\r\n    }\r\n  };\r\n\r\n  private handleClick = (e: MouseEvent) => {\r\n    this.lastClickTime = Date.now();\r\n    this.handleHideTooltip();\r\n    this.dsoClick.emit({ originalEvent: e });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        ref={(el) => (this.buttonElRef = el)}\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        aria-label={this.label}\r\n        class={`icon-button dso-${this.variant}`}\r\n        onMouseEnter={this.handleShowTooltip}\r\n        onMouseLeave={this.handleHideTooltip}\r\n        onFocus={this.handleShowTooltip}\r\n        onBlur={this.handleHideTooltip}\r\n        onClick={this.handleClick}\r\n      >\r\n        <dso-icon icon={this.icon} />\r\n        <Tooltip\r\n          visible={this.showTooltip}\r\n          onAfterHidden={this.handleHideTooltip}\r\n          tipElementRef={(element) => (this.tooltipElRef = element)}\r\n          tipArrowElementRef={(element) => (this.tipArrowElRef = element)}\r\n        >\r\n          {this.label}\r\n        </Tooltip>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { IconButtonClickEvent, IconButtonVariant } from \"./icon-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-icon-button\",\r\n  styleUrl: \"icon-button.scss\",\r\n  shadow: true,\r\n})\r\nexport class IconButton implements ComponentInterface {\r\n  /**\r\n   * The alias of the icon in the button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  icon!: string | undefined;\r\n\r\n  /**\r\n   * The label of the Icon Button which is shown on hover in a tooltip.\r\n   */\r\n  @Prop({ reflect: true })\r\n  label!: string | undefined;\r\n\r\n  /**\r\n   * The variant of the Icon Button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  variant?: IconButtonVariant = \"secondary\";\r\n\r\n  /**\r\n   * The placement of the tooltip on hover and focus of the Icon Button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  tooltipPlacement: TooltipPlacement = \"top\";\r\n\r\n  /**\r\n   * To disable the Icon Button\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Emitted when the user clicks the Icon Button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<IconButtonClickEvent>;\r\n\r\n  @State()\r\n  showTooltip = false;\r\n\r\n  /**\r\n   * Focuses the button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    this.buttonElRef?.focus();\r\n  }\r\n\r\n  private buttonElRef?: HTMLButtonElement;\r\n  private tooltipElRef?: HTMLDivElement;\r\n  private tipArrowElRef?: HTMLSpanElement;\r\n  private tooltipTimeout?: number;\r\n  private cleanUp: TooltipClean | undefined;\r\n  private lastClickTime = 0;\r\n  private tooltipShowDelay = 500;\r\n\r\n  private handleShowTooltip = () => {\r\n    if (this.disabled) {\r\n      return;\r\n    }\r\n\r\n    // Don't show the tooltip if the button is clicked within 500ms of the last click\r\n    if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {\r\n      return;\r\n    }\r\n\r\n    this.clearToolTipTimeout();\r\n\r\n    this.tooltipTimeout = window.setTimeout(() => {\r\n      if (!this.tooltipElRef?.isConnected) {\r\n        return;\r\n      }\r\n\r\n      this.showTooltip = true;\r\n      this.tooltipElRef?.showPopover();\r\n\r\n      if (!this.cleanUp && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {\r\n        this.cleanUp = positionTooltip({\r\n          referenceElement: this.buttonElRef,\r\n          tipRef: this.tooltipElRef,\r\n          tipArrowRef: this.tipArrowElRef,\r\n          placementTip: this.tooltipPlacement,\r\n          topPositionSmallViewPort: false,\r\n          halfMainAxisOffset: false,\r\n          forceVisible: true,\r\n        });\r\n      }\r\n    }, this.tooltipShowDelay);\r\n  };\r\n\r\n  disconnectedCallback() {\r\n    this.clearToolTipTimeout();\r\n\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  private clearToolTipTimeout = () => {\r\n    if (this.tooltipTimeout) {\r\n      clearTimeout(this.tooltipTimeout);\r\n    }\r\n  };\r\n\r\n  private handleHideTooltip = () => {\r\n    this.clearToolTipTimeout();\r\n\r\n    this.showTooltip = false;\r\n    this.tooltipElRef?.hidePopover();\r\n\r\n    if (!this.showTooltip && this.cleanUp) {\r\n      this.cleanUp();\r\n      this.cleanUp = undefined;\r\n    }\r\n  };\r\n\r\n  private handleClick = (e: MouseEvent) => {\r\n    this.lastClickTime = Date.now();\r\n    this.handleHideTooltip();\r\n    this.dsoClick.emit({ originalEvent: e });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        ref={(el) => (this.buttonElRef = el)}\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        aria-label={this.label}\r\n        class={`icon-button dso-${this.variant}`}\r\n        onMouseEnter={this.handleShowTooltip}\r\n        onMouseLeave={this.handleHideTooltip}\r\n        onFocus={this.handleShowTooltip}\r\n        onBlur={this.handleHideTooltip}\r\n        onClick={this.handleClick}\r\n      >\r\n        <dso-icon icon={this.icon} />\r\n        <Tooltip\r\n          visible={this.showTooltip}\r\n          onAfterHidden={this.handleHideTooltip}\r\n          tipElementRef={(element) => (this.tooltipElRef = element)}\r\n          tipArrowElementRef={(element) => (this.tipArrowElRef = element)}\r\n        >\r\n          {this.label}\r\n        </Tooltip>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -74,12 +74,6 @@ ins.editaction-add {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e4f1d4;
-  color: #191919;
 }
 ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -93,6 +87,14 @@ ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=
 ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+ins.editaction-add {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e4f1d4;
+  color: #191919;
+}
 ins.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -109,12 +111,6 @@ ins.editaction-add .wrapper {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e4f1d4;
-  color: #191919;
 }
 ins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -128,6 +124,14 @@ ins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):i
 ins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+ins.editaction-add .wrapper {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e4f1d4;
+  color: #191919;
+}
 ins.editaction-add .wrapper {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -155,12 +159,6 @@ del.editaction-remove {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f5d8dc;
-  color: #191919;
 }
 del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -174,6 +172,14 @@ del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([hre
 del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+del.editaction-remove {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f5d8dc;
+  color: #191919;
+}
 del.editaction-remove {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
@@ -196,12 +202,6 @@ del.editaction-remove .wrapper {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f5d8dc;
-  color: #191919;
 }
 del.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -215,6 +215,14 @@ del.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary
 del.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+del.editaction-remove .wrapper {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f5d8dc;
+  color: #191919;
+}
 del.editaction-remove .wrapper {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;

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

@@ -12,12 +12,6 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f2f2f2;
-  color: #191919;
 }
 :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-zwart"));
@@ -31,6 +25,14 @@
 :host a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+:host {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f2f2f2;
+  color: #191919;
+}
 
 :host(:not([active], [fixed])),
 :host([active=false]:not([fixed])),
@@ -56,7 +58,7 @@ dso-icon-button {
   block-size: 1px;
   padding: 0;
   margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
   border: 0;
+  overflow: hidden;
+  clip-path: inset(0);
 }

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

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class Info {
     render() {
-        return (h(Fragment, { key: 'a80876ff311b19c6111c3b86cf93f141666643b3' }, h("slot", { key: '8ea0b58e6a831e2ea86924e1c7ce3b460e68a01c' }), !this.fixed && (h("dso-icon-button", { key: '250fb5b6fc21134a0566eb0689c0b5117547c060', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        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) }))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,9 +14,9 @@
   block-size: 1px;
   padding: 0;
   margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
   border: 0;
+  overflow: hidden;
+  clip-path: inset(0);
 }
 
 button {
@@ -25,12 +25,14 @@ button {
   border: 0;
   margin-inline-start: var(--_dt-info-button-margin-inline-start, 8px);
   padding: 0;
-  vertical-align: top;
-  line-height: 1;
 }
 button.dso-info-secondary {
   color: #666;
 }
+button {
+  vertical-align: top;
+  line-height: 1;
+}
 
 dso-icon-button {
   margin-inline-start: var(--_dt-info-button-margin-inline-start, 8px);

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

@@ -20,7 +20,7 @@ export class InfoButton {
         this.dsoToggle.emit({ originalEvent, active: this.active });
     }
     render() {
-        return (h(Host, { key: '0c8137ee28404fb5d33de000830d0bb52cab2232', 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: '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) })) : (
         // 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/collection/components/input-range/input-range.css

@@ -32,33 +32,39 @@
 .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-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;
-  border-radius: 50%;
 }
 .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;
-  border: 1px solid #666;
-  border-radius: 0.5rem;
 }
 .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;
@@ -66,9 +72,11 @@
   appearance: none;
   margin-block-start: -0.5rem;
   background-color: #39870c;
-  border-color: transparent;
-  border-radius: 50%;
 }
 .input::-moz-range-thumb:hover {
   background-color: #275937;
+}
+.input::-moz-range-thumb {
+  border-color: transparent;
+  border-radius: 50%;
 }

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

@@ -10,13 +10,13 @@ export class InputRange {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: '0c75a4a89ead97c9b50838f0c975c1419fff9c29', id: "description", hidden: true }, this.description)), h("span", { key: '77a65b197480a6e24e73efb592fae58488cb3635', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '9494837e51c48ff8be17cd482867f4c7691b30e6', 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: '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({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: 'efa3762a2f4775b3445efa9482ec4851b04a0889', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '04774c80c6ac969cf1338d3b4ea39dabf531539b', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,9 +16,9 @@
   block-size: 1px;
   padding: 0;
   margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
   border: 0;
+  overflow: hidden;
+  clip-path: inset(0);
 }
 
 .dso-label {
@@ -40,12 +40,6 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f2f2f2;
-  color: #191919;
 }
 .dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -59,6 +53,14 @@
 .dso-label a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.dso-label {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f2f2f2;
+  color: #191919;
+}
 .dso-label.dso-label-info {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
@@ -67,12 +69,6 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #6ca4d9;
-  color: #191919;
 }
 .dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -86,6 +82,14 @@
 .dso-label.dso-label-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.dso-label.dso-label-info {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #6ca4d9;
+  color: #191919;
+}
 .dso-label.dso-label-primary {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
@@ -94,9 +98,6 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #fff;
-  background-color: #275937;
-  color: #fff;
 }
 .dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
@@ -110,6 +111,11 @@
 .dso-label.dso-label-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
 }
+.dso-label.dso-label-primary {
+  --_dso-icon-button-tertiary-color: #fff;
+  background-color: #275937;
+  color: #fff;
+}
 .dso-label.dso-label-success {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
@@ -118,9 +124,6 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #fff;
-  background-color: #39870c;
-  color: #fff;
 }
 .dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
@@ -134,6 +137,11 @@
 .dso-label.dso-label-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
 }
+.dso-label.dso-label-success {
+  --_dso-icon-button-tertiary-color: #fff;
+  background-color: #39870c;
+  color: #fff;
+}
 .dso-label.dso-label-warning {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
@@ -142,12 +150,6 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #dcd400;
-  color: #191919;
 }
 .dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -161,6 +163,14 @@
 .dso-label.dso-label-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.dso-label.dso-label-warning {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #dcd400;
+  color: #191919;
+}
 .dso-label.dso-label-error {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
@@ -169,9 +179,6 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #fff;
-  background-color: #ce3f51;
-  color: #fff;
 }
 .dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
@@ -185,6 +192,11 @@
 .dso-label.dso-label-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
 }
+.dso-label.dso-label-error {
+  --_dso-icon-button-tertiary-color: #fff;
+  background-color: #ce3f51;
+  color: #fff;
+}
 .dso-label.dso-label-bright {
   --_dso-alert-success-border-color: initial;
   --_dso-alert-error-border-color: initial;
@@ -205,9 +217,6 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #fff;
-  background-color: #8b4a6a;
-  color: #fff;
 }
 .dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
@@ -221,6 +230,11 @@
 .dso-label.dso-label-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
 }
+.dso-label.dso-label-attention {
+  --_dso-icon-button-tertiary-color: #fff;
+  background-color: #8b4a6a;
+  color: #fff;
+}
 .dso-label.dso-label-filter {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
@@ -229,12 +243,6 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e1ecf7;
-  color: #191919;
 }
 .dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -248,6 +256,14 @@
 .dso-label.dso-label-filter a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.dso-label.dso-label-filter {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e1ecf7;
+  color: #191919;
+}
 .dso-label.dso-label-filter {
   border-inline-start: 5px solid #6ca4d9;
 }
@@ -259,12 +275,6 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e4f1d4;
-  color: #191919;
 }
 .dso-label.dso-label-toegevoegd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -278,6 +288,14 @@
 .dso-label.dso-label-toegevoegd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.dso-label.dso-label-toegevoegd {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e4f1d4;
+  color: #191919;
+}
 .dso-label.dso-label-toegevoegd {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -290,12 +308,6 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f5d8dc;
-  color: #191919;
 }
 .dso-label.dso-label-verwijderd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -309,6 +321,14 @@
 .dso-label.dso-label-verwijderd a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.dso-label.dso-label-verwijderd {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f5d8dc;
+  color: #191919;
+}
 .dso-label.dso-label-verwijderd {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;

package/dist/collection/components/label/label.js

@@ -1,5 +1,5 @@
 import { Fragment, h, } from "@stencil/core";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import debounce from "debounce";
 const resizeObserver = new ResizeObserver(debounce((entries) => {
     entries.forEach(({ target }) => {
@@ -94,13 +94,13 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '269e8ab276b564569b719be9858e32b8199d8c45' }, h("span", { key: '283dde74a7423b2e355ffb237bc3551312ee7cee', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: 'f868c06841bb1f9a6f39db8598141634cbe59f5f' }, h("span", { key: '935d20891b9df19b37cf38242892428c81c12631', "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: '47649523a9d791f810456dcaab6c0d6d394dbe47', name: "symbol" }), h("span", { key: '0f6699fc606d3b83125f69c774f9e96366bad2a1', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: 'e3d5f4d753cf5ca6ef1bef6fae698b3b4c03e5da', name: "symbol" }), h("span", { key: '242c774421051469948ff841d7b55bf06e9481fd', 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: 'dd0b563860ecc5f46f2c24111ec18ddf863ed8eb' })), this.removable && (h("dso-icon-button", { key: 'bf62343f5f8ece77887e69bc262d9e4511fa1f81', 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: '29a5fc440662776606faaf5b2dc9526411ae7e0a', 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: '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))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }