@nextcloud/vue 9.10.0 → 9.11.0

package/dist/chunks/NcSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcSelect.mjs","sources":["../../src/components/NcSelect/NcSelect.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nGeneral purpose multiselect component.\n\n### Basic examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<NcSelect v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Simple',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Simple (top placement)',\n\t\t\tplacement: 'top',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple (with placeholder)',\n\t\t\tmultiple: true,\n\t\t\tplaceholder: 'Select multiple options',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple (objects, pre-selected, stay open on select)',\n\t\t\tkeepOpen: true,\n\t\t\tmultiple: true,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'baz',\n\t\t\t\t\tlabel: 'Baz',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'qux',\n\t\t\t\t\tlabel: 'Qux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'quux',\n\t\t\t\t\tlabel: 'Quux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'corge',\n\t\t\t\t\tlabel: 'Corge',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'grault',\n\t\t\t\t\tlabel: 'Grault',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'garply',\n\t\t\t\t\tlabel: 'Garply',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'waldo',\n\t\t\t\t\tlabel: 'Waldo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'fred',\n\t\t\t\t\tlabel: 'Fred',\n\t\t\t\t},\n\t\t\t],\n\t\t\tvalue: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n\n### Pre-selected and clearable\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<NcSelect v-model=\"singleValue\"\n\t\t\t\tinput-label=\"Clearable single\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tclearable />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<NcSelect v-model=\"singlePlaceholder\"\n\t\t\t\tinput-label=\"With placeholder\"\n\t\t\t\tplaceholder=\"Search for something...\"\n\t\t\t\t:options=\"options\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: ['foo', 'bar', 'baz', 'qux', 'quux'],\n\t\t\tsingleValue: 'bar',\n\t\t\tsinglePlaceholder: null,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n</style>\n```\n\n### Disabled state\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<NcSelect v-model=\"singleValue\"\n\t\t\t\tinput-label=\"Disabled single\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tdisabled />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<NcSelect v-model=\"multiValue\"\n\t\t\t\tinput-label=\"Disabled multi\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple\n\t\t\t\tdisabled />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: ['foo', 'bar', 'baz'],\n\t\t\tsingleValue: 'foo',\n\t\t\tmultiValue: ['foo', 'bar'],\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n</style>\n```\n\n### Label outside\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<label for=\"ext-single\">External label (single)</label>\n\t\t\t<NcSelect v-model=\"singleValue\"\n\t\t\t\tinput-id=\"ext-single\"\n\t\t\t\tlabel-outside\n\t\t\t\tplaceholder=\"Pick an option\"\n\t\t\t\t:options=\"options\" />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<label for=\"ext-multi\">External label (multi)</label>\n\t\t\t<NcSelect v-model=\"multiValue\"\n\t\t\t\tinput-id=\"ext-multi\"\n\t\t\t\tlabel-outside\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: ['foo', 'bar', 'baz', 'qux', 'quux'],\n\t\t\tsingleValue: null,\n\t\t\tmultiValue: [],\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n}\n</style>\n```\n\n### Native form validation example\n\n```vue\n<template>\n\t<div class=\"container\">\n\t\t<form class=\"container__form\" @submit.prevent>\n\t\t\t<NcSelect class=\"container__select\"\n\t\t\t\tinput-label=\"Require a selection\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tv-model=\"singleValue\"\n\t\t\t\trequired />\n\t\t\t<NcButton type=\"submit\">Submit</NcButton>\n\t\t</form>\n\n\t\t<form class=\"container__form\" @submit.prevent>\n\t\t\t<NcSelect class=\"container__select\"\n\t\t\t\tinput-label=\"Require at least one selection\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tv-model=\"multiValue\"\n\t\t\t\tmultiple\n\t\t\t\trequired />\n\t\t\t<NcButton type=\"submit\">Submit</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: ['foo', 'bar', 'baz', 'qux', 'quux'],\n\t\t\tsingleValue: null,\n\t\t\tmultiValue: [],\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.container {\n\tdisplay: flex;\n\tgap: 0 12px;\n}\n\n.container__form {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-end;\n\twidth: 100%;\n\tgap: 8px 0;\n}\n\n.container__select {\n\twidth: 100%;\n}\n</style>\n```\n\n### No wrap example\n\nThe `noWrap` prop is set to `true` and the `max-width` of the multiselect\nparent container is limited to `350px`\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<NcSelect :no-wrap=\"false\"\n\t\t\t\tv-bind=\"data1.props\"\n\t\t\t\tv-model=\"data1.props.value\" />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<NcSelect :no-wrap=\"true\"\n\t\t\t\tv-bind=\"data2.props\"\n\t\t\t\tv-model=\"data2.props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nconst data1 = {\n\tprops: {\n\t\tinputLabel: 'Wrapped (Default)',\n\t\tmultiple: true,\n\t\tkeepOpen: true,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nconst data2 = {\n\tprops: {\n\t\tinputLabel: 'Not wrapped',\n\t\tkeepOpen: true,\n\t\tmultiple: true,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tdata1,\n\t\t\tdata2,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tmax-width: 350px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<VueSelect\n\t\tclass=\"select nc-select\"\n\t\t:class=\"{\n\t\t\t'select--legacy': isLegacy,\n\t\t\t'select--no-wrap': noWrap,\n\t\t}\"\n\t\tv-bind=\"propsToForward\"\n\t\t@search=\"search = $event\"\n\t\t@update:modelValue=\"$emit('update:modelValue', $event)\">\n\t\t<template v-if=\"multiple && !labelOutside && inputLabel\" #header>\n\t\t\t<label\n\t\t\t\t:for=\"inputId\"\n\t\t\t\tclass=\"select__label\">\n\t\t\t\t{{ inputLabel }}\n\t\t\t</label>\n\t\t</template>\n\t\t<template #search=\"{ attributes, events }\">\n\t\t\t<!--\n\t\t\t\tvue-select's `attributes`/`events` are its search-slot contract, not\n\t\t\t\tHTML pass-through, so we forward only the combobox a11y attributes and\n\t\t\t\tevents one by one. This skips `attributes.ref` (a vue-select template\n\t\t\t\tref) and lets our own `modelValue`, `placeholder`, `label` and\n\t\t\t\t`disabled` win over their vue-select equivalents.\n\t\t\t\tNo placeholder when: multi mode (select__label is the placeholder) or a\n\t\t\t\tvalue is selected (the vs__selected overlay shows it instead).\n\t\t\t-->\n\t\t\t<NcTextField\n\t\t\t\t:id=\"attributes.id\"\n\t\t\t\tclass=\"vs__search\"\n\t\t\t\t:class=\"[inputClass]\"\n\t\t\t\t:type=\"attributes.type\"\n\t\t\t\t:modelValue=\"attributes.value\"\n\t\t\t\t:placeholder=\"multiple || modelValue ? '' : (placeholder || '')\"\n\t\t\t\t:label=\"!labelOutside && !multiple && inputLabel ? inputLabel : ''\"\n\t\t\t\t:labelOutside=\"labelOutside || multiple\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:required=\"inputRequired\"\n\t\t\t\t:role=\"attributes.role\"\n\t\t\t\t:tabindex=\"attributes.tabindex\"\n\t\t\t\t:readonly=\"attributes.readonly\"\n\t\t\t\t:autocomplete=\"attributes.autocomplete\"\n\t\t\t\t:aria-label=\"attributes['aria-label']\"\n\t\t\t\t:aria-autocomplete=\"attributes['aria-autocomplete']\"\n\t\t\t\t:aria-controls=\"attributes['aria-controls']\"\n\t\t\t\t:aria-owns=\"attributes['aria-owns']\"\n\t\t\t\t:aria-expanded=\"attributes['aria-expanded']\"\n\t\t\t\t:aria-activedescendant=\"attributes['aria-activedescendant']\"\n\t\t\t\t@keydown=\"events.keydown\"\n\t\t\t\t@keypress=\"events.keypress\"\n\t\t\t\t@focus=\"events.focus\"\n\t\t\t\t@blur=\"events.blur\"\n\t\t\t\t@compositionstart=\"events.compositionstart\"\n\t\t\t\t@compositionend=\"events.compositionend\"\n\t\t\t\t@update:modelValue=\"events.input({ target: { value: $event } })\" />\n\t\t</template>\n\t\t<template #open-indicator=\"{ attributes }\">\n\t\t\t<ChevronDown\n\t\t\t\tv-bind=\"attributes\"\n\t\t\t\tfillColor=\"var(--vs-controls-color)\"\n\t\t\t\t:style=\"{\n\t\t\t\t\tcursor: !disabled ? 'pointer' : null,\n\t\t\t\t}\"\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t\t<template #option=\"option\">\n\t\t\t<!-- @slot Customize how a option is rendered. -->\n\t\t\t<slot name=\"option\" v-bind=\"option\">\n\t\t\t\t<NcEllipsisedOption\n\t\t\t\t\t:name=\"String(option[localLabel])\"\n\t\t\t\t\t:search=\"search\" />\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<!-- @slot Customize how a selected option is rendered -->\n\t\t\t<slot name=\"selected-option\" v-bind=\"selectedOption\">\n\t\t\t\t<NcEllipsisedOption\n\t\t\t\t\t:name=\"String(selectedOption[localLabel])\"\n\t\t\t\t\t:search=\"search\" />\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #spinner=\"spinner\">\n\t\t\t<NcLoadingIcon v-if=\"spinner.loading\" />\n\t\t</template>\n\t\t<template #no-options>\n\t\t\t{{ t('No results') }}\n\t\t</template>\n\t\t<template v-for=\"(_, name) in $slots\" #[name]=\"data\">\n\t\t\t<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->\n\t\t\t<slot :name=\"name\" v-bind=\"data\" />\n\t\t</template>\n\t</VueSelect>\n</template>\n\n<script>\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tlimitShift,\n\toffset,\n\tshift,\n} from '@floating-ui/dom'\nimport { VueSelect } from '@nextcloud/vue-select'\nimport { h, warn } from 'vue'\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport NcEllipsisedOption from '../NcEllipsisedOption/NcEllipsisedOption.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport NcTextField from '../NcTextField/NcTextField.vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\n\nexport default {\n\tname: 'NcSelect',\n\n\tcomponents: {\n\t\tChevronDown,\n\t\tNcEllipsisedOption,\n\t\tNcLoadingIcon,\n\t\tNcTextField,\n\t\tVueSelect,\n\t},\n\n\tprops: {\n\t\t// Add VueSelect props to $props\n\t\t...VueSelect.props,\n\t\t...VueSelect.mixins.reduce((allProps, mixin) => ({ ...allProps, ...mixin.props }), {}),\n\n\t\t/**\n\t\t * `aria-label` for the clear input button\n\t\t */\n\t\tariaLabelClearSelected: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Clear selected'),\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` for the search input\n\t\t *\n\t\t * A descriptive `inputLabel` is preferred as this is not visible.\n\t\t */\n\t\tariaLabelCombobox: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` for the listbox element\n\t\t */\n\t\tariaLabelListbox: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Options'),\n\t\t},\n\n\t\t/**\n\t\t * Allows to customize the `aria-label` for the deselect-option button\n\t\t * The default is \"Deselect \" + optionLabel\n\t\t *\n\t\t * @type {(optionLabel: string) => string}\n\t\t */\n\t\tariaLabelDeselectOption: {\n\t\t\ttype: Function,\n\t\t\tdefault: (optionLabel) => t('Deselect {option}', { option: optionLabel }),\n\t\t},\n\n\t\t/**\n\t\t * Append the dropdown element to the end of the body\n\t\t * and size/position it dynamically.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#appendtobody\n\t\t */\n\t\tappendToBody: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * When `appendToBody` is true, this function is responsible for\n\t\t * positioning the drop down list.\n\t\t *\n\t\t * If a function is returned from `calculatePosition`, it will\n\t\t * be called when the drop down list is removed from the DOM.\n\t\t * This allows for any garbage collection you may need to do.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#calculateposition\n\t\t */\n\t\tcalculatePosition: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Keep the dropdown open after selecting an option.\n\t\t *\n\t\t * @default false\n\t\t * @since 8.25.0\n\t\t */\n\t\tkeepOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Replace default vue-select components\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#components\n\t\t */\n\t\tcomponents: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({\n\t\t\t\tDeselect: {\n\t\t\t\t\trender: () => h(Close, {\n\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\tfillColor: 'var(--vs-controls-color)',\n\t\t\t\t\t\tstyle: [\n\t\t\t\t\t\t\t{ cursor: 'pointer' },\n\t\t\t\t\t\t],\n\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t}),\n\t\t},\n\n\t\t/**\n\t\t * Sets the maximum number of options to display in the dropdown list\n\t\t */\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Disable the component\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#disabled\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Determines whether the dropdown should be open.\n\t\t * Receives the component instance as the only argument.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#dropdownshouldopen\n\t\t */\n\t\tdropdownShouldOpen: {\n\t\t\ttype: Function,\n\t\t\tdefault: ({ noDrop, open }) => {\n\t\t\t\treturn noDrop ? false : open\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Callback to determine if the provided option should\n\t\t * match the current search text. Used to determine\n\t\t * if the option should be displayed.\n\t\t *\n\t\t * Defaults to the internal vue-select function documented at the link\n\t\t * below\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#filterby\n\t\t */\n\t\tfilterBy: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Class for the `input`\n\t\t *\n\t\t * Necessary for use in NcActionInput\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Input element id\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t},\n\n\t\t/**\n\t\t * Visible label for the input element\n\t\t */\n\t\tinputLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Pass true if you are using an external label\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Display a visible border around dropdown options\n\t\t * which have keyboard focus\n\t\t */\n\t\tkeyboardFocusBorder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Key of the displayed label for object options\n\t\t *\n\t\t * Defaults to the internal vue-select string documented at the link\n\t\t * below\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#label\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Show the loading icon\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#loading\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Allow selection of multiple options\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#multiple\n\t\t */\n\t\tmultiple: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Disable automatic wrapping when selected options overflow the width\n\t\t */\n\t\tnoWrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Array of options\n\t\t *\n\t\t * @type {Array<string | number | Record<string | number, any>>}\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#options\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * Placeholder text\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#placeholder\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Customized component's response to keydown events while the search input has focus\n\t\t *\n\t\t * @see https://vue-select.org/guide/keydown.html#mapkeydown\n\t\t */\n\t\tmapKeydown: {\n\t\t\ttype: Function,\n\t\t\t/**\n\t\t\t * Patched Vue-Select keydown events handlers map to stop Escape propagation in open select\n\t\t\t *\n\t\t\t * @param {Record<number, (event: KeyboardEvent) => void>} map - Mapped keyCode to handlers { <keyCode>:<callback> }\n\t\t\t * @param {import('vue').ComponentPublicInstance} vm - VueSelect instance\n\t\t\t * @return {Record<number, (event: KeyboardEvent) => void>} patched keydown event handlers\n\t\t\t */\n\t\t\tdefault(map, vm) {\n\t\t\t\treturn {\n\t\t\t\t\t...map,\n\t\t\t\t\t/**\n\t\t\t\t\t * Patched Escape handler to stop propagation from open select\n\t\t\t\t\t *\n\t\t\t\t\t * @param {KeyboardEvent} event - default keydown event handler\n\t\t\t\t\t */\n\t\t\t\t\t27: (event) => {\n\t\t\t\t\t\tif (vm.open) {\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Default VueSelect's handler\n\t\t\t\t\t\tmap[27](event)\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * A unique identifier used to generate IDs and DOM attributes. Must be unique for every instance of the component.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#uid\n\t\t */\n\t\tuid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t},\n\n\t\t/**\n\t\t * When `appendToBody` is true, this sets the placement of the dropdown\n\t\t *\n\t\t * @type {'bottom' | 'top'}\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * If false, the focused dropdown option will not be reset when filtered\n\t\t * options change\n\t\t */\n\t\tresetFocusOnOptionsChange: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Currently selected value\n\t\t *\n\t\t * The `v-model` directive may be used for two-way data binding\n\t\t *\n\t\t * @type {string | number | Record<string | number, any> | Array<any>}\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#value\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number, Object, Array],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable if a value is required for native form validation\n\t\t */\n\t\trequired: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Any available prop\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * All events from https://vue-select.org/api/events.html\n\t\t */\n\t\t// Not an actual event but needed to show in vue-styleguidist docs\n\t\t' ',\n\t\t'update:modelValue',\n\t],\n\n\tsetup() {\n\t\tconst clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))\n\t\tconst gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))\n\t\tconst avatarSize = clickableArea - 2 * gridBaseLine\n\n\t\treturn {\n\t\t\tavatarSize,\n\t\t\tisLegacy,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tinputRequired() {\n\t\t\tif (!this.required) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\t// The <input> itself does not have any value so we set the `required` attribute conditionally\n\t\t\treturn this.modelValue === null || (Array.isArray(this.modelValue) && this.modelValue.length === 0)\n\t\t},\n\n\t\tlocalCalculatePosition() {\n\t\t\tif (this.calculatePosition !== null) {\n\t\t\t\treturn this.calculatePosition\n\t\t\t}\n\n\t\t\treturn (dropdownMenu, component, { width }) => {\n\t\t\t\tdropdownMenu.style.width = width\n\n\t\t\t\tconst addClass = {\n\t\t\t\t\tname: 'addClass',\n\t\t\t\t\tfn(/* middlewareArgs */) {\n\t\t\t\t\t\t// `nc-select__dropdown` scopes our menu styles: the menu is\n\t\t\t\t\t\t// teleported to <body>, so it cannot be reached by the\n\t\t\t\t\t\t// `.nc-select` root scope and would otherwise style every\n\t\t\t\t\t\t// vue-select dropdown on the page (cross-version conflicts).\n\t\t\t\t\t\tdropdownMenu.classList.add('vs__dropdown-menu--floating', 'nc-select__dropdown')\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst togglePlacementClass = {\n\t\t\t\t\tname: 'togglePlacementClass',\n\t\t\t\t\tfn({ placement }) {\n\t\t\t\t\t\tcomponent.$el.classList.toggle(\n\t\t\t\t\t\t\t'select--drop-up',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\tdropdownMenu.classList.toggle(\n\t\t\t\t\t\t\t'vs__dropdown-menu--floating-placement-top',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst updatePosition = () => {\n\t\t\t\t\tcomputePosition(component.$refs.toggle, dropdownMenu, {\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\t\t// Flip first so the placement-dependent middleware below see the final placement\n\t\t\t\t\t\t\tflip(),\n\t\t\t\t\t\t\taddClass,\n\t\t\t\t\t\t\ttogglePlacementClass,\n\t\t\t\t\t\t\t// On top placement, leave a gap for the floating label overhang\n\t\t\t\t\t\t\t// (about half the floated label line-height) instead of connecting seamlessly\n\t\t\t\t\t\t\toffset(({ placement }) => (placement.startsWith('top') ? 10 : -1)),\n\t\t\t\t\t\t\tshift({ limiter: limitShift() }),\n\t\t\t\t\t\t],\n\t\t\t\t\t}).then(({ x, y }) => {\n\t\t\t\t\t\tObject.assign(dropdownMenu.style, {\n\t\t\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t\t\t\twidth: `${component.$refs.toggle.getBoundingClientRect().width}px`,\n\t\t\t\t\t\t})\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\tconst cleanup = autoUpdate(\n\t\t\t\t\tcomponent.$refs.toggle,\n\t\t\t\t\tdropdownMenu,\n\t\t\t\t\tupdatePosition,\n\t\t\t\t)\n\n\t\t\t\treturn cleanup\n\t\t\t}\n\t\t},\n\n\t\tlocalFilterBy() {\n\t\t\treturn this.filterBy ?? VueSelect.props.filterBy.default\n\t\t},\n\n\t\tlocalLabel() {\n\t\t\treturn this.label ?? VueSelect.props.label.default\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst vueSelectKeys = [\n\t\t\t\t...Object.keys(VueSelect.props),\n\t\t\t\t...VueSelect.mixins.flatMap((mixin) => Object.keys(mixin.props ?? {})),\n\t\t\t]\n\t\t\tconst initialPropsToForward = Object.fromEntries(Object.entries(this.$props)\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t\t\t.filter(([key, _value]) => vueSelectKeys.includes(key)))\n\t\t\tconst propsToForward = {\n\t\t\t\t...initialPropsToForward,\n\t\t\t\t// Custom overrides of vue-select props\n\t\t\t\tcalculatePosition: this.localCalculatePosition,\n\t\t\t\tcloseOnSelect: !this.keepOpen,\n\t\t\t\tfilterBy: this.localFilterBy,\n\t\t\t\tlabel: this.localLabel,\n\t\t\t}\n\t\t\treturn propsToForward\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (!this.labelOutside && !this.inputLabel && !this.ariaLabelCombobox) {\n\t\t\twarn('[NcSelect] An `inputLabel` or `ariaLabelCombobox` should be set. If an external label is used, `labelOutside` should be set to `true`.')\n\t\t}\n\t\tif (this.inputLabel && this.ariaLabelCombobox) {\n\t\t\twarn('[NcSelect] Only one of `inputLabel` or `ariaLabelCombobox` should to be set.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@use '../../assets/input-border.scss' as border;\n\n.nc-select.v-select.select {\n\t/* Custom vue-select CSS variables scoped to NcSelect */\n\t/* Search Input */\n\t--vs-search-input-color: var(--color-main-text);\n\t--vs-search-input-bg: var(--color-main-background);\n\t--vs-search-input-placeholder-color: var(--color-text-maxcontrast);\n\n\t/* Font */\n\t--vs-font-size: var(--default-font-size);\n\t--vs-line-height: var(--default-line-height);\n\n\t/* Disabled State */\n\t--vs-state-disabled-bg: var(--color-background-hover);\n\t--vs-state-disabled-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-controls-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-cursor: not-allowed;\n\t--vs-disabled-bg: var(--color-background-hover);\n\t--vs-disabled-color: var(--color-text-maxcontrast);\n\t--vs-disabled-cursor: not-allowed;\n\n\t/* Borders */\n\t--vs-border-color: var(--color-border-maxcontrast);\n\t--vs-border-width: var(--border-width-input, 2px) !important;\n\t--vs-border-style: solid;\n\t--vs-border-radius: var(--border-radius-element);\n\n\t/* Component Controls: Clear, Open Indicator */\n\t--vs-controls-color: var(--color-main-text);\n\n\t/* Selected */\n\t--vs-selected-bg: var(--color-background-hover);\n\t--vs-selected-color: var(--color-main-text);\n\t--vs-selected-border-color: var(--vs-border-color);\n\t--vs-selected-border-style: var(--vs-border-style);\n\t--vs-selected-border-width: var(--vs-border-width);\n\n\t/* Dropdown */\n\t--vs-dropdown-bg: var(--color-main-background);\n\t--vs-dropdown-color: var(--color-main-text);\n\t--vs-dropdown-z-index: 9999;\n\t--vs-dropdown-box-shadow: 0px 2px 2px 0px var(--color-box-shadow);\n\n\t/* Options */\n\t--vs-dropdown-option-padding: 8px 20px;\n\n\t/* Active State */\n\t--vs-dropdown-option--active-bg: var(--color-background-hover);\n\t--vs-dropdown-option--active-color: var(--color-main-text);\n\n\t/* Keyboard Focus State */\n\t--vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px var(--vs-border-color);\n\n\t/* Deselect State */\n\t--vs-dropdown-option--deselect-bg: var(--color-error);\n\t--vs-dropdown-option--deselect-color: #fff;\n\n\t/* Transitions */\n\t--vs-transition-duration: 0ms;\n\n\t/* Actions */\n\t--vs-actions-padding: 0 8px 0 8px;\n\t/* Override default vue-select styles */\n\tmin-height: calc(var(--default-clickable-area) - 2 * var(--border-width-input, 2px));\n\tmin-width: 260px;\n\t// 6px block-start reserves space for the floated label, matching\n\t// NcInputField (.input-field margin-block-start) so fields line up in a row.\n\tmargin: 6px 0 var(--default-grid-baseline);\n\n\t&.vs--open {\n\t\t--vs-border-width: var(--border-width-input-focused, 2px);\n\t}\n\n\t.vs__selected {\n\t\t// min-height (not height) so multi-line entries like NcSelectUsers chips can grow\n\t\tmin-height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width) - var(--default-grid-baseline));\n\t\tmin-width: 0;\n\t\tmax-width: 100%;\n\t\tmargin: calc(var(--default-grid-baseline) / 2);\n\t\tpadding-block: 0;\n\t\tpadding-inline: 12px 8px;\n\t\tborder-radius: 16px !important;\n\t\tbackground: var(--color-primary-element-light);\n\t\tborder: none;\n\t}\n\n\t.vs__search {\n\t\t// NcTextField filling the search area; padding-end reserved for the actions overlay\n\t\twidth: 100%;\n\t\t--input-padding-end: calc(var(--default-clickable-area) + var(--default-grid-baseline));\n\n\t\t// Neutralize vue-select defaults on the wrapper div (no longer the native input).\n\t\t// The height reset also beats legacy global styles (e.g. bundled by the server)\n\t\t// that force a fixed height on `.vs__search` from the old native-input design.\n\t\tborder: none !important;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: auto !important;\n\t}\n\n\t// Force floating label when a value is selected (search input is empty but a value exists)\n\t.vs__selected-options:has(.vs__selected) .vs__search {\n\t\t.input-field__input + .input-field__label {\n\t\t\t--input-label-font-size: var(--font-size-small, 13px);\n\t\t\tline-height: 1.5;\n\t\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\t\tfont-weight: 500;\n\t\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\n\t\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t\t}\n\t}\n\n\t// Single mode: border is on NcTextField, dropdown-toggle is invisible\n\t&:not(.vs--multiple) .vs__dropdown-toggle {\n\t\tpadding: 0;\n\t\toverflow: visible;\n\t\tborder: none !important;\n\t\tbox-shadow: none !important;\n\t\tbackground: transparent;\n\t}\n\n\t.vs__actions {\n\t\tposition: absolute;\n\t\tz-index: 999;\n\t\tinset-inline-end: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\theight: 100%;\n\t\tmargin-block-start: 1px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.vs__clear {\n\t\tmargin-inline-end: 2px;\n\t}\n\n\t&.vs--open {\n\t\t// Remove bottom border-radius when dropdown is open\n\t\t.vs__search .input-field__input {\n\t\t\tborder-end-start-radius: 0 !important;\n\t\t\tborder-end-end-radius: 0 !important;\n\t\t}\n\t}\n\n\t&.vs--disabled {\n\t\t// Override vue-select's disabled background on all internal elements\n\t\t// to prevent stacking with NcInputField's own background\n\t\t.vs__clear,\n\t\t.vs__dropdown-toggle,\n\t\t.vs__open-indicator,\n\t\t.vs__open-indicator-button,\n\t\t.vs__search,\n\t\t.vs__selected {\n\t\t\tbackground-color: transparent;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t// Lighter border in disabled state to match single mode (NcInputField uses --color-border-dark)\n\t\t.vs__dropdown-toggle {\n\t\t\t--input-border-box-shadow-light: 0 -1px var(--color-border-dark),\n\t\t\t\t0 0 0 1px color-mix(in srgb, var(--color-border-dark), 65% transparent);\n\t\t\t--input-border-box-shadow-dark: 0 1px var(--color-border-dark),\n\t\t\t\t0 0 0 1px color-mix(in srgb, var(--color-border-dark), 65% transparent);\n\t\t}\n\n\t\t.vs__clear,\n\t\t.vs__deselect {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&--no-wrap {\n\t\t.vs__dropdown-toggle {\n\t\t\toverflow: hidden;\n\t\t}\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t\toverflow: auto !important;\n\t\t\tmin-width: unset;\n\t\t\t.vs__selected {\n\t\t\t\tmin-width: unset;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Drop-up: the menu is detached above the select (calculatePosition leaves a\n\t// gap for the floating label, which stays in its usual top position),\n\t// so keep the regular fully-rounded borders instead of flattening the seam\n\t&--drop-up {\n\t\t&.vs--open {\n\t\t\t.vs__search .input-field__input {\n\t\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\t}\n\n\t\t\t// !important to beat the later-defined down-state open rule\n\t\t\t// (.vs--multiple.vs--open .vs__dropdown-toggle) of equal specificity\n\t\t\t&.vs--multiple .vs__dropdown-toggle {\n\t\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\t\t// Bottom is a regular outer edge here, not a divider seam\n\t\t\t\tborder-block-end-color: var(--color-main-text) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.vs__selected-options {\n\t\t// If search is hidden, ensure that the height of the search is the same\n\t\tmin-height: unset;\n\n\t\t// Hide search from dom if unused to prevent unneeded flex wrap\n\t\t.vs__selected ~ .vs__search:has(.input-field__input[readonly]) {\n\t\t\tposition: absolute;\n\t\t}\n\t\tpadding: 0;\n\t\tborder: none;\n\t\toverflow: visible;\n\t}\n\n\t// Multi-select: border on dropdown-toggle (contains tags + input)\n\t// NcTextField is transparent; floating label via #header slot\n\t&.vs--multiple {\n\t\t.vs__dropdown-toggle {\n\t\t\t// Use transparent border in closed state to reserve the same space\n\t\t\t// as the open state's real border, prevents layout jump on click\n\t\t\tborder: var(--border-width-input-focused, 2px) solid transparent;\n\t\t\tbox-shadow: var(--input-border-box-shadow);\n\t\t\t// Top padding for floating label clearance, no bottom padding\n\t\t\tpadding-block: calc(var(--default-grid-baseline) * 1.5) 0;\n\t\t\t// Left padding so tags don't overlap the border-radius curve,\n\t\t\t// right padding reserved for the actions overlay (chevron)\n\t\t\tpadding-inline: var(--default-grid-baseline) calc(var(--default-clickable-area) + var(--default-grid-baseline));\n\t\t\toverflow: visible;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t// Wider reservation when the clear button is shown next to the chevron\n\t\t&:has(.vs__clear) .vs__dropdown-toggle {\n\t\t\tpadding-inline-end: calc(2 * var(--default-clickable-area));\n\t\t}\n\n\t\t// When open, switch to visible border with subtle bottom divider\n\t\t&.vs--open .vs__dropdown-toggle {\n\t\t\tbox-shadow: none !important;\n\t\t\tborder-color: var(--color-main-text);\n\t\t\t// Subtle divider line between tags and dropdown (not fully transparent)\n\t\t\tborder-block-end-color: var(--color-border-maxcontrast);\n\t\t\tborder-end-start-radius: 0;\n\t\t\tborder-end-end-radius: 0;\n\t\t\toutline: 2px solid var(--color-main-background);\n\t\t}\n\n\t\t// Remove NcTextField border in multi mode, border is on dropdown-toggle\n\t\t.vs__search .input-field__input {\n\t\t\tbox-shadow: none !important;\n\t\t\tbackground: transparent;\n\t\t}\n\n\t\t// NcTextField shares flex row with tags, always inline, no absolute hiding.\n\t\t// No min-width: it may shrink fully so it never forces an empty wrap row\n\t\t// (matches vue-select's own search sizing)\n\t\t.vs__search {\n\t\t\twidth: 0;\n\t\t\tflex-grow: 1;\n\t\t\tmin-width: 0;\n\t\t}\n\n\t\t// No-wrap: clip overflow inside the toggle (needs to be here\n\t\t// for specificity to beat the overflow: visible above)\n\t\t&.select--no-wrap {\n\t\t\t.vs__dropdown-toggle {\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n\t\t\t.vs__actions {\n\t\t\t\t// Slight fade for non-wrap tags display\n\t\t\t\tbackground: linear-gradient(90deg, transparent, var(--color-main-background) 10%, var(--color-main-background) 100%);\n\t\t\t\tmargin-block: 0px;\n\t\t\t\tmargin-inline-end: 2px;\n\t\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t\theight: calc(100% - 6px);\n\t\t\t}\n\t\t}\n\n\t\t// No label margin needed, label is via #header\n\t\t.vs__search .input-field {\n\t\t\tmargin-block-start: 0;\n\t\t}\n\n\t\t// Match NcTextField height to tag row height for consistent toggle sizing\n\t\t.vs__search .input-field__main-wrapper {\n\t\t\theight: calc(var(--default-clickable-area) - 2 * var(--vs-border-width) - var(--default-grid-baseline));\n\t\t\tmargin: calc(var(--default-grid-baseline) / 2) 0;\n\t\t}\n\n\t\t// Label: centered inside toggle when empty (placeholder-like),\n\t\t// floats above border when has value or open (matches NcInputField)\n\t\t.select__label {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\tinset-inline-start: var(--border-width-input-focused, 2px);\n\t\t\t// Center vertically regardless of toggle height\n\t\t\ttop: 50%;\n\t\t\ttransform: translateY(-50%);\n\t\t\tfont-size: var(--default-font-size);\n\t\t\tmargin-inline: var(--border-radius-element);\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tpointer-events: none;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tmax-width: calc(100% - var(--clickable-area-large));\n\t\t\ttransition: top var(--animation-quick), transform var(--animation-quick), font-size var(--animation-quick), font-weight var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t\t}\n\n\t\t// Float label when has tags or dropdown is open\n\t\t&:has(.vs__selected) .select__label,\n\t\t&.vs--open .select__label {\n\t\t\t--input-label-font-size: var(--font-size-small, 13px);\n\t\t\tfont-size: var(--input-label-font-size);\n\t\t\tline-height: 1.5;\n\t\t\t// Match NcInputField: half the line-height above the border\n\t\t\ttop: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\t\ttransform: none;\n\t\t\tfont-weight: 500;\n\t\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\tmargin-inline: calc(var(--border-radius-element) - var(--default-grid-baseline));\n\t\t\ttransition: top var(--animation-quick), transform var(--animation-quick), font-size var(--animation-quick), font-weight var(--animation-quick), background-color var(--animation-quick);\n\t\t}\n\t}\n\n\t&.vs--single {\n\t\t// In single mode, overlay the selected value on top of the NcTextField input area\n\t\t// so it appears inside the border (which is on the NcTextField, not the toggle)\n\t\t.vs__selected-options {\n\t\t\tposition: relative;\n\t\t\tflex-wrap: nowrap;\n\t\t\t// Ensure height even when search input is hidden (vs--unsearchable)\n\t\t\tmin-height: var(--default-clickable-area);\n\t\t}\n\n\t\t.vs__selected {\n\t\t\tposition: absolute;\n\t\t\t// Skip the label clearance so the overlay covers only the input box,\n\t\t\t// keeping (multi-line) content like NcSelectUsers centered on the input\n\t\t\t// (6px = NcInputField .input-field margin-block-start)\n\t\t\tinset-block: 6px 0;\n\t\t\tinset-inline-start: 0;\n\t\t\tinset-inline-end: 0;\n\t\t\tmargin: 0;\n\t\t\tz-index: 2; // above vs__search (z-index: 1 from vue-select default)\n\t\t\tpointer-events: none;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tpadding-block: 0;\n\t\t\t// Match the input text position: main-wrapper padding (border width) + input padding\n\t\t\tpadding-inline: calc(var(--border-radius-element) + var(--border-width-input-focused, 2px)) var(--input-padding-end, calc(var(--default-clickable-area) + var(--default-grid-baseline)));\n\t\t\tbackground: unset !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t\theight: unset;\n\t\t\tmin-height: unset;\n\t\t\tfont-size: var(--default-font-size);\n\t\t\tcolor: var(--color-main-text);\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t// No label clearance to skip when the label is external\n\t\t&:has(.input-field--label-outside) .vs__selected {\n\t\t\tinset-block-start: 0;\n\t\t}\n\n\t\t// Extra padding when clear button visible (clear + chevron need more space)\n\t\t&:has(.vs__clear) .vs__selected {\n\t\t\tpadding-inline-end: calc(2 * var(--default-clickable-area));\n\t\t}\n\n\t\t&.vs--loading,\n\t\t&.vs--open {\n\t\t\t.vs__selected {\n\t\t\t\t// Fix color to be accessible while typing\n\t\t\t\topacity: 0.4;\n\t\t\t}\n\t\t}\n\n\t\t// Hide the selected value as soon as the user types a query\n\t\t// (restores vue-select's default, overridden by our display: flex above)\n\t\t&.vs--searching .vs__selected {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n\n// Dropdown menu is teleported to <body>, so it can't live under the\n// `.nc-select` root scope. The `.nc-select__dropdown` class (added in\n// calculatePosition) scopes it instead, so these styles and CSS variables\n// only affect our menus and never leak to other vue-select instances.\n.nc-select__dropdown.vs__dropdown-menu {\n\t--vs-border-color: var(--color-border-maxcontrast);\n\t--vs-border-style: solid;\n\t--vs-border-radius: var(--border-radius-element);\n\t--vs-dropdown-bg: var(--color-main-background);\n\t--vs-dropdown-color: var(--color-main-text);\n\t--vs-dropdown-option-padding: 8px 20px;\n\t--vs-dropdown-option--active-bg: var(--color-background-hover);\n\t--vs-dropdown-option--active-color: var(--color-main-text);\n\t--vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px var(--color-border-maxcontrast);\n\t--vs-dropdown-option--deselect-bg: var(--color-error);\n\t--vs-dropdown-option--deselect-color: #fff;\n\tborder-width: var(--border-width-input-focused) !important;\n\tborder-color: var(--color-main-text) !important;\n\toutline: none !important;\n\tbox-shadow:\n\t\t-2px 0 0 var(--color-main-background), // Right\n\t\t0 2px 0 var(--color-main-background), // Bottom\n\t\t2px 0 0 var(--color-main-background), // Left\n\t\t!important;\n\tpadding: 4px !important;\n\n\t&--floating {\n\t\t/* Fallback styles overidden by programmatically set inline styles */\n\t\twidth: max-content;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tinset-inline-start: 0;\n\n\t\t// Top placement: the menu is detached from the select (gap for the\n\t\t// floating label), so it keeps a full border on all sides\n\t\t&-placement-top {\n\t\t\tborder-radius: var(--vs-border-radius) !important;\n\t\t\tborder-top-style: var(--vs-border-style) !important;\n\t\t\tbox-shadow:\n\t\t\t\t0 -2px 0 var(--color-main-background), // Top\n\t\t\t\t-2px 0 0 var(--color-main-background), // Right\n\t\t\t\t0 2px 0 var(--color-main-background), // Bottom\n\t\t\t\t2px 0 0 var(--color-main-background), // Left\n\t\t\t\t!important\n\t\t}\n\t}\n\n\t.vs__dropdown-option {\n\t\tborder-radius: 6px !important;\n\t}\n\n\t.vs__no-options {\n\t\tcolor: var(--color-text-maxcontrast) !important;\n\t}\n}\n\n// Border for .vs__dropdown-toggle, inlined from inputLikeBorder mixin\n// because the mixin's @media #{&} produces doubled selectors when nested.\n.nc-select.v-select.select .vs__dropdown-toggle {\n\t--input-border-box-shadow-light: 0 -1px var(--vs-border-color),\n\t\t0 0 0 1px color-mix(in srgb, var(--vs-border-color), 65% transparent);\n\t--input-border-box-shadow-dark: 0 -1px var(--vs-border-color),\n\t\t0 0 0 1px color-mix(in srgb, var(--vs-border-color), 65% transparent);\n\t--input-border-box-shadow: var(--input-border-box-shadow-light);\n\tborder: none;\n\tborder-radius: var(--border-radius-element);\n\tbox-shadow: var(--input-border-box-shadow);\n}\n\n// Hover: use .vs--disabled on parent (toggle div never has [disabled] attribute)\n.nc-select.v-select.select:not(.vs--disabled) .vs__dropdown-toggle:hover {\n\tbox-shadow: 0 0 0 1px var(--vs-border-color);\n}\n\n@media (prefers-color-scheme: dark) {\n\t.nc-select.v-select.select .vs__dropdown-toggle {\n\t\t--input-border-box-shadow: var(--input-border-box-shadow-dark);\n\t}\n}\n\n[data-theme-dark] .nc-select.v-select.select .vs__dropdown-toggle {\n\t--input-border-box-shadow: var(--input-border-box-shadow-dark);\n}\n\n[data-theme-light] .nc-select.v-select.select .vs__dropdown-toggle {\n\t--input-border-box-shadow: var(--input-border-box-shadow-light);\n}\n\n.select--legacy.nc-select.v-select.select .vs__dropdown-toggle {\n\tbox-shadow: 0 0 0 1px var(--vs-border-color);\n\n\t&:hover:not([disabled]) {\n\t\tbox-shadow: 0 0 0 2px var(--vs-border-color);\n\t}\n}\n</style>\n"],"names":["NcTextField","Close","_openBlock","_createBlock","_mergeProps","_withCtx","_createVNode","_normalizeClass","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode"],"mappings":"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"}
+{"version":3,"file":"NcSelect.mjs","sources":["../../src/components/NcSelect/NcSelect.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nGeneral purpose multiselect component.\n\n### Basic examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<NcSelect v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Simple',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'With helper text',\n\t\t\thelperText: 'Choose the option that fits best',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'With error',\n\t\t\thelperText: 'This selection is required',\n\t\t\terror: true,\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Simple (top placement)',\n\t\t\tplacement: 'top',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple (with placeholder)',\n\t\t\tmultiple: true,\n\t\t\tplaceholder: 'Select multiple options',\n\t\t\toptions: [\n\t\t\t\t'foo',\n\t\t\t\t'bar',\n\t\t\t\t'baz',\n\t\t\t\t'qux',\n\t\t\t\t'quux',\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple (objects, pre-selected, stay open on select)',\n\t\t\tkeepOpen: true,\n\t\t\tmultiple: true,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'baz',\n\t\t\t\t\tlabel: 'Baz',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'qux',\n\t\t\t\t\tlabel: 'Qux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'quux',\n\t\t\t\t\tlabel: 'Quux',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'corge',\n\t\t\t\t\tlabel: 'Corge',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'grault',\n\t\t\t\t\tlabel: 'Grault',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'garply',\n\t\t\t\t\tlabel: 'Garply',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'waldo',\n\t\t\t\t\tlabel: 'Waldo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'fred',\n\t\t\t\t\tlabel: 'Fred',\n\t\t\t\t},\n\t\t\t],\n\t\t\tvalue: [\n\t\t\t\t{\n\t\t\t\t\tid: 'foo',\n\t\t\t\t\tlabel: 'Foo',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: 'bar',\n\t\t\t\t\tlabel: 'Bar',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n\n### Pre-selected and clearable\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<NcSelect v-model=\"singleValue\"\n\t\t\t\tinput-label=\"Clearable single\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tclearable />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<NcSelect v-model=\"singlePlaceholder\"\n\t\t\t\tinput-label=\"With placeholder\"\n\t\t\t\tplaceholder=\"Search for something...\"\n\t\t\t\t:options=\"options\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: ['foo', 'bar', 'baz', 'qux', 'quux'],\n\t\t\tsingleValue: 'bar',\n\t\t\tsinglePlaceholder: null,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n</style>\n```\n\n### Disabled state\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<NcSelect v-model=\"singleValue\"\n\t\t\t\tinput-label=\"Disabled single\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tdisabled />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<NcSelect v-model=\"multiValue\"\n\t\t\t\tinput-label=\"Disabled multi\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple\n\t\t\t\tdisabled />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: ['foo', 'bar', 'baz'],\n\t\t\tsingleValue: 'foo',\n\t\t\tmultiValue: ['foo', 'bar'],\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n</style>\n```\n\n### Label outside\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<label for=\"ext-single\">External label (single)</label>\n\t\t\t<NcSelect v-model=\"singleValue\"\n\t\t\t\tinput-id=\"ext-single\"\n\t\t\t\tlabel-outside\n\t\t\t\tplaceholder=\"Pick an option\"\n\t\t\t\t:options=\"options\" />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<label for=\"ext-multi\">External label (multi)</label>\n\t\t\t<NcSelect v-model=\"multiValue\"\n\t\t\t\tinput-id=\"ext-multi\"\n\t\t\t\tlabel-outside\n\t\t\t\t:options=\"options\"\n\t\t\t\tmultiple />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: ['foo', 'bar', 'baz', 'qux', 'quux'],\n\t\t\tsingleValue: null,\n\t\t\tmultiValue: [],\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n}\n</style>\n```\n\n### Native form validation example\n\n```vue\n<template>\n\t<div class=\"container\">\n\t\t<form class=\"container__form\" @submit.prevent>\n\t\t\t<NcSelect class=\"container__select\"\n\t\t\t\tinput-label=\"Require a selection\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tv-model=\"singleValue\"\n\t\t\t\trequired />\n\t\t\t<NcButton type=\"submit\">Submit</NcButton>\n\t\t</form>\n\n\t\t<form class=\"container__form\" @submit.prevent>\n\t\t\t<NcSelect class=\"container__select\"\n\t\t\t\tinput-label=\"Require at least one selection\"\n\t\t\t\t:options=\"options\"\n\t\t\t\tv-model=\"multiValue\"\n\t\t\t\tmultiple\n\t\t\t\trequired />\n\t\t\t<NcButton type=\"submit\">Submit</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: ['foo', 'bar', 'baz', 'qux', 'quux'],\n\t\t\tsingleValue: null,\n\t\t\tmultiValue: [],\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.container {\n\tdisplay: flex;\n\tgap: 0 12px;\n}\n\n.container__form {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-end;\n\twidth: 100%;\n\tgap: 8px 0;\n}\n\n.container__select {\n\twidth: 100%;\n}\n</style>\n```\n\n### No wrap example\n\nThe `noWrap` prop is set to `true` and the `max-width` of the multiselect\nparent container is limited to `350px`\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div class=\"container\">\n\t\t\t<NcSelect :no-wrap=\"false\"\n\t\t\t\tv-bind=\"data1.props\"\n\t\t\t\tv-model=\"data1.props.value\" />\n\t\t</div>\n\t\t<div class=\"container\">\n\t\t\t<NcSelect :no-wrap=\"true\"\n\t\t\t\tv-bind=\"data2.props\"\n\t\t\t\tv-model=\"data2.props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nconst data1 = {\n\tprops: {\n\t\tinputLabel: 'Wrapped (Default)',\n\t\tmultiple: true,\n\t\tkeepOpen: true,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nconst data2 = {\n\tprops: {\n\t\tinputLabel: 'Not wrapped',\n\t\tkeepOpen: true,\n\t\tmultiple: true,\n\t\toptions: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t\tvalue: [\n\t\t\t'foo',\n\t\t\t'bar',\n\t\t\t'baz',\n\t\t\t'qux',\n\t\t\t'quux',\n\t\t\t'corge',\n\t\t\t'grault',\n\t\t\t'garply',\n\t\t\t'waldo',\n\t\t\t'fred',\n\t\t],\n\t},\n}\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tdata1,\n\t\t\tdata2,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 1fr);\n\tgap: 10px;\n}\n\n.container {\n\tmax-width: 350px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<VueSelect\n\t\tclass=\"select nc-select\"\n\t\t:class=\"{\n\t\t\t'select--legacy': isLegacy,\n\t\t\t'select--no-wrap': noWrap,\n\t\t}\"\n\t\tv-bind=\"propsToForward\"\n\t\t@search=\"search = $event\"\n\t\t@update:modelValue=\"$emit('update:modelValue', $event)\">\n\t\t<template v-if=\"multiple && !labelOutside && inputLabel\" #header>\n\t\t\t<label\n\t\t\t\t:for=\"inputId\"\n\t\t\t\tclass=\"select__label\">\n\t\t\t\t{{ inputLabel }}\n\t\t\t</label>\n\t\t</template>\n\t\t<template #search=\"{ attributes, events }\">\n\t\t\t<!--\n\t\t\t\tvue-select's `attributes`/`events` are its search-slot contract, not\n\t\t\t\tHTML pass-through, so we forward only the combobox a11y attributes and\n\t\t\t\tevents one by one. This skips `attributes.ref` (a vue-select template\n\t\t\t\tref) and lets our own `modelValue`, `placeholder`, `label` and\n\t\t\t\t`disabled` win over their vue-select equivalents.\n\t\t\t\tNo placeholder when: multi mode (select__label is the placeholder) or a\n\t\t\t\tvalue is selected (the vs__selected overlay shows it instead).\n\t\t\t-->\n\t\t\t<NcTextField\n\t\t\t\t:id=\"attributes.id\"\n\t\t\t\tclass=\"vs__search\"\n\t\t\t\t:class=\"[inputClass]\"\n\t\t\t\t:type=\"attributes.type\"\n\t\t\t\t:modelValue=\"attributes.value\"\n\t\t\t\t:placeholder=\"multiple || modelValue ? '' : (placeholder || '')\"\n\t\t\t\t:label=\"!labelOutside && !multiple && inputLabel ? inputLabel : ''\"\n\t\t\t\t:labelOutside=\"labelOutside || multiple\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:required=\"inputRequired\"\n\t\t\t\t:role=\"attributes.role\"\n\t\t\t\t:tabindex=\"attributes.tabindex\"\n\t\t\t\t:readonly=\"attributes.readonly\"\n\t\t\t\t:autocomplete=\"attributes.autocomplete\"\n\t\t\t\t:aria-label=\"attributes['aria-label']\"\n\t\t\t\t:aria-describedby=\"[attributes['aria-describedby'], helperText ? `${inputId}-helper-text` : null].filter(Boolean).join(' ') || undefined\"\n\t\t\t\t:aria-autocomplete=\"attributes['aria-autocomplete']\"\n\t\t\t\t:aria-controls=\"attributes['aria-controls']\"\n\t\t\t\t:aria-owns=\"attributes['aria-owns']\"\n\t\t\t\t:aria-expanded=\"attributes['aria-expanded']\"\n\t\t\t\t:aria-activedescendant=\"attributes['aria-activedescendant']\"\n\t\t\t\t@keydown=\"events.keydown\"\n\t\t\t\t@keypress=\"events.keypress\"\n\t\t\t\t@focus=\"events.focus\"\n\t\t\t\t@blur=\"events.blur\"\n\t\t\t\t@compositionstart=\"events.compositionstart\"\n\t\t\t\t@compositionend=\"events.compositionend\"\n\t\t\t\t@update:modelValue=\"events.input({ target: { value: $event } })\" />\n\t\t</template>\n\t\t<template #open-indicator=\"{ attributes }\">\n\t\t\t<ChevronDown\n\t\t\t\tv-bind=\"attributes\"\n\t\t\t\tfillColor=\"var(--vs-controls-color)\"\n\t\t\t\t:style=\"{\n\t\t\t\t\tcursor: !disabled ? 'pointer' : null,\n\t\t\t\t}\"\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t\t<template #option=\"option\">\n\t\t\t<!-- @slot Customize how a option is rendered. -->\n\t\t\t<slot name=\"option\" v-bind=\"option\">\n\t\t\t\t<NcEllipsisedOption\n\t\t\t\t\t:name=\"String(option[localLabel])\"\n\t\t\t\t\t:search=\"search\" />\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<!-- @slot Customize how a selected option is rendered -->\n\t\t\t<slot name=\"selected-option\" v-bind=\"selectedOption\">\n\t\t\t\t<NcEllipsisedOption\n\t\t\t\t\t:name=\"String(selectedOption[localLabel])\"\n\t\t\t\t\t:search=\"search\" />\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #spinner=\"spinner\">\n\t\t\t<NcLoadingIcon v-if=\"spinner.loading\" />\n\t\t</template>\n\t\t<template #no-options>\n\t\t\t{{ t('No results') }}\n\t\t</template>\n\t\t<!-- Helper text beneath the control, plus any consumer-provided footer slot -->\n\t\t<template v-if=\"helperText || $slots.footer\" #footer=\"data\">\n\t\t\t<p\n\t\t\t\tv-if=\"helperText\"\n\t\t\t\t:id=\"`${inputId}-helper-text`\"\n\t\t\t\tclass=\"select__helper-text\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'select__helper-text--error': error,\n\t\t\t\t\t'select__helper-text--success': success,\n\t\t\t\t}\">\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"success\"\n\t\t\t\t\tclass=\"select__helper-text-icon\"\n\t\t\t\t\t:path=\"mdiCheck\"\n\t\t\t\t\tinline />\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-else-if=\"error\"\n\t\t\t\t\tclass=\"select__helper-text-icon\"\n\t\t\t\t\t:path=\"mdiAlertCircleOutline\"\n\t\t\t\t\tinline />\n\t\t\t\t{{ helperText }}\n\t\t\t</p>\n\t\t\t<slot name=\"footer\" v-bind=\"data\" />\n\t\t</template>\n\t\t<template v-for=\"name in forwardedSlots()\" :key=\"name\" #[name]=\"data\">\n\t\t\t<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->\n\t\t\t<slot :name=\"name\" v-bind=\"data\" />\n\t\t</template>\n\t</VueSelect>\n</template>\n\n<script>\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip,\n\tlimitShift,\n\toffset,\n\tshift,\n} from '@floating-ui/dom'\nimport { mdiAlertCircleOutline, mdiCheck } from '@mdi/js'\nimport { VueSelect } from '@nextcloud/vue-select'\nimport { h, warn } from 'vue'\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport NcEllipsisedOption from '../NcEllipsisedOption/NcEllipsisedOption.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport NcTextField from '../NcTextField/NcTextField.vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\n\nexport default {\n\tname: 'NcSelect',\n\n\tcomponents: {\n\t\tChevronDown,\n\t\tNcEllipsisedOption,\n\t\tNcIconSvgWrapper,\n\t\tNcLoadingIcon,\n\t\tNcTextField,\n\t\tVueSelect,\n\t},\n\n\tprops: {\n\t\t// Add VueSelect props to $props\n\t\t...VueSelect.props,\n\t\t...VueSelect.mixins.reduce((allProps, mixin) => ({ ...allProps, ...mixin.props }), {}),\n\n\t\t/**\n\t\t * `aria-label` for the clear input button\n\t\t */\n\t\tariaLabelClearSelected: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Clear selected'),\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` for the search input\n\t\t *\n\t\t * A descriptive `inputLabel` is preferred as this is not visible.\n\t\t */\n\t\tariaLabelCombobox: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * `aria-label` for the listbox element\n\t\t */\n\t\tariaLabelListbox: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Options'),\n\t\t},\n\n\t\t/**\n\t\t * Allows to customize the `aria-label` for the deselect-option button\n\t\t * The default is \"Deselect \" + optionLabel\n\t\t *\n\t\t * @type {(optionLabel: string) => string}\n\t\t */\n\t\tariaLabelDeselectOption: {\n\t\t\ttype: Function,\n\t\t\tdefault: (optionLabel) => t('Deselect {option}', { option: optionLabel }),\n\t\t},\n\n\t\t/**\n\t\t * Append the dropdown element to the end of the body\n\t\t * and size/position it dynamically.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#appendtobody\n\t\t */\n\t\tappendToBody: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * When `appendToBody` is true, this function is responsible for\n\t\t * positioning the drop down list.\n\t\t *\n\t\t * If a function is returned from `calculatePosition`, it will\n\t\t * be called when the drop down list is removed from the DOM.\n\t\t * This allows for any garbage collection you may need to do.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#calculateposition\n\t\t */\n\t\tcalculatePosition: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Keep the dropdown open after selecting an option.\n\t\t *\n\t\t * @default false\n\t\t * @since 8.25.0\n\t\t */\n\t\tkeepOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Replace default vue-select components\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#components\n\t\t */\n\t\tcomponents: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({\n\t\t\t\tDeselect: {\n\t\t\t\t\trender: () => h(Close, {\n\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\tfillColor: 'var(--vs-controls-color)',\n\t\t\t\t\t\tstyle: [\n\t\t\t\t\t\t\t{ cursor: 'pointer' },\n\t\t\t\t\t\t],\n\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t}),\n\t\t},\n\n\t\t/**\n\t\t * Sets the maximum number of options to display in the dropdown list\n\t\t */\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Disable the component\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#disabled\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Determines whether the dropdown should be open.\n\t\t * Receives the component instance as the only argument.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#dropdownshouldopen\n\t\t */\n\t\tdropdownShouldOpen: {\n\t\t\ttype: Function,\n\t\t\tdefault: ({ noDrop, open }) => {\n\t\t\t\treturn noDrop ? false : open\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Callback to determine if the provided option should\n\t\t * match the current search text. Used to determine\n\t\t * if the option should be displayed.\n\t\t *\n\t\t * Defaults to the internal vue-select function documented at the link\n\t\t * below\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#filterby\n\t\t */\n\t\tfilterBy: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Class for the `input`\n\t\t *\n\t\t * Necessary for use in NcActionInput\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Input element id\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t},\n\n\t\t/**\n\t\t * Visible label for the input element\n\t\t */\n\t\tinputLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Additional helper text shown beneath the select.\n\t\t */\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Toggle the error state, styling the helper text as an error.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggle the success state, styling the helper text as a success.\n\t\t */\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Pass true if you are using an external label\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Display a visible border around dropdown options\n\t\t * which have keyboard focus\n\t\t */\n\t\tkeyboardFocusBorder: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Key of the displayed label for object options\n\t\t *\n\t\t * Defaults to the internal vue-select string documented at the link\n\t\t * below\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#label\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Show the loading icon\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#loading\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Allow selection of multiple options\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#multiple\n\t\t */\n\t\tmultiple: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Disable automatic wrapping when selected options overflow the width\n\t\t */\n\t\tnoWrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Array of options\n\t\t *\n\t\t * @type {Array<string | number | Record<string | number, any>>}\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#options\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * Placeholder text\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#placeholder\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Customized component's response to keydown events while the search input has focus\n\t\t *\n\t\t * @see https://vue-select.org/guide/keydown.html#mapkeydown\n\t\t */\n\t\tmapKeydown: {\n\t\t\ttype: Function,\n\t\t\t/**\n\t\t\t * Patched Vue-Select keydown events handlers map to stop Escape propagation in open select\n\t\t\t *\n\t\t\t * @param {Record<number, (event: KeyboardEvent) => void>} map - Mapped keyCode to handlers { <keyCode>:<callback> }\n\t\t\t * @param {import('vue').ComponentPublicInstance} vm - VueSelect instance\n\t\t\t * @return {Record<number, (event: KeyboardEvent) => void>} patched keydown event handlers\n\t\t\t */\n\t\t\tdefault(map, vm) {\n\t\t\t\treturn {\n\t\t\t\t\t...map,\n\t\t\t\t\t/**\n\t\t\t\t\t * Patched Escape handler to stop propagation from open select\n\t\t\t\t\t *\n\t\t\t\t\t * @param {KeyboardEvent} event - default keydown event handler\n\t\t\t\t\t */\n\t\t\t\t\t27: (event) => {\n\t\t\t\t\t\tif (vm.open) {\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Default VueSelect's handler\n\t\t\t\t\t\tmap[27](event)\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * A unique identifier used to generate IDs and DOM attributes. Must be unique for every instance of the component.\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#uid\n\t\t */\n\t\tuid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t},\n\n\t\t/**\n\t\t * When `appendToBody` is true, this sets the placement of the dropdown\n\t\t *\n\t\t * @type {'bottom' | 'top'}\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * If false, the focused dropdown option will not be reset when filtered\n\t\t * options change\n\t\t */\n\t\tresetFocusOnOptionsChange: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Currently selected value\n\t\t *\n\t\t * The `v-model` directive may be used for two-way data binding\n\t\t *\n\t\t * @type {string | number | Record<string | number, any> | Array<any>}\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html#value\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number, Object, Array],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable if a value is required for native form validation\n\t\t */\n\t\trequired: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Any available prop\n\t\t *\n\t\t * @see https://vue-select.org/api/props.html\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * All events from https://vue-select.org/api/events.html\n\t\t */\n\t\t// Not an actual event but needed to show in vue-styleguidist docs\n\t\t' ',\n\t\t'update:modelValue',\n\t],\n\n\tsetup() {\n\t\tconst clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))\n\t\tconst gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))\n\t\tconst avatarSize = clickableArea - 2 * gridBaseLine\n\n\t\treturn {\n\t\t\tavatarSize,\n\t\t\tisLegacy,\n\t\t\tmdiAlertCircleOutline,\n\t\t\tmdiCheck,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearch: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tinputRequired() {\n\t\t\tif (!this.required) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\t// The <input> itself does not have any value so we set the `required` attribute conditionally\n\t\t\treturn this.modelValue === null || (Array.isArray(this.modelValue) && this.modelValue.length === 0)\n\t\t},\n\n\t\tlocalCalculatePosition() {\n\t\t\tif (this.calculatePosition !== null) {\n\t\t\t\treturn this.calculatePosition\n\t\t\t}\n\n\t\t\treturn (dropdownMenu, component, { width }) => {\n\t\t\t\tdropdownMenu.style.width = width\n\n\t\t\t\tconst addClass = {\n\t\t\t\t\tname: 'addClass',\n\t\t\t\t\tfn(/* middlewareArgs */) {\n\t\t\t\t\t\t// `nc-select__dropdown` scopes our menu styles: the menu is\n\t\t\t\t\t\t// teleported to <body>, so it cannot be reached by the\n\t\t\t\t\t\t// `.nc-select` root scope and would otherwise style every\n\t\t\t\t\t\t// vue-select dropdown on the page (cross-version conflicts).\n\t\t\t\t\t\tdropdownMenu.classList.add('vs__dropdown-menu--floating', 'nc-select__dropdown')\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst togglePlacementClass = {\n\t\t\t\t\tname: 'togglePlacementClass',\n\t\t\t\t\tfn({ placement }) {\n\t\t\t\t\t\tcomponent.$el.classList.toggle(\n\t\t\t\t\t\t\t'select--drop-up',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\tdropdownMenu.classList.toggle(\n\t\t\t\t\t\t\t'vs__dropdown-menu--floating-placement-top',\n\t\t\t\t\t\t\tplacement === 'top',\n\t\t\t\t\t\t)\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t},\n\t\t\t\t}\n\n\t\t\t\tconst updatePosition = () => {\n\t\t\t\t\tcomputePosition(component.$refs.toggle, dropdownMenu, {\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\t\t// Flip first so the placement-dependent middleware below see the final placement\n\t\t\t\t\t\t\tflip(),\n\t\t\t\t\t\t\taddClass,\n\t\t\t\t\t\t\ttogglePlacementClass,\n\t\t\t\t\t\t\t// On top placement, leave a gap for the floating label overhang\n\t\t\t\t\t\t\t// (about half the floated label line-height) instead of connecting seamlessly\n\t\t\t\t\t\t\toffset(({ placement }) => (placement.startsWith('top') ? 10 : -1)),\n\t\t\t\t\t\t\tshift({ limiter: limitShift() }),\n\t\t\t\t\t\t],\n\t\t\t\t\t}).then(({ x, y }) => {\n\t\t\t\t\t\tObject.assign(dropdownMenu.style, {\n\t\t\t\t\t\t\tleft: `${x}px`,\n\t\t\t\t\t\t\ttop: `${y}px`,\n\t\t\t\t\t\t\twidth: `${component.$refs.toggle.getBoundingClientRect().width}px`,\n\t\t\t\t\t\t})\n\t\t\t\t\t})\n\t\t\t\t}\n\n\t\t\t\tconst cleanup = autoUpdate(\n\t\t\t\t\tcomponent.$refs.toggle,\n\t\t\t\t\tdropdownMenu,\n\t\t\t\t\tupdatePosition,\n\t\t\t\t)\n\n\t\t\t\treturn cleanup\n\t\t\t}\n\t\t},\n\n\t\tlocalFilterBy() {\n\t\t\treturn this.filterBy ?? VueSelect.props.filterBy.default\n\t\t},\n\n\t\tlocalLabel() {\n\t\t\treturn this.label ?? VueSelect.props.label.default\n\t\t},\n\n\t\tpropsToForward() {\n\t\t\tconst vueSelectKeys = [\n\t\t\t\t...Object.keys(VueSelect.props),\n\t\t\t\t...VueSelect.mixins.flatMap((mixin) => Object.keys(mixin.props ?? {})),\n\t\t\t]\n\t\t\tconst initialPropsToForward = Object.fromEntries(Object.entries(this.$props)\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t\t\t.filter(([key, _value]) => vueSelectKeys.includes(key)))\n\t\t\tconst propsToForward = {\n\t\t\t\t...initialPropsToForward,\n\t\t\t\t// Custom overrides of vue-select props\n\t\t\t\tcalculatePosition: this.localCalculatePosition,\n\t\t\t\tcloseOnSelect: !this.keepOpen,\n\t\t\t\tfilterBy: this.localFilterBy,\n\t\t\t\tlabel: this.localLabel,\n\t\t\t}\n\t\t\treturn propsToForward\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (!this.labelOutside && !this.inputLabel && !this.ariaLabelCombobox) {\n\t\t\twarn('[NcSelect] An `inputLabel` or `ariaLabelCombobox` should be set. If an external label is used, `labelOutside` should be set to `true`.')\n\t\t}\n\t\tif (this.inputLabel && this.ariaLabelCombobox) {\n\t\t\twarn('[NcSelect] Only one of `inputLabel` or `ariaLabelCombobox` should to be set.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Consumer-provided slots forwarded to vue-select, excluding `footer`\n\t\t * which we render ourselves to host the helper text.\n\t\t *\n\t\t * `$slots` is not reactive, so this is a method (re-evaluated on every\n\t\t * render) rather than a computed, to keep the forwarded slot list fresh.\n\t\t *\n\t\t * @return {string[]}\n\t\t */\n\t\tforwardedSlots() {\n\t\t\treturn Object.keys(this.$slots).filter((name) => name !== 'footer')\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@use '../../assets/input-border.scss' as border;\n\n// Helper text beneath the control, matching NcInputField's helper text.\n.nc-select.v-select.select .select__helper-text {\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: 0;\n\tpadding-block: 4px;\n\tpadding-inline: var(--border-radius-element);\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: var(--default-font-size);\n\toverflow-wrap: anywhere;\n\n\t&--error {\n\t\tcolor: var(--color-text-error);\n\t}\n\n\t&--success {\n\t\tcolor: var(--color-text-success);\n\t}\n\n\t.select__helper-text-icon {\n\t\tmargin-inline-end: 8px;\n\t}\n}\n\n.nc-select.v-select.select {\n\t/* Custom vue-select CSS variables scoped to NcSelect */\n\t/* Search Input */\n\t--vs-search-input-color: var(--color-main-text);\n\t--vs-search-input-bg: var(--color-main-background);\n\t--vs-search-input-placeholder-color: var(--color-text-maxcontrast);\n\n\t/* Font */\n\t--vs-font-size: var(--default-font-size);\n\t--vs-line-height: var(--default-line-height);\n\n\t/* Disabled State */\n\t--vs-state-disabled-bg: var(--color-background-hover);\n\t--vs-state-disabled-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-controls-color: var(--color-text-maxcontrast);\n\t--vs-state-disabled-cursor: not-allowed;\n\t--vs-disabled-bg: var(--color-background-hover);\n\t--vs-disabled-color: var(--color-text-maxcontrast);\n\t--vs-disabled-cursor: not-allowed;\n\n\t/* Borders */\n\t--vs-border-color: var(--color-border-maxcontrast);\n\t--vs-border-width: var(--border-width-input, 2px) !important;\n\t--vs-border-style: solid;\n\t--vs-border-radius: var(--border-radius-element);\n\n\t/* Component Controls: Clear, Open Indicator */\n\t--vs-controls-color: var(--color-main-text);\n\n\t/* Selected */\n\t--vs-selected-bg: var(--color-background-hover);\n\t--vs-selected-color: var(--color-main-text);\n\t--vs-selected-border-color: var(--vs-border-color);\n\t--vs-selected-border-style: var(--vs-border-style);\n\t--vs-selected-border-width: var(--vs-border-width);\n\n\t/* Dropdown */\n\t--vs-dropdown-bg: var(--color-main-background);\n\t--vs-dropdown-color: var(--color-main-text);\n\t--vs-dropdown-z-index: 9999;\n\t--vs-dropdown-box-shadow: 0px 2px 2px 0px var(--color-box-shadow);\n\n\t/* Options */\n\t--vs-dropdown-option-padding: 8px 20px;\n\n\t/* Active State */\n\t--vs-dropdown-option--active-bg: var(--color-background-hover);\n\t--vs-dropdown-option--active-color: var(--color-main-text);\n\n\t/* Keyboard Focus State */\n\t--vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px var(--vs-border-color);\n\n\t/* Deselect State */\n\t--vs-dropdown-option--deselect-bg: var(--color-error);\n\t--vs-dropdown-option--deselect-color: #fff;\n\n\t/* Transitions */\n\t--vs-transition-duration: 0ms;\n\n\t/* Actions */\n\t--vs-actions-padding: 0 8px 0 8px;\n\t/* Override default vue-select styles */\n\tmin-height: calc(var(--default-clickable-area) - 2 * var(--border-width-input, 2px));\n\tmin-width: 260px;\n\t// 6px block-start reserves space for the floated label, matching\n\t// NcInputField (.input-field margin-block-start) so fields line up in a row.\n\tmargin: 6px 0 var(--default-grid-baseline);\n\n\t&.vs--open {\n\t\t--vs-border-width: var(--border-width-input-focused, 2px);\n\t}\n\n\t.vs__selected {\n\t\t// min-height (not height) so multi-line entries like NcSelectUsers chips can grow\n\t\tmin-height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width) - var(--default-grid-baseline));\n\t\tmin-width: 0;\n\t\tmax-width: 100%;\n\t\tmargin: calc(var(--default-grid-baseline) / 2);\n\t\tpadding-block: 0;\n\t\tpadding-inline: 12px 8px;\n\t\tborder-radius: 16px !important;\n\t\tbackground: var(--color-primary-element-light);\n\t\tborder: none;\n\t}\n\n\t.vs__search {\n\t\t// NcTextField filling the search area; padding-end reserved for the actions overlay\n\t\twidth: 100%;\n\t\t--input-padding-end: calc(var(--default-clickable-area) + var(--default-grid-baseline));\n\n\t\t// Neutralize vue-select defaults on the wrapper div (no longer the native input).\n\t\t// The height reset also beats legacy global styles (e.g. bundled by the server)\n\t\t// that force a fixed height on `.vs__search` from the old native-input design.\n\t\tborder: none !important;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: auto !important;\n\t}\n\n\t// Force floating label when a value is selected (search input is empty but a value exists)\n\t.vs__selected-options:has(.vs__selected) .vs__search {\n\t\t.input-field__input + .input-field__label {\n\t\t\t--input-label-font-size: var(--font-size-small, 13px);\n\t\t\tline-height: 1.5;\n\t\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\t\tfont-weight: 500;\n\t\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\n\t\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t\t}\n\t}\n\n\t// Single mode: border is on NcTextField, dropdown-toggle is invisible\n\t&:not(.vs--multiple) .vs__dropdown-toggle {\n\t\tpadding: 0;\n\t\toverflow: visible;\n\t\tborder: none !important;\n\t\tbox-shadow: none !important;\n\t\tbackground: transparent;\n\t}\n\n\t// Anchor the absolutely-positioned actions to the control itself, so content\n\t// rendered below it inside .v-select (e.g. the helper text) does not shift\n\t// the caret's vertical centering.\n\t.vs__dropdown-toggle {\n\t\tposition: relative;\n\t}\n\n\t.vs__actions {\n\t\tposition: absolute;\n\t\tz-index: 999;\n\t\tinset-inline-end: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\theight: 100%;\n\t\tmargin-block-start: 1px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.vs__clear {\n\t\tmargin-inline-end: 2px;\n\t}\n\n\t&.vs--open {\n\t\t// Remove bottom border-radius when dropdown is open\n\t\t.vs__search .input-field__input {\n\t\t\tborder-end-start-radius: 0 !important;\n\t\t\tborder-end-end-radius: 0 !important;\n\t\t}\n\t}\n\n\t&.vs--disabled {\n\t\t// Override vue-select's disabled background on all internal elements\n\t\t// to prevent stacking with NcInputField's own background\n\t\t.vs__clear,\n\t\t.vs__dropdown-toggle,\n\t\t.vs__open-indicator,\n\t\t.vs__open-indicator-button,\n\t\t.vs__search,\n\t\t.vs__selected {\n\t\t\tbackground-color: transparent;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t// Lighter border in disabled state to match single mode (NcInputField uses --color-border-dark)\n\t\t.vs__dropdown-toggle {\n\t\t\t--input-border-box-shadow-light: 0 -1px var(--color-border-dark),\n\t\t\t\t0 0 0 1px color-mix(in srgb, var(--color-border-dark), 65% transparent);\n\t\t\t--input-border-box-shadow-dark: 0 1px var(--color-border-dark),\n\t\t\t\t0 0 0 1px color-mix(in srgb, var(--color-border-dark), 65% transparent);\n\t\t}\n\n\t\t.vs__clear,\n\t\t.vs__deselect {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&--no-wrap {\n\t\t.vs__dropdown-toggle {\n\t\t\toverflow: hidden;\n\t\t}\n\t\t.vs__selected-options {\n\t\t\tflex-wrap: nowrap;\n\t\t\toverflow: auto !important;\n\t\t\tmin-width: unset;\n\t\t\t.vs__selected {\n\t\t\t\tmin-width: unset;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Drop-up: the menu is detached above the select (calculatePosition leaves a\n\t// gap for the floating label, which stays in its usual top position),\n\t// so keep the regular fully-rounded borders instead of flattening the seam\n\t&--drop-up {\n\t\t&.vs--open {\n\t\t\t.vs__search .input-field__input {\n\t\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\t}\n\n\t\t\t// !important to beat the later-defined down-state open rule\n\t\t\t// (.vs--multiple.vs--open .vs__dropdown-toggle) of equal specificity\n\t\t\t&.vs--multiple .vs__dropdown-toggle {\n\t\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\t\t// Bottom is a regular outer edge here, not a divider seam\n\t\t\t\tborder-block-end-color: var(--color-main-text) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.vs__selected-options {\n\t\t// If search is hidden, ensure that the height of the search is the same\n\t\tmin-height: unset;\n\n\t\t// Hide search from dom if unused to prevent unneeded flex wrap\n\t\t.vs__selected ~ .vs__search:has(.input-field__input[readonly]) {\n\t\t\tposition: absolute;\n\t\t}\n\t\tpadding: 0;\n\t\tborder: none;\n\t\toverflow: visible;\n\t}\n\n\t// Multi-select: border on dropdown-toggle (contains tags + input)\n\t// NcTextField is transparent; floating label via #header slot\n\t&.vs--multiple {\n\t\t// The multiple variant otherwise renders ~2px wider than the single one\n\t\t// and overflows its container; inset it by 1px on each side to align.\n\t\tmargin-inline: 1px;\n\n\t\t.vs__dropdown-toggle {\n\t\t\t// Use transparent border in closed state to reserve the same space\n\t\t\t// as the open state's real border, prevents layout jump on click\n\t\t\tborder: var(--border-width-input-focused, 2px) solid transparent;\n\t\t\tbox-shadow: var(--input-border-box-shadow);\n\t\t\t// Top padding for floating label clearance, no bottom padding\n\t\t\tpadding-block: calc(var(--default-grid-baseline) * 1.5) 0;\n\t\t\t// Left padding so tags don't overlap the border-radius curve,\n\t\t\t// right padding reserved for the actions overlay (chevron)\n\t\t\tpadding-inline: var(--default-grid-baseline) calc(var(--default-clickable-area) + var(--default-grid-baseline));\n\t\t\toverflow: visible;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t// Wider reservation when the clear button is shown next to the chevron\n\t\t&:has(.vs__clear) .vs__dropdown-toggle {\n\t\t\tpadding-inline-end: calc(2 * var(--default-clickable-area));\n\t\t}\n\n\t\t// When open, switch to visible border with subtle bottom divider\n\t\t&.vs--open .vs__dropdown-toggle {\n\t\t\tbox-shadow: none !important;\n\t\t\tborder-color: var(--color-main-text);\n\t\t\t// Subtle divider line between tags and dropdown (not fully transparent)\n\t\t\tborder-block-end-color: var(--color-border-maxcontrast);\n\t\t\tborder-end-start-radius: 0;\n\t\t\tborder-end-end-radius: 0;\n\t\t\toutline: 2px solid var(--color-main-background);\n\t\t}\n\n\t\t// Remove NcTextField border in multi mode, border is on dropdown-toggle\n\t\t.vs__search .input-field__input {\n\t\t\tbox-shadow: none !important;\n\t\t\tbackground: transparent;\n\t\t}\n\n\t\t// NcTextField shares flex row with tags, always inline, no absolute hiding.\n\t\t// No min-width: it may shrink fully so it never forces an empty wrap row\n\t\t// (matches vue-select's own search sizing)\n\t\t.vs__search {\n\t\t\twidth: 0;\n\t\t\tflex-grow: 1;\n\t\t\tmin-width: 0;\n\t\t}\n\n\t\t// No-wrap: clip overflow inside the toggle (needs to be here\n\t\t// for specificity to beat the overflow: visible above)\n\t\t&.select--no-wrap {\n\t\t\t.vs__dropdown-toggle {\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\n\t\t\t.vs__actions {\n\t\t\t\t// Slight fade for non-wrap tags display\n\t\t\t\tbackground: linear-gradient(90deg, transparent, var(--color-main-background) 10%, var(--color-main-background) 100%);\n\t\t\t\tmargin-block: 0px;\n\t\t\t\tmargin-inline-end: 2px;\n\t\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t\theight: calc(100% - 6px);\n\t\t\t}\n\t\t}\n\n\t\t// No label margin needed, label is via #header\n\t\t.vs__search .input-field {\n\t\t\tmargin-block-start: 0;\n\t\t}\n\n\t\t// Match NcTextField height to tag row height for consistent toggle sizing\n\t\t.vs__search .input-field__main-wrapper {\n\t\t\theight: calc(var(--default-clickable-area) - 2 * var(--vs-border-width) - var(--default-grid-baseline));\n\t\t\tmargin: calc(var(--default-grid-baseline) / 2) 0;\n\t\t}\n\n\t\t// Label: centered inside toggle when empty (placeholder-like),\n\t\t// floats above border when has value or open (matches NcInputField)\n\t\t.select__label {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\tinset-inline-start: var(--border-width-input-focused, 2px);\n\t\t\t// Center vertically regardless of toggle height\n\t\t\ttop: 50%;\n\t\t\ttransform: translateY(-50%);\n\t\t\tfont-size: var(--default-font-size);\n\t\t\tmargin-inline: var(--border-radius-element);\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tpointer-events: none;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tmax-width: calc(100% - var(--clickable-area-large));\n\t\t\ttransition: top var(--animation-quick), transform var(--animation-quick), font-size var(--animation-quick), font-weight var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t\t}\n\n\t\t// Float label when has tags or dropdown is open\n\t\t&:has(.vs__selected) .select__label,\n\t\t&.vs--open .select__label {\n\t\t\t--input-label-font-size: var(--font-size-small, 13px);\n\t\t\tfont-size: var(--input-label-font-size);\n\t\t\tline-height: 1.5;\n\t\t\t// Match NcInputField: half the line-height above the border\n\t\t\ttop: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\t\ttransform: none;\n\t\t\tfont-weight: 500;\n\t\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\tmargin-inline: calc(var(--border-radius-element) - var(--default-grid-baseline));\n\t\t\ttransition: top var(--animation-quick), transform var(--animation-quick), font-size var(--animation-quick), font-weight var(--animation-quick), background-color var(--animation-quick);\n\t\t}\n\t}\n\n\t&.vs--single {\n\t\t// In single mode, overlay the selected value on top of the NcTextField input area\n\t\t// so it appears inside the border (which is on the NcTextField, not the toggle)\n\t\t.vs__selected-options {\n\t\t\tposition: relative;\n\t\t\tflex-wrap: nowrap;\n\t\t\t// Ensure height even when search input is hidden (vs--unsearchable)\n\t\t\tmin-height: var(--default-clickable-area);\n\t\t}\n\n\t\t.vs__selected {\n\t\t\tposition: absolute;\n\t\t\t// Skip the label clearance so the overlay covers only the input box,\n\t\t\t// keeping (multi-line) content like NcSelectUsers centered on the input\n\t\t\t// (6px = NcInputField .input-field margin-block-start)\n\t\t\tinset-block: 6px 0;\n\t\t\tinset-inline-start: 0;\n\t\t\tinset-inline-end: 0;\n\t\t\tmargin: 0;\n\t\t\tz-index: 2; // above vs__search (z-index: 1 from vue-select default)\n\t\t\tpointer-events: none;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tpadding-block: 0;\n\t\t\t// Match the input text position: main-wrapper padding (border width) + input padding\n\t\t\tpadding-inline: calc(var(--border-radius-element) + var(--border-width-input-focused, 2px)) var(--input-padding-end, calc(var(--default-clickable-area) + var(--default-grid-baseline)));\n\t\t\tbackground: unset !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t\theight: unset;\n\t\t\tmin-height: unset;\n\t\t\tfont-size: var(--default-font-size);\n\t\t\tcolor: var(--color-main-text);\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t// No label clearance to skip when the label is external\n\t\t&:has(.input-field--label-outside) .vs__selected {\n\t\t\tinset-block-start: 0;\n\t\t}\n\n\t\t// Extra padding when clear button visible (clear + chevron need more space)\n\t\t&:has(.vs__clear) .vs__selected {\n\t\t\tpadding-inline-end: calc(2 * var(--default-clickable-area));\n\t\t}\n\n\t\t&.vs--loading,\n\t\t&.vs--open {\n\t\t\t.vs__selected {\n\t\t\t\t// Fix color to be accessible while typing\n\t\t\t\topacity: 0.4;\n\t\t\t}\n\t\t}\n\n\t\t// Hide the selected value as soon as the user types a query\n\t\t// (restores vue-select's default, overridden by our display: flex above)\n\t\t&.vs--searching .vs__selected {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n\n// Dropdown menu is teleported to <body>, so it can't live under the\n// `.nc-select` root scope. The `.nc-select__dropdown` class (added in\n// calculatePosition) scopes it instead, so these styles and CSS variables\n// only affect our menus and never leak to other vue-select instances.\n.nc-select__dropdown.vs__dropdown-menu {\n\t--vs-border-color: var(--color-border-maxcontrast);\n\t--vs-border-style: solid;\n\t--vs-border-radius: var(--border-radius-element);\n\t--vs-dropdown-bg: var(--color-main-background);\n\t--vs-dropdown-color: var(--color-main-text);\n\t--vs-dropdown-option-padding: 8px 20px;\n\t--vs-dropdown-option--active-bg: var(--color-background-hover);\n\t--vs-dropdown-option--active-color: var(--color-main-text);\n\t--vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px var(--color-border-maxcontrast);\n\t--vs-dropdown-option--deselect-bg: var(--color-error);\n\t--vs-dropdown-option--deselect-color: #fff;\n\tborder-width: var(--border-width-input-focused) !important;\n\tborder-color: var(--color-main-text) !important;\n\toutline: none !important;\n\tbox-shadow:\n\t\t-2px 0 0 var(--color-main-background), // Right\n\t\t0 2px 0 var(--color-main-background), // Bottom\n\t\t2px 0 0 var(--color-main-background), // Left\n\t\t!important;\n\tpadding: 4px !important;\n\n\t&--floating {\n\t\t/* Fallback styles overidden by programmatically set inline styles */\n\t\twidth: max-content;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tinset-inline-start: 0;\n\n\t\t// Top placement: the menu is detached from the select (gap for the\n\t\t// floating label), so it keeps a full border on all sides\n\t\t&-placement-top {\n\t\t\tborder-radius: var(--vs-border-radius) !important;\n\t\t\tborder-top-style: var(--vs-border-style) !important;\n\t\t\tbox-shadow:\n\t\t\t\t0 -2px 0 var(--color-main-background), // Top\n\t\t\t\t-2px 0 0 var(--color-main-background), // Right\n\t\t\t\t0 2px 0 var(--color-main-background), // Bottom\n\t\t\t\t2px 0 0 var(--color-main-background), // Left\n\t\t\t\t!important\n\t\t}\n\t}\n\n\t.vs__dropdown-option {\n\t\tborder-radius: 6px !important;\n\t}\n\n\t.vs__no-options {\n\t\tcolor: var(--color-text-maxcontrast) !important;\n\t}\n}\n\n// Border for .vs__dropdown-toggle, inlined from inputLikeBorder mixin\n// because the mixin's @media #{&} produces doubled selectors when nested.\n.nc-select.v-select.select .vs__dropdown-toggle {\n\t--input-border-box-shadow-light: 0 -1px var(--vs-border-color),\n\t\t0 0 0 1px color-mix(in srgb, var(--vs-border-color), 65% transparent);\n\t--input-border-box-shadow-dark: 0 -1px var(--vs-border-color),\n\t\t0 0 0 1px color-mix(in srgb, var(--vs-border-color), 65% transparent);\n\t--input-border-box-shadow: var(--input-border-box-shadow-light);\n\tborder: none;\n\tborder-radius: var(--border-radius-element);\n\tbox-shadow: var(--input-border-box-shadow);\n}\n\n// Hover: use .vs--disabled on parent (toggle div never has [disabled] attribute)\n.nc-select.v-select.select:not(.vs--disabled) .vs__dropdown-toggle:hover {\n\tbox-shadow: 0 0 0 1px var(--vs-border-color);\n}\n\n@media (prefers-color-scheme: dark) {\n\t.nc-select.v-select.select .vs__dropdown-toggle {\n\t\t--input-border-box-shadow: var(--input-border-box-shadow-dark);\n\t}\n}\n\n[data-theme-dark] .nc-select.v-select.select .vs__dropdown-toggle {\n\t--input-border-box-shadow: var(--input-border-box-shadow-dark);\n}\n\n[data-theme-light] .nc-select.v-select.select .vs__dropdown-toggle {\n\t--input-border-box-shadow: var(--input-border-box-shadow-light);\n}\n\n.select--legacy.nc-select.v-select.select .vs__dropdown-toggle {\n\tbox-shadow: 0 0 0 1px var(--vs-border-color);\n\n\t&:hover:not([disabled]) {\n\t\tbox-shadow: 0 0 0 2px var(--vs-border-color);\n\t}\n}\n</style>\n"],"names":["NcTextField","Close","_openBlock","_createBlock","_mergeProps","_withCtx","_createVNode","_normalizeClass","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_createElementBlock","_createTextVNode","_renderList"],"mappings":"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"}