@utrecht/web-component-library-stencil 2.1.0 → 3.0.0

package/dist/collection/components/button.css

@@ -1,29 +1,31 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-button {
   /*
   `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
@@ -238,12 +240,12 @@
   border-width: var(--_utrecht-button-border-width);
   box-sizing: border-box;
   color: var(--_utrecht-button-color);
+  column-gap: var(--utrecht-button-column-gap);
   cursor: var(--utrecht-action-activate-cursor, revert);
   display: inline-flex;
   font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
   font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
   font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
-  gap: var(--utrecht-button-icon-gap);
   inline-size: var(--utrecht-button-inline-size, auto);
   justify-content: center;
   line-height: var(--_utrecht-button-line-height);
@@ -319,6 +321,7 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
 }
 
 .utrecht-button--focus:not(.utrecht-button--disabled) {
@@ -328,9 +331,8 @@
   scale: var(--utrecht-button-focus-scale, 1);
 }
 
-.utrecht-button:focus {
-  /* Show focus ring even for disabled :focus-visible buttons. *
-  /* For example: <button disabled tabindex="0"> */
+.utrecht-button:focus-visible {
+  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
   /* - The browser default focus ring should apply when these CSS custom properties are not set.
    * - Make the `box-shadow` value available, so components that have their own `box-shadow`
    *   can combine it with the focus ring box shadow.
@@ -342,6 +344,7 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
 }
 
 .utrecht-button:focus:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
@@ -349,26 +352,6 @@
   border-color: var(--_utrecht-button-focus-border-color);
   color: var(--_utrecht-button-focus-color);
   scale: var(--utrecht-button-focus-scale, 1);
-  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
-  /* - The browser default focus ring should apply when these CSS custom properties are not set.
-   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
-   *   can combine it with the focus ring box shadow.
-   */
-  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
-    var(--utrecht-focus-inverse-outline-color, transparent);
-  box-shadow: var(--_utrecht-focus-ring-box-shadow);
-  outline-color: var(--utrecht-focus-outline-color, revert);
-  outline-offset: var(--utrecht-focus-outline-offset, revert);
-  outline-style: var(--utrecht-focus-outline-style, revert);
-  outline-width: var(--utrecht-focus-outline-width, revert);
-}
-
-/* override the `:focus` selector above */
-/* stylelint-disable-next-line no-descending-specificity */
-.utrecht-button:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
 }
 
 .utrecht-button--hover:not(:disabled, .utrecht-button--disabled),

package/dist/collection/components/button.js

@@ -93,7 +93,7 @@ export class Button {
             button.style.display = 'none';
             button.value = value || '';
         }
-        return (h("button", { key: 'e78d33b1dafbbddba31342770dbc0216408e2131', class: clsx('utrecht-button', this.busy && 'utrecht-button--busy', this.disabled && 'utrecht-button--disabled', pressed && 'utrecht-button--pressed', this.type === 'submit' && 'utrecht-button--submit', this.appearance === 'primary-action-button' && 'utrecht-button--primary-action', this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', this.appearance === 'subtle-button' && 'utrecht-button--subtle'), "aria-busy": this.busy ? 'true' : null, "aria-expanded": typeof this.expanded === 'boolean' ? String(expanded) : typeof expanded === 'string' ? expanded : null, "aria-pressed": typeof this.pressed === 'boolean' ? String(pressed) : typeof pressed === 'string' ? pressed : null, disabled: this.disabled, type: this.type || 'button', onClick: handleClick }, h("slot", { key: '1efafdc1e4e1d3cdf19f2d9aff19f78d3d076f52' })));
+        return (h("button", { key: '9db8124b0e24de7e68c53cea02f47050467d0a4a', class: clsx('utrecht-button', this.busy && 'utrecht-button--busy', this.disabled && 'utrecht-button--disabled', pressed && 'utrecht-button--pressed', this.type === 'submit' && 'utrecht-button--submit', this.appearance === 'primary-action-button' && 'utrecht-button--primary-action', this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action', this.appearance === 'subtle-button' && 'utrecht-button--subtle'), "aria-busy": this.busy ? 'true' : null, "aria-expanded": typeof this.expanded === 'boolean' ? String(expanded) : typeof expanded === 'string' ? expanded : null, "aria-pressed": typeof this.pressed === 'boolean' ? String(pressed) : typeof pressed === 'string' ? pressed : null, disabled: this.disabled, type: this.type || 'button', onClick: handleClick }, h("slot", { key: '528191be0778905222069db3b73b249e4d3f6a0d', name: "icon" }), h("span", { key: 'e143a8ba99070282db775ed78de6f574465dc208', class: "utrecht-button__label" }, h("slot", { key: '0c0c0800ad7df7377e95839d5e61358dffc0892b' }))));
     }
     static get is() { return "utrecht-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,MAAM;;;;;;;;;;;;;;;;;;;IAqBjB,MAAM;QACJ,MAAM,WAAW,GAAG,GAAG,EAAE;;YACvB,MAAM,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;YAC9C,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAC5B,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,MAAM,CAAC,0CAAE,KAAK,EAAE,CAAC;YAC7C,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,GAAG,EAAE;;YACxB,MAAM,KAAK,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;YAC/C,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;gBAC5B,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,MAAM,CAAC,0CAAE,aAAa,EAAE,CAAC;YACrD,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC1B,WAAW,EAAE,CAAC;YAChB,CAAC;iBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAClC,YAAY,EAAE,CAAC;YACjB,CAAC;iBAAM,CAAC;gBACN,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAA6B,CAAC;gBAC5F,IAAI,MAAM,EAAE,CAAC;oBACX,MAAM,CAAC,KAAK,EAAE,CAAC;gBACjB,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,EACJ,WAAW,EACX,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,IAAI,GACL,GAAG,IAAI,CAAC;QAET,IAAI,MAAM,GAAG,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAA6B,CAAC;QAErF,MAAM,WAAW,GAAG,CAAC,CAAC,CACpB,IAAI;YACJ,IAAI;YACJ,UAAU;YACV,WAAW;YACX,UAAU;YACV,cAAc;YACd,aAAa;YACb,mBAAmB;YACnB,IAAI,KAAK,QAAQ,CAClB,CAAC;QACF,IAAI,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;YAC3B,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACxC,CAAC;QAED,IAAI,CAAC,MAAM,IAAI,WAAW,EAAE,CAAC;YAC3B,MAAM,GAAG,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC3D,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACrB,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC;YAC3B,WAAW,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAClC,CAAC;QAED,MAAM,YAAY,GAAG,CAAC,EAAe,EAAE,IAAY,EAAE,KAAqB,EAAE,EAAE;YAC5E,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC9B,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC/B,CAAC;iBAAM,CAAC;gBACN,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;QAEF,IAAI,MAAM,EAAE,CAAC;YACX,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;YACnC,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;YACnC,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;YACnC,YAAY,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC;YAC/C,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;YACnC,YAAY,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC;YAC/C,YAAY,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC;YACjD,YAAY,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC;YAC/C,YAAY,CAAC,MAAM,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACnE,YAAY,CAAC,MAAM,EAAE,qBAAqB,EAAE,mBAAmB,CAAC,CAAC;YACjE,YAAY,CAAC,MAAM,EAAE,eAAe,EAAE,aAAa,CAAC,CAAC;YACrD,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;YACnC,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC9B,MAAM,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;QAC7B,CAAC;QAED,OAAO,CACL,+DACE,KAAK,EAAE,IAAI,CACT,gBAAgB,EAChB,IAAI,CAAC,IAAI,IAAI,sBAAsB,EACnC,IAAI,CAAC,QAAQ,IAAI,0BAA0B,EAC3C,OAAO,IAAI,yBAAyB,EACpC,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,wBAAwB,EAClD,IAAI,CAAC,UAAU,KAAK,uBAAuB,IAAI,gCAAgC,EAC/E,IAAI,CAAC,UAAU,KAAK,yBAAyB,IAAI,kCAAkC,EACnF,IAAI,CAAC,UAAU,KAAK,eAAe,IAAI,wBAAwB,CAChE,eACU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,mBAElC,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,kBAGtG,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAEpG,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,QAAQ,EAC3B,OAAO,EAAE,WAAW;YAEpB,8DAAa,CACN,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() appearance: string;\n  @Prop() busy: boolean;\n  @Prop() disabled: boolean;\n  @Prop() expanded: boolean | string | 'false' | 'true';\n  @Prop() pressed: boolean | string | 'false' | 'true';\n  @Prop({ attribute: 'readonly', reflect: true }) form: string;\n  @Prop({ attribute: 'formaction', reflect: true }) formAction: string;\n  @Prop({ attribute: 'formenctype', reflect: true }) formEnctype: string;\n  @Prop({ attribute: 'formmethod', reflect: true }) formMethod: string;\n  @Prop({ attribute: 'formnovalidate', reflect: true }) formNoValidate: boolean;\n  @Prop({ attribute: 'formtarget', reflect: true }) formTarget: string;\n  @Prop({ attribute: 'popovertarget', reflect: true }) popoverTarget: string;\n  @Prop({ attribute: 'popovertargetaction', reflect: true }) popoverTargetAction: string;\n  @Prop() name: string;\n  @Prop() value: string;\n  @Event({ cancelable: true }) utrechtRequestReset: EventEmitter;\n  @Event({ cancelable: true }) utrechtRequestSubmit: EventEmitter;\n  @Element() hostElement: HTMLElement;\n  @Prop() type: string;\n\n  render() {\n    const handleReset = () => {\n      const event = this.utrechtRequestReset.emit();\n      if (!event.defaultPrevented) {\n        this.hostElement?.closest('form')?.reset();\n      }\n    };\n\n    const handleSubmit = () => {\n      const event = this.utrechtRequestSubmit.emit();\n      if (!event.defaultPrevented) {\n        this.hostElement?.closest('form')?.requestSubmit();\n      }\n    };\n\n    const handleClick = () => {\n      if (this.type === 'reset') {\n        handleReset();\n      } else if (this.type === 'submit') {\n        handleSubmit();\n      } else {\n        const button = this.hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n        if (button) {\n          button.click();\n        }\n      }\n    };\n\n    const {\n      hostElement,\n      expanded,\n      pressed,\n      name,\n      value,\n      form,\n      formAction,\n      formEnctype,\n      formTarget,\n      formNoValidate,\n      formMethod,\n      popoverTargetAction,\n      popoverTarget,\n      type,\n    } = this;\n\n    let button = hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n\n    const needsButton = !!(\n      name ||\n      form ||\n      formTarget ||\n      formEnctype ||\n      formMethod ||\n      formNoValidate ||\n      popoverTarget ||\n      popoverTargetAction ||\n      type === 'submit'\n    );\n    if (button && !needsButton) {\n      button.parentNode.removeChild(button);\n    }\n\n    if (!button && needsButton) {\n      button = hostElement.ownerDocument.createElement('button');\n      button.hidden = true;\n      button.tabIndex = -1;\n      button.ariaHidden = 'true';\n      hostElement.appendChild(button);\n    }\n\n    const setAttribute = (el: HTMLElement, name: string, value?: string | null) => {\n      if (typeof value === 'string') {\n        el.setAttribute(name, value);\n      } else {\n        el.removeAttribute(name);\n      }\n    };\n\n    if (button) {\n      setAttribute(button, 'name', name);\n      setAttribute(button, 'type', type);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formaction', formAction);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formtarget', formTarget);\n      setAttribute(button, 'formenctype', formEnctype);\n      setAttribute(button, 'formmethod', formMethod);\n      setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);\n      setAttribute(button, 'popovertargetaction', popoverTargetAction);\n      setAttribute(button, 'popovertarget', popoverTarget);\n      setAttribute(button, 'type', type);\n      button.style.display = 'none';\n      button.value = value || '';\n    }\n\n    return (\n      <button\n        class={clsx(\n          'utrecht-button',\n          this.busy && 'utrecht-button--busy',\n          this.disabled && 'utrecht-button--disabled',\n          pressed && 'utrecht-button--pressed',\n          this.type === 'submit' && 'utrecht-button--submit',\n          this.appearance === 'primary-action-button' && 'utrecht-button--primary-action',\n          this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action',\n          this.appearance === 'subtle-button' && 'utrecht-button--subtle',\n        )}\n        aria-busy={this.busy ? 'true' : null}\n        aria-expanded={\n          typeof this.expanded === 'boolean' ? String(expanded) : typeof expanded === 'string' ? expanded : null\n        }\n        aria-pressed={\n          typeof this.pressed === 'boolean' ? String(pressed) : typeof pressed === 'string' ? pressed : null\n        }\n        disabled={this.disabled}\n        type={this.type || 'button'}\n        onClick={handleClick}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class Button {\n  @Prop() appearance: string;\n  @Prop() busy: boolean;\n  @Prop() disabled: boolean;\n  @Prop() expanded: boolean | string | 'false' | 'true';\n  @Prop() pressed: boolean | string | 'false' | 'true';\n  @Prop({ attribute: 'readonly', reflect: true }) form: string;\n  @Prop({ attribute: 'formaction', reflect: true }) formAction: string;\n  @Prop({ attribute: 'formenctype', reflect: true }) formEnctype: string;\n  @Prop({ attribute: 'formmethod', reflect: true }) formMethod: string;\n  @Prop({ attribute: 'formnovalidate', reflect: true }) formNoValidate: boolean;\n  @Prop({ attribute: 'formtarget', reflect: true }) formTarget: string;\n  @Prop({ attribute: 'popovertarget', reflect: true }) popoverTarget: string;\n  @Prop({ attribute: 'popovertargetaction', reflect: true }) popoverTargetAction: string;\n  @Prop() name: string;\n  @Prop() value: string;\n  @Event({ cancelable: true }) utrechtRequestReset: EventEmitter;\n  @Event({ cancelable: true }) utrechtRequestSubmit: EventEmitter;\n  @Element() hostElement: HTMLElement;\n  @Prop() type: string;\n\n  render() {\n    const handleReset = () => {\n      const event = this.utrechtRequestReset.emit();\n      if (!event.defaultPrevented) {\n        this.hostElement?.closest('form')?.reset();\n      }\n    };\n\n    const handleSubmit = () => {\n      const event = this.utrechtRequestSubmit.emit();\n      if (!event.defaultPrevented) {\n        this.hostElement?.closest('form')?.requestSubmit();\n      }\n    };\n\n    const handleClick = () => {\n      if (this.type === 'reset') {\n        handleReset();\n      } else if (this.type === 'submit') {\n        handleSubmit();\n      } else {\n        const button = this.hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n        if (button) {\n          button.click();\n        }\n      }\n    };\n\n    const {\n      hostElement,\n      expanded,\n      pressed,\n      name,\n      value,\n      form,\n      formAction,\n      formEnctype,\n      formTarget,\n      formNoValidate,\n      formMethod,\n      popoverTargetAction,\n      popoverTarget,\n      type,\n    } = this;\n\n    let button = hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n\n    const needsButton = !!(\n      name ||\n      form ||\n      formTarget ||\n      formEnctype ||\n      formMethod ||\n      formNoValidate ||\n      popoverTarget ||\n      popoverTargetAction ||\n      type === 'submit'\n    );\n    if (button && !needsButton) {\n      button.parentNode.removeChild(button);\n    }\n\n    if (!button && needsButton) {\n      button = hostElement.ownerDocument.createElement('button');\n      button.hidden = true;\n      button.tabIndex = -1;\n      button.ariaHidden = 'true';\n      hostElement.appendChild(button);\n    }\n\n    const setAttribute = (el: HTMLElement, name: string, value?: string | null) => {\n      if (typeof value === 'string') {\n        el.setAttribute(name, value);\n      } else {\n        el.removeAttribute(name);\n      }\n    };\n\n    if (button) {\n      setAttribute(button, 'name', name);\n      setAttribute(button, 'type', type);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formaction', formAction);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formtarget', formTarget);\n      setAttribute(button, 'formenctype', formEnctype);\n      setAttribute(button, 'formmethod', formMethod);\n      setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);\n      setAttribute(button, 'popovertargetaction', popoverTargetAction);\n      setAttribute(button, 'popovertarget', popoverTarget);\n      setAttribute(button, 'type', type);\n      button.style.display = 'none';\n      button.value = value || '';\n    }\n\n    return (\n      <button\n        class={clsx(\n          'utrecht-button',\n          this.busy && 'utrecht-button--busy',\n          this.disabled && 'utrecht-button--disabled',\n          pressed && 'utrecht-button--pressed',\n          this.type === 'submit' && 'utrecht-button--submit',\n          this.appearance === 'primary-action-button' && 'utrecht-button--primary-action',\n          this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action',\n          this.appearance === 'subtle-button' && 'utrecht-button--subtle',\n        )}\n        aria-busy={this.busy ? 'true' : null}\n        aria-expanded={\n          typeof this.expanded === 'boolean' ? String(expanded) : typeof expanded === 'string' ? expanded : null\n        }\n        aria-pressed={\n          typeof this.pressed === 'boolean' ? String(pressed) : typeof pressed === 'string' ? pressed : null\n        }\n        disabled={this.disabled}\n        type={this.type || 'button'}\n        onClick={handleClick}\n      >\n        <slot name=\"icon\"></slot>\n        <span class=\"utrecht-button__label\">\n          <slot></slot>\n        </span>\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/components/checkbox.css

@@ -1,25 +1,28 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
@@ -50,12 +53,13 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
 }
 
 .utrecht-checkbox--html-input:disabled {
   cursor: var(--utrecht-action-disabled-cursor, revert);
 }
-.utrecht-checkbox--html-input:focus {
+.utrecht-checkbox--html-input :focus-visible {
   /* - The browser default focus ring should apply when these CSS custom properties are not set.
    * - Make the `box-shadow` value available, so components that have their own `box-shadow`
    *   can combine it with the focus ring box shadow.
@@ -67,11 +71,7 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
-}
-.utrecht-checkbox--html-input:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
+  z-index: 1;
 }
 
 :host {

package/dist/collection/components/checkbox.js

@@ -1,6 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 import { h } from "@stencil/core";
 import clsx from "clsx";
@@ -13,7 +14,7 @@ export class Checkbox {
     }
     render() {
         const { checked, disabled, value } = this;
-        return (h("input", { key: '158e1cbb8e92b9d853fe8a450f4b66e0de601e11', class: clsx('utrecht-checkbox'), type: "checkbox", checked: checked, disabled: disabled, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+        return (h("input", { key: 'a89783617f21f10894db81c77cc00eabe46da049', class: clsx('utrecht-checkbox'), type: "checkbox", checked: checked, disabled: disabled, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
                 this.checked = evt.target.checked;
                 this.utrechtInput.emit(evt);
             } }));

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,QAAQ;;wBAC0B,KAAK;wBACkB,KAAK;uBAC9C,KAAK;qBACR,EAAE;;IAM1B,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE1C,OAAO,CACL,8DACE,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,EAC/B,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;gBACf,IAAI,CAAC,OAAO,GAAI,GAAG,CAAC,MAA2B,CAAC,OAAO,CAAC;gBACxD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC9B,CAAC,GACD,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n})\nexport class Checkbox {\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { checked, disabled, value } = this;\n\n    return (\n      <input\n        class={clsx('utrecht-checkbox')}\n        type=\"checkbox\"\n        checked={checked}\n        disabled={disabled}\n        value={value}\n        onBlur={(evt) => this.utrechtBlur.emit(evt)}\n        onChange={(evt) => this.utrechtChange.emit(evt)}\n        onFocus={(evt) => this.utrechtFocus.emit(evt)}\n        onInput={(evt) => {\n          this.checked = (evt.target as HTMLInputElement).checked;\n          this.utrechtInput.emit(evt);\n        }}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,QAAQ;;wBAC0B,KAAK;wBACkB,KAAK;uBAC9C,KAAK;qBACR,EAAE;;IAM1B,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE1C,OAAO,CACL,8DACE,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,EAC/B,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;gBACf,IAAI,CAAC,OAAO,GAAI,GAAG,CAAC,MAA2B,CAAC,OAAO,CAAC;gBACxD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC9B,CAAC,GACD,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n})\nexport class Checkbox {\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { checked, disabled, value } = this;\n\n    return (\n      <input\n        class={clsx('utrecht-checkbox')}\n        type=\"checkbox\"\n        checked={checked}\n        disabled={disabled}\n        value={value}\n        onBlur={(evt) => this.utrechtBlur.emit(evt)}\n        onChange={(evt) => this.utrechtChange.emit(evt)}\n        onFocus={(evt) => this.utrechtFocus.emit(evt)}\n        onInput={(evt) => {\n          this.checked = (evt.target as HTMLInputElement).checked;\n          this.utrechtInput.emit(evt);\n        }}\n      />\n    );\n  }\n}\n"]}

package/dist/collection/components/code-block.css

@@ -1,22 +1,22 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 .utrecht-code-block {
   /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */

package/dist/collection/components/code-block.js

@@ -1,7 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 import { h } from "@stencil/core";
 export class CodeBlock {

package/dist/collection/components/code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../src/components/code-block.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,SAAS;IACpB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,oBAAoB;YAC7B,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-code-block',\n  styleUrl: 'code-block.scss',\n  shadow: true,\n})\nexport class CodeBlock {\n  render() {\n    return (\n      <pre class=\"utrecht-code-block\">\n        <slot></slot>\n      </pre>\n    );\n  }\n}\n"]}
+{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../src/components/code-block.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,SAAS;IACpB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,oBAAoB;YAC7B,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-code-block',\n  styleUrl: 'code-block.scss',\n  shadow: true,\n})\nexport class CodeBlock {\n  render() {\n    return (\n      <pre class=\"utrecht-code-block\">\n        <slot></slot>\n      </pre>\n    );\n  }\n}\n"]}

package/dist/collection/components/code.css

@@ -1,17 +1,17 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 .utrecht-code {
   /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */

package/dist/collection/components/code.js

@@ -1,7 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 import { h } from "@stencil/core";
 export class Code {

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

@@ -1 +1 @@
-{"version":3,"file":"code.js","sourceRoot":"","sources":["../../src/components/code.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,IAAI;IACf,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAC,cAAc;YACxB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-code',\n  styleUrl: 'code.scss',\n  shadow: true,\n})\nexport class Code {\n  render() {\n    return (\n      <code class=\"utrecht-code\">\n        <slot></slot>\n      </code>\n    );\n  }\n}\n"]}
+{"version":3,"file":"code.js","sourceRoot":"","sources":["../../src/components/code.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,IAAI;IACf,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAC,cAAc;YACxB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-code',\n  styleUrl: 'code.scss',\n  shadow: true,\n})\nexport class Code {\n  render() {\n    return (\n      <code class=\"utrecht-code\">\n        <slot></slot>\n      </code>\n    );\n  }\n}\n"]}

package/dist/collection/components/color-sample.css

@@ -1,11 +1,12 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021-2022 Gemeente Utrecht
- * Copyright (c) 2021-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 :host {
   background-color: var(--utrecht-color-sample-background-color, currentColor);

package/dist/collection/components/color-sample.js

@@ -1,7 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 import { h, Host } from "@stencil/core";
 export class ColorSample {

package/dist/collection/components/color-sample.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-sample.js","sourceRoot":"","sources":["../../src/components/color-sample.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;;;IAEtB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAChC,6DAAM,KAAK,EAAE,IAAI,CAAC,KAAK;gBACrB,8DAAa,CACR,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-color-sample',\n  styleUrl: 'color-sample.scss',\n  shadow: true,\n})\nexport class ColorSample {\n  @Prop() color: string;\n  render() {\n    return (\n      <Host style={{ color: this.color }}>\n        <data value={this.color}>\n          <slot></slot>\n        </data>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"color-sample.js","sourceRoot":"","sources":["../../src/components/color-sample.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;;;IAEtB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAChC,6DAAM,KAAK,EAAE,IAAI,CAAC,KAAK;gBACrB,8DAAa,CACR,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-color-sample',\n  styleUrl: 'color-sample.scss',\n  shadow: true,\n})\nexport class ColorSample {\n  @Prop() color: string;\n  render() {\n    return (\n      <Host style={{ color: this.color }}>\n        <data value={this.color}>\n          <slot></slot>\n        </data>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/column-layout.css

@@ -1,12 +1,12 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 :host {
   column-gap: var(--utrecht-column-layout-gap, 2em);

package/dist/collection/components/column-layout.js

@@ -1,7 +1,7 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2020-2022 Gemeente Utrecht
- * Copyright (c) 2020-2022 Frameless B.V.
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 import { h } from "@stencil/core";
 export class ColumnLayout {

package/dist/collection/components/column-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-layout.js","sourceRoot":"","sources":["../../src/components/column-layout.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,YAAY;;oBACkB,KAAK;;IAC9C,MAAM;QACJ,OAAO,8DAAa,CAAC;IACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-column-layout',\n  styleUrl: 'column-layout.scss',\n  shadow: true,\n})\nexport class ColumnLayout {\n  @Prop({ reflect: true }) rule: boolean = false;\n  render() {\n    return <slot></slot>;\n  }\n}\n"]}
+{"version":3,"file":"column-layout.js","sourceRoot":"","sources":["../../src/components/column-layout.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,YAAY;;oBACkB,KAAK;;IAC9C,MAAM;QACJ,OAAO,8DAAa,CAAC;IACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\nimport { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-column-layout',\n  styleUrl: 'column-layout.scss',\n  shadow: true,\n})\nexport class ColumnLayout {\n  @Prop({ reflect: true }) rule: boolean = false;\n  render() {\n    return <slot></slot>;\n  }\n}\n"]}

package/dist/collection/components/contact-card-template.css

@@ -1,29 +1,30 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable scss/no-global-function-names */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 The Knights Who Say NIH! B.V.
- * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable scss/no-global-function-names */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable-next-line block-no-empty */
 /*
@@ -110,16 +111,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-underline-offset: var(--utrecht-link-text-underline-offset);
 }
 
-.utrecht-link--icon-left {
-  background-image: var(--utrecht-link-icon-left-background-image, none);
-  background-position: 0 0.25em;
-  background-repeat: no-repeat;
-  color: var(--utrecht-link-color, LinkText);
-  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
-  padding-inline-start: var(--utrecht-space-block-md);
-  text-decoration-line: none;
-}
-
 .utrecht-link--visited {
   --_utrecht-link-forced-colors-color: visitedtext;
   --_utrecht-link-state-color: var(--utrecht-link-visited-color);
@@ -138,8 +129,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 .utrecht-link--focus {
   --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
   background-color: var(--utrecht-link-focus-background-color, transparent);
   text-decoration-skip: none;
   text-decoration-skip-ink: none;
@@ -161,18 +150,27 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
+  /*
+   * The following tokens are deprecated, but we keep them for backwards compatibility for now:
+   * 
+   * `--utrecht-link-focus-text-decoration`
+   * `--utrecht-link-focus-text-decoration-thickness`
+   */
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 
-/* `:focus` should only apply to links with `href`, not on disabled links */
-.utrecht-link--html-span:focus,
-.utrecht-link--html-a:any-link:focus {
-  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
-  --_utrecht-link-state-text-decoration: var(--utrecht-link-focus-text-decoration);
-  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-focus-text-decoration-thickness);
-  background-color: var(--utrecht-link-focus-background-color, transparent);
-  text-decoration-skip: none;
-  text-decoration-skip-ink: none;
+/* The `:focus-visible` styling for the focus should apply disabled links too, in case of `tabindex="0"` */
+.utrecht-link--html-span:focus-visible,
+.utrecht-link--html-a:focus-visible {
   /*
    * WCAG SC 2.4.12: Focus Not Obscured
    * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
@@ -188,14 +186,31 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
+  /*
+   * The following tokens are deprecated, but we keep them for backwards compatibility for now:
+   * 
+   * `--utrecht-link-focus-text-decoration`
+   * `--utrecht-link-focus-text-decoration-thickness`
+   */
+  --_utrecht-link-state-text-decoration: var(
+    --utrecht-link-focus-visible-text-decoration,
+    var(--utrecht-link-focus-text-decoration)
+  );
+  --_utrecht-link-state-text-decoration-thickness: var(
+    --utrecht-link-focus-visible-text-decoration-thickness,
+    var(--utrecht-link-focus-text-decoration-thickness)
+  );
   z-index: var(--utrecht-stack-focus-z-index, 1);
 }
 
-.utrecht-link--html-span:focus:not(:focus-visible),
-.utrecht-link--html-a:any-link:focus:not(:focus-visible) {
-  /* undo focus ring */
-  box-shadow: none;
-  outline-style: revert;
+/* `:focus` should only apply to links with `href`, not on disabled links */
+.utrecht-link--html-span:focus,
+.utrecht-link--html-a:any-link:focus {
+  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
+  background-color: var(--utrecht-link-focus-background-color, transparent);
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
 }
 
 .utrecht-link--html-span:active,
@@ -251,7 +266,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 .utrecht-contact-card {
   --utrecht-document-color: currentColor;

package/dist/collection/components/custom-checkbox.css

@@ -1,19 +1,22 @@
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
  * @license EUPL-1.2
- * Copyright (c) 2021 Gemeente Utrecht
- * Copyright (c) 2021 Robbert Broersma
+ * Copyright (c) 2020-2024 Frameless B.V.
+ * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /* stylelint-disable-next-line block-no-empty */
 .utrecht-checkbox--custom,
@@ -119,6 +122,7 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
 }
 
 .utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled,
@@ -162,6 +166,7 @@
   outline-offset: var(--utrecht-focus-outline-offset, revert);
   outline-style: var(--utrecht-focus-outline-style, revert);
   outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
 }
 .utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],
 .utrecht-custom-checkbox--html-input:invalid,