@utrecht/web-component-library-stencil 1.0.1 → 1.1.0

package/dist/components/button.js.map

@@ -1 +1 @@
-{"file":"button.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) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/button/css\";\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></slot>\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"button.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) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/button/css\";\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></slot>\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-button-group.js

@@ -1,18 +1,26 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
 
-const buttonGroupCss = ".utrecht-button-group{background-color:var(--utrecht-button-group-background-color);display:flex;flex-wrap:wrap;gap:var(--utrecht-button-group-inline-gap, 1em);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-start, 0));min-block-size:var(--utrecht-button-block-size);padding-block-end:var(--utrecht-button-group-padding-block-end);padding-block-start:var(--utrecht-button-group-padding-block-start)}.utrecht-button-group--distanced{--utrecht-space-around:1}.utrecht-button-group__link-button--horizontal,.utrecht-button-group--horizontal .utrecht-link-button,.utrecht-button-group:not(.utrecht-button-group--vertical) .utrecht-link-button{--utrecht-button-padding-inline-end:0;--utrecht-button-padding-inline-start:0}.utrecht-button-group--vertical{flex-direction:column;gap:var(--utrecht-button-group-block-gap, 1em)}:host{display:block}:host([hidden]){display:none !important}";
+const buttonGroupCss = ".utrecht-button-group{align-items:baseline;background-color:var(--utrecht-button-group-background-color);display:flex;flex-wrap:wrap;gap:var(--utrecht-button-group-inline-gap, 1em);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-button-group-margin-block-start, 0));min-block-size:var(--utrecht-button-block-size);padding-block-end:var(--utrecht-button-group-padding-block-end);padding-block-start:var(--utrecht-button-group-padding-block-start)}.utrecht-button-group--distanced{--utrecht-space-around:1}.utrecht-button-group__link-button--row,.utrecht-button-group--row .utrecht-link-button,.utrecht-button-group:not(.utrecht-button-group--column) .utrecht-link-button{--utrecht-button-padding-inline-end:0;--utrecht-button-padding-inline-start:0}.utrecht-button-group--column{flex-direction:column;gap:var(--utrecht-button-group-block-gap, 1em)}:host{display:block}:host([hidden]){display:none !important}";
 
 const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.direction = undefined;
   }
   render() {
-    return (h("div", { class: "utrecht-button-group" }, h("slot", null)));
+    const { direction } = this;
+    return (h("div", { class: clsx('utrecht-button-group', {
+        'utrecht-button-group--column': direction === 'column',
+        'utrecht-button-group--row': direction === 'row',
+      }) }, h("slot", null)));
   }
   static get style() { return buttonGroupCss; }
-}, [1, "utrecht-button-group"]);
+}, [1, "utrecht-button-group", {
+    "direction": [1]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/utrecht-button-group.js.map

@@ -1 +1 @@
-{"file":"utrecht-button-group.js","mappings":";;AAAA,MAAM,cAAc,GAAG,ygCAAygC;;MCanhC,WAAW;;;;;;EACtB,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC/B,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button-group.scss?tag=utrecht-button-group&encapsulation=shadow","src/components/button-group.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/button-group/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\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-button-group',\n  styleUrl: 'button-group.scss',\n  shadow: true,\n})\nexport class ButtonGroup {\n  render() {\n    return (\n      <div class=\"utrecht-button-group\">\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-button-group.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,4gCAA4gC;;MCcthC,WAAW;;;;;;;EAEtB,MAAM;IACJ,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,QACE,WACE,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAAE;QAClC,8BAA8B,EAAE,SAAS,KAAK,QAAQ;QACtD,2BAA2B,EAAE,SAAS,KAAK,KAAK;OACjD,CAAC,IAEF,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button-group.scss?tag=utrecht-button-group&encapsulation=shadow","src/components/button-group.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/button-group/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\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';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-button-group',\n  styleUrl: 'button-group.scss',\n  shadow: true,\n})\nexport class ButtonGroup {\n  @Prop() direction: string | 'column' | 'row';\n  render() {\n    const { direction } = this;\n    return (\n      <div\n        class={clsx('utrecht-button-group', {\n          'utrecht-button-group--column': direction === 'column',\n          'utrecht-button-group--row': direction === 'row',\n        })}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-button-link.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.m.js';
 
-const buttonLinkCss = ".utrecht-button-link{--_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-icon-size:var(--utrecht-button-icon-size, 1em);align-items:center;background-color:var(--_utrecht-button-background-color);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);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);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;cursor:var(--utrecht-action-navigate-cursor, pointer);text-decoration:none}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-button-link{--_utrecht-button-disabled-border-color:GrayText;--_utrecht-button-disabled-color:GrayText;background-color:ButtonFace;border-color:buttonborder;color:ButtonText;}}.utrecht-button-link--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-link--hover{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-link--focus{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-link--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)}.utrecht-button-link--placeholder{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-link--html-a:focus{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-link--html-a: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)}.utrecht-button-link--html-a:hover{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-link--html-a: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-link--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-weight:var(--utrecht-button-primary-action-font-weight);--_utrecht-button-appearance-disabled-background-color:var(\n    --utrecht-button-primary-action-disabled-background-color\n  );--_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-link--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-weight:var(--utrecht-button-secondary-action-font-weight);--_utrecht-button-appearance-disabled-background-color:var(\n    --utrecht-button-secondary-action-disabled-background-color\n  );--_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-link--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-weight:var(--utrecht-button-subtle-font-weight);--_utrecht-button-appearance-disabled-background-color:var(\n    --utrecht-button-subtle-disabled-background-color\n  );--_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)}:host{display:inline-flex}:host([hidden]){display:none !important}";
+const buttonLinkCss = ".utrecht-button-link{--_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-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);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);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;cursor:var(--utrecht-action-navigate-cursor, pointer);text-decoration:none}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-button-link{--_utrecht-button-disabled-border-color:GrayText;--_utrecht-button-disabled-color:GrayText;background-color:ButtonFace;border-color:buttonborder;color:ButtonText;}}.utrecht-button-link--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-link--hover{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-link--focus{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-link--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)}.utrecht-button-link--placeholder{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-link--html-a:focus{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-link--html-a: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)}.utrecht-button-link--html-a:hover{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-link--html-a: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-link--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-weight:var(--utrecht-button-primary-action-font-weight);--_utrecht-button-appearance-disabled-background-color:var(\n    --utrecht-button-primary-action-disabled-background-color\n  );--_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-link--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-weight:var(--utrecht-button-secondary-action-font-weight);--_utrecht-button-appearance-disabled-background-color:var(\n    --utrecht-button-secondary-action-disabled-background-color\n  );--_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-link--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-weight:var(--utrecht-button-subtle-font-weight);--_utrecht-button-appearance-disabled-background-color:var(\n    --utrecht-button-subtle-disabled-background-color\n  );--_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)}:host{display:inline-flex}:host([hidden]){display:none !important}";
 
 const ButtonLink = /*@__PURE__*/ proxyCustomElement(class ButtonLink extends HTMLElement {
   constructor() {
@@ -9,19 +9,23 @@ const ButtonLink = /*@__PURE__*/ proxyCustomElement(class ButtonLink extends HTM
     this.__registerHost();
     this.__attachShadow();
     this.appearance = undefined;
+    this.download = undefined;
     this.external = undefined;
     this.href = undefined;
     this.placeholder = undefined;
+    this.target = undefined;
   }
   render() {
-    return (h("a", { href: typeof this.href === 'string' && !this.placeholder ? this.href : undefined, class: clsx('utrecht-button-link', 'utrecht-button-link--html-a', this.external && 'utrecht-button-link--external', this.placeholder && 'utrecht-button-link--placeholder', this.appearance === 'primary-action-button' && 'utrecht-button-link--primary-action', this.appearance === 'secondary-action-button' && 'utrecht-button-link--secondary-action', this.appearance === 'subtle-button' && 'utrecht-button-link--subtle'), "aria-disabled": this.placeholder ? 'true' : undefined, rel: this.external ? 'external noopener noreferrer' : undefined, role: this.placeholder ? 'link' : undefined }, h("slot", null)));
+    return (h("a", { href: typeof this.href === 'string' && !this.placeholder ? this.href : undefined, class: clsx('utrecht-button-link', 'utrecht-button-link--html-a', this.external && 'utrecht-button-link--external', this.placeholder && 'utrecht-button-link--placeholder', this.appearance === 'primary-action-button' && 'utrecht-button-link--primary-action', this.appearance === 'secondary-action-button' && 'utrecht-button-link--secondary-action', this.appearance === 'subtle-button' && 'utrecht-button-link--subtle'), "aria-disabled": this.placeholder ? 'true' : undefined, download: typeof this.download === 'string' ? this.download : undefined, rel: this.external ? 'external noopener noreferrer' : undefined, role: this.placeholder ? 'link' : undefined, target: typeof this.target === 'string' ? this.target : undefined }, h("slot", null)));
   }
   static get style() { return buttonLinkCss; }
 }, [1, "utrecht-button-link", {
     "appearance": [1],
+    "download": [1],
     "external": [4],
     "href": [1],
-    "placeholder": [4]
+    "placeholder": [4],
+    "target": [1]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/utrecht-button-link.js.map

@@ -1 +1 @@
-{"file":"utrecht-button-link.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,yohBAAyohB;;MCclphB,UAAU;;;;;;;;;;EAKrB,MAAM;IACJ,QACE,SACE,IAAI,EAAE,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EAChF,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,6BAA6B,EAC7B,IAAI,CAAC,QAAQ,IAAI,+BAA+B,EAChD,IAAI,CAAC,WAAW,IAAI,kCAAkC,EACtD,IAAI,CAAC,UAAU,KAAK,uBAAuB,IAAI,qCAAqC,EACpF,IAAI,CAAC,UAAU,KAAK,yBAAyB,IAAI,uCAAuC,EACxF,IAAI,CAAC,UAAU,KAAK,eAAe,IAAI,6BAA6B,CACrE,mBACc,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,SAAS,EACpD,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAG,8BAA8B,GAAG,SAAS,EAC/D,IAAI,EAAE,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,SAAS,IAE3C,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button-link.scss?tag=utrecht-button-link&encapsulation=shadow","src/components/button-link.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/button-link/css\";\n\n:host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\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';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-button-link',\n  styleUrl: 'button-link.scss',\n  shadow: true,\n})\nexport class ButtonLink {\n  @Prop() appearance: string;\n  @Prop() external: boolean;\n  @Prop() href: string;\n  @Prop() placeholder: boolean;\n  render() {\n    return (\n      <a\n        href={typeof this.href === 'string' && !this.placeholder ? this.href : undefined}\n        class={clsx(\n          'utrecht-button-link',\n          'utrecht-button-link--html-a',\n          this.external && 'utrecht-button-link--external',\n          this.placeholder && 'utrecht-button-link--placeholder',\n          this.appearance === 'primary-action-button' && 'utrecht-button-link--primary-action',\n          this.appearance === 'secondary-action-button' && 'utrecht-button-link--secondary-action',\n          this.appearance === 'subtle-button' && 'utrecht-button-link--subtle',\n        )}\n        aria-disabled={this.placeholder ? 'true' : undefined}\n        rel={this.external ? 'external noopener noreferrer' : undefined}\n        role={this.placeholder ? 'link' : undefined}\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-button-link.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,muhBAAmuhB;;MCc5uhB,UAAU;;;;;;;;;;;;EAOrB,MAAM;IACJ,QACE,SACE,IAAI,EAAE,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EAChF,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,6BAA6B,EAC7B,IAAI,CAAC,QAAQ,IAAI,+BAA+B,EAChD,IAAI,CAAC,WAAW,IAAI,kCAAkC,EACtD,IAAI,CAAC,UAAU,KAAK,uBAAuB,IAAI,qCAAqC,EACpF,IAAI,CAAC,UAAU,KAAK,yBAAyB,IAAI,uCAAuC,EACxF,IAAI,CAAC,UAAU,KAAK,eAAe,IAAI,6BAA6B,CACrE,mBACc,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,SAAS,EACpD,QAAQ,EAAE,OAAO,IAAI,CAAC,QAAQ,KAAK,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EACvE,GAAG,EAAE,IAAI,CAAC,QAAQ,GAAG,8BAA8B,GAAG,SAAS,EAC/D,IAAI,EAAE,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,SAAS,EAC3C,MAAM,EAAE,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,IAEjE,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button-link.scss?tag=utrecht-button-link&encapsulation=shadow","src/components/button-link.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/button-link/css\";\n\n:host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\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';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-button-link',\n  styleUrl: 'button-link.scss',\n  shadow: true,\n})\nexport class ButtonLink {\n  @Prop() appearance: string;\n  @Prop() download?: string;\n  @Prop() external: boolean;\n  @Prop() href: string;\n  @Prop() placeholder: boolean;\n  @Prop() target?: string;\n  render() {\n    return (\n      <a\n        href={typeof this.href === 'string' && !this.placeholder ? this.href : undefined}\n        class={clsx(\n          'utrecht-button-link',\n          'utrecht-button-link--html-a',\n          this.external && 'utrecht-button-link--external',\n          this.placeholder && 'utrecht-button-link--placeholder',\n          this.appearance === 'primary-action-button' && 'utrecht-button-link--primary-action',\n          this.appearance === 'secondary-action-button' && 'utrecht-button-link--secondary-action',\n          this.appearance === 'subtle-button' && 'utrecht-button-link--subtle',\n        )}\n        aria-disabled={this.placeholder ? 'true' : undefined}\n        download={typeof this.download === 'string' ? this.download : undefined}\n        rel={this.external ? 'external noopener noreferrer' : undefined}\n        role={this.placeholder ? 'link' : undefined}\n        target={typeof this.target === 'string' ? this.target : undefined}\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-form-field-textarea.js

@@ -4,6 +4,8 @@ import { d as defineCustomElement$2 } from './form-field-description.js';
 
 const formFieldTextareaCss = ".utrecht-form-field{break-inside:avoid;font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width, 0);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field-description{--utrecht-document-color:currentColor;color:var(--utrecht-form-field-description-color);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-form-field-description-font-size, inherit);font-style:var(--utrecht-form-field-description-font-style);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)))}.utrecht-form-field-description>*{--utrecht-space-around:1}.utrecht-form-field-description--distanced{--utrecht-space-around:1}.utrecht-form-field-description--invalid{color:var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)))}.utrecht-form-field-description--valid{color:var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)))}.utrecht-form-field-description--warning{color:var(--utrecht-form-field-description-warning-color, var(--utrecht-feedback-warning-color))}.utrecht-textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));block-size:initial;border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textarea-border-bottom-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));border-color:var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textarea-color, var(--utrecht-form-control-color));font-family:var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:initial;inline-size:100%;line-height:var(--utrecht-textarea-line-height, initial);max-inline-size:var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));min-block-size:var(--utrecht-textarea-min-block-size);padding-block-end:var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));padding-inline-end:var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));resize:vertical;resize:block}.utrecht-textarea--invalid{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));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--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))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-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))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--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)}.utrecht-textarea--read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, 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__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textarea--html-textarea{}.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))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));--_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)}.utrecht-textarea--html-textarea:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );background-color:var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textarea-border-width);border-block-end-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));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:read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, 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: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))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
 
+const HTML_DEFAULT_COLS = 20;
+const HTML_DEFAULT_ROWS = 2;
 const FormFieldTextarea = /*@__PURE__*/ proxyCustomElement(class FormFieldTextarea extends HTMLElement {
   constructor() {
     super();
@@ -13,6 +15,7 @@ const FormFieldTextarea = /*@__PURE__*/ proxyCustomElement(class FormFieldTextar
     this.utrechtChange = createEvent(this, "utrechtChange", 7);
     this.utrechtFocus = createEvent(this, "utrechtFocus", 7);
     this.utrechtInput = createEvent(this, "utrechtInput", 7);
+    this.cols = HTML_DEFAULT_COLS;
     this.disabled = false;
     this.invalid = false;
     this.label = '';
@@ -20,10 +23,11 @@ const FormFieldTextarea = /*@__PURE__*/ proxyCustomElement(class FormFieldTextar
     this.readOnly = false;
     this.placeholder = '';
     this.required = false;
+    this.rows = HTML_DEFAULT_ROWS;
     this.value = '';
   }
   render() {
-    const { disabled, hostElement, invalid, label, name, placeholder, readOnly, required, value } = this;
+    const { cols, disabled, hostElement, invalid, label, name, placeholder, readOnly, required, rows, value } = this;
     let input = hostElement.querySelector('input[type="hidden"]');
     if (input && !name) {
       input.parentNode.removeChild(input);
@@ -41,7 +45,7 @@ const FormFieldTextarea = /*@__PURE__*/ proxyCustomElement(class FormFieldTextar
         'utrecht-form-field--invalid': invalid,
       }) }, h("p", { class: "utrecht-form-field__label" }, h("label", { class: clsx('utrecht-form-label', {
         'utrecht-form-label--disabled': disabled,
-      }), htmlFor: "input" }, label, h("slot", { name: "label" }))), h("utrecht-form-field-description", { id: "description" }, h("slot", { name: "description" })), h("p", { class: "utrecht-form-field__input" }, h("textarea", { id: "input", class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), "aria-invalid": invalid, disabled: disabled, placeholder: placeholder || null, readonly: readOnly, required: required, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+      }), htmlFor: "input" }, label, h("slot", { name: "label" }))), h("utrecht-form-field-description", { id: "description" }, h("slot", { name: "description" })), h("p", { class: "utrecht-form-field__input" }, h("textarea", { id: "input", class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), "aria-invalid": invalid, cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, placeholder: placeholder || null, readonly: readOnly, required: required, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
         this.value = evt.target.value;
         this.utrechtInput.emit(evt);
       } }, value)), invalid && (h("utrecht-form-field-description", { status: "invalid", class: "utrecht-form-field__error-message", id: "error-message" }, h("slot", { name: "error-message" }))), h("div", { class: "utrecht-form-field__status", id: "status" }, h("div", { class: "utrecht-form-field-description utrecht-form-field-description--status" }, h("slot", { name: "status" })))));
@@ -49,6 +53,7 @@ const FormFieldTextarea = /*@__PURE__*/ proxyCustomElement(class FormFieldTextar
   get hostElement() { return this; }
   static get style() { return formFieldTextareaCss; }
 }, [1, "utrecht-form-field-textarea", {
+    "cols": [2],
     "disabled": [516],
     "invalid": [516],
     "label": [1],
@@ -56,6 +61,7 @@ const FormFieldTextarea = /*@__PURE__*/ proxyCustomElement(class FormFieldTextar
     "readOnly": [516, "readonly"],
     "placeholder": [1],
     "required": [516],
+    "rows": [2],
     "value": [1]
   }]);
 function defineCustomElement$1() {

package/dist/components/utrecht-form-field-textarea.js.map

@@ -1 +1 @@
-{"file":"utrecht-form-field-textarea.js","mappings":"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","names":[],"sources":["src/components/form-field-textarea.scss?tag=utrecht-form-field-textarea&encapsulation=shadow","src/components/form-field-textarea.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-field/css\";\n@import \"~@utrecht/components/form-label/css\";\n@import \"~@utrecht/components/form-field-description/css\";\n@import \"~@utrecht/components/textarea/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-form-field-textarea',\n  styleUrl: 'form-field-textarea.scss',\n  shadow: true,\n})\nexport class FormFieldTextarea {\n  @Element() hostElement!: HTMLElement;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() label: string = '';\n  @Prop() name: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop() placeholder: string = '';\n  @Prop({ reflect: true }) required: 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 { disabled, hostElement, invalid, label, name, placeholder, readOnly, required, value } = this;\n\n    let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n    if (input && !name) {\n      input.parentNode.removeChild(input);\n    }\n\n    if (!input && name) {\n      input = hostElement.ownerDocument.createElement('input');\n      input.type = 'hidden';\n      hostElement.appendChild(input);\n    }\n\n    if (input && name) {\n      input.name = name;\n      input.value = value || '';\n    }\n\n    return (\n      <div\n        class={clsx('utrecht-form-field', 'utrecht-form-field--textbox', {\n          'utrecht-form-field--invalid': invalid,\n        })}\n      >\n        <p class=\"utrecht-form-field__label\">\n          <label\n            class={clsx('utrecht-form-label', {\n              'utrecht-form-label--disabled': disabled,\n            })}\n            htmlFor=\"input\"\n          >\n            {label}\n            <slot name=\"label\"></slot>\n          </label>\n        </p>\n        <utrecht-form-field-description id=\"description\">\n          <slot name=\"description\"></slot>\n        </utrecht-form-field-description>\n        <p class=\"utrecht-form-field__input\">\n          <textarea\n            id=\"input\"\n            class={clsx(\n              'utrecht-textarea',\n              'utrecht-textarea--html-textarea',\n              disabled && 'utrecht-textarea--disabled',\n              invalid && 'utrecht-textarea--invalid',\n              readOnly && 'utrecht-textarea--readonly',\n            )}\n            aria-invalid={invalid}\n            disabled={disabled}\n            placeholder={placeholder || null}\n            readonly={readOnly}\n            required={required}\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.value = (evt.target as HTMLTextAreaElement).value;\n              this.utrechtInput.emit(evt);\n            }}\n          >\n            {value}\n          </textarea>\n        </p>\n        {invalid && (\n          <utrecht-form-field-description status=\"invalid\" class=\"utrecht-form-field__error-message\" id=\"error-message\">\n            <slot name=\"error-message\"></slot>\n          </utrecht-form-field-description>\n        )}\n        <div class=\"utrecht-form-field__status\" id=\"status\">\n          <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n            <slot name=\"status\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-form-field-textarea.js","mappings":"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","names":[],"sources":["src/components/form-field-textarea.scss?tag=utrecht-form-field-textarea&encapsulation=shadow","src/components/form-field-textarea.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/form-field/css\";\n@import \"~@utrecht/components/form-label/css\";\n@import \"~@utrecht/components/form-field-description/css\";\n@import \"~@utrecht/components/textarea/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nconst HTML_DEFAULT_COLS = 20;\nconst HTML_DEFAULT_ROWS = 2;\n\n@Component({\n  tag: 'utrecht-form-field-textarea',\n  styleUrl: 'form-field-textarea.scss',\n  shadow: true,\n})\nexport class FormFieldTextarea {\n  @Element() hostElement!: HTMLElement;\n  @Prop() cols: number = HTML_DEFAULT_COLS;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() label: string = '';\n  @Prop() name: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop() placeholder: string = '';\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() rows: number = HTML_DEFAULT_ROWS;\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 { cols, disabled, hostElement, invalid, label, name, placeholder, readOnly, required, rows, value } = this;\n\n    let input = hostElement.querySelector('input[type=\"hidden\"]') as HTMLInputElement | null;\n\n    if (input && !name) {\n      input.parentNode.removeChild(input);\n    }\n\n    if (!input && name) {\n      input = hostElement.ownerDocument.createElement('input');\n      input.type = 'hidden';\n      hostElement.appendChild(input);\n    }\n\n    if (input && name) {\n      input.name = name;\n      input.value = value || '';\n    }\n\n    return (\n      <div\n        class={clsx('utrecht-form-field', 'utrecht-form-field--textbox', {\n          'utrecht-form-field--invalid': invalid,\n        })}\n      >\n        <p class=\"utrecht-form-field__label\">\n          <label\n            class={clsx('utrecht-form-label', {\n              'utrecht-form-label--disabled': disabled,\n            })}\n            htmlFor=\"input\"\n          >\n            {label}\n            <slot name=\"label\"></slot>\n          </label>\n        </p>\n        <utrecht-form-field-description id=\"description\">\n          <slot name=\"description\"></slot>\n        </utrecht-form-field-description>\n        <p class=\"utrecht-form-field__input\">\n          <textarea\n            id=\"input\"\n            class={clsx(\n              'utrecht-textarea',\n              'utrecht-textarea--html-textarea',\n              disabled && 'utrecht-textarea--disabled',\n              invalid && 'utrecht-textarea--invalid',\n              readOnly && 'utrecht-textarea--readonly',\n            )}\n            aria-invalid={invalid}\n            cols={cols !== HTML_DEFAULT_COLS ? cols : null}\n            disabled={disabled}\n            placeholder={placeholder || null}\n            readonly={readOnly}\n            required={required}\n            rows={rows !== HTML_DEFAULT_ROWS ? rows : null}\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.value = (evt.target as HTMLTextAreaElement).value;\n              this.utrechtInput.emit(evt);\n            }}\n          >\n            {value}\n          </textarea>\n        </p>\n        {invalid && (\n          <utrecht-form-field-description status=\"invalid\" class=\"utrecht-form-field__error-message\" id=\"error-message\">\n            <slot name=\"error-message\"></slot>\n          </utrecht-form-field-description>\n        )}\n        <div class=\"utrecht-form-field__status\" id=\"status\">\n          <div class=\"utrecht-form-field-description utrecht-form-field-description--status\">\n            <slot name=\"status\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}