@utrecht/web-component-library-stencil 1.0.0-alpha.216 → 1.0.0-alpha.219

package/dist/cjs/utrecht-pagination.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-8c6952a4.js');
 const clsx_m = require('./clsx.m-b00fa5e1.js');
 
-const indexCss = ".utrecht-pagination{font-family:var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-pagination-font-size, var(--utrecht-document-font-family))}.utrecht-pagination--distanced{margin-block-end:var(--utrecht-pagination-margin-block-end);margin-block-start:var(--utrecht-pagination-margin-block-start)}.utrecht-pagination__relative-link{background-color:var(--utrecht-pagination-relative-link-background-color);border-color:var(--utrecht-pagination-relative-link-border-color);border-radius:var(--utrecht-pagination-relative-link-border-radius);border-style:solid;border-width:var(--utrecht-pagination-relative-link-border-width, 0);color:var(--utrecht-pagination-relative-link-color);display:inline-block;font-weight:var(--utrecht-pagination-relative-link-font-weight);padding-block-end:var(--utrecht-pagination-relative-link-padding-block-end);padding-block-start:var(--utrecht-pagination-relative-link-padding-block-start);padding-inline-end:var(--utrecht-pagination-relative-link-padding-inline-end);padding-inline-start:var(--utrecht-pagination-relative-link-padding-inline-start);text-decoration:var(--utrecht-pagination-relative-link-text-decoration);text-transform:var(--utrecht-pagination-relative-link-text-transform)}.utrecht-pagination__relative-link--next{margin-inline-start:var(--utrecht-pagination-relative-link-distanced-margin-inline-start)}.utrecht-pagination__relative-link--prev{margin-inline-end:var(--utrecht-pagination-relative-link-distanced-margin-inline-end)}.utrecht-pagination__relative-link--disabled{background-color:var(--utrecht-pagination-relative-link-disabled-background-color, var(--utrecht-pagination-relative-link-background-color));color:var(--utrecht-pagination-relative-link-disabled-color, var(--utrecht-pagination-relative-link-color))}.utrecht-pagination__relative-link--hover,.utrecht-pagination__relative-link:hover{background-color:var(--utrecht-pagination-relative-link-hover-background-color, var(--utrecht-pagination-relative-link-background-color));border-color:var(--utrecht-pagination-relative-link-hover-border-color, var(--utrecht-pagination-relative-link-border-color));color:var(--utrecht-pagination-relative-link-hover-color, var(--utrecht-pagination-relative-link-color))}.utrecht-pagination__page-link{background-color:var(--utrecht-pagination-page-link-background-color);border-color:var(--utrecht-pagination-page-link-border-color, 0);border-radius:var(--utrecht-pagination-page-link-border-radius);border-style:solid;border-width:var(--utrecht-pagination-page-link-border-width);color:var(--utrecht-pagination-page-link-color);display:inline-block;font-weight:var(--utrecht-pagination-page-link-font-weight);padding-block-end:var(--utrecht-pagination-page-link-padding-block-end);padding-block-start:var(--utrecht-pagination-page-link-padding-block-start);padding-inline-end:var(--utrecht-pagination-page-link-padding-inline-end);padding-inline-start:var(--utrecht-pagination-page-link-padding-inline-start);text-decoration:var(--utrecht-pagination-page-link-text-decoration)}.utrecht-pagination__page-link--current{--utrecht-pagination-page-link-background-color:var(--utrecht-pagination-page-link-current-background-color);--utrecht-pagination-page-link-border-color:var(--utrecht-pagination-page-link-current-border-color);--utrecht-pagination-page-link-color:var(--utrecht-pagination-page-link-current-color)}.utrecht-pagination__page-link--distanced,.utrecht-pagination__page-link~.utrecht-pagination__page-link{margin-inline-start:var(--utrecht-pagination-page-link-distanced-margin-inline-start)}.utrecht-pagination__page-link--hover,.utrecht-pagination__page-link:hover{background-color:var(--utrecht-pagination-page-link-hover-background-color, var(--utrecht-pagination-page-link-background-color));border-color:var(--utrecht-pagination-page-link-hover-border-color, var(--utrecht-pagination-page-link-border-color));color:var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color))}.utrecht-pagination__page-link:focus,.utrecht-pagination__relative-link:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-pagination__page-link:focus:not(:focus-visible),.utrecht-pagination__relative-link:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
+const indexCss = ".utrecht-pagination__page-link:focus,.utrecht-pagination__relative-link:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-pagination__page-link:focus:not(:focus-visible),.utrecht-pagination__relative-link:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-pagination{font-family:var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-pagination-font-size, var(--utrecht-document-font-family))}.utrecht-pagination--distanced{margin-block-end:var(--utrecht-pagination-margin-block-end);margin-block-start:var(--utrecht-pagination-margin-block-start)}.utrecht-pagination__relative-link{background-color:var(--utrecht-pagination-relative-link-background-color);border-color:var(--utrecht-pagination-relative-link-border-color);border-radius:var(--utrecht-pagination-relative-link-border-radius);border-style:solid;border-width:var(--utrecht-pagination-relative-link-border-width, 0);color:var(--utrecht-pagination-relative-link-color);display:inline-block;font-weight:var(--utrecht-pagination-relative-link-font-weight);padding-block-end:var(--utrecht-pagination-relative-link-padding-block-end);padding-block-start:var(--utrecht-pagination-relative-link-padding-block-start);padding-inline-end:var(--utrecht-pagination-relative-link-padding-inline-end);padding-inline-start:var(--utrecht-pagination-relative-link-padding-inline-start);text-decoration:var(--utrecht-pagination-relative-link-text-decoration);text-transform:var(--utrecht-pagination-relative-link-text-transform)}.utrecht-pagination__relative-link--next{margin-inline-start:var(--utrecht-pagination-relative-link-distanced-margin-inline-start)}.utrecht-pagination__relative-link--prev{margin-inline-end:var(--utrecht-pagination-relative-link-distanced-margin-inline-end)}.utrecht-pagination__relative-link--disabled{background-color:var(--utrecht-pagination-relative-link-disabled-background-color, var(--utrecht-pagination-relative-link-background-color));color:var(--utrecht-pagination-relative-link-disabled-color, var(--utrecht-pagination-relative-link-color))}.utrecht-pagination__relative-link--hover,.utrecht-pagination__relative-link:hover{background-color:var(--utrecht-pagination-relative-link-hover-background-color, var(--utrecht-pagination-relative-link-background-color));border-color:var(--utrecht-pagination-relative-link-hover-border-color, var(--utrecht-pagination-relative-link-border-color));color:var(--utrecht-pagination-relative-link-hover-color, var(--utrecht-pagination-relative-link-color))}.utrecht-pagination__page-link{background-color:var(--utrecht-pagination-page-link-background-color);border-color:var(--utrecht-pagination-page-link-border-color, 0);border-radius:var(--utrecht-pagination-page-link-border-radius);border-style:solid;border-width:var(--utrecht-pagination-page-link-border-width);color:var(--utrecht-pagination-page-link-color);display:inline-block;font-weight:var(--utrecht-pagination-page-link-font-weight);padding-block-end:var(--utrecht-pagination-page-link-padding-block-end);padding-block-start:var(--utrecht-pagination-page-link-padding-block-start);padding-inline-end:var(--utrecht-pagination-page-link-padding-inline-end);padding-inline-start:var(--utrecht-pagination-page-link-padding-inline-start);text-decoration:var(--utrecht-pagination-page-link-text-decoration)}.utrecht-pagination__page-link--current{--utrecht-pagination-page-link-background-color:var(--utrecht-pagination-page-link-current-background-color);--utrecht-pagination-page-link-border-color:var(--utrecht-pagination-page-link-current-border-color);--utrecht-pagination-page-link-color:var(--utrecht-pagination-page-link-current-color)}.utrecht-pagination__page-link--distanced,.utrecht-pagination__page-link~.utrecht-pagination__page-link{margin-inline-start:var(--utrecht-pagination-page-link-distanced-margin-inline-start)}.utrecht-pagination__page-link--hover,.utrecht-pagination__page-link:hover{background-color:var(--utrecht-pagination-page-link-hover-background-color, var(--utrecht-pagination-page-link-background-color));border-color:var(--utrecht-pagination-page-link-hover-border-color, var(--utrecht-pagination-page-link-border-color));color:var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color))}.utrecht-pagination__page-link:focus,.utrecht-pagination__relative-link:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-pagination__page-link:focus:not(:focus-visible),.utrecht-pagination__relative-link:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
 
 const Pagination = class {
   constructor(hostRef) {

package/dist/cjs/utrecht-textbox.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-8c6952a4.js');
 const clsx_m = require('./clsx.m-b00fa5e1.js');
 
-const indexCss = ".utrecht-textbox{background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));max-inline-size:var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));padding-inline-end:var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));width:100%}.utrecht-textbox--invalid,.utrecht-textbox--html-input:invalid,.utrecht-textbox--html-input[aria-invalid=true]{background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textbox--disabled,.utrecht-textbox--html-input:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textbox--focus,.utrecht-textbox--html-input:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textbox--focus-visible,.utrecht-textbox--html-input:focus{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textbox--read-only,.utrecht-textbox--html-input:read-only{border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))))}.utrecht-textbox__placeholder,.utrecht-textbox--html-input::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textbox--numeric{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}.utrecht-textbox--password{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--url{font-variant-ligatures:none}.utrecht-textbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}:host{display:block}:host([hidden]){display:none !important}";
+const indexCss = ".utrecht-textbox{background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color));border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width));border-bottom-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width)));border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-input-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-input-color));font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-input-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-input-font-size, 1em));max-inline-size:var(--utrecht-textbox-max-inline-size, var(--utrecht-form-input-max-inline-size));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-input-padding-block-end));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-input-padding-block-start));padding-inline-end:var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-input-padding-inline-end));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-input-padding-inline-start));width:100%}.utrecht-textbox--invalid{background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textbox--disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textbox--focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))))}.utrecht-textbox--focus-visible{box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textbox--read-only{border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))))}.utrecht-textbox__placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}.utrecht-textbox--numeric{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}.utrecht-textbox--password{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--url{font-variant-ligatures:none}.utrecht-textbox--html-input:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-input-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-input-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-input-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-textbox--html-input:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-input-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-input-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-input-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-input-color))));box-shadow:0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);outline-color:var(--utrecht-focus-outline-color, transparent);outline-offset:var(--utrecht-focus-outline-offset, 0);outline-style:var(--utrecht-focus-outline-style, solid);outline-width:var(--utrecht-focus-outline-width, 0)}.utrecht-textbox--html-input:focus:not(:focus-visible){box-shadow:none;outline-style:none}.utrecht-textbox--html-input:invalid,.utrecht-textbox--html-input[aria-invalid=true]{background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-input-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-input-background-color))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-input-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));border-width:var(--utrecht-textbox-invalid-border-width, var(--utrecht-form-input-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-input-border-width))))}.utrecht-textbox--html-input:read-only{border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-input-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-input-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-input-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))))}.utrecht-textbox--html-input::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-input-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-input-color))));font-style:var(--utrecht-form-input-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
 
 const Textbox = class {
   constructor(hostRef) {

package/dist/cjs/utrecht.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["utrecht-contact-card-template.cjs",[[1,"utrecht-contact-card-template"]]],["utrecht-digid-button.cjs",[[1,"utrecht-digid-button",{"type":[1]}]]],["utrecht-logo-button.cjs",[[1,"utrecht-logo-button",{"type":[1]}]]],["utrecht-custom-checkbox.cjs",[[1,"utrecht-custom-checkbox",{"disabled":[516],"checked":[516],"indeterminate":[516],"invalid":[516],"required":[516]}]]],["utrecht-article.cjs",[[1,"utrecht-article"]]],["utrecht-backdrop.cjs",[[1,"utrecht-backdrop",{"viewport":[4]}]]],["utrecht-badge-counter.cjs",[[1,"utrecht-badge-counter",{"value":[2],"max":[2],"locale":[1]}]]],["utrecht-badge-data.cjs",[[1,"utrecht-badge-data"]]],["utrecht-badge-status.cjs",[[1,"utrecht-badge-status",{"status":[1]}]]],["utrecht-breadcrumb.cjs",[[1,"utrecht-breadcrumb",{"json":[1],"variant":[1]}]]],["utrecht-checkbox.cjs",[[1,"utrecht-checkbox",{"disabled":[516],"readOnly":[516,"readonly"],"checked":[4],"value":[1]}]]],["utrecht-document.cjs",[[1,"utrecht-document"]]],["utrecht-eherkenning-logo.cjs",[[1,"utrecht-eherkenning-logo"]]],["utrecht-eidas-logo.cjs",[[1,"utrecht-eidas-logo"]]],["utrecht-form-field-checkbox.cjs",[[1,"utrecht-form-field-checkbox",{"label":[4],"disabled":[516],"checked":[516],"invalid":[516],"required":[516],"value":[32]}]]],["utrecht-form-field-description.cjs",[[1,"utrecht-form-field-description",{"status":[513]}]]],["utrecht-form-field-textarea.cjs",[[1,"utrecht-form-field-textarea",{"disabled":[516],"invalid":[516],"readOnly":[516,"readonly"],"placeholder":[1],"required":[516],"value":[1]}]]],["utrecht-form-field-textbox.cjs",[[1,"utrecht-form-field-textbox",{"autoComplete":[513,"autocomplete"],"disabled":[516],"invalid":[516],"min":[1],"max":[1],"pattern":[1],"placeholder":[1],"readOnly":[516,"readonly"],"required":[516],"type":[513],"value":[1]}]]],["utrecht-form-toggle.cjs",[[1,"utrecht-form-toggle",{"disabled":[516],"checked":[516]}]]],["utrecht-heading.cjs",[[1,"utrecht-heading",{"level":[2]}]]],["utrecht-heading-1.cjs",[[1,"utrecht-heading-1"]]],["utrecht-heading-4.cjs",[[1,"utrecht-heading-4"]]],["utrecht-heading-5.cjs",[[1,"utrecht-heading-5"]]],["utrecht-heading-6.cjs",[[1,"utrecht-heading-6"]]],["utrecht-html-content.cjs",[[4,"utrecht-html-content"]]],["utrecht-icon-afval.cjs",[[1,"utrecht-icon-afval"]]],["utrecht-icon-arrow.cjs",[[1,"utrecht-icon-arrow"]]],["utrecht-icon-cross.cjs",[[1,"utrecht-icon-cross"]]],["utrecht-icon-error.cjs",[[1,"utrecht-icon-error"]]],["utrecht-icon-facebook.cjs",[[1,"utrecht-icon-facebook"]]],["utrecht-icon-filter.cjs",[[1,"utrecht-icon-filter"]]],["utrecht-icon-information.cjs",[[1,"utrecht-icon-information"]]],["utrecht-icon-instagram.cjs",[[1,"utrecht-icon-instagram"]]],["utrecht-icon-linkedin.cjs",[[1,"utrecht-icon-linkedin"]]],["utrecht-icon-list.cjs",[[1,"utrecht-icon-list"]]],["utrecht-icon-loupe.cjs",[[1,"utrecht-icon-loupe"]]],["utrecht-icon-melding.cjs",[[1,"utrecht-icon-melding"]]],["utrecht-icon-paspoort.cjs",[[1,"utrecht-icon-paspoort"]]],["utrecht-icon-rijbewijs.cjs",[[1,"utrecht-icon-rijbewijs"]]],["utrecht-icon-toeslag.cjs",[[1,"utrecht-icon-toeslag"]]],["utrecht-icon-trouwen.cjs",[[1,"utrecht-icon-trouwen"]]],["utrecht-icon-twitter.cjs",[[1,"utrecht-icon-twitter"]]],["utrecht-icon-verhuizen.cjs",[[1,"utrecht-icon-verhuizen"]]],["utrecht-icon-warning.cjs",[[1,"utrecht-icon-warning"]]],["utrecht-icon-whatsapp.cjs",[[1,"utrecht-icon-whatsapp"]]],["utrecht-icon-zoomin.cjs",[[1,"utrecht-icon-zoomin"]]],["utrecht-icon-zoomout.cjs",[[1,"utrecht-icon-zoomout"]]],["utrecht-logo.cjs",[[1,"utrecht-logo"]]],["utrecht-page.cjs",[[1,"utrecht-page"]]],["utrecht-page-content.cjs",[[1,"utrecht-page-content"]]],["utrecht-page-footer.cjs",[[1,"utrecht-page-footer"]]],["utrecht-page-header.cjs",[[1,"utrecht-page-header"]]],["utrecht-pagination.cjs",[[1,"utrecht-pagination",{"links":[1],"next":[1],"prev":[1],"currentIndex":[2,"current-index"]}]]],["utrecht-separator.cjs",[[1,"utrecht-separator"]]],["utrecht-sidenav.cjs",[[1,"utrecht-sidenav",{"json":[1]}]]],["utrecht-textbox.cjs",[[1,"utrecht-textbox",{"autoComplete":[513,"autocomplete"],"disabled":[516],"invalid":[516],"min":[1],"max":[1],"pattern":[1],"placeholder":[1],"readOnly":[516,"readonly"],"required":[516],"type":[513],"value":[1]}]]],["utrecht-icon-checkmark.cjs",[[1,"utrecht-icon-checkmark"]]],["utrecht-heading-2_3.cjs",[[1,"utrecht-heading-2"],[1,"utrecht-heading-3"],[1,"utrecht-paragraph",{"lead":[4]}]]],["utrecht-button_2.cjs",[[1,"utrecht-button",{"busy":[4],"disabled":[4],"type":[1]}],[1,"utrecht-digid-logo"]]]], options);
+  return index.bootstrapLazy([["utrecht-contact-card-template.cjs",[[1,"utrecht-contact-card-template"]]],["utrecht-digid-button.cjs",[[1,"utrecht-digid-button",{"type":[1]}]]],["utrecht-logo-button.cjs",[[1,"utrecht-logo-button",{"type":[1]}]]],["utrecht-custom-checkbox.cjs",[[1,"utrecht-custom-checkbox",{"disabled":[516],"checked":[516],"indeterminate":[516],"invalid":[516],"required":[516]}]]],["utrecht-article.cjs",[[1,"utrecht-article"]]],["utrecht-backdrop.cjs",[[1,"utrecht-backdrop",{"viewport":[4]}]]],["utrecht-badge-counter.cjs",[[1,"utrecht-badge-counter",{"value":[2],"max":[2],"locale":[1]}]]],["utrecht-badge-data.cjs",[[1,"utrecht-badge-data"]]],["utrecht-badge-status.cjs",[[1,"utrecht-badge-status",{"status":[1]}]]],["utrecht-breadcrumb.cjs",[[1,"utrecht-breadcrumb",{"json":[1],"variant":[1]}]]],["utrecht-checkbox.cjs",[[1,"utrecht-checkbox",{"disabled":[516],"readOnly":[516,"readonly"],"checked":[4],"value":[1]}]]],["utrecht-document.cjs",[[1,"utrecht-document"]]],["utrecht-eherkenning-logo.cjs",[[1,"utrecht-eherkenning-logo"]]],["utrecht-eidas-logo.cjs",[[1,"utrecht-eidas-logo"]]],["utrecht-form-field-checkbox.cjs",[[1,"utrecht-form-field-checkbox",{"label":[4],"disabled":[516],"checked":[516],"invalid":[516],"required":[516],"value":[32]}]]],["utrecht-form-field-description.cjs",[[1,"utrecht-form-field-description",{"status":[513]}]]],["utrecht-form-field-textarea.cjs",[[1,"utrecht-form-field-textarea",{"disabled":[516],"invalid":[516],"readOnly":[516,"readonly"],"placeholder":[1],"required":[516],"value":[1]}]]],["utrecht-form-field-textbox.cjs",[[1,"utrecht-form-field-textbox",{"autoComplete":[513,"autocomplete"],"disabled":[516],"invalid":[516],"min":[1],"max":[1],"pattern":[1],"placeholder":[1],"readOnly":[516,"readonly"],"required":[516],"type":[513],"value":[1]}]]],["utrecht-form-toggle.cjs",[[1,"utrecht-form-toggle",{"disabled":[516],"checked":[516]}]]],["utrecht-heading.cjs",[[1,"utrecht-heading",{"level":[2]}]]],["utrecht-heading-1.cjs",[[1,"utrecht-heading-1"]]],["utrecht-heading-4.cjs",[[1,"utrecht-heading-4"]]],["utrecht-heading-5.cjs",[[1,"utrecht-heading-5"]]],["utrecht-heading-6.cjs",[[1,"utrecht-heading-6"]]],["utrecht-html-content.cjs",[[4,"utrecht-html-content"]]],["utrecht-icon-afval.cjs",[[1,"utrecht-icon-afval"]]],["utrecht-icon-arrow.cjs",[[1,"utrecht-icon-arrow"]]],["utrecht-icon-cross.cjs",[[1,"utrecht-icon-cross"]]],["utrecht-icon-error.cjs",[[1,"utrecht-icon-error"]]],["utrecht-icon-facebook.cjs",[[1,"utrecht-icon-facebook"]]],["utrecht-icon-filter.cjs",[[1,"utrecht-icon-filter"]]],["utrecht-icon-information.cjs",[[1,"utrecht-icon-information"]]],["utrecht-icon-instagram.cjs",[[1,"utrecht-icon-instagram"]]],["utrecht-icon-linkedin.cjs",[[1,"utrecht-icon-linkedin"]]],["utrecht-icon-list.cjs",[[1,"utrecht-icon-list"]]],["utrecht-icon-loupe.cjs",[[1,"utrecht-icon-loupe"]]],["utrecht-icon-melding.cjs",[[1,"utrecht-icon-melding"]]],["utrecht-icon-paspoort.cjs",[[1,"utrecht-icon-paspoort"]]],["utrecht-icon-rijbewijs.cjs",[[1,"utrecht-icon-rijbewijs"]]],["utrecht-icon-toeslag.cjs",[[1,"utrecht-icon-toeslag"]]],["utrecht-icon-trouwen.cjs",[[1,"utrecht-icon-trouwen"]]],["utrecht-icon-twitter.cjs",[[1,"utrecht-icon-twitter"]]],["utrecht-icon-verhuizen.cjs",[[1,"utrecht-icon-verhuizen"]]],["utrecht-icon-warning.cjs",[[1,"utrecht-icon-warning"]]],["utrecht-icon-whatsapp.cjs",[[1,"utrecht-icon-whatsapp"]]],["utrecht-icon-zoomin.cjs",[[1,"utrecht-icon-zoomin"]]],["utrecht-icon-zoomout.cjs",[[1,"utrecht-icon-zoomout"]]],["utrecht-logo.cjs",[[1,"utrecht-logo"]]],["utrecht-page.cjs",[[1,"utrecht-page"]]],["utrecht-page-content.cjs",[[1,"utrecht-page-content"]]],["utrecht-page-footer.cjs",[[1,"utrecht-page-footer"]]],["utrecht-page-header.cjs",[[1,"utrecht-page-header"]]],["utrecht-pagination.cjs",[[1,"utrecht-pagination",{"links":[1],"next":[1],"prev":[1],"currentIndex":[2,"current-index"]}]]],["utrecht-separator.cjs",[[1,"utrecht-separator"]]],["utrecht-sidenav.cjs",[[1,"utrecht-sidenav",{"json":[1]}]]],["utrecht-textbox.cjs",[[1,"utrecht-textbox",{"autoComplete":[513,"autocomplete"],"disabled":[516],"invalid":[516],"min":[1],"max":[1],"pattern":[1],"placeholder":[1],"readOnly":[516,"readonly"],"required":[516],"type":[513],"value":[1]}]]],["utrecht-icon-checkmark.cjs",[[1,"utrecht-icon-checkmark"]]],["utrecht-heading-2_3.cjs",[[1,"utrecht-heading-2"],[1,"utrecht-heading-3"],[1,"utrecht-paragraph",{"lead":[4]}]]],["utrecht-button_2.cjs",[[1,"utrecht-button",{"appearance":[1],"busy":[4],"disabled":[4],"type":[1]}],[1,"utrecht-digid-logo"]]]], options);
 });

package/dist/collection/article/web-component/index.css

@@ -6,6 +6,10 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 .utrecht-article {
   max-inline-size: var(--utrecht-article-max-inline-size);
 }

package/dist/collection/backdrop/web-component/index.css

@@ -6,6 +6,10 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
 .utrecht-backdrop {
   background-color: var(--utrecht-backdrop-background-color);
   bottom: 0;

package/dist/collection/badge-counter/web-component/index.css

@@ -6,30 +6,6 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2021 Robbert Broersma
- */
-.utrecht-badge {
-  background-color: var(--utrecht-badge-background-color, black);
-  border-radius: var(--utrecht-badge-border-radius, 0.5ch);
-  color: var(--utrecht-badge-color, white);
-  display: inline-block;
-  font-family: var(--utrecht-document-font-family, sans-serif);
-  font-size: var(--utrecht-badge-font-size, inherit);
-  font-style: var(--utrecht-badge-font-style, normal);
-  /* no inheritance */
-  font-weight: var(--utrecht-badge-font-weight, bold);
-  /* no inheritance */
-  line-height: var(--utrecht-badge-line-height);
-  padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
-  padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
-  padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
-  padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
-  text-decoration: none;
-  /* no inheritance */
-}
-
 .utrecht-badge-counter {
   background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, black));
   border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));

package/dist/collection/badge-data/web-component/index.css

@@ -10,7 +10,7 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-badge, .utrecht-badge-data {
+.utrecht-badge-data {
   background-color: var(--utrecht-badge-background-color, black);
   border-radius: var(--utrecht-badge-border-radius, 0.5ch);
   color: var(--utrecht-badge-color, white);
@@ -28,9 +28,6 @@
   padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
   text-decoration: none;
   /* no inheritance */
-}
-
-.utrecht-badge-data {
   letter-spacing: var(--utrecht-badge-data-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-data-text-transform, inherit);
 }

package/dist/collection/badge-status/web-component/index.css

@@ -10,7 +10,7 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
-.utrecht-badge, .utrecht-badge-status {
+.utrecht-badge-status {
   background-color: var(--utrecht-badge-background-color, black);
   border-radius: var(--utrecht-badge-border-radius, 0.5ch);
   color: var(--utrecht-badge-color, white);
@@ -28,9 +28,6 @@
   padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
   text-decoration: none;
   /* no inheritance */
-}
-
-.utrecht-badge-status {
   letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
   text-transform: var(--utrecht-badge-status-text-transform, inherit);
 }

package/dist/collection/breadcrumb/web-component/index.css

@@ -6,6 +6,63 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
  */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-breadcrumb--arrows {
+  /* https://css-tricks.com/triangle-breadcrumbs/ */
+  --utrecht-breadcrumb-arrow-size: 24px;
+  overflow: hidden;
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link {
+  padding-inline-end: 0;
+  position: relative;
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
+  border-block-end-width: var(--utrecht-breadcrumb-block-size);
+  border-block-start-width: var(--utrecht-breadcrumb-block-size);
+  border-color: transparent;
+  border-style: solid;
+  content: " ";
+  display: block;
+  height: 0;
+  left: 100%;
+  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after {
+  border-inline-start-color: var(--utrecht-breadcrumb-link-background-color);
+  border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
+  z-index: 2;
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before {
+  border-inline-start-color: var(--utrecht-document-background-color);
+  border-inline-start-width: var(--utrecht-breadcrumb-arrow-size);
+  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-block-size));
+  margin-inline-start: 1px;
+  z-index: 1;
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus {
+  background-color: var(--utrecht-breadcrumb-link-focus-background-color);
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after {
+  border-inline-start-color: var(--utrecht-breadcrumb-link-focus-background-color);
+}
+.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item .utrecht-breadcrumb__link {
+  padding-inline-start: calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size));
+}
+
+.utrecht-breadcrumb__item ~ .utrecht-breadcrumb__item {
+  margin-inline-start: var(--utrecht-breadcrumb-item-divider-inline-size);
+}
+
 .utrecht-breadcrumb {
   --utrecht-focus-background-color: var(--utrecht-breadcrumb-link-focus-background-color);
   --utrecht-link-background-color: var(--utrecht-breadcrumb-link-background-color);
@@ -99,6 +156,18 @@ ol.utrecht-breadcrumb__list {
   margin-inline-start: var(--utrecht-breadcrumb-item-divider-inline-size);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/* stylelint-disable scss/no-global-function-names */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -166,6 +235,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
 `text-decoration-skip` also makes the transition more challenging to implement.
 
 */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-link {
   color: var(--utrecht-link-color, blue);
   text-decoration: var(--utrecht-link-text-decoration, underline);
@@ -203,7 +276,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-link-active-color, var(--utrecht-link-color));
 }
 
-.utrecht-link--focus, .utrecht-link:focus {
+.utrecht-link--focus {
+  background-color: var(--utrecht-link-focus-background-color, transparent);
   color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip: none;
@@ -211,7 +285,21 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link--focus-visible, .utrecht-link:focus {
+.utrecht-link--focus-visible {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-link:focus {
+  background-color: var(--utrecht-link-focus-background-color, transparent);
+  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
   outline-offset: var(--utrecht-focus-outline-offset, 0);

package/dist/collection/button/css/stories/02-appearance.js

@@ -0,0 +1,57 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+
+import { Button } from '../template';
+
+export const defaultArgs = {
+  textContent: '',
+  defaultButton: true,
+  primaryActionButton: false,
+  secondaryActionButton: false,
+  subtleButton: false,
+};
+
+export const ButtonTable = ({
+  textContent = '',
+  defaultButton = true,
+  primaryActionButton = false,
+  secondaryActionButton = false,
+  subtleButton = false,
+}) => {
+  const appearances = [
+    defaultButton && 'button',
+    primaryActionButton && 'primary-action-button',
+    secondaryActionButton && 'secondary-action-button',
+    subtleButton && 'subtle-button',
+  ].filter(Boolean);
+  return `<table class="utrecht-table" style="inline-size: auto">
+  <thead class="utrecht--table__header">
+    <tr class="utrecht-table__row">
+      <th class="utrecht-table__header-cell"></th>
+      <th class="utrecht-table__header-cell">Default</th>
+      <th class="utrecht-table__header-cell">Active</th>
+      <th class="utrecht-table__header-cell">Hover</th>
+      <th class="utrecht-table__header-cell">Focus</th>
+      <th class="utrecht-table__header-cell">Focus visible</th>
+      <th class="utrecht-table__header-cell">Disabled</th>
+    </tr>
+  </thead>
+  <tbody class="utrecht--table__body">${appearances
+    .map(
+      (appearance) => `
+    <tr class="utrecht-table__row">
+      <th class="utrecht-table__header-cell">${appearance}</th>
+      <td class="utrecht-table__cell">${Button({ appearance, textContent })}</td>
+      <td class="utrecht-table__cell">${Button({ appearance, textContent, active: true })}</td>
+      <td class="utrecht-table__cell">${Button({ appearance, textContent, hover: true })}</td>
+      <td class="utrecht-table__cell">${Button({ appearance, textContent, focus: true })}</td>
+      <td class="utrecht-table__cell">${Button({ appearance, textContent, focusVisible: true })}</td>
+      <td class="utrecht-table__cell">${Button({ appearance, textContent, disabled: true })}</td>
+    </tr>`,
+    )
+    .join('')}
+  </tbody>
+</table>`;
+};

package/dist/collection/button/css/template.js

@@ -0,0 +1,82 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from 'clsx';
+
+export const defaultArgs = {
+  active: false,
+  appearance: 'button',
+  busy: false,
+  disabled: false,
+  focus: false,
+  focusVisible: false,
+  hover: false,
+  textContent: '',
+  type: 'button',
+};
+
+export const argTypes = {
+  active: {
+    description: 'Active',
+    control: 'boolean',
+  },
+  appearance: {
+    description: 'Appearance',
+    control: { type: 'select' },
+    options: ['', 'button', 'primary-action-button', 'secondary-action-button', 'subtle-button'],
+  },
+  busy: {
+    description: 'Busy',
+    control: 'boolean',
+  },
+  disabled: {
+    description: 'Disabled',
+    control: 'boolean',
+  },
+  focus: {
+    description: 'Focus',
+    control: 'boolean',
+  },
+  focusVisible: {
+    description: 'Focus visible',
+    control: 'boolean',
+  },
+  hover: {
+    description: 'Hover',
+    control: 'boolean',
+  },
+  textContent: {
+    description: 'Button text',
+    control: 'text',
+  },
+  type: {
+    control: { type: 'select' },
+    options: ['', 'button', 'reset', 'submit'],
+  },
+};
+
+export const Button = ({
+  active = false,
+  appearance = null,
+  busy = false,
+  disabled = false,
+  focus = false,
+  focusVisible = false,
+  hover = false,
+  textContent = '',
+  type = 'button',
+}) =>
+  `<button class="${clsx('utrecht-button', {
+    'utrecht-button--active': active,
+    'utrecht-button--busy': busy,
+    'utrecht-button--hover': hover,
+    'utrecht-button--focus': focus,
+    'utrecht-button--focus-visible': focusVisible,
+    'utrecht-button--disabled': disabled,
+    'utrecht-button--primary-action': appearance === 'primary-action-button',
+    'utrecht-button--secondary-action': appearance === 'secondary-action-button',
+    'utrecht-button--subtle': appearance === 'subtle-button',
+  })}"${disabled ? ' aria-disabled="true"' : ''} type="${type}">${textContent}</button>`;

package/dist/collection/button/{html.js → html/template.js}

@@ -11,6 +11,30 @@ export const defaultArgs = {
   type: 'button',
 };
 
+export const argTypes = {
+  busy: {
+    description: 'Busy',
+    control: 'boolean',
+  },
+  disabled: {
+    description: 'Disabled',
+    control: 'boolean',
+  },
+  focusable: {
+    description: 'Focusable',
+    control: 'boolean',
+  },
+  textContent: {
+    description: 'Content of the button',
+    control: 'text',
+  },
+  type: {
+    description: 'Type',
+    control: { type: 'select' },
+    options: ['', 'button', 'reset', 'submit'],
+  },
+};
+
 export const Button = ({ busy = false, disabled = false, focusable = false, textContent = '', type = 'button' }) =>
   `<button type="${type || 'button'}"${busy ? ' aria-busy="true"' : ''}${
     disabled ? (focusable ? ' aria-disabled="true"' : ' disabled') : ''