@utrecht/web-component-library-stencil 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/dist/cjs/utrecht-alert_46.cjs.entry.js +8 -8
  2. package/dist/cjs/utrecht-alert_46.cjs.entry.js.map +1 -1
  3. package/dist/cjs/utrecht-form-field-error-message.cjs.entry.js +1 -1
  4. package/dist/cjs/utrecht-form-field-error-message.cjs.entry.js.map +1 -1
  5. package/dist/cjs/utrecht-html-content.cjs.entry.js +1 -1
  6. package/dist/cjs/utrecht-html-content.cjs.entry.js.map +1 -1
  7. package/dist/collection/components/badge-counter.css +2 -2
  8. package/dist/collection/components/button-link.css +14 -12
  9. package/dist/collection/components/button.css +14 -12
  10. package/dist/collection/components/document.css +2 -0
  11. package/dist/collection/components/form-field-checkbox.css +1 -1
  12. package/dist/collection/components/form-field-description.css +1 -0
  13. package/dist/collection/components/form-field-error-message.css +2 -0
  14. package/dist/collection/components/form-field-textarea.css +1 -1
  15. package/dist/collection/components/form-field-textbox.css +1 -1
  16. package/dist/collection/components/html-content.css +9 -4
  17. package/dist/components/button.js +1 -1
  18. package/dist/components/button.js.map +1 -1
  19. package/dist/components/form-field-description.js +1 -1
  20. package/dist/components/form-field-description.js.map +1 -1
  21. package/dist/components/utrecht-badge-counter.js +1 -1
  22. package/dist/components/utrecht-badge-counter.js.map +1 -1
  23. package/dist/components/utrecht-button-link.js +1 -1
  24. package/dist/components/utrecht-button-link.js.map +1 -1
  25. package/dist/components/utrecht-document.js +1 -1
  26. package/dist/components/utrecht-document.js.map +1 -1
  27. package/dist/components/utrecht-form-field-checkbox.js +1 -1
  28. package/dist/components/utrecht-form-field-checkbox.js.map +1 -1
  29. package/dist/components/utrecht-form-field-error-message.js +1 -1
  30. package/dist/components/utrecht-form-field-error-message.js.map +1 -1
  31. package/dist/components/utrecht-form-field-textarea.js +1 -1
  32. package/dist/components/utrecht-form-field-textarea.js.map +1 -1
  33. package/dist/components/utrecht-form-field-textbox.js +1 -1
  34. package/dist/components/utrecht-form-field-textbox.js.map +1 -1
  35. package/dist/components/utrecht-html-content.js +1 -1
  36. package/dist/components/utrecht-html-content.js.map +1 -1
  37. package/dist/esm/utrecht-alert_46.entry.js +8 -8
  38. package/dist/esm/utrecht-alert_46.entry.js.map +1 -1
  39. package/dist/esm/utrecht-form-field-error-message.entry.js +1 -1
  40. package/dist/esm/utrecht-form-field-error-message.entry.js.map +1 -1
  41. package/dist/esm/utrecht-html-content.entry.js +1 -1
  42. package/dist/esm/utrecht-html-content.entry.js.map +1 -1
  43. package/dist/utrecht/p-3232a7ac.entry.js +2 -0
  44. package/dist/utrecht/{p-a816cdd8.entry.js.map → p-3232a7ac.entry.js.map} +1 -1
  45. package/dist/utrecht/{p-8d3932ba.entry.js → p-b25e3a41.entry.js} +2 -2
  46. package/dist/utrecht/{p-8d3932ba.entry.js.map → p-b25e3a41.entry.js.map} +1 -1
  47. package/dist/utrecht/p-c9af3b00.entry.js +2 -0
  48. package/dist/utrecht/{p-cbd26357.entry.js.map → p-c9af3b00.entry.js.map} +1 -1
  49. package/dist/utrecht/utrecht.esm.js +1 -1
  50. package/package.json +11 -11
  51. package/dist/utrecht/p-a816cdd8.entry.js +0 -2
  52. package/dist/utrecht/p-cbd26357.entry.js +0 -2
package/dist/collection/components/html-content.css CHANGED
@@ -673,6 +673,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
673
673
  --utrecht-button-border-bottom-width,
674
674
  var(--_utrecht-button-border-width, 0)
675
675
  );
676
+ --_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));
677
+ --_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));
676
678
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
677
679
  align-items: center;
678
680
  background-color: var(--_utrecht-button-background-color);
@@ -687,13 +689,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
687
689
  color: var(--_utrecht-button-color);
688
690
  cursor: var(--utrecht-action-activate-cursor, revert);
689
691
  display: inline-flex;
690
- font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
691
- font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
692
+ font-family: var(--_utrecht-button-font-family, var(--utrecht-document-font-family));
693
+ font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
692
694
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
693
695
  gap: var(--utrecht-button-icon-gap);
694
696
  inline-size: var(--utrecht-button-inline-size, auto);
695
697
  justify-content: center;
696
- line-height: var(--utrecht-button-line-height);
698
+ line-height: var(--_utrecht-button-line-height);
697
699
  max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
698
700
  min-block-size: var(--utrecht-button-min-block-size, 44px);
699
701
  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
@@ -792,6 +794,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
792
794
  }
793
795
  .utrecht-html body {
794
796
  /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
797
+ -webkit-font-smoothing: auto !important;
798
+ -moz-osx-font-smoothing: auto !important;
795
799
  color: var(--utrecht-document-color, inherit);
796
800
  font-family: var(--utrecht-document-font-family, inherit);
797
801
  font-size: var(--utrecht-document-font-size, inherit);
@@ -1498,7 +1502,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
1498
1502
  background-color: var(--utrecht-table-row-alternate-odd-background-color);
1499
1503
  color: var(--utrecht-table-row-alternate-odd-color);
1500
1504
  }
1501
- .utrecht-html textarea { /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
1505
+ .utrecht-html textarea {
1506
+ /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
1502
1507
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
1503
1508
  block-size: initial; /* harden */
1504
1509
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
package/dist/components/button.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
2
  import { c as clsx } from './clsx.js';
3
3
 
4
- 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-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}@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)}.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{--_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: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-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:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.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-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--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--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)}.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}";
4
+ 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);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}@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)}.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{--_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: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-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:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.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}";
5
5
  const UtrechtButtonStyle0 = buttonCss;
6
6
 
7
7
  const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
package/dist/components/button.js.map CHANGED
@@ -1 +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/button-css/src\";\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}
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/button-css/src\";\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/form-field-description.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
  import { c as clsx } from './clsx.js';
3
3
 
4
- const formFieldDescriptionCss = ".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))}:host{display:block}:host([hidden]){display:none !important}";
4
+ const formFieldDescriptionCss = ".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);line-height:var(--utrecht-form-field-description-line-height);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))}:host{display:block}:host([hidden]){display:none !important}";
5
5
  const UtrechtFormFieldDescriptionStyle0 = formFieldDescriptionCss;
6
6
 
7
7
  const FormFieldDescription = /*@__PURE__*/ proxyCustomElement(class FormFieldDescription extends HTMLElement {
package/dist/components/form-field-description.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"form-field-description.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,+wCAA+wC,CAAC;AAChzC,0CAAe,uBAAuB;;MCYzB,oBAAoB;;;;;sBACiC,IAAI;;IAEpE,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QAExB,QACE,4DACE,KAAK,EAAE,IAAI,CACT,gCAAgC,EAChC,MAAM,KAAK,OAAO,IAAI,uCAAuC,EAC7D,MAAM,KAAK,SAAS,IAAI,yCAAyC,CAClE,IAED,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-field-description.scss?tag=utrecht-form-field-description&encapsulation=shadow","src/components/form-field-description.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/form-field-description-css/src\";\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, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-field-description',\n styleUrl: 'form-field-description.scss',\n shadow: true,\n})\nexport class FormFieldDescription {\n @Prop({ attribute: 'status', reflect: true }) status?: string = null;\n\n render() {\n const { status } = this;\n\n return (\n <div\n class={clsx(\n 'utrecht-form-field-description',\n status === 'valid' && 'utrecht-form-field-description--valid',\n status === 'invalid' && 'utrecht-form-field-description--invalid',\n )}\n >\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"form-field-description.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,60CAA60C,CAAC;AAC92C,0CAAe,uBAAuB;;MCYzB,oBAAoB;;;;;sBACiC,IAAI;;IAEpE,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QAExB,QACE,4DACE,KAAK,EAAE,IAAI,CACT,gCAAgC,EAChC,MAAM,KAAK,OAAO,IAAI,uCAAuC,EAC7D,MAAM,KAAK,SAAS,IAAI,yCAAyC,CAClE,IAED,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-field-description.scss?tag=utrecht-form-field-description&encapsulation=shadow","src/components/form-field-description.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/form-field-description-css/src\";\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, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n tag: 'utrecht-form-field-description',\n styleUrl: 'form-field-description.scss',\n shadow: true,\n})\nexport class FormFieldDescription {\n @Prop({ attribute: 'status', reflect: true }) status?: string = null;\n\n render() {\n const { status } = this;\n\n return (\n <div\n class={clsx(\n 'utrecht-form-field-description',\n status === 'valid' && 'utrecht-form-field-description--valid',\n status === 'invalid' && 'utrecht-form-field-description--invalid',\n )}\n >\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
package/dist/components/utrecht-badge-counter.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
 
3
- const badgeCounterCss = ".utrecht-badge-counter{background-color:var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));border-radius:var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));color:var(--utrecht-badge-counter-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));display:inline-block;font-family:var(--utrecht-badge-counter-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));font-size:var(--utrecht-badge-counter-font-size, var(--utrecht-badge-font-size));font-style:var(--utrecht-badge-counter-font-style, normal);font-weight:var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));line-height:1;max-block-size:max-content;max-inline-size:max-content;min-block-size:var(--utrecht-badge-counter-min-size, 1em);min-inline-size:var(--utrecht-badge-counter-min-size, 1em);padding-block-end:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-block-start:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-inline-end:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));padding-inline-start:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));text-align:center;text-decoration:none;white-space:nowrap}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-badge-counter{border-color:currentColor;border-style:solid;border-width:1px}}:host{display:inline-block}:host([hidden]){display:none !important}";
3
+ const badgeCounterCss = ".utrecht-badge-counter{background-color:var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));border-radius:var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));color:var(--utrecht-badge-counter-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));display:inline-block;font-family:var(--utrecht-badge-counter-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));font-size:var(--utrecht-badge-counter-font-size, var(--utrecht-badge-font-size));font-style:var(--utrecht-badge-counter-font-style, normal);font-weight:var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));line-height:1;max-block-size:max-content;max-inline-size:max-content;min-block-size:var(--utrecht-badge-counter-min-block-size, var(--utrecht-badge-counter-min-inline-size, var(--utrecht-badge-counter-min-size, 1em)));min-inline-size:var(--utrecht-badge-counter-min-inline-size, var(--utrecht-badge-counter-min-size, 1em));padding-block-end:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-block-start:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-inline-end:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));padding-inline-start:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));text-align:center;text-decoration:none;white-space:nowrap}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-badge-counter{border-color:currentColor;border-style:solid;border-width:1px}}:host{display:inline-block}:host([hidden]){display:none !important}";
4
4
  const UtrechtBadgeCounterStyle0 = badgeCounterCss;
5
5
 
6
6
  const BadgeCounter = /*@__PURE__*/ proxyCustomElement(class BadgeCounter extends HTMLElement {
package/dist/components/utrecht-badge-counter.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"utrecht-badge-counter.js","mappings":";;AAAA,MAAM,eAAe,GAAG,ylDAAylD,CAAC;AAClnD,kCAAe,eAAe;;MCYjB,YAAY;;;;;;;;;IAKvB,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEpC,MAAM,OAAO,GAAG,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QACpG,MAAM,YAAY,GAAG,CAAC,CAAS,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/F,MAAM,WAAW,GAAG,OAAO,GAAG,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;QAE7G,OAAO,4DAAK,KAAK,EAAC,uBAAuB,IAAE,WAAW,GAAG,WAAW,GAAG,eAAa,CAAO,CAAC;KAC7F;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badge-counter.scss?tag=utrecht-badge-counter&encapsulation=shadow","src/components/badge-counter.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/badge-counter-css/src\";\n\n:host {\n display: inline-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';\n\n@Component({\n tag: 'utrecht-badge-counter',\n styleUrl: 'badge-counter.scss',\n shadow: true,\n})\nexport class BadgeCounter {\n @Prop() value: number;\n @Prop() max: number;\n @Prop() locale: string;\n\n render() {\n const { locale, max, value } = this;\n\n const limited = typeof max === 'number' && typeof value === 'number' && Number(value) > Number(max);\n const formatNumber = (n: number) => (locale ? Intl.NumberFormat(locale).format(n) : String(n));\n const textContent = limited ? `${formatNumber(max)}+` : typeof value === 'number' ? formatNumber(value) : '';\n\n return <div class=\"utrecht-badge-counter\">{textContent ? textContent : <slot></slot>}</div>;\n }\n}\n"],"version":3}
1
+ {"file":"utrecht-badge-counter.js","mappings":";;AAAA,MAAM,eAAe,GAAG,kuDAAkuD,CAAC;AAC3vD,kCAAe,eAAe;;MCYjB,YAAY;;;;;;;;;IAKvB,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEpC,MAAM,OAAO,GAAG,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QACpG,MAAM,YAAY,GAAG,CAAC,CAAS,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/F,MAAM,WAAW,GAAG,OAAO,GAAG,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;QAE7G,OAAO,4DAAK,KAAK,EAAC,uBAAuB,IAAE,WAAW,GAAG,WAAW,GAAG,eAAa,CAAO,CAAC;KAC7F;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badge-counter.scss?tag=utrecht-badge-counter&encapsulation=shadow","src/components/badge-counter.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/badge-counter-css/src\";\n\n:host {\n display: inline-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';\n\n@Component({\n tag: 'utrecht-badge-counter',\n styleUrl: 'badge-counter.scss',\n shadow: true,\n})\nexport class BadgeCounter {\n @Prop() value: number;\n @Prop() max: number;\n @Prop() locale: string;\n\n render() {\n const { locale, max, value } = this;\n\n const limited = typeof max === 'number' && typeof value === 'number' && Number(value) > Number(max);\n const formatNumber = (n: number) => (locale ? Intl.NumberFormat(locale).format(n) : String(n));\n const textContent = limited ? `${formatNumber(max)}+` : typeof value === 'number' ? formatNumber(value) : '';\n\n return <div class=\"utrecht-badge-counter\">{textContent ? textContent : <slot></slot>}</div>;\n }\n}\n"],"version":3}
package/dist/components/utrecht-button-link.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
  import { c as clsx } from './clsx.js';
3
3
 
4
- 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}";
4
+ 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-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);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-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-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-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-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-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)}:host{display:inline-flex}:host([hidden]){display:none !important}";
5
5
  const UtrechtButtonLinkStyle0 = buttonLinkCss;
6
6
 
7
7
  const ButtonLink = /*@__PURE__*/ proxyCustomElement(class ButtonLink extends HTMLElement {
package/dist/components/utrecht-button-link.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"utrecht-button-link.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,muhBAAmuhB,CAAC;AAC1vhB,gCAAe,aAAa;;MCaf,UAAU;;;;;;;;;;;;IAOrB,MAAM;QACJ,QACE,0DACE,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,8DAAa,CACX,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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/button-link-css/src\";\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}
1
+ {"file":"utrecht-button-link.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,o6iBAAo6iB,CAAC;AAC37iB,gCAAe,aAAa;;MCaf,UAAU;;;;;;;;;;;;IAOrB,MAAM;QACJ,QACE,0DACE,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,8DAAa,CACX,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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/button-link-css/src\";\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-document.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
 
3
- const documentCss = ".utrecht-document{color:var(--utrecht-document-color, inherit);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-document-font-size, inherit);font-weight:var(--utrecht-document-font-weight, inherit);line-height:var(--utrecht-document-line-height, inherit);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.utrecht-document :lang(ar){letter-spacing:0 !important}.utrecht-document--surface{background-color:var(--utrecht-document-background-color, inherit)}:host{display:block}:host([hidden]){display:none !important}";
3
+ const documentCss = ".utrecht-document{-webkit-font-smoothing:auto !important;-moz-osx-font-smoothing:auto !important;color:var(--utrecht-document-color, inherit);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-document-font-size, inherit);font-weight:var(--utrecht-document-font-weight, inherit);line-height:var(--utrecht-document-line-height, inherit);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.utrecht-document :lang(ar){letter-spacing:0 !important}.utrecht-document--surface{background-color:var(--utrecht-document-background-color, inherit)}:host{display:block}:host([hidden]){display:none !important}";
4
4
  const UtrechtDocumentStyle0 = documentCss;
5
5
 
6
6
  const Document = /*@__PURE__*/ proxyCustomElement(class Document extends HTMLElement {
package/dist/components/utrecht-document.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"utrecht-document.js","mappings":";;AAAA,MAAM,WAAW,GAAG,omBAAomB,CAAC;AACznB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/document.scss?tag=utrecht-document&encapsulation=shadow","src/components/document.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/document-css/src\";\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-document',\n styleUrl: 'document.scss',\n shadow: true,\n})\nexport class Document {\n render() {\n return (\n <div class=\"utrecht-document\">\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"utrecht-document.js","mappings":";;AAAA,MAAM,WAAW,GAAG,mrBAAmrB,CAAC;AACxsB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,8DAAa,CACT,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/document.scss?tag=utrecht-document&encapsulation=shadow","src/components/document.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/document-css/src\";\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'utrecht-document',\n styleUrl: 'document.scss',\n shadow: true,\n})\nexport class Document {\n render() {\n return (\n <div class=\"utrecht-document\">\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
package/dist/components/utrecht-form-field-checkbox.js CHANGED
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
2
2
  import { c as clsx } from './clsx.js';
3
3
  import { d as defineCustomElement$2 } from './form-field-description.js';
4
4
 
5
- const formFieldCheckboxCss = ".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{margin-block-end:0;margin-block-start:0;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{color:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-disabled-cursor, revert)}.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-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;cursor:var(--utrecht-action-activate-cursor, revert);-webkit-user-select:none;user-select:none}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--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-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--html-input:focus{--_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-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-checkbox--custom,.utrecht-custom-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-position:center;background-repeat:no-repeat;background-size:contain;block-size:var(--utrecht-checkbox-size, 1em);border-color:var(--utrecht-checkbox-border-color);border-radius:var(--utrecht-checkbox-border-radius, 0);border-style:solid;border-width:var(--utrecht-checkbox-border-width);cursor:var(--utrecht-action-activate-cursor, revert);inline-size:var(--utrecht-checkbox-size, 1em);margin-block-start:var(--utrecht-checkbox-margin-block-start);min-block-size:24px;min-inline-size:24px;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:top}.utrecht-checkbox--custom.utrecht-checkbox--checked,.utrecht-custom-checkbox--checked{background-color:var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--disabled,.utrecht-custom-checkbox--disabled{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,.utrecht-custom-checkbox--disabled:checked{background-color:var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--disabled:active,.utrecht-custom-checkbox--disabled:active{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--indeterminate,.utrecht-custom-checkbox--indeterminate{background-color:var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--invalid,.utrecht-custom-checkbox--invalid{border-color:var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--active,.utrecht-custom-checkbox--active{background-color:var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--hover,.utrecht-custom-checkbox--hover{background-color:var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus,.utrecht-custom-checkbox--focus{background-color:var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,.utrecht-custom-checkbox--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-checkbox--custom.utrecht-checkbox--html-input:disabled,.utrecht-custom-checkbox--html-input:disabled{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,.utrecht-custom-checkbox--html-input:disabled:checked{background-color:var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,.utrecht-custom-checkbox--html-input:disabled:active{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:hover,.utrecht-custom-checkbox--html-input:hover{background-color:var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,.utrecht-custom-checkbox--html-input:focus{background-color:var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,.utrecht-custom-checkbox--html-input: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-checkbox--custom.utrecht-checkbox--html-input:invalid,.utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],.utrecht-custom-checkbox--html-input:invalid,.utrecht-custom-checkbox--html-input[aria-invalid=true]{border-color:var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:active,.utrecht-custom-checkbox--html-input:active{background-color:var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,.utrecht-custom-checkbox--html-input:checked{background-color:var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked:indeterminate,.utrecht-custom-checkbox--html-input:indeterminate,.utrecht-custom-checkbox--html-input:checked:indeterminate{background-color:var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color))}:host{display:block}:host([hidden]){display:none !important}";
5
+ const formFieldCheckboxCss = ".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));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{margin-block-end:0;margin-block-start:0;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{color:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-disabled-cursor, revert)}.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);line-height:var(--utrecht-form-field-description-line-height);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-checkbox{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;cursor:var(--utrecht-action-activate-cursor, revert);-webkit-user-select:none;user-select:none}.utrecht-checkbox--disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--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-checkbox--html-input:disabled{cursor:var(--utrecht-action-disabled-cursor, revert)}.utrecht-checkbox--html-input:focus{--_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-checkbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-checkbox--custom,.utrecht-custom-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-position:center;background-repeat:no-repeat;background-size:contain;block-size:var(--utrecht-checkbox-size, 1em);border-color:var(--utrecht-checkbox-border-color);border-radius:var(--utrecht-checkbox-border-radius, 0);border-style:solid;border-width:var(--utrecht-checkbox-border-width);cursor:var(--utrecht-action-activate-cursor, revert);inline-size:var(--utrecht-checkbox-size, 1em);margin-block-start:var(--utrecht-checkbox-margin-block-start);min-block-size:24px;min-inline-size:24px;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:top}.utrecht-checkbox--custom.utrecht-checkbox--checked,.utrecht-custom-checkbox--checked{background-color:var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--disabled,.utrecht-custom-checkbox--disabled{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-checkbox--custom.utrecht-checkbox--disabled:checked,.utrecht-custom-checkbox--disabled:checked{background-color:var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--disabled:active,.utrecht-custom-checkbox--disabled:active{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--indeterminate,.utrecht-custom-checkbox--indeterminate{background-color:var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--invalid,.utrecht-custom-checkbox--invalid{border-color:var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--active,.utrecht-custom-checkbox--active{background-color:var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--hover,.utrecht-custom-checkbox--hover{background-color:var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus,.utrecht-custom-checkbox--focus{background-color:var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--focus-visible,.utrecht-custom-checkbox--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-checkbox--custom.utrecht-checkbox--html-input:disabled,.utrecht-custom-checkbox--html-input:disabled{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-disabled-border-width, var(--utrecht-checkbox-border-width));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:checked,.utrecht-custom-checkbox--html-input:disabled:checked{background-color:var(--utrecht-checkbox-disabled-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:disabled:active,.utrecht-custom-checkbox--html-input:disabled:active{border-color:var(--utrecht-checkbox-disabled-border-color, var(--utrecht-checkbox-border-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:hover,.utrecht-custom-checkbox--html-input:hover{background-color:var(--utrecht-checkbox-hover-background-color, var(--utrecht-checkbox-background-color));border-color:var(--utrecht-checkbox-hover-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-hover-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus,.utrecht-custom-checkbox--html-input:focus{background-color:var(--utrecht-checkbox-focus-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-focus-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-focus-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:focus-visible,.utrecht-custom-checkbox--html-input: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-checkbox--custom.utrecht-checkbox--html-input:invalid,.utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true],.utrecht-custom-checkbox--html-input:invalid,.utrecht-custom-checkbox--html-input[aria-invalid=true]{border-color:var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:active,.utrecht-custom-checkbox--html-input:active{background-color:var(--utrecht-checkbox-active-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-active-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-active-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-active-color, var(--utrecht-checkbox-color))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked,.utrecht-custom-checkbox--html-input:checked{background-color:var(--utrecht-checkbox-checked-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width))}.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate,.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked:indeterminate,.utrecht-custom-checkbox--html-input:indeterminate,.utrecht-custom-checkbox--html-input:checked:indeterminate{background-color:var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");border-color:var(--utrecht-checkbox-indeterminate-border-color, var(--utrecht-checkbox-border-color));border-width:var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));color:var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color))}:host{display:block}:host([hidden]){display:none !important}";
6
6
  const UtrechtFormFieldCheckboxStyle0 = formFieldCheckboxCss;
7
7
 
8
8
  const FormFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class FormFieldCheckbox extends HTMLElement {
package/dist/components/utrecht-form-field-checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"utrecht-form-field-checkbox.js","mappings":"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","names":[],"sources":["src/components/form-field-checkbox.scss?tag=utrecht-form-field-checkbox&encapsulation=shadow","src/components/form-field-checkbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/form-field-css/src\";\n@import \"~@utrecht/form-label-css/src\";\n@import \"~@utrecht/form-field-description-css/src\";\n@import \"~@utrecht/checkbox-css/src\";\n@import \"~@utrecht/custom-checkbox-css/src\";\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-checkbox',\n styleUrl: 'form-field-checkbox.scss',\n shadow: true,\n})\nexport class FormFieldCheckbox {\n @Element() hostElement!: HTMLElement;\n\n @Prop() label: string = '';\n @Prop({ attribute: 'disabled', reflect: true }) disabled: boolean = false;\n @Prop({ attribute: 'checked', reflect: true }) checked: boolean = false;\n @Prop({ attribute: 'invalid', reflect: true }) invalid: boolean = false;\n @Prop({ attribute: 'required', reflect: true }) required: boolean = false;\n @Prop() name: string = '';\n @Prop() value: string = '';\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled, hostElement, label, name, invalid, 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 = checked ? value || '' : '';\n }\n\n return (\n <div\n class={clsx('utrecht-form-field', 'utrecht-form-field--checkbox', {\n 'utrecht-form-field--invalid': invalid,\n })}\n >\n <p class=\"utrecht-form-field__label utrecht-form-field__label--checkbox\">\n <label\n class={clsx('utrecht-form-label', {\n 'utrecht-form-label--disabled': disabled,\n })}\n htmlFor=\"input\"\n >\n <input\n id=\"input\"\n type=\"checkbox\"\n class={clsx(\n 'utrecht-form-field__input',\n 'utrecht-checkbox',\n 'utrecht-checkbox--custom',\n 'utrecht-checkbox--html-input',\n {\n 'utrecht-checkbox--disabled': disabled,\n 'utrecht-checkbox--invalid': invalid,\n 'utrecht-checkbox--required': required,\n },\n )}\n aria-invalid={invalid || undefined}\n disabled={disabled}\n required={required}\n checked={checked}\n value={value}\n onBlur={(evt) => this.utrechtBlur.emit(evt)}\n onChange={(evt) => this.utrechtChange.emit(evt)}\n onFocus={(evt) => this.utrechtFocus.emit(evt)}\n onInput={(evt) => {\n this.checked = (evt.target as HTMLInputElement).checked;\n this.utrechtInput.emit(evt);\n }}\n />{' '}\n {label}\n <slot name=\"label\"></slot>\n </label>\n {invalid && (\n <utrecht-form-field-description\n status=\"invalid\"\n class=\"utrecht-form-field__description utrecht-form-field__description--invalid\"\n id=\"error-message\"\n >\n <slot name=\"error-message\"></slot>\n </utrecht-form-field-description>\n )}\n </p>\n <utrecht-form-field-description class=\"utrecht-form-field__description\" id=\"description\">\n <slot name=\"description\"></slot>\n </utrecht-form-field-description>\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}
1
+ {"file":"utrecht-form-field-checkbox.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,ilhBAAilhB,CAAC;AAC/mhB,uCAAe,oBAAoB;;MCYtB,iBAAiB;;;;;;;;;qBAGJ,EAAE;wBAC0C,KAAK;uBACP,KAAK;uBACL,KAAK;wBACH,KAAK;oBAClD,EAAE;qBACD,EAAE;;IAM1B,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEvF,IAAI,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAA4B,CAAC;QAEzF,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;YAClB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SACrC;QAED,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE;YAClB,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACzD,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;YACtB,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAChC;QAED,IAAI,KAAK,IAAI,IAAI,EAAE;YACjB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;YAClB,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,KAAK,IAAI,EAAE,GAAG,EAAE,CAAC;SAC1C;QAED,QACE,4DACE,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,8BAA8B,EAAE;gBAChE,6BAA6B,EAAE,OAAO;aACvC,CAAC,IAEF,0DAAG,KAAK,EAAC,+DAA+D,IACtE,8DACE,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE;gBAChC,8BAA8B,EAAE,QAAQ;aACzC,CAAC,EACF,OAAO,EAAC,OAAO,IAEf,8DACE,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CACT,2BAA2B,EAC3B,kBAAkB,EAClB,0BAA0B,EAC1B,8BAA8B,EAC9B;gBACE,4BAA4B,EAAE,QAAQ;gBACtC,2BAA2B,EAAE,OAAO;gBACpC,4BAA4B,EAAE,QAAQ;aACvC,CACF,kBACa,OAAO,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,OAAO,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,GAAG;gBACX,IAAI,CAAC,OAAO,GAAI,GAAG,CAAC,MAA2B,CAAC,OAAO,CAAC;gBACxD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAC7B,GACD,EAAC,GAAG,EACL,KAAK,EACN,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,EACP,OAAO,KACN,uFACE,MAAM,EAAC,SAAS,EAChB,KAAK,EAAC,0EAA0E,EAChF,EAAE,EAAC,eAAe,IAElB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CACH,CAClC,CACC,EACJ,uFAAgC,KAAK,EAAC,iCAAiC,EAAC,EAAE,EAAC,aAAa,IACtF,6DAAM,IAAI,EAAC,aAAa,GAAQ,CACD,EACjC,4DAAK,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAC,QAAQ,IACjD,4DAAK,KAAK,EAAC,uEAAuE,IAChF,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-field-checkbox.scss?tag=utrecht-form-field-checkbox&encapsulation=shadow","src/components/form-field-checkbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/form-field-css/src\";\n@import \"~@utrecht/form-label-css/src\";\n@import \"~@utrecht/form-field-description-css/src\";\n@import \"~@utrecht/checkbox-css/src\";\n@import \"~@utrecht/custom-checkbox-css/src\";\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-checkbox',\n styleUrl: 'form-field-checkbox.scss',\n shadow: true,\n})\nexport class FormFieldCheckbox {\n @Element() hostElement!: HTMLElement;\n\n @Prop() label: string = '';\n @Prop({ attribute: 'disabled', reflect: true }) disabled: boolean = false;\n @Prop({ attribute: 'checked', reflect: true }) checked: boolean = false;\n @Prop({ attribute: 'invalid', reflect: true }) invalid: boolean = false;\n @Prop({ attribute: 'required', reflect: true }) required: boolean = false;\n @Prop() name: string = '';\n @Prop() value: string = '';\n @Event() utrechtBlur: EventEmitter;\n @Event() utrechtChange: EventEmitter;\n @Event() utrechtFocus: EventEmitter;\n @Event() utrechtInput: EventEmitter;\n\n render() {\n const { checked, disabled, hostElement, label, name, invalid, 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 = checked ? value || '' : '';\n }\n\n return (\n <div\n class={clsx('utrecht-form-field', 'utrecht-form-field--checkbox', {\n 'utrecht-form-field--invalid': invalid,\n })}\n >\n <p class=\"utrecht-form-field__label utrecht-form-field__label--checkbox\">\n <label\n class={clsx('utrecht-form-label', {\n 'utrecht-form-label--disabled': disabled,\n })}\n htmlFor=\"input\"\n >\n <input\n id=\"input\"\n type=\"checkbox\"\n class={clsx(\n 'utrecht-form-field__input',\n 'utrecht-checkbox',\n 'utrecht-checkbox--custom',\n 'utrecht-checkbox--html-input',\n {\n 'utrecht-checkbox--disabled': disabled,\n 'utrecht-checkbox--invalid': invalid,\n 'utrecht-checkbox--required': required,\n },\n )}\n aria-invalid={invalid || undefined}\n disabled={disabled}\n required={required}\n checked={checked}\n value={value}\n onBlur={(evt) => this.utrechtBlur.emit(evt)}\n onChange={(evt) => this.utrechtChange.emit(evt)}\n onFocus={(evt) => this.utrechtFocus.emit(evt)}\n onInput={(evt) => {\n this.checked = (evt.target as HTMLInputElement).checked;\n this.utrechtInput.emit(evt);\n }}\n />{' '}\n {label}\n <slot name=\"label\"></slot>\n </label>\n {invalid && (\n <utrecht-form-field-description\n status=\"invalid\"\n class=\"utrecht-form-field__description utrecht-form-field__description--invalid\"\n id=\"error-message\"\n >\n <slot name=\"error-message\"></slot>\n </utrecht-form-field-description>\n )}\n </p>\n <utrecht-form-field-description class=\"utrecht-form-field__description\" id=\"description\">\n <slot name=\"description\"></slot>\n </utrecht-form-field-description>\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}