@utrecht/web-component-library-stencil 4.0.0 → 4.1.1

package/dist/collection/components/textarea.css

@@ -3,20 +3,36 @@
  * 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) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* TODO: Enable ordering properties when the plugin supports logical CSS properties
  * https://github.com/hudochenkov/stylelint-order/pull/162 */
 /* stylelint-disable order/properties-alphabetical-order */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 .utrecht-textarea {
   /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
   background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
@@ -99,14 +115,6 @@
   opacity: 100%;
 }
 
-.utrecht-textarea--html-textarea {
-  /* The `textarea:read-only` pseudo selector applies to both `<textarea readonly>` and `<textarea disabled>` */
-  /*
-   * The `textarea:disabled` pseudo selector applies to `<textarea disabled>`, but not to `<textarea aria-disabled="true">`
-   *
-   * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
-   */
-}
 .utrecht-textarea--html-textarea:focus {
   background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
@@ -140,11 +148,21 @@
   border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
+.utrecht-textarea--html-textarea {
+  /* The `textarea:read-only` pseudo selector applies to both `<textarea readonly>` and `<textarea disabled>` */
+}
 .utrecht-textarea--html-textarea:read-only {
   background-color: var(--utrecht-textarea-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
+.utrecht-textarea--html-textarea {
+  /*
+   * The `textarea:disabled` pseudo selector applies to `<textarea disabled>`, but not to `<textarea aria-disabled="true">`
+   *
+   * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
+   */
+}
 .utrecht-textarea--html-textarea:disabled {
   background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
@@ -157,11 +175,6 @@
   opacity: 100%;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/textbox.css

@@ -3,20 +3,36 @@
  * 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) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* TODO: Enable ordering properties when the plugin supports logical CSS properties
  * https://github.com/hudochenkov/stylelint-order/pull/162 */
 /* stylelint-disable order/properties-alphabetical-order */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 .utrecht-textbox {
   /* The average character inline-size is an approximation, with a default that works for Dutch text.
    * The average might need to be configured specifically, for other scripts (CJK characters)
@@ -26,11 +42,11 @@
   --_utrecht-textbox-value-char: 0.667em + 0.334ch;
   /* Because this element uses `border-box` box-sizing, we need to manually add up the
     * border width, padding width and the content width.
-    * 
+    *
     * Browsers and browser addons can add buttons inside the content box, for example
     * for autocomplete. To avoid overlap between the UI and the text, we reserve
     * some additional pixels to make space. We use 44px in accordance with the WCAG target size.
-    * 
+    *
     * When you are certain an element has no such UI, you can set the `autocomplete-ui-size` to `0px` (not to `0`).
     */
   --_utrecht-textbox-max-inline-size: calc(
@@ -49,6 +65,7 @@
   border-style: solid;
   box-sizing: border-box;
   color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
+  display: block;
   font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
   font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial)); /* harden with `initial` */
@@ -57,10 +74,12 @@
   min-block-size: var(--utrecht-pointer-target-min-size, 44px);
   min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
   max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
+  overflow: hidden;
   padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
   padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
   padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
   padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
+  white-space: nowrap;
 }
 
 .utrecht-textbox--invalid {
@@ -197,14 +216,6 @@
   font-variant-ligatures: none;
 }
 
-.utrecht-textbox--html-input {
-  /* The `input:read-only` pseudo selector applies to both `<input readonly>` and `<input disabled>` */
-  /*
-   * The `input:disabled` pseudo selector applies to `<input disabled>`, but not to `<input aria-disabled="true">`
-   *
-   * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
-   */
-}
 .utrecht-textbox--html-input:focus {
   background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
@@ -238,11 +249,21 @@
   border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }
+.utrecht-textbox--html-input {
+  /* The `input:read-only` pseudo selector applies to both `<input readonly>` and `<input disabled>` */
+}
 .utrecht-textbox--html-input:read-only {
   background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }
+.utrecht-textbox--html-input {
+  /*
+   * The `input:disabled` pseudo selector applies to `<input disabled>`, but not to `<input aria-disabled="true">`
+   *
+   * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
+   */
+}
 .utrecht-textbox--html-input:disabled {
   background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
@@ -266,11 +287,6 @@
   font-variant-numeric: lining-nums tabular-nums;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/top-task-link.css

@@ -3,11 +3,22 @@
  * 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) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
+ */
+/* Override the browser focus ring with our own focus ring.
+ * Use `:where()` so the CSS selector specificity is `0,0,0`.
  */
 .utrecht-toptask-link {
   --utrecht-icon-color: currentColor;
@@ -66,11 +77,6 @@
   padding-inline-end: var(--utrecht-space-inline-md);
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/top-task-nav.css

@@ -3,6 +3,11 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 .utrecht-toptask-nav {
   display: flex;
   flex-direction: column;
@@ -15,11 +20,6 @@
   flex-direction: row;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/url-data.css

@@ -5,10 +5,15 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 .utrecht-url-data {
   /**
    * `break-inside`: avoid spreading the URL over two columns.
@@ -37,14 +42,8 @@
   font-variant-ligatures: none;
   hyphens: none;
   overflow-wrap: anywhere;
-  page-break-inside: avoid;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: inline;
 }

package/dist/components/index.js

@@ -319,7 +319,7 @@ import { UtrechtTextbox } from './utrecht-textbox.js';
 import { UtrechtTopTaskLink } from './utrecht-top-task-link.js';
 import { UtrechtTopTaskNav } from './utrecht-top-task-nav.js';
 import { UtrechtUrlData } from './utrecht-url-data.js';
-export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-2f0ff193.js';
 
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {

package/dist/components/{paragraph.js → p-074337c4.js}

@@ -1,10 +1,10 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.js';
+import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
+import { c as clsx } from './p-e91d8a25.js';
 
 const paragraphCss = ".utrecht-paragraph{color:var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));font-family:var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));font-size:var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));font-weight:var(--utrecht-paragraph-font-weight, inherit);line-height:var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0))}.utrecht-paragraph--lead{color:var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));font-size:var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));font-weight:var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));line-height:var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit))}.utrecht-paragraph--small{color:var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));font-size:var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));font-weight:var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));line-height:var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit))}.utrecht-paragraph__small{font-size:inherit}.utrecht-paragraph__b{font-weight:inherit}.utrecht-paragraph--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
 const UtrechtParagraphStyle0 = paragraphCss;
 
-const Paragraph = /*@__PURE__*/ proxyCustomElement(class Paragraph extends HTMLElement {
+const Paragraph = /*@__PURE__*/ proxyCustomElement(class Paragraph extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -34,4 +34,4 @@ function defineCustomElement() {
 
 export { Paragraph as P, defineCustomElement as d };
 
-//# sourceMappingURL=paragraph.js.map
+//# sourceMappingURL=p-074337c4.js.map

package/dist/components/p-074337c4.js.map

@@ -0,0 +1 @@
+{"file":"p-074337c4.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,urDAAurD,CAAC;AAC7sD,+BAAe,YAAY;;MCOd,SAAS;;;;;;;IAMpB,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,IAAI,IAAI,yBAAyB,CAAC,IAC3E,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/paragraph.scss?tag=utrecht-paragraph&encapsulation=shadow","src/components/paragraph.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@use \"~@utrecht/paragraph-css/src\" as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-paragraph',\n  styleUrl: 'paragraph.scss',\n  shadow: true,\n})\nexport class Paragraph {\n  /**\n   * Lead paragraph\n   */\n  @Prop() lead: boolean;\n\n  render() {\n    return (\n      <div class={clsx('utrecht-paragraph', this.lead && 'utrecht-paragraph--lead')}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-145331fd.js

@@ -0,0 +1,143 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-2f0ff193.js';
+import { c as clsx } from './p-e91d8a25.js';
+
+const buttonCss = ".utrecht-button{--_utrecht-button-background-color:var(\n    --_utrecht-button-hint-background-color,\n    var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))\n  );--_utrecht-button-color:var(\n    --_utrecht-button-hint-color,\n    var(--_utrecht-button-appearance-color, var(--utrecht-button-color))\n  );--_utrecht-button-border-color:var(\n    --_utrecht-button-hint-border-color,\n    var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))\n  );--_utrecht-button-border-bottom-color:var(\n    --_utrecht-button-hint-border-bottom-color,\n    var(\n      --_utrecht-button-hint-border-color,\n      var(\n        --_utrecht-button-appearance-border-bottom-color,\n        var(\n          --_utrecht-button-appearance-border-color,\n          var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))\n        )\n      )\n    )\n  );--_utrecht-button-disabled-background-color:var(\n    --_utrecht-button-hint-disabled-background-color,\n    var(\n      --_utrecht-button-appearance-disabled-background-color,\n      var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))\n    )\n  );--_utrecht-button-disabled-border-color:var(\n    --_utrecht-button-hint-disabled-border-color,\n    var(\n      --_utrecht-button-appearance-disabled-border-color,\n      var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))\n    )\n  );--_utrecht-button-disabled-color:var(\n    --_utrecht-button-hint-disabled-color,\n    var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))\n  );--_utrecht-button-pressed-background-color:var(\n    --_utrecht-button-hint-pressed-background-color,\n    var(\n      --_utrecht-button-hint-background-color,\n      var(\n        --_utrecht-button-appearance-pressed-background-color,\n        var(\n          --_utrecht-button-appearance-background-color,\n          var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))\n        )\n      )\n    )\n  );--_utrecht-button-pressed-border-color:var(\n    --_utrecht-button-hint-pressed-border-color,\n    var(\n      --_utrecht-button-hint-border-color,\n      var(\n        --_utrecht-button-appearance-pressed-border-color,\n        var(\n          --_utrecht-button-appearance-border-color,\n          var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))\n        )\n      )\n    )\n  );--_utrecht-button-pressed-color:var(\n    --_utrecht-button-hint-pressed-color,\n    var(\n      --_utrecht-button-hint-color,\n      var(\n        --_utrecht-button-appearance-pressed-color,\n        var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))\n      )\n    )\n  );--_utrecht-button-focus-background-color:var(\n    --_utrecht-button-hint-focus-background-color,\n    var(\n      --_utrecht-button-hint-background-color,\n      var(\n        --_utrecht-button-appearance-focus-background-color,\n        var(\n          --_utrecht-button-appearance-background-color,\n          var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))\n        )\n      )\n    )\n  );--_utrecht-button-focus-border-color:var(\n    --_utrecht-button-hint-focus-border-color,\n    var(\n      --_utrecht-button-hint-border-color,\n      var(\n        --_utrecht-button-appearance-focus-border-color,\n        var(\n          --_utrecht-button-appearance-border-color,\n          var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))\n        )\n      )\n    )\n  );--_utrecht-button-focus-color:var(\n    --_utrecht-button-hint-focus-color,\n    var(\n      --_utrecht-button-hint-color,\n      var(\n        --_utrecht-button-appearance-focus-color,\n        var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))\n      )\n    )\n  );--_utrecht-button-hover-background-color:var(\n    --_utrecht-button-hint-hover-background-color,\n    var(\n      --_utrecht-button-hint-background-color,\n      var(\n        --_utrecht-button-appearance-hover-background-color,\n        var(\n          --_utrecht-button-appearance-background-color,\n          var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))\n        )\n      )\n    )\n  );--_utrecht-button-hover-border-color:var(\n    --_utrecht-button-hint-hover-border-color,\n    var(\n      --_utrecht-button-hint-border-color,\n      var(\n        --_utrecht-button-appearance-hover-border-color,\n        var(\n          --_utrecht-button-appearance-border-color,\n          var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))\n        )\n      )\n    )\n  );--_utrecht-button-hover-color:var(\n    --_utrecht-button-hint-hover-color,\n    var(\n      --_utrecht-button-hint-color,\n      var(\n        --_utrecht-button-appearance-hover-color,\n        var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))\n      )\n    )\n  );--_utrecht-button-active-background-color:var(\n    --_utrecht-button-hint-active-background-color,\n    var(\n      --_utrecht-button-hint-background-color,\n      var(\n        --_utrecht-button-appearance-active-background-color,\n        var(\n          --_utrecht-button-appearance-background-color,\n          var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))\n        )\n      )\n    )\n  );--_utrecht-button-active-border-color:var(\n    --_utrecht-button-hint-active-border-color,\n    var(\n      --_utrecht-button-hint-border-color,\n      var(\n        --_utrecht-button-appearance-active-border-color,\n        var(\n          --_utrecht-button-appearance-border-color,\n          var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))\n        )\n      )\n    )\n  );--_utrecht-button-active-color:var(\n    --_utrecht-button-hint-active-color,\n    var(\n      --_utrecht-button-hint-color,\n      var(\n        --_utrecht-button-appearance-active-color,\n        var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))\n      )\n    )\n  );--_utrecht-button-border-width:var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));--_utrecht-button-border-block-end-width:var(\n    --utrecht-button-border-bottom-width,\n    var(--_utrecht-button-border-width, 0)\n  );--_utrecht-button-font-size:var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));--_utrecht-button-line-height:var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));--utrecht-icon-size:var(--utrecht-button-icon-size, 1em);align-items:center;background-color:var(--_utrecht-button-background-color);block-size:fit-content;border-block-end-color:var(--_utrecht-button-border-bottom-color);border-block-end-width:var(--_utrecht-button-border-block-end-width);border-color:var(--_utrecht-button-border-color);border-radius:var(--utrecht-button-border-radius);border-style:solid;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));inline-size:var(--utrecht-button-inline-size, auto);justify-content:var(--utrecht-button-justify-content, center);line-height:var(--_utrecht-button-line-height);max-inline-size:var(--utrecht-button-max-inline-size, fit-content);min-block-size:var(--utrecht-button-min-block-size, 44px);min-inline-size:var(--utrecht-button-min-inline-size, 44px);padding-block-end:var(--utrecht-button-padding-block-end);padding-block-start:var(--utrecht-button-padding-block-start);padding-inline-end:var(--utrecht-button-padding-inline-end);padding-inline-start:var(--utrecht-button-padding-inline-start);scale:1;text-transform:var(--utrecht-button-text-transform);-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-button{--_utrecht-button-disabled-border-color:GrayText;--_utrecht-button-disabled-color:GrayText;background-color:ButtonFace;border-color:buttonborder;color:ButtonText;}}.utrecht-button--distanced{margin-block-end:var(--utrecht-button-margin-block-end);margin-block-start:var(--utrecht-button-margin-block-start);margin-inline-end:var(--utrecht-button-margin-inline-end);margin-inline-start:var(--utrecht-button-margin-inline-start)}.utrecht-button--submit{cursor:var(--utrecht-action-submit-cursor, revert)}.utrecht-button--busy{cursor:var(--utrecht-action-busy-cursor, wait)}.utrecht-button--pressed{background-color:var(--_utrecht-button-pressed-background-color);border-color:var(--_utrecht-button-pressed-border-color);color:var(--_utrecht-button-pressed-color)}.utrecht-button:disabled,.utrecht-button--disabled{background-color:var(--_utrecht-button-disabled-background-color);border-color:var(--_utrecht-button-disabled-border-color);color:var(--_utrecht-button-disabled-color);cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-button--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    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);z-index:1}.utrecht-button--focus:not(.utrecht-button--disabled){background-color:var(--_utrecht-button-focus-background-color);border-color:var(--_utrecht-button-focus-border-color);color:var(--_utrecht-button-focus-color);scale:var(--utrecht-button-focus-scale, 1)}.utrecht-button:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    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);z-index:1}.utrecht-button:focus:not(:disabled,[aria-disabled=true],.utrecht-button--disabled){background-color:var(--_utrecht-button-focus-background-color);border-color:var(--_utrecht-button-focus-border-color);color:var(--_utrecht-button-focus-color);scale:var(--utrecht-button-focus-scale, 1)}.utrecht-button--hover:not(:disabled,.utrecht-button--disabled),.utrecht-button:hover:not(:disabled,[aria-disabled=true],.utrecht-button--disabled){background-color:var(--_utrecht-button-hover-background-color);border-color:var(--_utrecht-button-hover-border-color);color:var(--_utrecht-button-hover-color);scale:var(--utrecht-button-hover-scale, 1)}.utrecht-button:active:not(:disabled,[aria-disabled=true],.utrecht-button--disabled),.utrecht-button--active{background-color:var(--_utrecht-button-active-background-color);border-color:var(--_utrecht-button-active-border-color);color:var(--_utrecht-button-active-color)}.utrecht-button--primary-action{--_utrecht-button-appearance-active-background-color:var(--utrecht-button-primary-action-active-background-color);--_utrecht-button-appearance-active-border-color:var(--utrecht-button-primary-action-active-border-color);--_utrecht-button-appearance-active-color:var(--utrecht-button-primary-action-active-color);--_utrecht-button-appearance-background-color:var(--utrecht-button-primary-action-background-color);--_utrecht-button-appearance-border-color:var(--utrecht-button-primary-action-border-color);--_utrecht-button-appearance-border-width:var(--utrecht-button-primary-action-border-width);--_utrecht-button-appearance-color:var(--utrecht-button-primary-action-color);--_utrecht-button-appearance-font-size:var(--utrecht-button-primary-action-font-size);--_utrecht-button-appearance-font-weight:var(--utrecht-button-primary-action-font-weight);--_utrecht-button-appearance-line-height:var(--utrecht-button-primary-action-line-height);--_utrecht-button-appearance-disabled-background-color:var(--utrecht-button-primary-action-disabled-background-color);--_utrecht-button-appearance-disabled-border-color:var(--utrecht-button-primary-action-disabled-border-color);--_utrecht-button-appearance-disabled-color:var(--utrecht-button-primary-action-disabled-color);--_utrecht-button-appearance-focus-background-color:var(--utrecht-button-primary-action-focus-background-color);--_utrecht-button-appearance-focus-border-color:var(--utrecht-button-primary-action-focus-border-color);--_utrecht-button-appearance-focus-color:var(--utrecht-button-primary-action-focus-color);--_utrecht-button-appearance-hover-background-color:var(--utrecht-button-primary-action-hover-background-color);--_utrecht-button-appearance-hover-border-color:var(--utrecht-button-primary-action-hover-border-color);--_utrecht-button-appearance-hover-color:var(--utrecht-button-primary-action-hover-color);--_utrecht-button-appearance-pressed-background-color:var(--utrecht-button-primary-action-pressed-background-color);--_utrecht-button-appearance-pressed-border-color:var(--utrecht-button-primary-action-pressed-border-color);--_utrecht-button-appearance-pressed-color:var(--utrecht-button-primary-action-pressed-color)}.utrecht-button--secondary-action{--_utrecht-button-appearance-active-background-color:var(--utrecht-button-secondary-action-active-background-color);--_utrecht-button-appearance-active-border-color:var(--utrecht-button-secondary-action-active-border-color);--_utrecht-button-appearance-active-color:var(--utrecht-button-secondary-action-active-color);--_utrecht-button-appearance-background-color:var(--utrecht-button-secondary-action-background-color);--_utrecht-button-appearance-border-color:var(--utrecht-button-secondary-action-border-color);--_utrecht-button-appearance-border-width:var(--utrecht-button-secondary-action-border-width);--_utrecht-button-appearance-color:var(--utrecht-button-secondary-action-color);--_utrecht-button-appearance-font-size:var(--utrecht-button-secondary-action-font-size);--_utrecht-button-appearance-font-weight:var(--utrecht-button-secondary-action-font-weight);--_utrecht-button-appearance-line-height:var(--utrecht-button-secondary-action-line-height);--_utrecht-button-appearance-disabled-background-color:var(--utrecht-button-secondary-action-disabled-background-color);--_utrecht-button-appearance-disabled-border-color:var(--utrecht-button-secondary-action-disabled-border-color);--_utrecht-button-appearance-disabled-color:var(--utrecht-button-secondary-action-disabled-color);--_utrecht-button-appearance-focus-background-color:var(--utrecht-button-secondary-action-focus-background-color);--_utrecht-button-appearance-focus-border-color:var(--utrecht-button-secondary-action-focus-border-color);--_utrecht-button-appearance-focus-color:var(--utrecht-button-secondary-action-focus-color);--_utrecht-button-appearance-hover-background-color:var(--utrecht-button-secondary-action-hover-background-color);--_utrecht-button-appearance-hover-border-color:var(--utrecht-button-secondary-action-hover-border-color);--_utrecht-button-appearance-hover-color:var(--utrecht-button-secondary-action-hover-color);--_utrecht-button-appearance-pressed-background-color:var(--utrecht-button-secondary-action-pressed-background-color);--_utrecht-button-appearance-pressed-border-color:var(--utrecht-button-secondary-action-pressed-border-color);--_utrecht-button-appearance-pressed-color:var(--utrecht-button-secondary-action-pressed-color)}.utrecht-button--subtle{--_utrecht-button-appearance-active-background-color:var(--utrecht-button-subtle-active-background-color);--_utrecht-button-appearance-active-border-color:var(--utrecht-button-subtle-active-border-color);--_utrecht-button-appearance-active-color:var(--utrecht-button-subtle-active-color);--_utrecht-button-appearance-background-color:var(--utrecht-button-subtle-background-color);--_utrecht-button-appearance-border-color:var(--utrecht-button-subtle-border-color);--_utrecht-button-appearance-border-width:var(--utrecht-button-subtle-border-width);--_utrecht-button-appearance-color:var(--utrecht-button-subtle-color);--_utrecht-button-appearance-font-size:var(--utrecht-button-subtle-font-size);--_utrecht-button-appearance-font-weight:var(--utrecht-button-subtle-font-weight);--_utrecht-button-appearance-line-height:var(--utrecht-button-subtle-line-height);--_utrecht-button-appearance-disabled-background-color:var(--utrecht-button-subtle-disabled-background-color);--_utrecht-button-appearance-disabled-border-color:var(--utrecht-button-subtle-disabled-border-color);--_utrecht-button-appearance-disabled-color:var(--utrecht-button-subtle-disabled-color);--_utrecht-button-appearance-focus-background-color:var(--utrecht-button-subtle-focus-background-color);--_utrecht-button-appearance-focus-border-color:var(--utrecht-button-subtle-focus-border-color);--_utrecht-button-appearance-focus-color:var(--utrecht-button-subtle-focus-color);--_utrecht-button-appearance-hover-background-color:var(--utrecht-button-subtle-hover-background-color);--_utrecht-button-appearance-hover-border-color:var(--utrecht-button-subtle-hover-border-color);--_utrecht-button-appearance-hover-color:var(--utrecht-button-subtle-hover-color);--_utrecht-button-appearance-pressed-background-color:var(--utrecht-button-subtle-pressed-background-color);--_utrecht-button-appearance-pressed-border-color:var(--utrecht-button-subtle-pressed-border-color);--_utrecht-button-appearance-pressed-color:var(--utrecht-button-subtle-pressed-color)}.utrecht-button--primary-action.utrecht-button--danger{--_utrecht-button-hint-active-background-color:var(--utrecht-button-primary-action-danger-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-primary-action-danger-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-primary-action-danger-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-primary-action-danger-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-primary-action-danger-border-color);--_utrecht-button-hint-color:var(--utrecht-button-primary-action-danger-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-primary-action-danger-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-primary-action-danger-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-primary-action-danger-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-primary-action-danger-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-primary-action-danger-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-primary-action-danger-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-primary-action-danger-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-primary-action-danger-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-primary-action-danger-hover-color);--_utrecht-button-hint-pressed-background-color:var(\n    --utrecht-button-primary-action-danger-pressed-background-color\n  );--_utrecht-button-hint-pressed-border-color:var(--utrecht-button-primary-action-danger-pressed-border-color);--_utrecht-button-hint-pressed-color:var(--utrecht-button-primary-action-danger-pressed-color)}.utrecht-button--primary-action.utrecht-button--ready{--_utrecht-button-hint-active-background-color:var(--utrecht-button-primary-action-ready-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-primary-action-ready-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-primary-action-ready-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-primary-action-ready-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-primary-action-ready-border-color);--_utrecht-button-hint-color:var(--utrecht-button-primary-action-ready-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-primary-action-ready-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-primary-action-ready-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-primary-action-ready-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-primary-action-ready-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-primary-action-ready-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-primary-action-ready-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-primary-action-ready-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-primary-action-ready-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-primary-action-ready-hover-color);--_utrecht-button-hint-pressed-background-color:var(\n    --utrecht-button-primary-action-ready-pressed-background-color\n  );--_utrecht-button-hint-pressed-border-color:var(--utrecht-button-primary-action-ready-pressed-border-color);--_utrecht-button-hint-pressed-color:var(--utrecht-button-primary-action-ready-pressed-color)}.utrecht-button--primary-action.utrecht-button--warning{--_utrecht-button-hint-active-background-color:var(--utrecht-button-primary-action-warning-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-primary-action-warning-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-primary-action-warning-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-primary-action-warning-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-primary-action-warning-border-color);--_utrecht-button-hint-color:var(--utrecht-button-primary-action-warning-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-primary-action-warning-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-primary-action-warning-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-primary-action-warning-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-primary-action-warning-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-primary-action-warning-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-primary-action-warning-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-primary-action-warning-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-primary-action-warning-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-primary-action-warning-hover-color);--_utrecht-button-hint-pressed-background-color:var(\n    --utrecht-button-primary-action-warning-pressed-background-color\n  );--_utrecht-button-hint-pressed-border-color:var(--utrecht-button-primary-action-warning-pressed-border-color);--_utrecht-button-hint-pressed-color:var(--utrecht-button-primary-action-warning-pressed-color)}.utrecht-button--secondary-action.utrecht-button--danger{--_utrecht-button-hint-active-background-color:var(--utrecht-button-secondary-action-danger-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-secondary-action-danger-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-secondary-action-danger-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-secondary-action-danger-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-secondary-action-danger-border-color);--_utrecht-button-hint-color:var(--utrecht-button-secondary-action-danger-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-secondary-action-danger-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-secondary-action-danger-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-secondary-action-danger-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-secondary-action-danger-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-secondary-action-danger-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-secondary-action-danger-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-secondary-action-danger-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-secondary-action-danger-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-secondary-action-danger-hover-color);--_utrecht-button-hint-pressed-background-color:var(\n    --utrecht-button-secondary-action-danger-pressed-background-color\n  );--_utrecht-button-hint-pressed-border-color:var(--utrecht-button-secondary-action-danger-pressed-border-color);--_utrecht-button-hint-pressed-color:var(--utrecht-button-secondary-action-danger-pressed-color)}.utrecht-button--secondary-action.utrecht-button--ready{--_utrecht-button-hint-active-background-color:var(--utrecht-button-secondary-action-ready-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-secondary-action-ready-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-secondary-action-ready-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-secondary-action-ready-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-secondary-action-ready-border-color);--_utrecht-button-hint-color:var(--utrecht-button-secondary-action-ready-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-secondary-action-ready-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-secondary-action-ready-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-secondary-action-ready-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-secondary-action-ready-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-secondary-action-ready-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-secondary-action-ready-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-secondary-action-ready-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-secondary-action-ready-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-secondary-action-ready-hover-color);--_utrecht-button-hint-pressed-background-color:var(\n    --utrecht-button-secondary-action-ready-pressed-background-color\n  );--_utrecht-button-hint-pressed-border-color:var(--utrecht-button-secondary-action-ready-pressed-border-color);--_utrecht-button-hint-pressed-color:var(--utrecht-button-secondary-action-ready-pressed-color)}.utrecht-button--secondary-action.utrecht-button--warning{--_utrecht-button-hint-active-background-color:var(--utrecht-button-secondary-action-warning-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-secondary-action-warning-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-secondary-action-warning-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-secondary-action-warning-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-secondary-action-warning-border-color);--_utrecht-button-hint-color:var(--utrecht-button-secondary-action-warning-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-secondary-action-warning-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-secondary-action-warning-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-secondary-action-warning-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-secondary-action-warning-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-secondary-action-warning-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-secondary-action-warning-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-secondary-action-warning-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-secondary-action-warning-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-secondary-action-warning-hover-color);--_utrecht-button-hint-pressed-background-color:var(\n    --utrecht-button-secondary-action-warning-pressed-background-color\n  );--_utrecht-button-hint-pressed-border-color:var(--utrecht-button-secondary-action-warning-pressed-border-color);--_utrecht-button-hint-pressed-color:var(--utrecht-button-secondary-action-warning-pressed-color)}.utrecht-button--subtle.utrecht-button--danger{--_utrecht-button-hint-active-background-color:var(--utrecht-button-subtle-danger-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-subtle-danger-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-subtle-danger-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-subtle-danger-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-subtle-danger-border-color);--_utrecht-button-hint-color:var(--utrecht-button-subtle-danger-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-subtle-danger-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-subtle-danger-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-subtle-danger-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-subtle-danger-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-subtle-danger-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-subtle-danger-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-subtle-danger-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-subtle-danger-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-subtle-danger-hover-color);--_utrecht-button-hint-pressed-background-color:var(\n    --utrecht-button-subtle-danger-pressed-background-color\n  );--_utrecht-button-hint-pressed-border-color:var(--utrecht-button-subtle-danger-pressed-border-color);--_utrecht-button-hint-pressed-color:var(--utrecht-button-subtle-danger-pressed-color)}.utrecht-button--subtle.utrecht-button--ready{--_utrecht-button-hint-active-background-color:var(--utrecht-button-subtle-ready-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-subtle-ready-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-subtle-ready-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-subtle-ready-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-subtle-ready-border-color);--_utrecht-button-hint-color:var(--utrecht-button-subtle-ready-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-subtle-ready-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-subtle-ready-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-subtle-ready-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-subtle-ready-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-subtle-ready-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-subtle-ready-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-subtle-ready-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-subtle-ready-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-subtle-ready-hover-color);--_utrecht-button-hint-pressed-background-color:var(\n    --utrecht-button-subtle-ready-pressed-background-color\n  );--_utrecht-button-hint-pressed-border-color:var(--utrecht-button-subtle-ready-pressed-border-color);--_utrecht-button-hint-pressed-color:var(--utrecht-button-subtle-ready-pressed-color)}.utrecht-button--subtle.utrecht-button--warning{--_utrecht-button-hint-active-background-color:var(--utrecht-button-subtle-warning-active-background-color);--_utrecht-button-hint-active-border-color:var(--utrecht-button-subtle-warning-active-border-color);--_utrecht-button-hint-active-color:var(--utrecht-button-subtle-warning-active-color);--_utrecht-button-hint-background-color:var(--utrecht-button-subtle-warning-background-color);--_utrecht-button-hint-border-color:var(--utrecht-button-subtle-warning-border-color);--_utrecht-button-hint-color:var(--utrecht-button-subtle-warning-color);--_utrecht-button-hint-disabled-background-color:var(\n    --utrecht-button-subtle-warning-disabled-background-color\n  );--_utrecht-button-hint-disabled-border-color:var(--utrecht-button-subtle-warning-disabled-border-color);--_utrecht-button-hint-disabled-color:var(--utrecht-button-subtle-warning-disabled-color);--_utrecht-button-hint-focus-background-color:var(--utrecht-button-subtle-warning-focus-background-color);--_utrecht-button-hint-focus-border-color:var(--utrecht-button-subtle-warning-focus-border-color);--_utrecht-button-hint-focus-color:var(--utrecht-button-subtle-warning-focus-color);--_utrecht-button-hint-hover-background-color:var(--utrecht-button-subtle-warning-hover-background-color);--_utrecht-button-hint-hover-border-color:var(--utrecht-button-subtle-warning-hover-border-color);--_utrecht-button-hint-hover-color:var(--utrecht-button-subtle-warning-hover-color);--_utrecht-button-hint-pressed-background-color:var(\n    --utrecht-button-subtle-warning-pressed-background-color\n  );--_utrecht-button-hint-pressed-border-color:var(--utrecht-button-subtle-warning-pressed-border-color);--_utrecht-button-hint-pressed-color:var(--utrecht-button-subtle-warning-pressed-color)}:host{display:inline-block}:host([hidden]){display:none !important}";
+const UtrechtButtonStyle0 = buttonCss;
+
+const Button = /*@__PURE__*/ proxyCustomElement(class Button extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.utrechtRequestReset = createEvent(this, "utrechtRequestReset", 7);
+        this.utrechtRequestSubmit = createEvent(this, "utrechtRequestSubmit", 7);
+        this.appearance = undefined;
+        this.busy = undefined;
+        this.disabled = undefined;
+        this.expanded = undefined;
+        this.pressed = undefined;
+        this.form = undefined;
+        this.formAction = undefined;
+        this.formEnctype = undefined;
+        this.formMethod = undefined;
+        this.formNoValidate = undefined;
+        this.formTarget = undefined;
+        this.popoverTarget = undefined;
+        this.popoverTargetAction = undefined;
+        this.name = undefined;
+        this.value = undefined;
+        this.type = undefined;
+    }
+    render() {
+        const handleReset = () => {
+            var _a, _b;
+            const event = this.utrechtRequestReset.emit();
+            if (!event.defaultPrevented) {
+                (_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.reset();
+            }
+        };
+        const handleSubmit = () => {
+            var _a, _b;
+            const event = this.utrechtRequestSubmit.emit();
+            if (!event.defaultPrevented) {
+                (_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.closest('form')) === null || _b === void 0 ? void 0 : _b.requestSubmit();
+            }
+        };
+        const handleClick = () => {
+            if (this.type === 'reset') {
+                handleReset();
+            }
+            else if (this.type === 'submit') {
+                handleSubmit();
+            }
+            else {
+                const button = this.hostElement.querySelector('button[hidden]');
+                if (button) {
+                    button.click();
+                }
+            }
+        };
+        const { hostElement, expanded, pressed, name, value, form, formAction, formEnctype, formTarget, formNoValidate, formMethod, popoverTargetAction, popoverTarget, type, } = this;
+        let button = hostElement.querySelector('button[hidden]');
+        const needsButton = !!(name ||
+            form ||
+            formTarget ||
+            formEnctype ||
+            formMethod ||
+            formNoValidate ||
+            popoverTarget ||
+            popoverTargetAction ||
+            type === 'submit');
+        if (button && !needsButton) {
+            button.parentNode.removeChild(button);
+        }
+        if (!button && needsButton) {
+            button = hostElement.ownerDocument.createElement('button');
+            button.hidden = true;
+            button.tabIndex = -1;
+            button.ariaHidden = 'true';
+            hostElement.appendChild(button);
+        }
+        const setAttribute = (el, name, value) => {
+            if (typeof value === 'string') {
+                el.setAttribute(name, value);
+            }
+            else {
+                el.removeAttribute(name);
+            }
+        };
+        if (button) {
+            setAttribute(button, 'name', name);
+            setAttribute(button, 'type', type);
+            setAttribute(button, 'form', form);
+            setAttribute(button, 'formaction', formAction);
+            setAttribute(button, 'form', form);
+            setAttribute(button, 'formtarget', formTarget);
+            setAttribute(button, 'formenctype', formEnctype);
+            setAttribute(button, 'formmethod', formMethod);
+            setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);
+            setAttribute(button, 'popovertargetaction', popoverTargetAction);
+            setAttribute(button, 'popovertarget', popoverTarget);
+            setAttribute(button, 'type', type);
+            button.style.display = 'none';
+            button.value = value || '';
+        }
+        return (h("button", { key: 'f9a03c6eb1802e4c95f586b904d81efab6192bc4', 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: '60bbb545abd7474e87801bce05c50be6b44b3b34', name: "icon" }), h("span", { key: 'd6d6ccb23d86b266b0885104a5355f7a89d0c727', class: "utrecht-button__label" }, h("slot", { key: '0940dbf409384db621f3d7bb895e7f3546da9a19' }))));
+    }
+    get hostElement() { return this; }
+    static get style() { return UtrechtButtonStyle0; }
+}, [1, "utrecht-button", {
+        "appearance": [1],
+        "busy": [4],
+        "disabled": [4],
+        "expanded": [8],
+        "pressed": [8],
+        "form": [513, "readonly"],
+        "formAction": [513, "formaction"],
+        "formEnctype": [513, "formenctype"],
+        "formMethod": [513, "formmethod"],
+        "formNoValidate": [516, "formnovalidate"],
+        "formTarget": [513, "formtarget"],
+        "popoverTarget": [513, "popovertarget"],
+        "popoverTargetAction": [513, "popovertargetaction"],
+        "name": [1],
+        "value": [1],
+        "type": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["utrecht-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "utrecht-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Button);
+            }
+            break;
+    } });
+}
+
+export { Button as B, defineCustomElement as d };
+
+//# sourceMappingURL=p-145331fd.js.map

package/dist/components/p-145331fd.js.map

@@ -0,0 +1 @@
+{"file":"p-145331fd.js","mappings":"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","names":[],"sources":["src/components/button.scss?tag=utrecht-button&encapsulation=shadow","src/components/button.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n\n@use \"~@utrecht/button-css/src\" as *;\n\n:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","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"],"version":3}