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

package/dist/clippy-combobox/index.js

@@ -1,318 +1,610 @@
-var B = (t) => {
-  throw TypeError(t);
-};
-var Y = (t, o, r) => o.has(t) || B("Cannot " + r);
-var I = (t, o, r) => (Y(t, o, "read from private field"), r ? r.call(t) : o.get(t)), R = (t, o, r) => o.has(t) ? B("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(t) : o.set(t, r), S = (t, o, r, e) => (Y(t, o, "write to private field"), e ? e.call(t, r) : o.set(t, r), r);
-import { LitElement as U, css as X, unsafeCSS as P, html as C, nothing as Z } from "lit";
-import { property as b, state as L, customElement as tt } from "lit/decorators.js";
-import { classMap as J } from "lit/directives/class-map.js";
-const ot = ".utrecht-combobox{inline-size:100%;max-inline-size:var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));position:relative}.utrecht-combobox__popover{border-width:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0;background-color:canvas;block-size:fit-content;color:canvastext;inline-size:fit-content;inset:0;overflow:auto;position:absolute;z-index:var(--utrecht-combobox-popover-z-index, 1)}.utrecht-combobox__popover--block-end{inset-block-start:100%}.utrecht-combobox__popover--hidden{display:none!important}", rt = ".utrecht-listbox{--utrecht-listbox-max-block-size: 300px;background-color:var(--_utrecht-listbox-disabled-background-color, var(--_utrecht-listbox-interactive-background-color, var(--utrecht-listbox-background-color)));border-color:var(--_utrecht-listbox-disabled-border-color, var(--_utrecht-listbox-interactive-border-color, var(--utrecht-listbox-border-color)));border-radius:var(--utrecht-listbox-border-radius);border-style:solid;border-width:var(--utrecht-listbox-border-width);box-sizing:border-box;color:var(--_utrecht-listbox-disabled-color, var(--_utrecht-listbox-interactive-color, var(--utrecht-listbox-color)));cursor:default;display:flex;flex-direction:column;font-weight:var(--utrecht-listbox-font-weight, var(--utrecht-form-control-font-weight, initial));inline-size:var(--utrecht-listbox-inline-size, var(--utrecht-form-control-max-inline-size));max-block-size:var(--utrecht-listbox-max-block-size);max-inline-size:100%;min-block-size:1em;overflow-block:auto;overflow-y:auto;padding-block-end:var(--utrecht-listbox-padding-block-end);padding-block-start:var(--utrecht-listbox-padding-block-start);padding-inline-end:var(--utrecht-listbox-padding-inline-end);padding-inline-start:var(--utrecht-listbox-padding-inline-start);-webkit-user-select:none;user-select:none}@media(forced-colors:active){.utrecht-listbox{--utrecht-listbox-background-color: field;--utrecht-listbox-border-color: fieldtext;--utrecht-listbox-hover-background-color: field;--utrecht-listbox-hover-border-color: fieldtext;--utrecht-listbox-hover-color: fieldtext;--utrecht-listbox-focus-border-color: Highlight;--utrecht-listbox-disabled-border-color: GrayText;--utrecht-listbox-option-background-color: field;--utrecht-listbox-option-color: fieldtext;--utrecht-listbox-option-hover-background-color: Highlight;--utrecht-listbox-option-hover-color: HighlightText;--utrecht-listbox-option-active-background-color: Highlight;--utrecht-listbox-option-active-color: HighlightText;--utrecht-listbox-option-disabled-background-color: field;--utrecht-listbox-option-disabled-color: GrayText;--utrecht-listbox-option-selected-background-color: Highlight;--utrecht-listbox-option-selected-color: HighlightText;--utrecht-listbox-option-selected-hover-background-color: Highlight;--utrecht-listbox-option-selected-hover-color: HighlightText;--utrecht-listbox-option-selected-disabled-background-color: GrayText;--utrecht-listbox-option-selected-disabled-color: field}}.utrecht-listbox--focus{--_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color)}.utrecht-listbox--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-listbox__list{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;padding-inline-start:0}.utrecht-listbox__group{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;padding-inline-start:0;margin-block-end:var(--utrecht-listbox-option-group-margin-block-end)}.utrecht-listbox__group-label{color:var(--utrecht-listbox-option-group-label-color);font-size:var(--utrecht-listbox-option-group-label-font-size);font-weight:var(--utrecht-listbox-option-group-label-font-weight);line-height:var(--utrecht-listbox-option-group-label-line-height);margin-inline-start:var(--utrecht-listbox-option-group-label-margin-inline-start)}@media(forced-colors:active){.utrecht-listbox__group-label{background-color:field;color:fieldtext}}.utrecht-listbox__option{list-style:none;--_utrecht-listbox-option-background-color: var( --_utrecht-listbox-option-disabled-background-color, var( --_utrecht-listbox-option-interactive-background-color, var(--_utrecht-listbox-option-state-background-color, var(--utrecht-listbox-option-background-color)) ) );--_utrecht-listbox-option-color: var( --_utrecht-listbox-option-disabled-color, var( --_utrecht-listbox-option-interactive-color, var(--_utrecht-listbox-option-state-color, var(--utrecht-listbox-option-color)) ) );align-items:center;background-color:var(--_utrecht-listbox-option-background-color);box-sizing:border-box;color:var(--_utrecht-listbox-option-color);display:flex;min-block-size:var(--utrecht-listbox-option-min-block-size, var(--utrecht-pointer-target-min-size, 24px));padding-block-end:var(--utrecht-listbox-option-padding-block-end);padding-block-start:var(--utrecht-listbox-option-padding-block-start);padding-inline-end:var(--utrecht-listbox-option-padding-inline-end);padding-inline-start:var(--utrecht-listbox-option-padding-inline-start)}@media(forced-colors:active){.utrecht-listbox__option{forced-color-adjust:none}}.utrecht-listbox__option--hover{--_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);--_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color)}.utrecht-listbox__option--focus{--_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);--_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color)}.utrecht-listbox__option--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-focus-outline-offset: calc(var(--utrecht-focus-outline-width) * -1)}.utrecht-listbox__option--active{--_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-active-background-color);--_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-active-color);font-weight:var(--utrecht-listbox-option-is-active-font-weight)}.utrecht-listbox__option--selected{--_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-selected-disabled-background-color);--_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-selected-disabled-color);--_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-selected-hover-background-color);--_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-selected-hover-color);--_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-selected-background-color);--_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-selected-color)}.utrecht-listbox__option--html-li{list-style:none}.utrecht-listbox__option--html-li:hover{--_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);--_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color)}.utrecht-listbox__option--html-li:focus{--_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);--_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color)}.utrecht-listbox__option--disabled{--utrecht-listbox-option-hover-background-color: var(--utrecht-listbox-option-disabled-background-color);--utrecht-listbox-option-hover-color: var(--utrecht-listbox-option-disabled-color);--_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-disabled-background-color);--_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-disabled-color);cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-listbox--disabled{--_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-disabled-background-color);--_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-disabled-color);--_utrecht-listbox-disabled-background-color: var(--utrecht-listbox-disabled-background-color);--_utrecht-listbox-disabled-border-color: var(--utrecht-listbox-disabled-border-color);--_utrecht-listbox-disabled-color: var(--utrecht-listbox-disabled-color);cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-listbox--html-div:focus{--_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color)}.utrecht-listbox--html-div: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-listbox--forced-colors{--utrecht-listbox-background-color: field;--utrecht-listbox-border-color: fieldtext;--utrecht-listbox-hover-background-color: field;--utrecht-listbox-hover-border-color: fieldtext;--utrecht-listbox-hover-color: fieldtext;--utrecht-listbox-focus-border-color: Highlight;--utrecht-listbox-disabled-border-color: GrayText;--utrecht-listbox-option-background-color: field;--utrecht-listbox-option-color: fieldtext;--utrecht-listbox-option-hover-background-color: Highlight;--utrecht-listbox-option-hover-color: HighlightText;--utrecht-listbox-option-active-background-color: Highlight;--utrecht-listbox-option-active-color: HighlightText;--utrecht-listbox-option-disabled-background-color: field;--utrecht-listbox-option-disabled-color: GrayText;--utrecht-listbox-option-selected-background-color: Highlight;--utrecht-listbox-option-selected-color: HighlightText;--utrecht-listbox-option-selected-hover-background-color: Highlight;--utrecht-listbox-option-selected-hover-color: HighlightText;--utrecht-listbox-option-selected-disabled-background-color: GrayText;--utrecht-listbox-option-selected-disabled-color: field}", et = '.utrecht-textbox{--_utrecht-textbox-value-char: .667em + .334ch;--_utrecht-textbox-max-inline-size: calc( calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) + var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) + var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) + var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) + var(--utrecht-textbox-autocomplete-ui-size, 44px) );background-color:var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));block-size:initial;border-width:var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));border-block-end-width:var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));border-color:var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));border-radius:var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));border-style:solid;box-sizing:border-box;color:var(--utrecht-textbox-color, var(--utrecht-form-control-color));font-family:var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));font-size:var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));inline-size:100%;line-height:var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));min-block-size:var(--utrecht-pointer-target-min-size, 44px);min-inline-size:var(--utrecht-pointer-target-min-size, 44px);max-inline-size:min(var(--_utrecht-textbox-max-inline-size, 100%),var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));padding-block-end:var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));padding-block-start:var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));padding-inline-end:var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));padding-inline-start:var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial))}.utrecht-textbox--invalid{--_utrecht-textbox-border-width: var( --utrecht-textbox-invalid-border-width, var( --utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)) ) );background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textbox-border-width);border-block-end-width:var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textbox--focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--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-textbox--read-only{background-color:var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox__placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textbox--numeric{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}.utrecht-textbox--password{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--postal-code-nl-size{--utrecht-textbox-value-max-length: 7}.utrecht-textbox--house-number-size{--utrecht-textbox-value-max-length: 5}.utrecht-textbox--house-letter-size{--utrecht-textbox-value-max-length: 1}.utrecht-textbox--house-addition-size{--utrecht-textbox-value-max-length: 4}.utrecht-textbox--voorvoegsel-size{--utrecht-textbox-value-max-length: 10}.utrecht-textbox--tel-size{--utrecht-textbox-value-max-length: 19}.utrecht-textbox--tel-nl-size{--utrecht-textbox-value-max-length: 13}.utrecht-textbox--iban-size{--utrecht-textbox-value-max-length: 41}.utrecht-textbox--iban-nl-size{--utrecht-textbox-value-max-length: 22}.utrecht-textbox--placeholder-ltr::placeholder,.utrecht-textbox--placeholder-ltr:placeholder-shown{direction:ltr}.utrecht-textbox--placeholder-rtl::placeholder,.utrecht-textbox--placeholder-rtl:placeholder-shown{direction:rtl}.utrecht-textbox--url{font-variant-ligatures:none}.utrecht-textbox--html-input:focus{background-color:var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input: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-textbox--html-input:user-invalid,.utrecht-textbox--html-input[aria-invalid=true]{--_utrecht-textbox-border-width: var( --utrecht-textbox-invalid-border-width, var( --utrecht-form-control-invalid-border-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)) ) );background-color:var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-width:var(--_utrecht-textbox-border-width);border-block-end-width:var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));border-color:var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input:read-only{background-color:var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))))}.utrecht-textbox--html-input:disabled{background-color:var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));color:var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-textbox--html-input::placeholder{color:var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textbox--html-input[type=password i]{font-variant-ligatures:none;font-variant-numeric:slashed-zero}.utrecht-textbox--html-input[type=url i],.utrecht-textbox--html-input[type=email i],.utrecht-textbox--html-input[inputMode=email i],.utrecht-textbox--html-input[inputMode=url i]{font-variant-ligatures:none}.utrecht-textbox--html-input[pattern="\\\\d*"],.utrecht-textbox--html-input[pattern="[0-9]*"],.utrecht-textbox--html-input[type=number i],.utrecht-textbox--html-input[type=tel i],.utrecht-textbox--html-input[inputMode=numeric i],.utrecht-textbox--html-input[inputMode=decimal i],.utrecht-textbox--html-input[inputMode=tel i]{-moz-appearance:textfield;font-variant-numeric:lining-nums tabular-nums}', ct = (t, o, r, e) => {
-  if (r === "length" || r === "prototype" || r === "arguments" || r === "caller")
-    return;
-  const c = Object.getOwnPropertyDescriptor(t, r), i = Object.getOwnPropertyDescriptor(o, r);
-  !it(c, i) && e || Object.defineProperty(t, r, i);
-}, it = function(t, o) {
-  return t === void 0 || t.configurable || t.writable === o.writable && t.enumerable === o.enumerable && t.configurable === o.configurable && (t.writable || t.value === o.value);
-}, lt = (t, o) => {
-  const r = Object.getPrototypeOf(o);
-  r !== Object.getPrototypeOf(t) && Object.setPrototypeOf(t, r);
-}, nt = (t, o) => `/* Wrapped ${t}*/
-${o}`, at = Object.getOwnPropertyDescriptor(Function.prototype, "toString"), ut = Object.getOwnPropertyDescriptor(Function.prototype.toString, "name"), st = (t, o, r) => {
-  const e = r === "" ? "" : `with ${r.trim()}() `, c = nt.bind(null, e, o.toString());
-  Object.defineProperty(c, "name", ut);
-  const { writable: i, enumerable: a, configurable: k } = at;
-  Object.defineProperty(t, "toString", { value: c, writable: i, enumerable: a, configurable: k });
-};
-function ht(t, o, { ignoreNonConfigurable: r = !1 } = {}) {
-  const { name: e } = t;
-  for (const c of Reflect.ownKeys(o))
-    ct(t, o, c, r);
-  return lt(t, o), st(t, o, e), t;
-}
-const w = 2147483647, dt = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), bt = /* @__PURE__ */ new WeakMap();
-function xt(t, o) {
-  const r = t.get(o);
-  if (r) {
-    if (r.maxAge <= Date.now()) {
-      t.delete(o);
-      return;
+import { s as safeCustomElement } from "../decorators-Cq82_-g_.js";
+import { css, unsafeCSS, nothing, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { allowedValuesConverter, arrayFromTokenList } from "../lib/converters/index.js";
+import { FormElement } from "../lib/FormElement/index.js";
+import srOnly from "../lib/sr-only/index.js";
+const comboboxStyles = "/**\n * @license EUPL-1.2\n * Copyright (c) 2023 Frameless B.V.\n */\n.utrecht-combobox {\n  inline-size: 100%;\n  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));\n  position: relative;\n}\n\n.utrecht-combobox__popover {\n  border-width: 0;\n  padding-block-end: 0;\n  padding-block-start: 0;\n  padding-inline-end: 0;\n  padding-inline-start: 0;\n  background-color: canvas;\n  block-size: fit-content;\n  color: canvastext;\n  inline-size: fit-content;\n  inset: 0;\n  overflow: auto;\n  position: absolute;\n  z-index: var(--utrecht-combobox-popover-z-index, 1);\n}\n\n.utrecht-combobox__popover--block-end {\n  inset-block-start: 100%;\n}\n\n.utrecht-combobox__popover--hidden {\n  display: none !important;\n}";
+const listboxStyles = "/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n/**\n * @license EUPL-1.2\n * Copyright (c) 2023 Frameless B.V.\n */\n.utrecht-listbox {\n  --utrecht-listbox-max-block-size: 300px;\n  background-color: var(--_utrecht-listbox-disabled-background-color, var(--_utrecht-listbox-interactive-background-color, var(--utrecht-listbox-background-color)));\n  border-color: var(--_utrecht-listbox-disabled-border-color, var(--_utrecht-listbox-interactive-border-color, var(--utrecht-listbox-border-color)));\n  border-radius: var(--utrecht-listbox-border-radius);\n  border-style: solid;\n  border-width: var(--utrecht-listbox-border-width);\n  box-sizing: border-box;\n  color: var(--_utrecht-listbox-disabled-color, var(--_utrecht-listbox-interactive-color, var(--utrecht-listbox-color)));\n  cursor: default;\n  display: flex;\n  flex-direction: column;\n  font-weight: var(--utrecht-listbox-font-weight, var(--utrecht-form-control-font-weight, initial));\n  inline-size: var(--utrecht-listbox-inline-size, var(--utrecht-form-control-max-inline-size));\n  max-block-size: var(--utrecht-listbox-max-block-size);\n  max-inline-size: 100%;\n  min-block-size: 1em;\n  overflow-block: auto;\n  overflow-y: auto;\n  padding-block-end: var(--utrecht-listbox-padding-block-end);\n  padding-block-start: var(--utrecht-listbox-padding-block-start);\n  padding-inline-end: var(--utrecht-listbox-padding-inline-end);\n  padding-inline-start: var(--utrecht-listbox-padding-inline-start);\n  -webkit-user-select: none;\n  user-select: none;\n}\n@media (forced-colors: active) {\n  .utrecht-listbox {\n    --utrecht-listbox-background-color: field;\n    --utrecht-listbox-border-color: fieldtext;\n    --utrecht-listbox-hover-background-color: field;\n    --utrecht-listbox-hover-border-color: fieldtext;\n    --utrecht-listbox-hover-color: fieldtext;\n    --utrecht-listbox-focus-border-color: Highlight;\n    --utrecht-listbox-disabled-border-color: GrayText;\n    --utrecht-listbox-option-background-color: field;\n    --utrecht-listbox-option-color: fieldtext;\n    --utrecht-listbox-option-hover-background-color: Highlight;\n    --utrecht-listbox-option-hover-color: HighlightText;\n    --utrecht-listbox-option-active-background-color: Highlight;\n    --utrecht-listbox-option-active-color: HighlightText;\n    --utrecht-listbox-option-disabled-background-color: field;\n    --utrecht-listbox-option-disabled-color: GrayText;\n    --utrecht-listbox-option-selected-background-color: Highlight;\n    --utrecht-listbox-option-selected-color: HighlightText;\n    --utrecht-listbox-option-selected-hover-background-color: Highlight;\n    --utrecht-listbox-option-selected-hover-color: HighlightText;\n    --utrecht-listbox-option-selected-disabled-background-color: GrayText;\n    --utrecht-listbox-option-selected-disabled-color: field;\n  }\n}\n\n.utrecht-listbox--focus {\n  --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);\n}\n\n.utrecht-listbox--focus-visible {\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  box-shadow: var(--_utrecht-focus-ring-box-shadow);\n  outline-color: var(--utrecht-focus-outline-color, revert);\n  outline-offset: var(--utrecht-focus-outline-offset, revert);\n  outline-style: var(--utrecht-focus-outline-style, revert);\n  outline-width: var(--utrecht-focus-outline-width, revert);\n  z-index: 1;\n}\n\n.utrecht-listbox--invalid {\n}\n\n.utrecht-listbox__list {\n  margin-block-end: 0;\n  margin-block-start: 0;\n  margin-inline-end: 0;\n  margin-inline-start: 0;\n  padding-inline-start: 0;\n}\n\n.utrecht-listbox__group {\n  margin-block-end: 0;\n  margin-block-start: 0;\n  margin-inline-end: 0;\n  margin-inline-start: 0;\n  padding-inline-start: 0;\n  margin-block-end: var(--utrecht-listbox-option-group-margin-block-end);\n}\n\n.utrecht-listbox__group-label {\n  color: var(--utrecht-listbox-option-group-label-color);\n  font-size: var(--utrecht-listbox-option-group-label-font-size);\n  font-weight: var(--utrecht-listbox-option-group-label-font-weight);\n  line-height: var(--utrecht-listbox-option-group-label-line-height);\n  margin-inline-start: var(--utrecht-listbox-option-group-label-margin-inline-start);\n}\n@media (forced-colors: active) {\n  .utrecht-listbox__group-label {\n    background-color: field;\n    color: fieldtext;\n  }\n}\n\n.utrecht-listbox__option {\n  list-style: none;\n  --_utrecht-listbox-option-background-color: var(\n    --_utrecht-listbox-option-disabled-background-color,\n    var(\n      --_utrecht-listbox-option-interactive-background-color,\n      var(--_utrecht-listbox-option-state-background-color, var(--utrecht-listbox-option-background-color))\n    )\n  );\n  --_utrecht-listbox-option-color: var(\n    --_utrecht-listbox-option-disabled-color,\n    var(\n      --_utrecht-listbox-option-interactive-color,\n      var(--_utrecht-listbox-option-state-color, var(--utrecht-listbox-option-color))\n    )\n  );\n  align-items: center;\n  background-color: var(--_utrecht-listbox-option-background-color);\n  box-sizing: border-box;\n  color: var(--_utrecht-listbox-option-color);\n  display: flex;\n  min-block-size: var(--utrecht-listbox-option-min-block-size, var(--utrecht-pointer-target-min-size, 24px));\n  padding-block-end: var(--utrecht-listbox-option-padding-block-end);\n  padding-block-start: var(--utrecht-listbox-option-padding-block-start);\n  padding-inline-end: var(--utrecht-listbox-option-padding-inline-end);\n  padding-inline-start: var(--utrecht-listbox-option-padding-inline-start);\n}\n@media (forced-colors: active) {\n  .utrecht-listbox__option {\n    forced-color-adjust: none;\n  }\n}\n\n.utrecht-listbox__option--hover {\n  --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);\n  --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);\n}\n\n.utrecht-listbox__option--focus {\n  --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);\n  --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);\n}\n\n.utrecht-listbox__option--focus-visible {\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  box-shadow: var(--_utrecht-focus-ring-box-shadow);\n  outline-color: var(--utrecht-focus-outline-color, revert);\n  outline-offset: var(--utrecht-focus-outline-offset, revert);\n  outline-style: var(--utrecht-focus-outline-style, revert);\n  outline-width: var(--utrecht-focus-outline-width, revert);\n  z-index: 1;\n  --utrecht-focus-outline-offset: calc(var(--utrecht-focus-outline-width) * -1);\n}\n\n.utrecht-listbox__option--active {\n  --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-active-background-color);\n  --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-active-color);\n  font-weight: var(--utrecht-listbox-option-is-active-font-weight);\n}\n\n.utrecht-listbox__option--selected {\n  --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-selected-background-color);\n  --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-selected-color);\n}\n\n.utrecht-listbox__option--html-li {\n  list-style: none;\n}\n.utrecht-listbox__option--html-li:hover {\n  --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);\n  --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);\n}\n.utrecht-listbox__option--html-li:focus {\n  --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);\n  --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);\n}\n.utrecht-listbox__option--disabled {\n  --utrecht-listbox-option-hover-background-color: var(--utrecht-listbox-option-disabled-background-color);\n  --utrecht-listbox-option-hover-color: var(--utrecht-listbox-option-disabled-color);\n  --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-disabled-background-color);\n  --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-disabled-color);\n  cursor: var(--utrecht-action-disabled-cursor, not-allowed);\n}\n.utrecht-listbox__option--disabled.utrecht-listbox__option--selected {\n  --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-selected-disabled-background-color);\n  --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-selected-disabled-color);\n}\n\n.utrecht-listbox--disabled {\n  --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-disabled-background-color);\n  --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-disabled-color);\n  --_utrecht-listbox-disabled-background-color: var(--utrecht-listbox-disabled-background-color);\n  --_utrecht-listbox-disabled-border-color: var(--utrecht-listbox-disabled-border-color);\n  --_utrecht-listbox-disabled-color: var(--utrecht-listbox-disabled-color);\n  cursor: var(--utrecht-action-disabled-cursor, not-allowed);\n}\n\n.utrecht-listbox--html-div:focus {\n  --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);\n}\n.utrecht-listbox--html-div:focus-visible {\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  box-shadow: var(--_utrecht-focus-ring-box-shadow);\n  outline-color: var(--utrecht-focus-outline-color, revert);\n  outline-offset: var(--utrecht-focus-outline-offset, revert);\n  outline-style: var(--utrecht-focus-outline-style, revert);\n  outline-width: var(--utrecht-focus-outline-width, revert);\n  z-index: 1;\n}\n\n.utrecht-listbox--forced-colors {\n  --utrecht-listbox-background-color: field;\n  --utrecht-listbox-border-color: fieldtext;\n  --utrecht-listbox-hover-background-color: field;\n  --utrecht-listbox-hover-border-color: fieldtext;\n  --utrecht-listbox-hover-color: fieldtext;\n  --utrecht-listbox-focus-border-color: Highlight;\n  --utrecht-listbox-disabled-border-color: GrayText;\n  --utrecht-listbox-option-background-color: field;\n  --utrecht-listbox-option-color: fieldtext;\n  --utrecht-listbox-option-hover-background-color: Highlight;\n  --utrecht-listbox-option-hover-color: HighlightText;\n  --utrecht-listbox-option-active-background-color: Highlight;\n  --utrecht-listbox-option-active-color: HighlightText;\n  --utrecht-listbox-option-disabled-background-color: field;\n  --utrecht-listbox-option-disabled-color: GrayText;\n  --utrecht-listbox-option-selected-background-color: Highlight;\n  --utrecht-listbox-option-selected-color: HighlightText;\n  --utrecht-listbox-option-selected-hover-background-color: Highlight;\n  --utrecht-listbox-option-selected-hover-color: HighlightText;\n  --utrecht-listbox-option-selected-disabled-background-color: GrayText;\n  --utrecht-listbox-option-selected-disabled-color: field;\n}";
+const textboxStyles = '/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2024 Frameless B.V.\n * Copyright (c) 2021-2024 Gemeente Utrecht\n */\n.utrecht-textbox {\n  --_utrecht-textbox-value-char: 0.667em + 0.334ch;\n  --_utrecht-textbox-max-inline-size: calc(\n    calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +\n      var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +\n      var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) +\n      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +\n      var(--utrecht-textbox-autocomplete-ui-size, 44px)\n  );\n  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));\n  block-size: initial;\n  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));\n  border-block-end-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));\n  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));\n  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));\n  border-style: solid;\n  box-sizing: border-box;\n  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));\n  display: block;\n  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));\n  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));\n  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));\n  inline-size: 100%;\n  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));\n  min-block-size: var(--utrecht-pointer-target-min-size, 44px);\n  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);\n  max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));\n  overflow: hidden;\n  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));\n  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));\n  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));\n  padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));\n  white-space: nowrap;\n}\n\n.utrecht-textbox--invalid {\n  --_utrecht-textbox-border-width: var(\n    --utrecht-textbox-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))\n    )\n  );\n  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));\n  border-width: var(--_utrecht-textbox-border-width);\n  border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));\n  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));\n  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));\n}\n\n.utrecht-textbox--disabled {\n  background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));\n  border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));\n  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));\n  cursor: var(--utrecht-action-disabled-cursor, not-allowed);\n}\n\n.utrecht-textbox--focus {\n  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));\n  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));\n  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));\n}\n\n.utrecht-textbox--focus-visible {\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  box-shadow: var(--_utrecht-focus-ring-box-shadow);\n  outline-color: var(--utrecht-focus-outline-color, revert);\n  outline-offset: var(--utrecht-focus-outline-offset, revert);\n  outline-style: var(--utrecht-focus-outline-style, revert);\n  outline-width: var(--utrecht-focus-outline-width, revert);\n  z-index: 1;\n}\n\n.utrecht-textbox--read-only {\n  background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));\n  border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));\n  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));\n}\n\n.utrecht-textbox__placeholder {\n  color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));\n  font-style: var(--utrecht-form-control-placeholder-font-style);\n  opacity: 100%;\n}\n\n.utrecht-textbox--numeric {\n  -moz-appearance: textfield;\n  font-variant-numeric: lining-nums tabular-nums;\n}\n\n.utrecht-textbox--password {\n  font-variant-ligatures: none;\n  font-variant-numeric: slashed-zero;\n}\n\n.utrecht-textbox--postal-code-nl-size {\n  --utrecht-textbox-value-max-length: 7;\n}\n\n.utrecht-textbox--house-number-size {\n  --utrecht-textbox-value-max-length: 5;\n}\n\n.utrecht-textbox--house-letter-size {\n  --utrecht-textbox-value-max-length: 1;\n}\n\n.utrecht-textbox--house-addition-size {\n  --utrecht-textbox-value-max-length: 4;\n}\n\n.utrecht-textbox--voorvoegsel-size {\n  --utrecht-textbox-value-max-length: 10;\n}\n\n.utrecht-textbox--tel-size {\n  --utrecht-textbox-value-max-length: 19;\n}\n\n.utrecht-textbox--tel-nl-size {\n  --utrecht-textbox-value-max-length: 13;\n}\n\n.utrecht-textbox--iban-size {\n  --utrecht-textbox-value-max-length: 41;\n}\n\n.utrecht-textbox--iban-nl-size {\n  --utrecht-textbox-value-max-length: 22;\n}\n.utrecht-textbox--placeholder-ltr::placeholder, .utrecht-textbox--placeholder-ltr:placeholder-shown {\n  direction: ltr;\n}\n.utrecht-textbox--placeholder-rtl::placeholder, .utrecht-textbox--placeholder-rtl:placeholder-shown {\n  direction: rtl;\n}\n\n.utrecht-textbox--url {\n  font-variant-ligatures: none;\n}\n\n.utrecht-textbox--html-input {\n}\n.utrecht-textbox--html-input:focus {\n  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));\n  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));\n  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));\n}\n.utrecht-textbox--html-input:focus-visible {\n  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);\n  box-shadow: var(--_utrecht-focus-ring-box-shadow);\n  outline-color: var(--utrecht-focus-outline-color, revert);\n  outline-offset: var(--utrecht-focus-outline-offset, revert);\n  outline-style: var(--utrecht-focus-outline-style, revert);\n  outline-width: var(--utrecht-focus-outline-width, revert);\n  z-index: 1;\n}\n.utrecht-textbox--html-input:user-invalid, .utrecht-textbox--html-input[aria-invalid=true] {\n  --_utrecht-textbox-border-width: var(\n    --utrecht-textbox-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))\n    )\n  );\n  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));\n  border-width: var(--_utrecht-textbox-border-width);\n  border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));\n  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));\n  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));\n}\n.utrecht-textbox--html-input:read-only {\n  background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));\n  border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));\n  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));\n}\n.utrecht-textbox--html-input:disabled {\n  background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));\n  border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));\n  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));\n  cursor: var(--utrecht-action-disabled-cursor, not-allowed);\n}\n.utrecht-textbox--html-input::placeholder {\n  color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));\n  font-style: var(--utrecht-form-control-placeholder-font-style);\n  opacity: 100%;\n}\n.utrecht-textbox--html-input[type=password i] {\n  font-variant-ligatures: none;\n  font-variant-numeric: slashed-zero;\n}\n.utrecht-textbox--html-input[type=url i], .utrecht-textbox--html-input[type=email i], .utrecht-textbox--html-input[inputMode=email i], .utrecht-textbox--html-input[inputMode=url i] {\n  font-variant-ligatures: none;\n}\n.utrecht-textbox--html-input[pattern="\\\\d*"], .utrecht-textbox--html-input[pattern="[0-9]*"], .utrecht-textbox--html-input[type=number i], .utrecht-textbox--html-input[type=tel i], .utrecht-textbox--html-input[inputMode=numeric i], .utrecht-textbox--html-input[inputMode=decimal i], .utrecht-textbox--html-input[inputMode=tel i] {\n  -moz-appearance: textfield;\n  font-variant-numeric: lining-nums tabular-nums;\n}';
+function debounce(function_, wait = 100, options = {}) {
+  if (typeof function_ !== "function") {
+    throw new TypeError(`Expected the first parameter to be a function, got \`${typeof function_}\`.`);
+  }
+  if (wait < 0) {
+    throw new RangeError("`wait` must not be negative.");
+  }
+  if (typeof options === "boolean") {
+    throw new TypeError("The `options` parameter must be an object, not a boolean. Use `{immediate: true}` instead.");
+  }
+  const { immediate } = options;
+  let storedContext;
+  let storedArguments;
+  let timeoutId;
+  let timestamp;
+  let result;
+  function run() {
+    const callContext = storedContext;
+    const callArguments = storedArguments;
+    storedContext = void 0;
+    storedArguments = void 0;
+    result = function_.apply(callContext, callArguments);
+    return result;
+  }
+  function later() {
+    const last = Date.now() - timestamp;
+    if (last < wait && last >= 0) {
+      timeoutId = setTimeout(later, wait - last);
+    } else {
+      timeoutId = void 0;
+      if (!immediate) {
+        result = run();
+      }
     }
-    return r;
   }
+  const debounced = function(...arguments_) {
+    if (storedContext && this !== storedContext && Object.getPrototypeOf(this) === Object.getPrototypeOf(storedContext)) {
+      throw new Error("Debounced method called with different contexts of the same prototype.");
+    }
+    storedContext = this;
+    storedArguments = arguments_;
+    timestamp = Date.now();
+    const callNow = immediate && !timeoutId;
+    if (!timeoutId) {
+      timeoutId = setTimeout(later, wait);
+    }
+    if (callNow) {
+      result = run();
+      return result;
+    }
+    return void 0;
+  };
+  Object.defineProperty(debounced, "isPending", {
+    get() {
+      return timeoutId !== void 0;
+    }
+  });
+  debounced.clear = () => {
+    if (!timeoutId) {
+      return;
+    }
+    clearTimeout(timeoutId);
+    timeoutId = void 0;
+    storedContext = void 0;
+    storedArguments = void 0;
+  };
+  debounced.flush = () => {
+    if (!timeoutId) {
+      return;
+    }
+    debounced.trigger();
+  };
+  debounced.trigger = () => {
+    result = run();
+    debounced.clear();
+  };
+  return debounced;
 }
-function vt(t, { cacheKey: o, cache: r = /* @__PURE__ */ new Map(), maxAge: e } = {}) {
-  if (e === 0)
-    return t;
-  if (typeof e == "number" && Number.isFinite(e)) {
-    if (e > w)
-      throw new TypeError(`The \`maxAge\` option cannot exceed ${w}.`);
-    if (e < 0)
-      throw new TypeError("The `maxAge` option should not be a negative number.");
+var has = Object.prototype.hasOwnProperty;
+function find(iter, tar, key) {
+  for (key of iter.keys()) {
+    if (dequal(key, tar)) return key;
   }
-  const c = function(...i) {
-    const a = o ? o(i) : i[0], k = xt(r, a);
-    if (k)
-      return k.data;
-    const O = t.apply(this, i), u = typeof e == "function" ? e(...i) : e;
-    if (u !== void 0 && u !== Number.POSITIVE_INFINITY) {
-      if (!Number.isFinite(u))
-        throw new TypeError("The `maxAge` function must return a finite number, `0`, or `Infinity`.");
-      if (u <= 0)
-        return O;
-      if (u > w)
-        throw new TypeError(`The \`maxAge\` function result cannot exceed ${w}.`);
+}
+function dequal(foo, bar) {
+  var ctor, len, tmp;
+  if (foo === bar) return true;
+  if (foo && bar && (ctor = foo.constructor) === bar.constructor) {
+    if (ctor === Date) return foo.getTime() === bar.getTime();
+    if (ctor === RegExp) return foo.toString() === bar.toString();
+    if (ctor === Array) {
+      if ((len = foo.length) === bar.length) {
+        while (len-- && dequal(foo[len], bar[len])) ;
+      }
+      return len === -1;
+    }
+    if (ctor === Set) {
+      if (foo.size !== bar.size) {
+        return false;
+      }
+      for (len of foo) {
+        tmp = len;
+        if (tmp && typeof tmp === "object") {
+          tmp = find(bar, tmp);
+          if (!tmp) return false;
+        }
+        if (!bar.has(tmp)) return false;
+      }
+      return true;
     }
-    if (r.set(a, {
-      data: O,
-      maxAge: u === void 0 || u === Number.POSITIVE_INFINITY ? Number.POSITIVE_INFINITY : Date.now() + u
-    }), u !== void 0 && u !== Number.POSITIVE_INFINITY) {
-      const $ = setTimeout(() => {
-        r.delete(a), M.get(c)?.delete($);
-      }, u);
-      $.unref?.();
-      const D = M.get(c) ?? /* @__PURE__ */ new Set();
-      D.add($), M.set(c, D);
+    if (ctor === Map) {
+      if (foo.size !== bar.size) {
+        return false;
+      }
+      for (len of foo) {
+        tmp = len[0];
+        if (tmp && typeof tmp === "object") {
+          tmp = find(bar, tmp);
+          if (!tmp) return false;
+        }
+        if (!dequal(len[1], bar.get(tmp))) {
+          return false;
+        }
+      }
+      return true;
     }
-    return O;
-  };
-  return ht(c, t, {
-    ignoreNonConfigurable: !0
-  }), dt.set(c, r), bt.set(c, o ?? ((i) => i[0])), c;
+    if (ctor === ArrayBuffer) {
+      foo = new Uint8Array(foo);
+      bar = new Uint8Array(bar);
+    } else if (ctor === DataView) {
+      if ((len = foo.byteLength) === bar.byteLength) {
+        while (len-- && foo.getInt8(len) === bar.getInt8(len)) ;
+      }
+      return len === -1;
+    }
+    if (ArrayBuffer.isView(foo)) {
+      if ((len = foo.byteLength) === bar.byteLength) {
+        while (len-- && foo[len] === bar[len]) ;
+      }
+      return len === -1;
+    }
+    if (!ctor || typeof foo === "object") {
+      len = 0;
+      for (ctor in foo) {
+        if (has.call(foo, ctor) && ++len && !has.call(bar, ctor)) return false;
+        if (!(ctor in bar) || !dequal(foo[ctor], bar[ctor])) return false;
+      }
+      return Object.keys(bar).length === len;
+    }
+  }
+  return foo !== foo && bar !== bar;
 }
-const pt = (t) => {
-  if (t === null) return t;
-  try {
-    const o = t && JSON.parse(t);
-    return Array.isArray(o) ? o : null;
-  } catch {
-    return t.split(" ");
+const copyProperty = (to, from, property2, ignoreNonConfigurable) => {
+  if (property2 === "length" || property2 === "prototype") {
+    return;
   }
+  if (property2 === "arguments" || property2 === "caller") {
+    return;
+  }
+  const toDescriptor = Object.getOwnPropertyDescriptor(to, property2);
+  const fromDescriptor = Object.getOwnPropertyDescriptor(from, property2);
+  if (!canCopyProperty(toDescriptor, fromDescriptor) && ignoreNonConfigurable) {
+    return;
+  }
+  Object.defineProperty(to, property2, fromDescriptor);
 };
-var ft = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, _ = (t, o, r, e) => {
-  for (var c = e > 1 ? void 0 : e ? gt(o, r) : o, i = t.length - 1, a; i >= 0; i--)
-    (a = t[i]) && (c = (e ? a(o, r, c) : a(c)) || c);
-  return e && c && ft(o, r, c), c;
-}, p;
-const G = class G extends U {
-  constructor() {
-    super(...arguments);
-    R(this, p);
-    this.name = "", this.hiddenLabel = "", this.disabled = !1, this.readonly = !1, this.internals_ = this.attachInternals(), S(this, p, null);
+const canCopyProperty = function(toDescriptor, fromDescriptor) {
+  return toDescriptor === void 0 || toDescriptor.configurable || toDescriptor.writable === fromDescriptor.writable && toDescriptor.enumerable === fromDescriptor.enumerable && toDescriptor.configurable === fromDescriptor.configurable && (toDescriptor.writable || toDescriptor.value === fromDescriptor.value);
+};
+const changePrototype = (to, from) => {
+  const fromPrototype = Object.getPrototypeOf(from);
+  if (fromPrototype === Object.getPrototypeOf(to)) {
+    return;
   }
-  set value(r) {
-    I(this, p) !== r && (S(this, p, r), this.internals_.setFormValue(this.valueToFormValue(r)));
+  Object.setPrototypeOf(to, fromPrototype);
+};
+const wrappedToString = (withName, fromBody) => `/* Wrapped ${withName}*/
+${fromBody}`;
+const toStringDescriptor = Object.getOwnPropertyDescriptor(Function.prototype, "toString");
+const toStringName = Object.getOwnPropertyDescriptor(Function.prototype.toString, "name");
+const changeToString = (to, from, name) => {
+  const withName = name === "" ? "" : `with ${name.trim()}() `;
+  const newToString = wrappedToString.bind(null, withName, from.toString());
+  Object.defineProperty(newToString, "name", toStringName);
+  const { writable, enumerable, configurable } = toStringDescriptor;
+  Object.defineProperty(to, "toString", { value: newToString, writable, enumerable, configurable });
+};
+function mimicFunction(to, from, { ignoreNonConfigurable = false } = {}) {
+  const { name } = to;
+  for (const property2 of Reflect.ownKeys(from)) {
+    copyProperty(to, from, property2, ignoreNonConfigurable);
   }
-  get value() {
-    return I(this, p);
+  changePrototype(to, from);
+  changeToString(to, from, name);
+  return to;
+}
+const maxTimeoutValue = 2147483647;
+const cacheStore = /* @__PURE__ */ new WeakMap();
+const cacheTimerStore = /* @__PURE__ */ new WeakMap();
+const cacheKeyStore = /* @__PURE__ */ new WeakMap();
+function getValidCacheItem(cache, key) {
+  const item = cache.get(key);
+  if (!item) {
+    return void 0;
   }
-  /**
-   * Override this function to customize how the value is converted to a form value;
-   */
-  valueToFormValue(r) {
-    switch (!0) {
-      /* eslint-disable eqeqeq -- loose equality will also return null for undefined */
-      case r == null:
-        return null;
-      case (typeof r == "string" || r instanceof File):
-        return r;
-      case typeof r == "object":
-        try {
-          return JSON.stringify(r);
-        } catch {
-          return null;
-        }
-      default:
-        return String(r);
+  if (item.maxAge <= Date.now()) {
+    cache.delete(key);
+    return void 0;
+  }
+  return item;
+}
+function memoize(function_, { cacheKey, cache = /* @__PURE__ */ new Map(), maxAge } = {}) {
+  if (maxAge === 0) {
+    return function_;
+  }
+  if (typeof maxAge === "number" && Number.isFinite(maxAge)) {
+    if (maxAge > maxTimeoutValue) {
+      throw new TypeError(`The \`maxAge\` option cannot exceed ${maxTimeoutValue}.`);
+    }
+    if (maxAge < 0) {
+      throw new TypeError("The `maxAge` option should not be a negative number.");
     }
   }
-};
-p = new WeakMap(), G.formAssociated = !0;
-let x = G;
-_([
-  b()
-], x.prototype, "name", 2);
-_([
-  b({ attribute: "hidden-label" })
-], x.prototype, "hiddenLabel", 2);
-_([
-  b({ type: Boolean })
-], x.prototype, "disabled", 2);
-_([
-  b({ type: Boolean })
-], x.prototype, "readonly", 2);
-_([
-  b()
-], x.prototype, "value", 1);
-const mt = X`
-  /* stylelint-disable */
-  .sr-only {
+  const memoized = function(...arguments_) {
+    const key = cacheKey ? cacheKey(arguments_) : arguments_[0];
+    const cacheItem = getValidCacheItem(cache, key);
+    if (cacheItem) {
+      return cacheItem.data;
+    }
+    const result = function_.apply(this, arguments_);
+    const computedMaxAge = typeof maxAge === "function" ? maxAge(...arguments_) : maxAge;
+    if (computedMaxAge !== void 0 && computedMaxAge !== Number.POSITIVE_INFINITY) {
+      if (!Number.isFinite(computedMaxAge)) {
+        throw new TypeError("The `maxAge` function must return a finite number, `0`, or `Infinity`.");
+      }
+      if (computedMaxAge <= 0) {
+        return result;
+      }
+      if (computedMaxAge > maxTimeoutValue) {
+        throw new TypeError(`The \`maxAge\` function result cannot exceed ${maxTimeoutValue}.`);
+      }
+    }
+    cache.set(key, {
+      data: result,
+      maxAge: computedMaxAge === void 0 || computedMaxAge === Number.POSITIVE_INFINITY ? Number.POSITIVE_INFINITY : Date.now() + computedMaxAge
+    });
+    if (computedMaxAge !== void 0 && computedMaxAge !== Number.POSITIVE_INFINITY) {
+      const timer = setTimeout(() => {
+        cache.delete(key);
+        cacheTimerStore.get(memoized)?.delete(timer);
+      }, computedMaxAge);
+      timer.unref?.();
+      const timers = cacheTimerStore.get(memoized) ?? /* @__PURE__ */ new Set();
+      timers.add(timer);
+      cacheTimerStore.set(memoized, timers);
+    }
+    return result;
+  };
+  mimicFunction(memoized, function_, {
+    ignoreNonConfigurable: true
+  });
+  cacheStore.set(memoized, cache);
+  cacheKeyStore.set(memoized, cacheKey ?? ((arguments_) => arguments_[0]));
+  return memoized;
+}
+const styles = css`
+  .clippy-combobox__input-container {
+    display: inline-block;
+    inline-size: 100%;
+    position: relative;
+  }
+  .clippy-combobox__current-option {
+    pointer-events: none;
     position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    display: flex;
+    // Clip contents when current option exceeds input size
+    inline-size: 100%;
     white-space: nowrap;
-    border-width: 0;
+    overflow: hidden;
+    align-items: center;
+  }
+  .clippy-combobox__current-option:has(+ input:focus) {
+    display: none;
+  }
+  /* added specificity to override the align-items now that the flex direction changes */
+  .clippy-combobox__option.utrecht-listbox__option {
+    display: flex;
+    flex-direction: column;
+    align-items: unset;
   }
 `;
-var _t = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, Q = (t) => {
-  throw TypeError(t);
-}, v = (t, o, r, e) => {
-  for (var c = e > 1 ? void 0 : e ? kt(o, r) : o, i = t.length - 1, a; i >= 0; i--)
-    (a = t[i]) && (c = (e ? a(o, r, c) : a(c)) || c);
-  return e && c && _t(o, r, c), c;
-}, A = (t, o, r) => o.has(t) || Q("Cannot " + r), l = (t, o, r) => (A(t, o, "read from private field"), r ? r.call(t) : o.get(t)), s = (t, o, r) => o.has(t) ? Q("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(t) : o.set(t, r), wt = (t, o, r, e) => (A(t, o, "write to private field"), o.set(t, r), r), h = (t, o, r) => (A(t, o, "access private method"), r), n, m, g, N, E, z, y, H, W, q, j, f, V, F, T;
-const K = "clippy-combobox";
-let d = class extends x {
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _ClippyCombobox_instances, id_get, _options, _addAdditionalOptions, _handleBlur, _handleChange, _handleDocumentClick, _handleFocus, _handleInput, _handleOptionsClick, _handleKeydown, setActiveItem_fn, commitActiveItem_fn, commitQuery_fn, listId_get, getOptionId_fn;
+const allowances = ["options", "other"];
+const defaultAllowance = "options";
+const positions = ["block-start", "block-end"];
+const defaultPosition = "block-end";
+const tag = "clippy-combobox";
+let ClippyCombobox = class extends FormElement {
   constructor() {
-    super(...arguments), s(this, n), this.open = !1, this.position = "block-end", s(this, g, /* @__PURE__ */ new Map()), this.selectedIndex = -1, this.query = "", this.filter = ({ label: t }) => t.toLowerCase().includes(this.query.toLowerCase()), s(this, N, vt(async (t) => {
-      const o = await this.fetchAdditionalOptions(t);
-      for (const r of o)
-        l(this, g).set(r.label, r);
-    })), s(this, E, (t) => {
-      t.relatedTarget && !this.shadowRoot?.contains(t.relatedTarget) && (this.open = !1, this.emit("blur"));
-    }), s(this, z, () => {
+    super(...arguments);
+    __privateAdd(this, _ClippyCombobox_instances);
+    this.allow = defaultAllowance;
+    this.open = false;
+    this.position = defaultPosition;
+    this.invalid = false;
+    __privateAdd(this, _options, /* @__PURE__ */ new Map());
+    this.activeIndex = -1;
+    this.query = "";
+    this.filter = (query) => {
+      const normalizedQuery = query.toLowerCase();
+      return ({ description, label }) => {
+        return Boolean(
+          label.toLowerCase().includes(normalizedQuery) || description?.toLowerCase().includes(normalizedQuery)
+        );
+      };
+    };
+    __privateAdd(this, _addAdditionalOptions, debounce(
+      memoize(
+        async (query) => {
+          const additions = await this.fetchAdditionalOptions(query);
+          for (const addition of additions) {
+            __privateGet(this, _options).set(addition.label, addition);
+          }
+          this.requestUpdate();
+        },
+        { maxAge: 6e4 }
+      ),
+      100
+    ));
+    __privateAdd(this, _handleBlur, (event) => {
+      const focusedRelatedElement = event.relatedTarget && this.shadowRoot?.contains(event.relatedTarget);
+      if (!focusedRelatedElement) {
+        if (this.allow === "other" && this.query) {
+          const value = this.queryToValue(this.query);
+          if (value && dequal(value, this.value)) {
+            this.value = value;
+          }
+        }
+        this.open = false;
+        this.emit("blur");
+      }
+    });
+    __privateAdd(this, _handleChange, () => {
       this.emit("change");
-    }), s(this, y, (t) => {
-      t.composedPath().some((r) => r instanceof Node && this.contains(r)) || (this.open = !1, this.emit("blur"));
-    }), s(this, H, () => {
-      this.open = !0, this.emit("focus");
-    }), s(this, W, (t) => {
-      const o = t.target;
-      o instanceof HTMLInputElement && (this.selectedIndex = -1, this.open = !0, this.query = o.value, this.value = this.queryToValue(this.query), this.emit("input"));
-    }), s(this, q, (t) => {
-      const o = t.currentTarget;
-      if (!(o instanceof HTMLElement)) return;
-      const r = Number(o.dataset.index);
-      Number.isNaN(r) || h(this, n, V).call(this, r);
-    }), s(this, j, ({ key: t }) => {
-      const o = this.selectedIndex, r = this.filteredOptions.length;
-      switch (t) {
+    });
+    __privateAdd(this, _handleDocumentClick, (event) => {
+      const path = event.composedPath();
+      if (!path.some((element) => element instanceof Node && this.contains(element))) {
+        this.open = false;
+        this.emit("blur");
+      }
+    });
+    __privateAdd(this, _handleFocus, () => {
+      this.open = true;
+      this.invalid = false;
+      this.emit("focus");
+    });
+    __privateAdd(this, _handleInput, (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLInputElement)) return;
+      this.activeIndex = -1;
+      this.open = true;
+      this.query = target.value;
+      if (this.query.length > 3) {
+        __privateGet(this, _addAdditionalOptions).call(this, this.query);
+      }
+      this.emit("input");
+    });
+    __privateAdd(this, _handleOptionsClick, (event) => {
+      const target = event.currentTarget;
+      if (!(target instanceof HTMLElement)) return;
+      const index = Number(target.dataset["index"]);
+      if (Number.isNaN(index)) return;
+      __privateMethod(this, _ClippyCombobox_instances, commitActiveItem_fn).call(this, index);
+    });
+    __privateAdd(this, _handleKeydown, ({ key }) => {
+      const index = this.activeIndex;
+      const count = this.filteredOptions.length;
+      switch (key) {
         case "ArrowDown":
-          return h(this, n, f).call(this, o + 1, !0);
+          return __privateMethod(this, _ClippyCombobox_instances, setActiveItem_fn).call(this, index + 1, true);
         case "ArrowUp":
-          return h(this, n, f).call(this, o - 1, !0);
+          return __privateMethod(this, _ClippyCombobox_instances, setActiveItem_fn).call(this, index - 1, true);
         case "Enter":
-          return h(this, n, V).call(this, o);
+          if (index > -1) {
+            return __privateMethod(this, _ClippyCombobox_instances, commitActiveItem_fn).call(this, index);
+          } else if (count === 1 && this.allow === "options") {
+            return __privateMethod(this, _ClippyCombobox_instances, commitActiveItem_fn).call(this, 0);
+          } else if (this.allow === "other") {
+            return __privateMethod(this, _ClippyCombobox_instances, commitQuery_fn).call(this);
+          }
+          return void 0;
         case "Escape":
-          return h(this, n, f).call(this, -1);
+          return __privateMethod(this, _ClippyCombobox_instances, setActiveItem_fn).call(this, -1);
         case "Home":
-          return h(this, n, f).call(this, 0);
+          return __privateMethod(this, _ClippyCombobox_instances, setActiveItem_fn).call(this, 0);
         case "End":
-          return h(this, n, f).call(this, r - 1);
+          return __privateMethod(this, _ClippyCombobox_instances, setActiveItem_fn).call(this, count - 1);
         default:
-          return;
+          return void 0;
       }
     });
   }
   get filteredOptions() {
-    if (this.query.length === 0)
+    if (this.query.length === 0) {
       return this.options;
-    const t = this.options.filter(this.filter);
-    return t.length === 0 && l(this, N).call(this, this.query), t;
+    }
+    const filter = this.filter(this.query);
+    return this.options.filter(filter);
   }
-  set options(t) {
-    wt(this, g, new Map(
-      t.map(
-        (o) => typeof o == "string" ? [o, { label: o, value: o }] : [o.label, o]
+  set options(options) {
+    __privateSet(this, _options, new Map(
+      options.map(
+        (option) => typeof option === "string" ? [option, { label: option, value: option }] : [option.label, option]
       )
     ));
   }
   get options() {
-    return [...l(this, g).values()];
+    return [...__privateGet(this, _options).values()];
   }
-  set value(t) {
-    super.value = t, this.query = this.valueToQuery(t);
+  set value(value) {
+    super.value = value;
   }
   get value() {
     return super.value;
   }
-  emit(t) {
-    this.dispatchEvent(new Event(t, { bubbles: !0, composed: !0 }));
+  emit(type) {
+    this.dispatchEvent(new Event(type, { bubbles: true, composed: true }));
   }
   /**
    * Override this function to customize an external data source
    */
-  fetchAdditionalOptions(t) {
-    const o = [];
-    return Promise.resolve(o);
+  fetchAdditionalOptions(_query) {
+    const empty = [];
+    return Promise.resolve(empty);
+  }
+  /**
+   * Override this function to customize how the value is looked up based on the selected option
+   */
+  getOptionForValue(value) {
+    const option = this.options.find((option2) => dequal(option2.value, value));
+    if (this.allow === "other" && !option && typeof value === "string") {
+      return { label: value, value };
+    }
+    return option;
   }
   /**
    * Override this function to customize how the user input is resolved to a value.
-   * This runs on input.
    */
-  queryToValue(t) {
-    return t;
+  queryToValue(query) {
+    if (this.allow === "other") {
+      return this.getOptionForValue(this.value)?.value || query;
+    }
+    const filter = this.filter(query);
+    return this.options.find(filter)?.value ?? null;
   }
   /**
    * Override this function to customize how a value is converted to a query.
    * This runs on setting the value.
    */
-  valueToQuery(t) {
-    return (t ?? "").toString();
+  valueToQuery(value) {
+    const option = this.getOptionForValue(value);
+    return option?.label || (this.allow === "other" && typeof value === "string" ? value : "");
   }
   /**
    * Override this function to customize the rendering of combobox options and selected value.
+   * By default, it renders the label and description (if available) in the listbox options,
+   * and only the label in the input when an option is selected (by virtue of `index` being `undefined`).
    */
-  renderEntry({ label: t }, o) {
-    return C`${t}`;
+  renderEntry({ description, label }, index) {
+    return html`
+      <div>${label}</div>
+      ${description && index !== void 0 ? html`<div>${description}</div>` : nothing}
+    `;
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("options") || changed.has("value")) {
+      this.query = this.valueToQuery(this.value) ?? "";
+    }
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", l(this, y));
+    super.connectedCallback();
+    document.addEventListener("click", __privateGet(this, _handleDocumentClick));
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", l(this, y));
+    super.disconnectedCallback();
+    document.removeEventListener("click", __privateGet(this, _handleDocumentClick));
   }
   render() {
-    const t = {
+    const labelClasses = {
+      "clippy-combobox__label": true,
+      "sr-only": !this.children.length
+      // If there are no slotted children, the label is only for screen readers, otherwise it's expected that the slotted content provides the label.
+    };
+    const popoverClasses = {
       [`utrecht-combobox__popover--${this.position}`]: this.position,
       "utrecht-combobox__popover--hidden": !this.open
     };
-    return C`
+    const textboxClasses = {
+      "utrecht-combobox__input": true,
+      "utrecht-textbox": true,
+      "utrecht-textbox--invalid": this.invalid
+    };
+    const currentOption = this.getOptionForValue(this.value);
+    const populatedSlots = Array.from(this.children).reduce(
+      (acc, child) => ({
+        ...acc,
+        [child.slot]: child
+      }),
+      {}
+    );
+    return html`
       <div class="utrecht-combobox">
-        <label for="${l(this, n, m)}" class="sr-only">${this.hiddenLabel}</label>
-        <input
-          id=${l(this, n, m)}
-          name=${this.name}
-          autocomplete="off"
-          role="combobox"
-          aria-autocomplete="list"
-          aria-haspopup="listbox"
-          aria-controls=${l(this, n, F)}
-          aria-expanded=${this.open}
-          aria-activedescendant=${h(this, n, T).call(this)}
-          type="text"
-          class="utrecht-textbox utrecht-combobox__input"
-          dir="auto"
-          .value=${this.query}
-          @input=${l(this, W)}
-          @focus=${l(this, H)}
-          @blur=${l(this, E)}
-          @change=${l(this, z)}
-          @keydown=${l(this, j)}
-        />
+        <label for="${__privateGet(this, _ClippyCombobox_instances, id_get)}" class=${classMap(labelClasses)}>
+          <slot name="label">${this.hiddenLabel || this.name}</slot>
+        </label>
+        ${populatedSlots["description"] ? html` <div id="${__privateGet(this, _ClippyCombobox_instances, id_get)}-description" class="clippy-combobox__description">
+              <slot name="description"></slot>
+            </div>` : nothing}
+        ${populatedSlots["error"] ? html` <div id="${__privateGet(this, _ClippyCombobox_instances, id_get)}-error" class="clippy-combobox__error">
+              <slot name="error"></slot>
+            </div>` : nothing}
+        <div class="clippy-combobox__input-container">
+          ${currentOption ? html`<div
+                role="presentation"
+                class=${classMap({ "clippy-combobox__current-option": true, ...textboxClasses })}
+              >
+                ${this.renderEntry(currentOption)}
+              </div>` : nothing}
+          <input
+            id=${__privateGet(this, _ClippyCombobox_instances, id_get)}
+            name=${this.name}
+            autocomplete="off"
+            role="combobox"
+            aria-autocomplete="list"
+            aria-haspopup="listbox"
+            aria-controls=${__privateGet(this, _ClippyCombobox_instances, listId_get)}
+            aria-expanded=${this.open}
+            aria-activedescendant=${ifDefined(__privateMethod(this, _ClippyCombobox_instances, getOptionId_fn).call(this))}
+            aria-invalid=${ifDefined(this.invalid ? "true" : void 0)}
+            aria-errormessage=${ifDefined(populatedSlots["error"] ? `${__privateGet(this, _ClippyCombobox_instances, id_get)}-error` : void 0)}
+            aria-describedby=${ifDefined(populatedSlots["description"] ? `${__privateGet(this, _ClippyCombobox_instances, id_get)}-description` : void 0)}
+            type="text"
+            class=${classMap(textboxClasses)}
+            dir="auto"
+            .value=${this.query}
+            @input=${__privateGet(this, _handleInput)}
+            @focus=${__privateGet(this, _handleFocus)}
+            @blur=${__privateGet(this, _handleBlur)}
+            @keydown=${__privateGet(this, _handleKeydown)}
+          />
+        </div>
         <div
-          id=${l(this, n, F)}
-          class="utrecht-listbox utrecht-combobox__popover ${J(t)}"
+          id=${__privateGet(this, _ClippyCombobox_instances, listId_get)}
+          class="utrecht-listbox utrecht-combobox__popover ${classMap(popoverClasses)}"
           role="listbox"
           tabindex="-1"
         >
           <ul class="utrecht-listbox__list" role="none">
-            ${this.filteredOptions.map((o, r) => {
-      const e = r === this.selectedIndex;
-      return C`<li
-                class="utrecht-listbox__option utrecht-listbox__option--html-li ${J({
-        "utrecht-listbox__option--selected": e
-      })}"
+            ${this.filteredOptions.map((option, index) => {
+      const active = index === this.activeIndex;
+      const selected = dequal(option, currentOption);
+      const interactionClasses = {
+        "utrecht-listbox__option--active": active,
+        "utrecht-listbox__option--selected": selected
+      };
+      return html`<li
+                class="clippy-combobox__option utrecht-listbox__option utrecht-listbox__option--html-li ${classMap(
+        interactionClasses
+      )}"
                 role="option"
-                id=${h(this, n, T).call(this, r)}
-                aria-selected=${e}
-                data-index=${r}
-                @click=${l(this, q)}
+                id=${ifDefined(__privateMethod(this, _ClippyCombobox_instances, getOptionId_fn).call(this, index))}
+                aria-selected=${selected}
+                data-index=${index}
+                @click=${__privateGet(this, _handleOptionsClick)}
               >
-                ${this.renderEntry(o, r)}
+                ${this.renderEntry(option, index)}
               </li>`;
     })}
           </ul>
@@ -321,66 +613,93 @@ let d = class extends x {
     `;
   }
 };
-n = /* @__PURE__ */ new WeakSet();
-m = function() {
-  return `${K}-${this.name}`;
+_ClippyCombobox_instances = /* @__PURE__ */ new WeakSet();
+id_get = function() {
+  return `${tag}-${this.name}`;
 };
-g = /* @__PURE__ */ new WeakMap();
-N = /* @__PURE__ */ new WeakMap();
-E = /* @__PURE__ */ new WeakMap();
-z = /* @__PURE__ */ new WeakMap();
-y = /* @__PURE__ */ new WeakMap();
-H = /* @__PURE__ */ new WeakMap();
-W = /* @__PURE__ */ new WeakMap();
-q = /* @__PURE__ */ new WeakMap();
-j = /* @__PURE__ */ new WeakMap();
-f = function(t, o = !1) {
-  this.open = o, this.selectedIndex = t > -1 ? t % this.filteredOptions.length : -1, this.selectedIndex > -1 && this.shadowRoot?.querySelector(`#${String(h(this, n, T).call(this))}`)?.scrollIntoView({
-    behavior: "smooth",
-    block: "nearest",
-    inline: "nearest"
-  });
+_options = /* @__PURE__ */ new WeakMap();
+_addAdditionalOptions = /* @__PURE__ */ new WeakMap();
+_handleBlur = /* @__PURE__ */ new WeakMap();
+_handleChange = /* @__PURE__ */ new WeakMap();
+_handleDocumentClick = /* @__PURE__ */ new WeakMap();
+_handleFocus = /* @__PURE__ */ new WeakMap();
+_handleInput = /* @__PURE__ */ new WeakMap();
+_handleOptionsClick = /* @__PURE__ */ new WeakMap();
+_handleKeydown = /* @__PURE__ */ new WeakMap();
+setActiveItem_fn = function(index, open = false) {
+  this.open = open;
+  this.activeIndex = index > -1 ? index % this.filteredOptions.length : -1;
+  if (this.activeIndex > -1) {
+    const element = this.shadowRoot?.querySelector(`#${String(__privateMethod(this, _ClippyCombobox_instances, getOptionId_fn).call(this))}`);
+    element?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    });
+  }
 };
-V = function(t) {
-  const { label: o, value: r } = this.filteredOptions.at(t) ?? {};
-  t < 0 || !o || !r || (this.query = o.toString(), this.value !== r && (this.value = r, l(this, z).call(this)), this.open = !1);
+commitActiveItem_fn = function(index) {
+  const { label, value } = this.filteredOptions.at(index) ?? {};
+  if (index < 0 || !label || !value) return;
+  if (!dequal(this.value, value)) {
+    this.value = value;
+    __privateGet(this, _handleChange).call(this);
+  }
+  this.open = false;
+};
+commitQuery_fn = function() {
+  const value = this.queryToValue(this.query);
+  if (!dequal(this.value, value)) {
+    this.value = value;
+    __privateGet(this, _handleChange).call(this);
+  }
+  this.open = false;
 };
-F = function() {
-  return `list-${l(this, n, m)}`;
+listId_get = function() {
+  return `list-${__privateGet(this, _ClippyCombobox_instances, id_get)}`;
 };
-T = function(t = this.selectedIndex) {
-  return t !== -1 ? `option-${t}-${l(this, n, m)}` : Z;
+getOptionId_fn = function(index = this.activeIndex) {
+  return index === -1 ? void 0 : `option-${index}-${__privateGet(this, _ClippyCombobox_instances, id_get)}`;
 };
-d.styles = [
-  mt,
-  P(ot),
-  P(rt),
-  P(et)
+ClippyCombobox.allowances = allowances;
+ClippyCombobox.positions = positions;
+ClippyCombobox.styles = [
+  styles,
+  srOnly,
+  unsafeCSS(comboboxStyles),
+  unsafeCSS(listboxStyles),
+  unsafeCSS(textboxStyles)
 ];
-v([
-  b({ reflect: !0, type: Boolean })
-], d.prototype, "open", 2);
-v([
-  b()
-], d.prototype, "position", 2);
-v([
-  L()
-], d.prototype, "selectedIndex", 2);
-v([
-  L()
-], d.prototype, "query", 2);
-v([
-  L()
-], d.prototype, "filteredOptions", 1);
-v([
-  b({ converter: pt })
-], d.prototype, "options", 1);
-v([
-  b()
-], d.prototype, "value", 1);
-d = v([
-  tt(K)
-], d);
+__decorateClass([
+  property({ converter: allowedValuesConverter(ClippyCombobox.allowances, defaultAllowance) })
+], ClippyCombobox.prototype, "allow", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], ClippyCombobox.prototype, "open", 2);
+__decorateClass([
+  property({ converter: allowedValuesConverter(ClippyCombobox.positions, defaultPosition) })
+], ClippyCombobox.prototype, "position", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], ClippyCombobox.prototype, "invalid", 2);
+__decorateClass([
+  state()
+], ClippyCombobox.prototype, "activeIndex", 2);
+__decorateClass([
+  state()
+], ClippyCombobox.prototype, "query", 2);
+__decorateClass([
+  state()
+], ClippyCombobox.prototype, "filteredOptions", 1);
+__decorateClass([
+  property({ converter: arrayFromTokenList })
+], ClippyCombobox.prototype, "options", 1);
+__decorateClass([
+  property()
+], ClippyCombobox.prototype, "value", 1);
+ClippyCombobox = __decorateClass([
+  safeCustomElement(tag)
+], ClippyCombobox);
 export {
-  d as ClippyCombobox
+  ClippyCombobox
 };