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

package/dist/clippy-combobox/index.js

@@ -1,10 +1,705 @@
-import "../decorators-BGpMqJ7V.js";
-import { C as x } from "../index-CmKtM5nD.js";
-import "lit";
-import "lit/decorators.js";
-import "lit/directives/class-map.js";
-import "lit/directives/if-defined.js";
-import "../index-D3FiqptQ.js";
+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();
+      }
+    }
+  }
+  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;
+}
+var has = Object.prototype.hasOwnProperty;
+function find(iter, tar, key) {
+  for (key of iter.keys()) {
+    if (dequal(key, tar)) return key;
+  }
+}
+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 (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;
+    }
+    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 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);
+};
+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;
+  }
+  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);
+  }
+  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;
+  }
+  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.");
+    }
+  }
+  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;
+    display: flex;
+    // Clip contents when current option exceeds input size
+    inline-size: 100%;
+    white-space: nowrap;
+    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 __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);
+    __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");
+    });
+    __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 __privateMethod(this, _ClippyCombobox_instances, setActiveItem_fn).call(this, index + 1, true);
+        case "ArrowUp":
+          return __privateMethod(this, _ClippyCombobox_instances, setActiveItem_fn).call(this, index - 1, true);
+        case "Enter":
+          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 __privateMethod(this, _ClippyCombobox_instances, setActiveItem_fn).call(this, -1);
+        case "Home":
+          return __privateMethod(this, _ClippyCombobox_instances, setActiveItem_fn).call(this, 0);
+        case "End":
+          return __privateMethod(this, _ClippyCombobox_instances, setActiveItem_fn).call(this, count - 1);
+        default:
+          return void 0;
+      }
+    });
+  }
+  get filteredOptions() {
+    if (this.query.length === 0) {
+      return this.options;
+    }
+    const filter = this.filter(this.query);
+    return this.options.filter(filter);
+  }
+  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 [...__privateGet(this, _options).values()];
+  }
+  set value(value) {
+    super.value = value;
+  }
+  get value() {
+    return super.value;
+  }
+  emit(type) {
+    this.dispatchEvent(new Event(type, { bubbles: true, composed: true }));
+  }
+  /**
+   * Override this function to customize an external data source
+   */
+  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.
+   */
+  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(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({ 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", __privateGet(this, _handleDocumentClick));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", __privateGet(this, _handleDocumentClick));
+  }
+  render() {
+    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
+    };
+    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="${__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=${__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((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=${ifDefined(__privateMethod(this, _ClippyCombobox_instances, getOptionId_fn).call(this, index))}
+                aria-selected=${selected}
+                data-index=${index}
+                @click=${__privateGet(this, _handleOptionsClick)}
+              >
+                ${this.renderEntry(option, index)}
+              </li>`;
+    })}
+          </ul>
+        </div>
+      </div>
+    `;
+  }
+};
+_ClippyCombobox_instances = /* @__PURE__ */ new WeakSet();
+id_get = function() {
+  return `${tag}-${this.name}`;
+};
+_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"
+    });
+  }
+};
+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;
+};
+listId_get = function() {
+  return `list-${__privateGet(this, _ClippyCombobox_instances, id_get)}`;
+};
+getOptionId_fn = function(index = this.activeIndex) {
+  return index === -1 ? void 0 : `option-${index}-${__privateGet(this, _ClippyCombobox_instances, id_get)}`;
+};
+ClippyCombobox.allowances = allowances;
+ClippyCombobox.positions = positions;
+ClippyCombobox.styles = [
+  styles,
+  srOnly,
+  unsafeCSS(comboboxStyles),
+  unsafeCSS(listboxStyles),
+  unsafeCSS(textboxStyles)
+];
+__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 {
-  x as ClippyCombobox
+  ClippyCombobox
 };