@nl-design-system-community/clippy-components 1.0.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.
- package/LICENSE.md +288 -0
- package/dist/clippy-combobox/index.d.ts +60 -0
- package/dist/clippy-combobox/index.js +317 -0
- package/dist/clippy-font-combobox/external.d.ts +6 -0
- package/dist/clippy-font-combobox/google-fonts.json.d.ts +33283 -0
- package/dist/clippy-font-combobox/index.d.ts +20 -0
- package/dist/clippy-font-combobox/index.js +55 -0
- package/dist/clippy-html-image/index.d.ts +14 -0
- package/dist/clippy-html-image/index.js +64 -0
- package/dist/clippy-modal/index.d.ts +43 -0
- package/dist/clippy-modal/index.js +164 -0
- package/dist/external-lwd0iv80.js +8 -0
- package/dist/index.d.ts +0 -0
- package/package.json +68 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ClippyCombobox } from '../clippy-combobox';
|
|
2
|
+
type Option = {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string | Array<string>;
|
|
5
|
+
cssUrl?: string;
|
|
6
|
+
};
|
|
7
|
+
declare const tag = "clippy-font-combobox";
|
|
8
|
+
declare global {
|
|
9
|
+
interface HTMLElementTagNameMap {
|
|
10
|
+
[tag]: ClippyFontCombobox;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
export declare class ClippyFontCombobox extends ClippyCombobox<Option> {
|
|
14
|
+
#private;
|
|
15
|
+
readonly filter: (option: Option) => boolean;
|
|
16
|
+
fetchAdditionalOptions(query: string): Promise<Option[]>;
|
|
17
|
+
valueToQuery(value: Option['value']): string;
|
|
18
|
+
renderEntry(option: Option, _index: number): import('lit').TemplateResult<1>;
|
|
19
|
+
}
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { html as m } from "lit";
|
|
2
|
+
import { customElement as _ } from "lit/decorators.js";
|
|
3
|
+
import { ref as b } from "lit/directives/ref.js";
|
|
4
|
+
import { styleMap as w } from "lit/directives/style-map.js";
|
|
5
|
+
import { ClippyCombobox as C } from "../clippy-combobox/index.js";
|
|
6
|
+
var E = Object.getOwnPropertyDescriptor, v = (t) => {
|
|
7
|
+
throw TypeError(t);
|
|
8
|
+
}, g = (t, e, r, o) => {
|
|
9
|
+
for (var s = o > 1 ? void 0 : o ? E(e, r) : e, n = t.length - 1, i; n >= 0; n--)
|
|
10
|
+
(i = t[n]) && (s = i(s) || s);
|
|
11
|
+
return s;
|
|
12
|
+
}, y = (t, e, r) => e.has(t) || v("Cannot " + r), a = (t, e, r) => (y(t, e, "read from private field"), r ? r.call(t) : e.get(t)), p = (t, e, r) => e.has(t) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), f = (t, e, r, o) => (y(t, e, "write to private field"), e.set(t, r), r), c, l, h;
|
|
13
|
+
const x = "clippy-font-combobox";
|
|
14
|
+
let u = class extends C {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments), p(this, c), p(this, l), this.filter = (t) => `${t.label}`.toLowerCase().includes(this.query.toLowerCase()), p(this, h, (t) => {
|
|
17
|
+
for (const e of t) {
|
|
18
|
+
const { intersectionRatio: r, target: o } = e;
|
|
19
|
+
if (r > 0 && o instanceof HTMLElement) {
|
|
20
|
+
const s = o.dataset.cssUrl || "", n = document.querySelector(`[href="${s}"]`);
|
|
21
|
+
if (s || !n) {
|
|
22
|
+
const i = document.createElement("link");
|
|
23
|
+
i.setAttribute("rel", "stylesheet"), i.setAttribute("href", s), document.head.appendChild(i);
|
|
24
|
+
}
|
|
25
|
+
a(this, l)?.unobserve(o);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
async fetchAdditionalOptions(t) {
|
|
31
|
+
f(this, c, a(this, c) ?? await import("../external-lwd0iv80.js").then(({ default: r }) => r));
|
|
32
|
+
const e = a(this, c).filter((r) => r.label.includes(t));
|
|
33
|
+
return e.length && f(this, l, a(this, l) ?? new IntersectionObserver(a(this, h), {
|
|
34
|
+
root: this.querySelector("[role=listbox]")
|
|
35
|
+
})), e;
|
|
36
|
+
}
|
|
37
|
+
valueToQuery(t) {
|
|
38
|
+
return Array.isArray(t) ? t[0] : t.split(",")[0];
|
|
39
|
+
}
|
|
40
|
+
renderEntry(t, e) {
|
|
41
|
+
const { cssUrl: r, label: o, value: s } = t, n = { fontFamily: s.toString(), fontSizeAdjust: 0.5 };
|
|
42
|
+
return m`<span ${b((d) => {
|
|
43
|
+
d && a(this, l) && a(this, l).observe(d);
|
|
44
|
+
})} style=${w(n)} data-css-url=${r}> ${o} </span>`;
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
c = /* @__PURE__ */ new WeakMap();
|
|
48
|
+
l = /* @__PURE__ */ new WeakMap();
|
|
49
|
+
h = /* @__PURE__ */ new WeakMap();
|
|
50
|
+
u = g([
|
|
51
|
+
_(x)
|
|
52
|
+
], u);
|
|
53
|
+
export {
|
|
54
|
+
u as ClippyFontCombobox
|
|
55
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare class ClippyHtmlImage extends LitElement {
|
|
3
|
+
static readonly styles: import('lit').CSSResult[];
|
|
4
|
+
private readonly labelSlot?;
|
|
5
|
+
private readonly imgDiv?;
|
|
6
|
+
private readonly labelId;
|
|
7
|
+
private observer?;
|
|
8
|
+
connectedCallback(): void;
|
|
9
|
+
updated(): void;
|
|
10
|
+
disconnectedCallback(): void;
|
|
11
|
+
private readonly onLabelSlotChange;
|
|
12
|
+
private updateLabelledBy;
|
|
13
|
+
render(): import('lit').TemplateResult<1>;
|
|
14
|
+
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { css as d, LitElement as h, html as c } from "lit";
|
|
2
|
+
import { query as b, customElement as u } from "lit/decorators.js";
|
|
3
|
+
const p = d`
|
|
4
|
+
:host {
|
|
5
|
+
cursor: default;
|
|
6
|
+
forced-color-adjust: none;
|
|
7
|
+
user-select: none;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
slot[name='label'] {
|
|
11
|
+
display: none;
|
|
12
|
+
}
|
|
13
|
+
`;
|
|
14
|
+
var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (a, t, o, s) => {
|
|
15
|
+
for (var e = s > 1 ? void 0 : s ? v(t, o) : t, i = a.length - 1, r; i >= 0; i--)
|
|
16
|
+
(r = a[i]) && (e = (s ? r(t, o, e) : r(e)) || e);
|
|
17
|
+
return s && e && m(t, o, e), e;
|
|
18
|
+
};
|
|
19
|
+
let g = 0, l = class extends h {
|
|
20
|
+
constructor() {
|
|
21
|
+
super(...arguments), this.labelId = `clippy-html-image-label-${++g}`, this.onLabelSlotChange = () => {
|
|
22
|
+
this.updateLabelledBy();
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
connectedCallback() {
|
|
26
|
+
super.connectedCallback(), this.observer = new MutationObserver(() => {
|
|
27
|
+
this.updateLabelledBy();
|
|
28
|
+
}), this.observer.observe(this, {
|
|
29
|
+
childList: !0,
|
|
30
|
+
subtree: !0
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
updated() {
|
|
34
|
+
this.updateLabelledBy(), this.labelSlot && this.labelSlot.addEventListener("slotchange", this.onLabelSlotChange);
|
|
35
|
+
}
|
|
36
|
+
disconnectedCallback() {
|
|
37
|
+
super.disconnectedCallback(), this.observer?.disconnect(), this.labelSlot?.removeEventListener("slotchange", this.onLabelSlotChange);
|
|
38
|
+
}
|
|
39
|
+
updateLabelledBy() {
|
|
40
|
+
if (!this.labelSlot || !this.imgDiv) return;
|
|
41
|
+
this.labelSlot.assignedNodes({ flatten: !0 }).length > 0 ? this.imgDiv.setAttribute("aria-labelledby", this.labelId) : this.imgDiv.removeAttribute("aria-labelledby");
|
|
42
|
+
}
|
|
43
|
+
render() {
|
|
44
|
+
return c`<div role="img">
|
|
45
|
+
<div inert>
|
|
46
|
+
<slot></slot>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<slot id=${this.labelId} name="label" @slotchange=${this.onLabelSlotChange}></slot>`;
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
l.styles = [p];
|
|
53
|
+
n([
|
|
54
|
+
b('slot[name="label"]')
|
|
55
|
+
], l.prototype, "labelSlot", 2);
|
|
56
|
+
n([
|
|
57
|
+
b('[role="img"]')
|
|
58
|
+
], l.prototype, "imgDiv", 2);
|
|
59
|
+
l = n([
|
|
60
|
+
u("clippy-html-image")
|
|
61
|
+
], l);
|
|
62
|
+
export {
|
|
63
|
+
l as ClippyHtmlImage
|
|
64
|
+
};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare const DIALOG_BUTTON_VALUES: {
|
|
3
|
+
cancel: string;
|
|
4
|
+
confirm: string;
|
|
5
|
+
};
|
|
6
|
+
export declare class ClippyModal extends LitElement {
|
|
7
|
+
/**
|
|
8
|
+
* Id of an element that describes the dialog, used for aria-describedby.
|
|
9
|
+
* Consumers are responsible for rendering that element in the light DOM.
|
|
10
|
+
*/
|
|
11
|
+
ariaDescribedby: string;
|
|
12
|
+
/**
|
|
13
|
+
* When loading the page, the dialog is not open by default.
|
|
14
|
+
*/
|
|
15
|
+
standardOpen: boolean;
|
|
16
|
+
title: string;
|
|
17
|
+
closedBy: string;
|
|
18
|
+
/**
|
|
19
|
+
* Control which footer actions are rendered.
|
|
20
|
+
* - "none": no footer actions
|
|
21
|
+
* - "cancel": only cancel button
|
|
22
|
+
* - "confirm": only confirm button
|
|
23
|
+
* - "both": both confirm and cancel buttons
|
|
24
|
+
*/
|
|
25
|
+
actions: 'none' | 'cancel' | 'confirm' | 'both';
|
|
26
|
+
/**
|
|
27
|
+
* Button labels for confirm/cancel actions. Consumers can override these,
|
|
28
|
+
* e.g. with localized strings.
|
|
29
|
+
*/
|
|
30
|
+
confirmLabel: string;
|
|
31
|
+
cancelLabel: string;
|
|
32
|
+
readonly dialogElement: HTMLDialogElement;
|
|
33
|
+
private readonly titleId;
|
|
34
|
+
private previouslyFocusedElement;
|
|
35
|
+
static readonly styles: (import('lit').CSSResult | import('lit').CSSResult[])[];
|
|
36
|
+
readonly open: () => void;
|
|
37
|
+
close(value?: string): void;
|
|
38
|
+
private readonly onDialogClose;
|
|
39
|
+
private readonly onDialogCancel;
|
|
40
|
+
private readonly onCloseClick;
|
|
41
|
+
get returnValue(): string;
|
|
42
|
+
render(): import('lit').TemplateResult<1>;
|
|
43
|
+
}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import { css as v, unsafeCSS as i, LitElement as g, nothing as s, html as l } from "lit";
|
|
2
|
+
import { property as c, query as p, customElement as _ } from "lit/decorators.js";
|
|
3
|
+
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 = [
|
|
4
|
+
v`
|
|
5
|
+
:host {
|
|
6
|
+
--ams-dialog-background-color: var(--todo-modal-dialog-background-color);
|
|
7
|
+
--ams-dialog-border-color: var(--todo-modal-dialog-border-color);
|
|
8
|
+
--ams-dialog-border-style: solid;
|
|
9
|
+
--ams-dialog-border-width: var(--todo-modal-dialog-border-width);
|
|
10
|
+
--ams-dialog-color: var(--todo-modal-dialog-color);
|
|
11
|
+
--ams-dialog-box-shadow: var(--todo-modal-dialog-box-shadow);
|
|
12
|
+
--ams-dialog-gap: var(--todo-modal-dialog-header-column-gap);
|
|
13
|
+
--ams-dialog-inline-size: var(--todo-modal-dialog-inline-size, auto);
|
|
14
|
+
--ams-dialog-max-block-size: var(--todo-modal-dialog-max-block-size, 90vh);
|
|
15
|
+
--ams-dialog-max-inline-size: var(--todo-modal-dialog-max-inline-size, 37.5rem);
|
|
16
|
+
--ams-dialog-medium-inline-size: var(--todo-modal-dialog-inline-size, 37.5rem);
|
|
17
|
+
--ams-dialog-medium-max-block-size: var(--todo-modal-dialog-max-block-size, 90vh);
|
|
18
|
+
--ams-dialog-header-gap: var(--todo-modal-dialog-header-column-gap);
|
|
19
|
+
--ams-dialog-header-padding-inline: var(--todo-modal-dialog-content-padding-inline);
|
|
20
|
+
--ams-dialog-header-padding-block: calc(
|
|
21
|
+
var(--todo-modal-dialog-header-padding-block-start) + var(--todo-modal-dialog-header-padding-block-end)
|
|
22
|
+
);
|
|
23
|
+
--ams-dialog-header-medium-padding-inline: var(--ams-dialog-header-padding-inline);
|
|
24
|
+
--ams-dialog-header-medium-padding-block: var(--ams-dialog-header-padding-block);
|
|
25
|
+
--ams-dialog-body-padding-inline: var(--todo-modal-dialog-content-padding-inline);
|
|
26
|
+
--ams-dialog-body-medium-padding-inline: var(--ams-dialog-body-padding-inline);
|
|
27
|
+
--ams-dialog-footer-padding-inline: var(--todo-modal-dialog-content-padding-inline);
|
|
28
|
+
--ams-dialog-footer-padding-block: calc(
|
|
29
|
+
var(--todo-modal-dialog-footer-padding-block-start) + var(--todo-modal-dialog-footer-padding-block-end)
|
|
30
|
+
);
|
|
31
|
+
--ams-dialog-footer-medium-padding-inline: var(--ams-dialog-footer-padding-inline);
|
|
32
|
+
--ams-dialog-footer-medium-padding-block: var(--ams-dialog-footer-padding-block);
|
|
33
|
+
|
|
34
|
+
font-family: system-ui, sans-serif;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
h1 {
|
|
38
|
+
margin-block: 0;
|
|
39
|
+
margin-inline: 0;
|
|
40
|
+
}
|
|
41
|
+
`
|
|
42
|
+
];
|
|
43
|
+
var w = Object.defineProperty, z = Object.getOwnPropertyDescriptor, r = (o, a, u, n) => {
|
|
44
|
+
for (var e = n > 1 ? void 0 : n ? z(a, u) : a, b = o.length - 1, d; b >= 0; b--)
|
|
45
|
+
(d = o[b]) && (e = (n ? d(a, u, e) : d(e)) || e);
|
|
46
|
+
return n && e && w(a, u, e), e;
|
|
47
|
+
};
|
|
48
|
+
let x = 0;
|
|
49
|
+
const h = {
|
|
50
|
+
cancel: "cancel",
|
|
51
|
+
confirm: "confirm"
|
|
52
|
+
};
|
|
53
|
+
let t = class extends g {
|
|
54
|
+
constructor() {
|
|
55
|
+
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 = () => {
|
|
56
|
+
if (!this.dialogElement) return;
|
|
57
|
+
const o = this.getRootNode();
|
|
58
|
+
this.previouslyFocusedElement = o.activeElement, this.dialogElement.showModal();
|
|
59
|
+
}, this.onDialogClose = () => {
|
|
60
|
+
if (this.dispatchEvent(
|
|
61
|
+
new Event("close", {
|
|
62
|
+
bubbles: !0,
|
|
63
|
+
composed: !0
|
|
64
|
+
})
|
|
65
|
+
), this.previouslyFocusedElement && typeof this.previouslyFocusedElement.focus == "function")
|
|
66
|
+
try {
|
|
67
|
+
this.previouslyFocusedElement.focus();
|
|
68
|
+
} catch {
|
|
69
|
+
}
|
|
70
|
+
this.previouslyFocusedElement = null;
|
|
71
|
+
}, this.onDialogCancel = (o) => {
|
|
72
|
+
o.preventDefault(), this.close();
|
|
73
|
+
}, this.onCloseClick = () => {
|
|
74
|
+
this.close(h.cancel);
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
close(o) {
|
|
78
|
+
this.dialogElement?.open && this.dialogElement.close(o);
|
|
79
|
+
}
|
|
80
|
+
get returnValue() {
|
|
81
|
+
return this.dialogElement?.returnValue ?? "No return value.";
|
|
82
|
+
}
|
|
83
|
+
render() {
|
|
84
|
+
return l`
|
|
85
|
+
<dialog
|
|
86
|
+
class="ams-dialog"
|
|
87
|
+
closedBy=${this.closedBy}
|
|
88
|
+
aria-modal="true"
|
|
89
|
+
aria-labelledby=${this.titleId}
|
|
90
|
+
aria-describedby=${this.ariaDescribedby || void 0}
|
|
91
|
+
@close=${this.onDialogClose}
|
|
92
|
+
@cancel=${this.onDialogCancel}
|
|
93
|
+
?open=${this.standardOpen}
|
|
94
|
+
>
|
|
95
|
+
<form method="dialog" novalidate>
|
|
96
|
+
<header class="ams-dialog__header">
|
|
97
|
+
<h1 id=${this.titleId}>
|
|
98
|
+
<slot name="title">${this.title}</slot>
|
|
99
|
+
</h1>
|
|
100
|
+
<button class="utrecht-button utrecht-button--primary-action" type="button" @click=${this.onCloseClick}>
|
|
101
|
+
<span class="ams-visually-hidden">Sluiten</span>
|
|
102
|
+
<div style=" --utrecht-icon-size: 8px;">
|
|
103
|
+
<utrecht-icon-close></utrecht-icon-close>
|
|
104
|
+
</div>
|
|
105
|
+
</button>
|
|
106
|
+
</header>
|
|
107
|
+
<div class="ams-dialog__body">
|
|
108
|
+
<slot></slot>
|
|
109
|
+
</div>
|
|
110
|
+
<footer class="ams-dialog__footer">
|
|
111
|
+
<!-- using utrecht-button here disrupts the dialog form flow since it's in the shadow DOM. -->
|
|
112
|
+
${this.actions === "confirm" || this.actions === "both" ? l`
|
|
113
|
+
<button class="utrecht-button utrecht-button--primary-action" value=${h.confirm}>
|
|
114
|
+
${this.confirmLabel}
|
|
115
|
+
</button>
|
|
116
|
+
` : s}
|
|
117
|
+
${this.actions === "cancel" || this.actions === "both" ? l`
|
|
118
|
+
<button class="utrecht-button utrecht-button--secondary-action" value=${h.cancel}>
|
|
119
|
+
${this.cancelLabel}
|
|
120
|
+
</button>
|
|
121
|
+
` : s}
|
|
122
|
+
</footer>
|
|
123
|
+
</form>
|
|
124
|
+
</dialog>
|
|
125
|
+
`;
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
t.styles = [
|
|
129
|
+
f,
|
|
130
|
+
i(m),
|
|
131
|
+
i(y),
|
|
132
|
+
i(k)
|
|
133
|
+
];
|
|
134
|
+
r([
|
|
135
|
+
c({ attribute: "aria-describedby", type: String })
|
|
136
|
+
], t.prototype, "ariaDescribedby", 2);
|
|
137
|
+
r([
|
|
138
|
+
c({ type: Boolean })
|
|
139
|
+
], t.prototype, "standardOpen", 2);
|
|
140
|
+
r([
|
|
141
|
+
c({ type: String })
|
|
142
|
+
], t.prototype, "title", 2);
|
|
143
|
+
r([
|
|
144
|
+
c({ type: String })
|
|
145
|
+
], t.prototype, "closedBy", 2);
|
|
146
|
+
r([
|
|
147
|
+
c({ type: String })
|
|
148
|
+
], t.prototype, "actions", 2);
|
|
149
|
+
r([
|
|
150
|
+
c({ type: String })
|
|
151
|
+
], t.prototype, "confirmLabel", 2);
|
|
152
|
+
r([
|
|
153
|
+
c({ type: String })
|
|
154
|
+
], t.prototype, "cancelLabel", 2);
|
|
155
|
+
r([
|
|
156
|
+
p("dialog")
|
|
157
|
+
], t.prototype, "dialogElement", 2);
|
|
158
|
+
t = r([
|
|
159
|
+
_("clippy-modal")
|
|
160
|
+
], t);
|
|
161
|
+
export {
|
|
162
|
+
t as ClippyModal,
|
|
163
|
+
h as DIALOG_BUTTON_VALUES
|
|
164
|
+
};
|