@nl-design-system-community/clippy-components 1.1.0 → 1.2.0

package/dist/clippy-modal/index.js

@@ -1,7 +1,26 @@
-import { css as v, unsafeCSS as i, LitElement as g, nothing as s, html as l } from "lit";
-import { property as c, query as p, customElement as _ } from "lit/decorators.js";
-const m = ".ams-dialog:not(dialog:not([open])){background-color:var(--ams-dialog-background-color);border-color:var(--ams-dialog-border-color);border-style:var(--ams-dialog-border-style);border-width:var(--ams-dialog-border-width);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--ams-dialog-gap);inline-size:var(--ams-dialog-inline-size);max-block-size:var(--ams-dialog-max-block-size);max-inline-size:var(--ams-dialog-max-inline-size);inset-block:0;padding-block:0;padding-inline:0}@media screen and (min-width:37.5rem){.ams-dialog:not(dialog:not([open])){inline-size:var(--ams-dialog-medium-inline-size);max-block-size:var(--ams-dialog-medium-max-block-size)}}.ams-dialog:not(dialog:not([open]))::backdrop{background:var(--ams-dialog-backdrop-background-color, rgba(24, 24, 24, .625))}.ams-dialog__header{align-items:flex-start;display:flex;gap:var(--ams-dialog-header-gap);justify-content:space-between;padding-block:var(--ams-dialog-header-padding-block);padding-inline:var(--ams-dialog-header-padding-inline)}@media screen and (min-width:37.5rem){.ams-dialog__header{padding-block:var(--ams-dialog-header-medium-padding-block);padding-inline:var(--ams-dialog-header-medium-padding-inline)}}.ams-dialog__body{overflow-y:auto;overscroll-behavior-y:contain;padding-block:var(--ams-dialog-body-padding-block);padding-inline:var(--ams-dialog-body-padding-inline)}@media screen and (min-width:37.5rem){.ams-dialog__body{padding-inline:var(--ams-dialog-body-medium-padding-inline)}}.ams-dialog__footer{padding-block:var(--ams-dialog-footer-padding-block);padding-inline:var(--ams-dialog-footer-padding-inline)}@media screen and (min-width:37.5rem){.ams-dialog__footer{padding-block:var(--ams-dialog-footer-medium-padding-block);padding-inline:var(--ams-dialog-footer-medium-padding-inline)}}", y = ".ams-visually-hidden:not(:active,:focus){block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;-webkit-user-select:none;user-select:none;white-space:nowrap}", k = ".utrecht-button{--_utrecht-button-background-color: var( --_utrecht-button-hint-background-color, var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color)) );--_utrecht-button-color: var( --_utrecht-button-hint-color, var(--_utrecht-button-appearance-color, var(--utrecht-button-color)) );--_utrecht-button-border-color: var( --_utrecht-button-hint-border-color, var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent)) );--_utrecht-button-border-bottom-color: var( --_utrecht-button-hint-border-bottom-color, var( --_utrecht-button-hint-border-color, var( --_utrecht-button-appearance-border-bottom-color, var( --_utrecht-button-appearance-border-color, var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent)) ) ) ) );--_utrecht-button-disabled-background-color: var( --_utrecht-button-hint-disabled-background-color, var( --_utrecht-button-appearance-disabled-background-color, var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color)) ) );--_utrecht-button-disabled-border-color: var( --_utrecht-button-hint-disabled-border-color, var( --_utrecht-button-appearance-disabled-border-color, var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color)) ) );--_utrecht-button-disabled-color: var( --_utrecht-button-hint-disabled-color, var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color))) );--_utrecht-button-pressed-background-color: var( --_utrecht-button-hint-pressed-background-color, var( --_utrecht-button-hint-background-color, var( --_utrecht-button-appearance-pressed-background-color, var( --_utrecht-button-appearance-background-color, var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color)) ) ) ) );--_utrecht-button-pressed-border-color: var( --_utrecht-button-hint-pressed-border-color, var( --_utrecht-button-hint-border-color, var( --_utrecht-button-appearance-pressed-border-color, var( --_utrecht-button-appearance-border-color, var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color)) ) ) ) );--_utrecht-button-pressed-color: var( --_utrecht-button-hint-pressed-color, var( --_utrecht-button-hint-color, var( --_utrecht-button-appearance-pressed-color, var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color))) ) ) );--_utrecht-button-focus-background-color: var( --_utrecht-button-hint-focus-background-color, var( --_utrecht-button-hint-background-color, var( --_utrecht-button-appearance-focus-background-color, var( --_utrecht-button-appearance-background-color, var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color)) ) ) ) );--_utrecht-button-focus-border-color: var( --_utrecht-button-hint-focus-border-color, var( --_utrecht-button-hint-border-color, var( --_utrecht-button-appearance-focus-border-color, var( --_utrecht-button-appearance-border-color, var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color)) ) ) ) );--_utrecht-button-focus-color: var( --_utrecht-button-hint-focus-color, var( --_utrecht-button-hint-color, var( --_utrecht-button-appearance-focus-color, var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color))) ) ) );--_utrecht-button-hover-background-color: var( --_utrecht-button-hint-hover-background-color, var( --_utrecht-button-hint-background-color, var( --_utrecht-button-appearance-hover-background-color, var( --_utrecht-button-appearance-background-color, var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color)) ) ) ) );--_utrecht-button-hover-border-color: var( --_utrecht-button-hint-hover-border-color, var( --_utrecht-button-hint-border-color, var( --_utrecht-button-appearance-hover-border-color, var( --_utrecht-button-appearance-border-color, var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color)) ) ) ) );--_utrecht-button-hover-color: var( --_utrecht-button-hint-hover-color, var( --_utrecht-button-hint-color, var( --_utrecht-button-appearance-hover-color, var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color))) ) ) );--_utrecht-button-active-background-color: var( --_utrecht-button-hint-active-background-color, var( --_utrecht-button-hint-background-color, var( --_utrecht-button-appearance-active-background-color, var( --_utrecht-button-appearance-background-color, var(--utrecht-button-active-background-color, var(--utrecht-button-background-color)) ) ) ) );--_utrecht-button-active-border-color: var( --_utrecht-button-hint-active-border-color, var( --_utrecht-button-hint-border-color, var( --_utrecht-button-appearance-active-border-color, var( --_utrecht-button-appearance-border-color, var(--utrecht-button-active-border-color, var(--utrecht-button-border-color)) ) ) ) );--_utrecht-button-active-color: var( --_utrecht-button-hint-active-color, var( --_utrecht-button-hint-color, var( --_utrecht-button-appearance-active-color, var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color))) ) ) );--_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));--_utrecht-button-border-block-end-width: var( --utrecht-button-border-bottom-width, var(--_utrecht-button-border-width, 0) );--_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));--_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));--utrecht-icon-size: var(--utrecht-button-icon-size, 1em);align-items:center;background-color:var(--_utrecht-button-background-color);block-size:fit-content;border-block-end-color:var(--_utrecht-button-border-bottom-color);border-block-end-width:var(--_utrecht-button-border-block-end-width);border-color:var(--_utrecht-button-border-color);border-radius:var(--utrecht-button-border-radius);border-style:solid;border-width:var(--_utrecht-button-border-width);box-sizing:border-box;color:var(--_utrecht-button-color);column-gap:var(--utrecht-button-column-gap);cursor:var(--utrecht-action-activate-cursor, revert);display:inline-flex;font-family:var(--utrecht-button-font-family, var(--utrecht-document-font-family));font-size:var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));font-weight:var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));inline-size:var(--utrecht-button-inline-size, auto);justify-content: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) var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert);z-index:1}.utrecht-button--focus:not(.utrecht-button--disabled){background-color:var(--_utrecht-button-focus-background-color);border-color:var(--_utrecht-button-focus-border-color);color:var(--_utrecht-button-focus-color);scale:var(--utrecht-button-focus-scale, 1)}.utrecht-button:focus-visible{--_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert);z-index:1}.utrecht-button:focus:not(:disabled,[aria-disabled=true],.utrecht-button--disabled){background-color:var(--_utrecht-button-focus-background-color);border-color:var(--_utrecht-button-focus-border-color);color:var(--_utrecht-button-focus-color);scale:var(--utrecht-button-focus-scale, 1)}.utrecht-button--hover:not(:disabled,.utrecht-button--disabled),.utrecht-button:hover:not(:disabled,[aria-disabled=true],.utrecht-button--disabled){background-color:var(--_utrecht-button-hover-background-color);border-color:var(--_utrecht-button-hover-border-color);color:var(--_utrecht-button-hover-color);scale:var(--utrecht-button-hover-scale, 1)}.utrecht-button:active:not(:disabled,[aria-disabled=true],.utrecht-button--disabled),.utrecht-button--active{background-color:var(--_utrecht-button-active-background-color);border-color:var(--_utrecht-button-active-border-color);color:var(--_utrecht-button-active-color)}.utrecht-button--primary-action{--_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);--_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color);--_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color);--_utrecht-button-appearance-background-color: var(--utrecht-button-primary-action-background-color);--_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);--_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);--_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);--_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size);--_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);--_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height);--_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);--_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);--_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);--_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);--_utrecht-button-appearance-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);--_utrecht-button-appearance-focus-color: var(--utrecht-button-primary-action-focus-color);--_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);--_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);--_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color);--_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-primary-action-pressed-background-color);--_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color);--_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color)}.utrecht-button--secondary-action{--_utrecht-button-appearance-active-background-color: var(--utrecht-button-secondary-action-active-background-color);--_utrecht-button-appearance-active-border-color: var(--utrecht-button-secondary-action-active-border-color);--_utrecht-button-appearance-active-color: var(--utrecht-button-secondary-action-active-color);--_utrecht-button-appearance-background-color: var(--utrecht-button-secondary-action-background-color);--_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);--_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);--_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);--_utrecht-button-appearance-font-size: var(--utrecht-button-secondary-action-font-size);--_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);--_utrecht-button-appearance-line-height: var(--utrecht-button-secondary-action-line-height);--_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);--_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);--_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);--_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);--_utrecht-button-appearance-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);--_utrecht-button-appearance-focus-color: var(--utrecht-button-secondary-action-focus-color);--_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);--_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);--_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color);--_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color);--_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color);--_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color)}.utrecht-button--subtle{--_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);--_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);--_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);--_utrecht-button-appearance-background-color: var(--utrecht-button-subtle-background-color);--_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);--_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);--_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);--_utrecht-button-appearance-font-size: var(--utrecht-button-subtle-font-size);--_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);--_utrecht-button-appearance-line-height: var(--utrecht-button-subtle-line-height);--_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);--_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);--_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);--_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);--_utrecht-button-appearance-focus-border-color: var(--utrecht-button-subtle-focus-border-color);--_utrecht-button-appearance-focus-color: var(--utrecht-button-subtle-focus-color);--_utrecht-button-appearance-hover-background-color: var(--utrecht-button-subtle-hover-background-color);--_utrecht-button-appearance-hover-border-color: var(--utrecht-button-subtle-hover-border-color);--_utrecht-button-appearance-hover-color: var(--utrecht-button-subtle-hover-color);--_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-subtle-pressed-background-color);--_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);--_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color)}.utrecht-button--primary-action.utrecht-button--danger{--_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-danger-active-background-color);--_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-danger-active-border-color);--_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-danger-active-color);--_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-danger-background-color);--_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-danger-border-color);--_utrecht-button-hint-color: var(--utrecht-button-primary-action-danger-color);--_utrecht-button-hint-disabled-background-color: var( --utrecht-button-primary-action-danger-disabled-background-color );--_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( --utrecht-button-primary-action-danger-pressed-background-color );--_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( --utrecht-button-primary-action-ready-disabled-background-color );--_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( --utrecht-button-primary-action-ready-pressed-background-color );--_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( --utrecht-button-primary-action-warning-disabled-background-color );--_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( --utrecht-button-primary-action-warning-pressed-background-color );--_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( --utrecht-button-secondary-action-danger-disabled-background-color );--_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( --utrecht-button-secondary-action-danger-pressed-background-color );--_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( --utrecht-button-secondary-action-ready-disabled-background-color );--_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( --utrecht-button-secondary-action-ready-pressed-background-color );--_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( --utrecht-button-secondary-action-warning-disabled-background-color );--_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( --utrecht-button-secondary-action-warning-pressed-background-color );--_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( --utrecht-button-subtle-danger-disabled-background-color );--_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( --utrecht-button-subtle-danger-pressed-background-color );--_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( --utrecht-button-subtle-ready-disabled-background-color );--_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( --utrecht-button-subtle-ready-pressed-background-color );--_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( --utrecht-button-subtle-warning-disabled-background-color );--_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( --utrecht-button-subtle-warning-pressed-background-color );--_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)}", f = [
-  v`
+import { s as b } from "../decorators-BGpMqJ7V.js";
+import { b as h } from "../index-CT1z3SFL.js";
+import "../clippy-icon/index.js";
+import { css as u, unsafeCSS as c, LitElement as v, nothing as p, html as m } from "lit";
+import { property as d, query as y } from "lit/decorators.js";
+import { unsafeSVG as f } from "lit/directives/unsafe-svg.js";
+const k = ".ams-dialog:not(dialog:not([open])){background-color:var(--ams-dialog-background-color);border-color:var(--ams-dialog-border-color);border-style:var(--ams-dialog-border-style);border-width:var(--ams-dialog-border-width);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--ams-dialog-gap);inline-size:var(--ams-dialog-inline-size);max-block-size:var(--ams-dialog-max-block-size);max-inline-size:var(--ams-dialog-max-inline-size);inset-block:0;padding-block:0;padding-inline:0}@media screen and (min-width:37.5rem){.ams-dialog:not(dialog:not([open])){inline-size:var(--ams-dialog-medium-inline-size);max-block-size:var(--ams-dialog-medium-max-block-size)}}.ams-dialog:not(dialog:not([open]))::backdrop{background:var(--ams-dialog-backdrop-background-color, rgba(24, 24, 24, .625))}.ams-dialog__header{align-items:flex-start;display:flex;gap:var(--ams-dialog-header-gap);justify-content:space-between;padding-block:var(--ams-dialog-header-padding-block);padding-inline:var(--ams-dialog-header-padding-inline)}@media screen and (min-width:37.5rem){.ams-dialog__header{padding-block:var(--ams-dialog-header-medium-padding-block);padding-inline:var(--ams-dialog-header-medium-padding-inline)}}.ams-dialog__body{overflow-y:auto;overscroll-behavior-y:contain;padding-block:var(--ams-dialog-body-padding-block);padding-inline:var(--ams-dialog-body-padding-inline)}@media screen and (min-width:37.5rem){.ams-dialog__body{padding-inline:var(--ams-dialog-body-medium-padding-inline)}}.ams-dialog__footer{padding-block:var(--ams-dialog-footer-padding-block);padding-inline:var(--ams-dialog-footer-padding-inline)}@media screen and (min-width:37.5rem){.ams-dialog__footer{padding-block:var(--ams-dialog-footer-medium-padding-block);padding-inline:var(--ams-dialog-footer-medium-padding-inline)}}", _ = `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="icon icon-tabler icons-tabler-outline icon-tabler-x"
+>
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M18 6l-12 12" />
+  <path d="M6 6l12 12" />
+</svg>`, w = [
+  u`
     :host {
       --ams-dialog-background-color: var(--todo-modal-dialog-background-color);
       --ams-dialog-border-color: var(--todo-modal-dialog-border-color);
@@ -40,22 +59,22 @@ const m = ".ams-dialog:not(dialog:not([open])){background-color:var(--ams-dialog
     }
   `
 ];
-var w = Object.defineProperty, z = Object.getOwnPropertyDescriptor, r = (o, a, u, n) => {
-  for (var e = n > 1 ? void 0 : n ? z(a, u) : a, b = o.length - 1, d; b >= 0; b--)
-    (d = o[b]) && (e = (n ? d(a, u, e) : d(e)) || e);
-  return n && e && w(a, u, e), e;
+var x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, a = (i, l, t, n) => {
+  for (var e = n > 1 ? void 0 : n ? z(l, t) : l, s = i.length - 1, r; s >= 0; s--)
+    (r = i[s]) && (e = (n ? r(l, t, e) : r(e)) || e);
+  return n && e && x(l, t, e), e;
 };
-let x = 0;
-const h = {
+let E = 0;
+const $ = "clippy-modal", g = {
   cancel: "cancel",
   confirm: "confirm"
 };
-let t = class extends g {
+let o = class extends v {
   constructor() {
-    super(...arguments), this.ariaDescribedby = "", this.standardOpen = !1, this.title = "", this.closedBy = "any", this.actions = "cancel", this.confirmLabel = "OK", this.cancelLabel = "Cancel", this.titleId = `clippy-modal-title-${++x}`, this.previouslyFocusedElement = null, this.open = () => {
+    super(...arguments), this.ariaDescribedby = "", this.standardOpen = !1, this.title = "", this.closedBy = "any", this.actions = "cancel", this.confirmLabel = "OK", this.cancelLabel = "Cancel", this.titleId = `clippy-modal-title-${++E}`, this.previouslyFocusedElement = null, this.open = () => {
       if (!this.dialogElement) return;
-      const o = this.getRootNode();
-      this.previouslyFocusedElement = o.activeElement, this.dialogElement.showModal();
+      const i = this.getRootNode();
+      this.previouslyFocusedElement = i.activeElement, this.dialogElement.showModal();
     }, this.onDialogClose = () => {
       if (this.dispatchEvent(
         new Event("close", {
@@ -68,20 +87,20 @@ let t = class extends g {
         } catch {
         }
       this.previouslyFocusedElement = null;
-    }, this.onDialogCancel = (o) => {
-      o.preventDefault(), this.close();
+    }, this.onDialogCancel = (i) => {
+      i.preventDefault(), this.close();
     }, this.onCloseClick = () => {
-      this.close(h.cancel);
+      this.close(g.cancel);
     };
   }
-  close(o) {
-    this.dialogElement?.open && this.dialogElement.close(o);
+  close(i) {
+    this.dialogElement?.open && this.dialogElement.close(i);
   }
   get returnValue() {
     return this.dialogElement?.returnValue ?? "No return value.";
   }
   render() {
-    return l`
+    return m`
       <dialog
         class="ams-dialog"
         closedby=${this.closedBy}
@@ -94,71 +113,68 @@ let t = class extends g {
       >
         <form method="dialog" novalidate>
           <header class="ams-dialog__header">
-            <h1 id=${this.titleId}>
+            <clippy-heading level={1} id=${this.titleId}>
               <slot name="title">${this.title}</slot>
-            </h1>
-            <button class="utrecht-button utrecht-button--primary-action" type="button" @click=${this.onCloseClick}>
-              <span class="ams-visually-hidden">Sluiten</span>
-              <div style=" --utrecht-icon-size: 8px;">
-                <utrecht-icon-close></utrecht-icon-close>
-              </div>
-            </button>
+            </clippy-heading>
+            <clippy-button icon-only @click=${this.onCloseClick} purpose="subtle">
+              <clippy-icon slot="iconStart">${f(_)}</clippy-icon>
+              Sluiten
+            </clippy-button>
           </header>
           <div class="ams-dialog__body">
             <slot></slot>
           </div>
           <footer class="ams-dialog__footer">
             <!-- using utrecht-button here disrupts the dialog form flow since it's in the shadow DOM. -->
-            ${this.actions === "confirm" || this.actions === "both" ? l`
-                  <button class="utrecht-button utrecht-button--primary-action" value=${h.confirm}>
+            ${this.actions === "confirm" || this.actions === "both" ? m`
+                  <button class="nl-button nl-button--primary" value=${g.confirm}>
                     ${this.confirmLabel}
                   </button>
-                ` : s}
-            ${this.actions === "cancel" || this.actions === "both" ? l`
-                  <button class="utrecht-button utrecht-button--secondary-action" value=${h.cancel}>
+                ` : p}
+            ${this.actions === "cancel" || this.actions === "both" ? m`
+                  <button class="nl-button nl-button--secondary" value=${g.cancel}>
                     ${this.cancelLabel}
                   </button>
-                ` : s}
+                ` : p}
           </footer>
         </form>
       </dialog>
     `;
   }
 };
-t.styles = [
-  f,
-  i(m),
-  i(y),
-  i(k)
+o.styles = [
+  w,
+  c(k),
+  c(h)
 ];
-r([
-  c({ attribute: "aria-describedby", type: String })
-], t.prototype, "ariaDescribedby", 2);
-r([
-  c({ type: Boolean })
-], t.prototype, "standardOpen", 2);
-r([
-  c({ type: String })
-], t.prototype, "title", 2);
-r([
-  c({ type: String })
-], t.prototype, "closedBy", 2);
-r([
-  c({ type: String })
-], t.prototype, "actions", 2);
-r([
-  c({ type: String })
-], t.prototype, "confirmLabel", 2);
-r([
-  c({ type: String })
-], t.prototype, "cancelLabel", 2);
-r([
-  p("dialog")
-], t.prototype, "dialogElement", 2);
-t = r([
-  _("clippy-modal")
-], t);
+a([
+  d({ attribute: "aria-describedby", type: String })
+], o.prototype, "ariaDescribedby", 2);
+a([
+  d({ type: Boolean })
+], o.prototype, "standardOpen", 2);
+a([
+  d({ type: String })
+], o.prototype, "title", 2);
+a([
+  d({ type: String })
+], o.prototype, "closedBy", 2);
+a([
+  d({ type: String })
+], o.prototype, "actions", 2);
+a([
+  d({ type: String })
+], o.prototype, "confirmLabel", 2);
+a([
+  d({ type: String })
+], o.prototype, "cancelLabel", 2);
+a([
+  y("dialog")
+], o.prototype, "dialogElement", 2);
+o = a([
+  b($)
+], o);
 export {
-  t as ClippyModal,
-  h as DIALOG_BUTTON_VALUES
+  o as ClippyModal,
+  g as DIALOG_BUTTON_VALUES
 };

package/dist/decorators-BGpMqJ7V.js

@@ -0,0 +1,7 @@
+const n = (s) => (t) => {
+  const e = globalThis.customElements;
+  e && !e.get(s) && e.define(s, t);
+};
+export {
+  n as s
+};

package/dist/en-B-D8DBsf.js

@@ -0,0 +1,4 @@
+import { C as o } from "./index-CtreqNZ6.js";
+export {
+  o as default
+};