bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/BaseSelect.md

@@ -0,0 +1,1720 @@
+# BaseSelect
+
+## Template & Script
+
+```vue
+<template>
+	<CommonInputOuterContainer
+		ref="outerContainer"
+		:class="{
+			'bb-base-select': true,
+			'bb-base-select--active': active,
+			'bb-base-select--shown': shown,
+			'bb-base-select--loading': computedLoading,
+			'bb-base-select--disabled': disabled,
+			'bb-base-select--errors': hasErrors,
+			'bb-base-select--readonly': readonly,
+			'bb-base-select--compact': compact,
+		}"
+		@click="onOuterContainerClick"
+	>
+		<template #prepend-outer
+			><slot name="prepend-outer" :query="query"></slot
+		></template>
+		<span ref="innerContainer" class="bb-base-select__inner-wrapper">
+			<CommonInputInnerContainer
+				:append:icon="props['append:icon']"
+				:clearable="clearable && !isEmpty(modelValue)"
+				:prepend:icon="props['prepend:icon']"
+				:prevent-focus="true"
+				@click:clear="onClear"
+			>
+				<template #prepend
+					><slot name="prepend" :query="query" :focus="focusInput"></slot
+				></template>
+				<template #prefix><slot name="prefix" /></template>
+				<BbSmoothHeight tag="span">
+					<span class="bb-base-select__input-container">
+						<template
+							v-if="multiple && selectedOptions.length <= maxSelectedLabels"
+						>
+							<template v-if="comma">
+								<CommaBox
+									ref="commaBox"
+									:options="selectedOptions"
+									@option:unselected="onOptionUnselected"
+								/>
+							</template>
+							<template v-else>
+								<ChipsBox
+									ref="chipsBox"
+									:options="selectedOptions"
+									@option:unselected="onOptionUnselected"
+								/>
+							</template>
+						</template>
+						<span v-else-if="multiple" class="bb-base-select__max-reached">
+							{{
+								selectedLabelsFn
+									? selectedLabelsFn(selectedOptions.length)
+									: t('select.multipleMaxReached', selectedOptions.length)
+							}}
+						</span>
+						<input
+							:id="id"
+							:key="`${mounted}`"
+							ref="input"
+							v-model="query"
+							:aria-activedescendant="shown ? activeDescendantId : undefined"
+							:aria-autocomplete="'list'"
+							:aria-controls="renderListBox ? `${id}_listbox` : undefined"
+							:aria-describedby="ariaDescribedby"
+							:aria-expanded="shown"
+							:autocomplete="autocomplete"
+							:autofocus="autofocus"
+							:class="'bb-base-select__text-input'"
+							:disabled="disabled"
+							:inputmode="inputmode"
+							:placeholder="computedPlaceholder"
+							:readonly="readonly || !allowWriting"
+							:required="required && (!multiple || !modelValue.length)"
+							role="combobox"
+							size="1"
+							:style="{ '--characters': query.length }"
+							:type="'text'"
+							@blur.stop="onInputBlur"
+							@change.stop="onInputChange"
+							@focus.once.stop="onInputFirstFocus"
+							@focus.stop="onInputFocus"
+							@input.stop="onInputInput"
+							@keydown.stop.delete="onBackspace"
+							@keydown.stop.left="onArrowLeft"
+							@keydown.stop.prevent.down="onArrowDown"
+							@keydown.stop.prevent.enter="onEnter"
+							@keydown.stop.prevent.esc="onEscape"
+							@keydown.stop.prevent.up="onArrowUp"
+							@keydown.stop.right="onArrowRight"
+						/>
+					</span>
+				</BbSmoothHeight>
+				<slot
+					v-if="showChevron"
+					:loading="!!loading"
+					name="chevron"
+					:shown="shown"
+				>
+					<svg
+						class="bb-base-select__chevron"
+						viewBox="0 0 24 24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"
+							fill="currentColor"
+						/>
+					</svg>
+				</slot>
+				<template #append
+					><slot name="append" :query="query" :focus="focusInput"></slot
+				></template>
+				<template #suffix><slot name="suffix" /></template>
+			</CommonInputInnerContainer>
+		</span>
+		<CommonPopover
+			v-model="shown"
+			:anchor="innerContainer"
+			:offset="4"
+			:transition-duration="transitionDuration"
+		>
+			<template v-if="shown">
+				<slot name="options:prepend:outer" :focus="focusInput" />
+			</template>
+			<ListBox
+				ref="optionsContainer"
+				:compact="compact"
+				:loading="computedLoading"
+				:loading-text="loadingText"
+				:multiple="multiple"
+				:no-data-text="noDataText"
+				:open="shown"
+				:options="groupBy ? undefined : filteredOptions"
+				:groups="groupBy ? groupedOptions : undefined"
+				:header-height="headerHeight"
+				:style="optionsContainerStyles"
+				:option-height="itemHeight"
+				@focused:change="onListboxFocusedChange"
+				@option:selected="onOptionSelected"
+				@option:unselected="onOptionUnselected"
+			>
+				<template #options:prepend
+					><slot v-if="shown" name="options:prepend" :focus="focusInput"
+				/></template>
+				<template #loading><slot name="loading" :query="query" /></template>
+				<template #no-data
+					><slot name="no-data" :query="query" :focus="focusInput"
+				/></template>
+				<template #options:append
+					><slot v-if="shown" name="options:append" :focus="focusInput"
+				/></template>
+				<template #option="data"
+					><slot
+						:has-errors="hasErrors"
+						:loading="computedLoading"
+						name="option"
+						v-bind="data"
+				/></template>
+				<template #group="data"><slot name="group" v-bind="data" /></template>
+			</ListBox>
+			<template v-if="shown">
+				<slot name="options:append:outer" :focus="focusInput" />
+			</template>
+		</CommonPopover>
+		<template #append-outer
+			><slot name="append-outer" :query="query"></slot
+		></template>
+		<input v-for="input in hiddenInputs" :key="input.value" v-bind="input" />
+	</CommonInputOuterContainer>
+</template>
+
+<script setup lang="ts" generic="Item = any">
+import BbSmoothHeight from '../BbSmoothHeight/BbSmoothHeight.vue';
+import { computed, ref, nextTick } from 'vue';
+import { hash } from '@/utilities/functions/hash';
+import { isEmpty } from '@/utilities/functions/empty';
+import { last } from '@/utilities/functions/last';
+import { matchAnyKey } from '@/utilities/functions/matchAnyKey';
+import { toRef } from 'vue';
+import { useArray } from '@/composables/useArray';
+import { useBaseOptions } from '@/composables/useBaseOptions';
+import { useCoherence } from '@/composables/useCoherence';
+import { useHashedWatcher } from '@/composables/useHashedWatcher';
+import { useId } from '@/composables/useId';
+import { useIndexById } from '@/composables/useIndexById';
+import { useElementSize, useIntersectionObserver } from '@vueuse/core';
+import { useItemsGetter } from '@/composables/useItemsGetter';
+import { useLocale } from '@/composables/useLocale';
+import { useMobile } from '@/composables/useMobile';
+import { useMounted } from '@vueuse/core';
+import { usePrefill } from '@/composables/usePrefill';
+import { wait } from '@/utilities/functions/wait';
+import { when } from '@/utilities/functions/when';
+import ChipsBox from '../ChipsBox/ChipsBox.vue';
+import CommaBox from '../CommaBox/CommaBox.vue';
+import CommonInputInnerContainer from '../CommonInputInnerContainer/CommonInputInnerContainer.vue';
+import CommonInputOuterContainer from '../CommonInputOuterContainer/CommonInputOuterContainer.vue';
+import CommonPopover from '../CommonPopover/CommonPopover.vue';
+import ListBox from '../ListBox/ListBox.vue';
+import type {
+	BaseSelectProps,
+	BaseSelectEvents,
+	BaseSelectSlots,
+} from './types';
+import type { Option as BaseOption, GroupedOptions } from '@/types/Option';
+import { useUntil } from '@/composables/useUntil';
+import type { groupBy } from '@/utilities/functions/groupBy';
+import { isNil } from '@/utilities/functions/isNil';
+import { get } from '@/utilities/functions/get';
+import { useLogger } from '@/composables/useLogger';
+
+const props = withDefaults(defineProps<BaseSelectProps<Item>>(), {
+	allowWriting: true,
+	autocomplete: 'off',
+	depsDebounceTime: 0,
+	dependencies: () => [],
+	filterBy: () => [],
+	max: Infinity,
+	maxSelectedLabels: Infinity,
+	modelValueDebounceTime: 0,
+	prefill: 'focus',
+	queryDebounceTime: 500,
+	showChevron: true,
+	transitionDuration: 300,
+	updateOnAnimationFrame: false,
+});
+
+const emit = defineEmits<BaseSelectEvents>();
+const logger = useLogger();
+
+defineSlots<BaseSelectSlots<Item>>();
+
+if (props.multiple && !Array.isArray(props.modelValue)) {
+	logger.throw(
+		'BaseSelect: multiple is set to "true" but modelValue is not an array.'
+	);
+}
+
+const { t } = useLocale();
+const mounted = useMounted();
+/**
+ * START ELEMENT REFERENCES
+ */
+const outerContainer = ref<InstanceType<
+	typeof CommonInputOuterContainer
+> | null>(null);
+const innerContainer = ref<HTMLElement | null>(null);
+const optionsContainer = ref<any | null>(null);
+const commaBox = ref<InstanceType<typeof CommaBox> | null>(null);
+const chipsBox = ref<InstanceType<typeof ChipsBox> | null>(null);
+const selectedBox = computed(() =>
+	props.comma ? commaBox.value : chipsBox.value
+);
+const { width: containerWidth } = useElementSize(innerContainer);
+/**
+ * END ELEMENT REFERENCES
+ */
+
+const { isMobile } = useMobile();
+const inputmode = computed(() =>
+	props.allowWriting === 'not-mobile' && isMobile.value ? 'none' : undefined
+);
+
+// Always provide an id so that inputs can be focussed by clicking in the label
+const id = props.id || useId().id.value;
+
+const { resume, pause } = useIntersectionObserver(
+	innerContainer,
+	async ([{ intersectionRatio }]) => {
+		if (intersectionRatio !== 1 && shown.value) {
+			await close();
+		}
+	},
+	{ threshold: [0, 1], immediate: false }
+);
+
+const optionsContainerStyles = computed(() => ({
+	width: `${containerWidth.value ?? 0}px`,
+}));
+
+/**
+ * START INPUT HANDLING
+ */
+const input = ref<HTMLElement | null>(null);
+const activeDescendantId = ref<string>();
+const focusInput = () => {
+	if (input.value instanceof HTMLInputElement) {
+		input.value.focus();
+	}
+};
+
+/**
+ * When the focus goes to the input we select the current text
+ * so the user can replace or delete it.
+ * On top of that if the prefill strategy is to prefill on first focus and options
+ * weren't already retrieved by the watcher on mount, we do that
+ */
+const onInputFocus = async (event: FocusEvent) => {
+	emit('focus', event);
+	setActive();
+	document.addEventListener('click', onOutsideInteraction);
+	document.addEventListener('focusin', onOutsideInteraction);
+};
+
+const onInputFirstFocus = () => {
+	if (props.prefill === 'focus' && !isPrefilling.value && !hasPrefilled.value) {
+		prefillItems();
+	}
+};
+
+const onInputBlur = async (event: FocusEvent) => {
+	emit('blur', event);
+};
+
+const onInputChange = (event: Event) => emit('change', event);
+
+/**
+ * Search at every input by the user.
+ * When the user deletes the query unselect the current option
+ */
+const onInputInput = (event: Event) => {
+	emit('input', event);
+	if (query.value === '') {
+		if (!props.multiple) {
+			emit('update:modelValue', null);
+		}
+	}
+	selectedBox.value?.blur();
+	if (hidden.value) {
+		open();
+	}
+	debouncedGetter(query.value, false, props.modelValue);
+};
+
+const onListboxFocusedChange = (id: string | undefined) => {
+	activeDescendantId.value = id;
+};
+
+/**
+ * On click outside of the container close the panel, remove active state.
+ * In multiple selection clear query after a timeout
+ */
+const onOutsideInteraction = async (event: Event) => {
+	if (event.target instanceof Node) {
+		if (outerContainer.value) {
+			if (
+				!outerContainer.value.$el.contains(event.target) &&
+				!optionsContainer.value?.$el?.contains(event.target)
+			) {
+				close();
+				setInactive();
+				document.removeEventListener('click', onOutsideInteraction);
+				document.removeEventListener('focusin', onOutsideInteraction);
+				await wait(props.transitionDuration);
+				alignQueryToState();
+				return;
+			}
+		}
+	}
+};
+
+const canProcessKeyboardBindings = computed(() => {
+	if (props.readonly) return false;
+	if (props.disabled) return false;
+	if (computedLoading.value) return false;
+	if (
+		!selectedBox.value &&
+		props.multiple &&
+		selectedOptions.value.length <= props.maxSelectedLabels
+	)
+		return false;
+	return true;
+});
+
+/**
+ * On arrow prevent the page from scrolling.
+ * Reset horizontal focus
+ * When the panel is open
+ * - Focus on the previous option
+ * When the panel is closed
+ * - focus on the first selected option
+ */
+const onArrowUp = async () => {
+	if (!canProcessKeyboardBindings.value) return;
+	// Reset horizontal focus while moving vertically
+	selectedBox.value?.blur();
+	if (shown.value) {
+		optionsContainer.value?.focusPrevious();
+	} else {
+		await open();
+		await wait(props.transitionDuration);
+		optionsContainer.value?.focusLastSelected();
+	}
+};
+
+const onArrowDown = async () => {
+	if (!canProcessKeyboardBindings.value) return;
+	// Reset horizontal focus while moving vertically
+	selectedBox.value?.blur();
+	if (shown.value) {
+		optionsContainer.value?.focusNext();
+	} else {
+		await open();
+		await wait(props.transitionDuration);
+		optionsContainer.value?.focusFirstSelected();
+	}
+};
+
+const onArrowLeft = (event: KeyboardEvent) => {
+	if (!canProcessKeyboardBindings.value) return;
+	if (!props.multiple || query.value) return;
+
+	event.preventDefault();
+	// Reset vertical focus while moving horizontally
+	optionsContainer.value?.blur();
+	if (!selectedOptions.value.length) return;
+	selectedBox.value?.focusPrevious();
+	const highlightedOption = selectedBox.value?.getHighlighted();
+	if (highlightedOption) {
+		optionsContainer.value?.focusByHash(highlightedOption.valueHash);
+	}
+};
+
+const onArrowRight = (event: KeyboardEvent) => {
+	if (!canProcessKeyboardBindings.value) return;
+	if (!props.multiple || query.value) return;
+	event.preventDefault();
+	// Reset vertical focus while moving horizontally
+	optionsContainer.value?.blur();
+	if (!selectedOptions.value.length) return;
+	selectedBox.value?.focusNext();
+	const highlightedOption = selectedBox.value?.getHighlighted();
+	if (highlightedOption) {
+		optionsContainer.value?.focusByHash(highlightedOption.valueHash);
+	}
+};
+
+const onEnter = async () => {
+	if (!canProcessKeyboardBindings.value) {
+		return;
+	}
+	if (!shown.value) {
+		await open();
+		await wait(props.transitionDuration);
+		if (selectedOptions.value.length) {
+			optionsContainer.value?.focusFirstSelected();
+		}
+		return;
+	} else if (optionsContainer.value?.getHighlighted()) {
+		optionsContainer.value.confirmOption();
+		return;
+	}
+	const text = query.value.trim();
+	// Do not add manual items that are already present
+	if (isItemSelected(text)) return;
+	emit('option:add', text);
+	query.value = '';
+};
+
+const onEscape = async () => {
+	if (shown.value) {
+		await close();
+	}
+};
+
+/**
+ * Delete behavior is different when query is empty
+ * If query is empty
+ * If no chip is selected - select rightmost chip
+ * If a chip is selected - deselect that option
+ * If any option remains move focus to that or reset
+ */
+const onBackspace = async () => {
+	if (
+		!canProcessKeyboardBindings.value ||
+		query.value ||
+		!selectedOptions.value.length
+	) {
+		return;
+	}
+	if (selectedBox.value?.getHighlighted()) {
+		selectedBox.value.confirmOption();
+	}
+	await nextTick();
+	selectedBox.value?.focusPrevious();
+};
+
+const query = ref<string>('');
+
+const {
+	getter,
+	debouncedGetter,
+	items: internalItems,
+	loading,
+} = useItemsGetter({
+	items: toRef(props, 'items'),
+	debounce: props.queryDebounceTime,
+});
+
+const {
+	array: innerStash,
+	add: addToStash,
+	remove: removeFromStash,
+	set: setStash,
+} = useArray<BaseOption>();
+
+const {
+	hasPrefilled,
+	isPrefilling,
+	prefill: prefillItems,
+} = usePrefill({
+	trigger: props.prefill === true,
+	currentValue: props.modelValue,
+	multiple: props.multiple,
+	fn: async (isPrefill) => {
+		await getter(query.value, isPrefill, props.modelValue);
+		if (props.stash) {
+			addToStash(...options.value.map((o) => o.item));
+		}
+		alignQueryToState();
+	},
+});
+
+const { data: modelValueIndexedByHash, get: isItemSelected } = useIndexById({
+	// Force model value to be an array
+	items: computed(() => [].concat(props.modelValue)),
+});
+
+const { options } = useBaseOptions({
+	disabled: toRef(props, 'disabled'),
+	items: computed(() => [...internalItems.value, ...innerStash.value]),
+	itemText: props.itemText,
+	itemValue: props.itemValue,
+	max: props.max,
+	selectable: true,
+	selectedIndexedByHash: modelValueIndexedByHash,
+});
+
+const { data: optionsIndexedByHash } = useIndexById({
+	items: options,
+	key: 'valueHash',
+});
+
+const { coherent, coherentValue } = useCoherence({
+	modelValue: toRef(props, 'modelValue'),
+	multiple: props.multiple,
+	iteratee: (item) => !!optionsIndexedByHash.value[hash(item)],
+});
+
+// 6. Selected options — resolved in modelValue order so chips stay stable
+const selectedOptions = computed<BaseOption[]>(() =>
+	([] as any[])
+		.concat(props.modelValue)
+		.map((v) => optionsIndexedByHash.value[hash(v)])
+		.filter(Boolean)
+);
+
+const computedLoading = computed(() => !!(loading.value || props.loading));
+
+/**
+ * If multiple watchers are running we don't want to run the coherence watcher
+ * multiple times we only run it the last time
+ */
+useHashedWatcher(
+	() => props.modelValue,
+	async () => {
+		if (!coherent.value) {
+			await getter(query.value, true, props.modelValue);
+			if (props.enforceCoherence) {
+				emit('update:modelValue', coherentValue.value);
+				selectedBox.value?.blur();
+				optionsContainer.value?.blur();
+			}
+		}
+		alignQueryToState();
+	},
+	{ debounce: props.modelValueDebounceTime }
+);
+useHashedWatcher(
+	() => [props.dependencies, props.items],
+	async () => {
+		if (!hasPrefilled.value) return;
+		await getter(query.value, true, props.modelValue);
+		if (props.enforceCoherence && !coherent.value) {
+			emit('update:modelValue', coherentValue.value);
+			selectedBox.value?.blur();
+			optionsContainer.value?.blur();
+		}
+		alignQueryToState();
+	},
+	{ debounce: props.depsDebounceTime }
+);
+
+const alignQueryToState = () => {
+	if (props.multiple) {
+		query.value = '';
+		return;
+	}
+	let option: BaseOption | undefined;
+	if (selectedOptions.value) {
+		option = last(selectedOptions.value);
+	}
+	query.value = option?.text || '';
+};
+
+const computedPlaceholder = computed(() => {
+	if (selectedOptions.value.length) return '';
+	else return props.placeholder;
+});
+
+const onOptionSelected = async (option: BaseOption) => {
+	if (props.multiple) {
+		emit('update:modelValue', props.modelValue.concat(option.value));
+		if (props.stash) {
+			addToStash(option.item);
+		}
+		alignQueryToState();
+	} else {
+		if (props.stash) {
+			setStash(option.item);
+		}
+		emit('update:modelValue', option.value);
+		await nextTick();
+		alignQueryToState();
+	}
+	focusInput();
+	if (!props.multiple) {
+		close();
+	}
+};
+
+const onOptionUnselected = async (option: BaseOption) => {
+	removeFromStash((o) => o.valueHash !== option.valueHash);
+	if (props.multiple) {
+		const copy = { ...modelValueIndexedByHash.value };
+		delete copy[option.valueHash];
+		emit('update:modelValue', Object.values(copy));
+	} else {
+		emit('update:modelValue', null);
+		await nextTick();
+		alignQueryToState();
+	}
+	focusInput();
+};
+
+/**
+ * Filter options to be displayed based on the current query.
+ * If no query is used or when query is set from the inside (after a selection) display all possible options
+ */
+const filteredOptions = computed<BaseOption<Item>[]>(() => {
+	/** Only filter when a value is being searched not when the query is fully set on a selected option text */
+	const queryMatchesASelectedOption = selectedOptions.value.some(
+		(option: BaseOption) => option.text === query.value
+	);
+	const shouldFilter =
+		(props.multiple && query.value) ||
+		(props.filterBy === 'not_stashed' && query.value) ||
+		(query.value && !queryMatchesASelectedOption && !props.multiple);
+
+	if (!shouldFilter || !props.filterBy) return options.value;
+
+	// Build the stash lookup once, outside the loop — not per item.
+	const stashedHashes =
+		props.filterBy === 'not_stashed'
+			? new Set(innerStash.value.map((o) => o.valueHash))
+			: null;
+
+	return options.value.filter((item: BaseOption) => {
+		let matchedAnything = false;
+		if (typeof props.filterBy === 'function') {
+			// Custom function is an extra matcher, not a replacement for the text
+			// match — consistent with the string/array filterBy modes.
+			matchedAnything = props.filterBy(item.value, item.item, query.value);
+		} else if (props.filterBy === 'not_stashed' && query.value) {
+			matchedAnything = !stashedHashes!.has(item.valueHash);
+		} else if (Array.isArray(props.filterBy) && props.filterBy.length) {
+			matchedAnything = matchAnyKey(
+				item.item,
+				props.filterBy,
+				query.value.trim()
+			);
+		}
+		return matchedAnything || matchAnyKey(item, ['text'], query.value.trim());
+	});
+});
+
+const defaultGroupSymbol = Symbol('default');
+
+const getGroupData = (option: BaseOption) => {
+	if (isNil(props.groupBy)) return defaultGroupSymbol;
+	if (typeof props.groupBy === 'function') return props.groupBy(option.item);
+	return (get as any)(option.item, props.groupBy);
+};
+
+const groupedOptions = computed<GroupedOptions[]>(() => {
+	const groupIndex: Record<GroupedOptions['id'], GroupedOptions> = {};
+	for (const option of filteredOptions.value) {
+		const groupData = getGroupData(option);
+		const groupId = hash(groupData);
+		if (!groupIndex[groupId]) {
+			groupIndex[groupId] = {
+				id: groupId,
+				data: groupData ?? null,
+				options: [],
+			};
+		}
+		groupIndex[groupId].options.push(option);
+	}
+	return Object.values(groupIndex).filter((g) => g.options.length);
+});
+
+/**
+ * We need the transitions because elements must be hidden and shown
+ * to accessibility tools when they are fully closed or fully open,
+ * while still being animated for sighted users.
+ */
+
+const shown = ref(false);
+const hidden = ref(true);
+const renderListBox = useUntil(shown);
+
+const open = async () => {
+	resume();
+	hidden.value = false;
+	shown.value = true;
+};
+
+const close = async () => {
+	shown.value = false;
+	hidden.value = true;
+	activeDescendantId.value = undefined;
+	selectedBox.value?.blur();
+	pause();
+};
+
+const toggle = () => {
+	if (shown.value) return close();
+	return open();
+};
+
+/**
+ * Applies a class when the user is inside this whole component.
+ * We cannot use focus within as it doesn't work for elements that are teleported.
+ * Also we cannot use the <input/> if we physically move focus to the options so
+ * we track it manually.
+ */
+const active = ref(false);
+
+const setActive = () => {
+	active.value = true;
+};
+const setInactive = () => {
+	active.value = false;
+	emit('inactive');
+};
+
+/**
+ * When clicking on the outside container seamlessly move focus to the input and open the panel
+ */
+const onOuterContainerClick = (event: MouseEvent) => {
+	event.preventDefault();
+	emit('click', event);
+	if (props.disabled || props.readonly) return;
+	focusInput();
+	toggle();
+};
+
+/**
+ * When using this component for submission we add a bunch of hidden
+ * inputs so the submitted inputs are on par with v-model
+ */
+/**
+ * This is used to keep the value compatible to common html expected values.
+ * Convert to string everything that's not but do not double encode strings
+ */
+const makeInputValue = when(
+	(item: unknown) => typeof item !== 'string',
+	JSON.stringify
+);
+
+const hiddenInputs = computed(() => {
+	return [].concat(props.modelValue).map((current) => {
+		const value = makeInputValue(current);
+		return {
+			disabled: props.disabled,
+			name: props.name,
+			type: 'hidden',
+			value: value,
+		};
+	});
+});
+
+const onClear = () => {
+	let value = null;
+	if (props.multiple) {
+		value = [];
+	}
+	emit('update:modelValue', value);
+};
+</script>
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import type { IconType } from '@/types/Icon';
+
+export type BaseSelectProps<Item = any> = {
+	/**
+	 * Controls whether manual typing is allowed in the input field.
+	 * Use `'not-mobile'` to disable typing on mobile while keeping it on desktop.
+	 * @defaultValue `true`
+	 */
+	allowWriting?: boolean | 'not-mobile';
+
+	/**
+	 * Name of the icon to render at the right hand side of the input.
+	 */
+	// eslint-disable-next-line vue/prop-name-casing
+	'append:icon'?: IconType;
+
+	/**
+	 * Id(s) of elements describing this select for assistive technologies.
+	 */
+	ariaDescribedby?: InputHTMLAttributes['aria-describedby'];
+
+	/**
+	 * Browser autocomplete hint for the input field.
+	 * @defaultValue `'off'`
+	 */
+	autocomplete?: InputHTMLAttributes['autocomplete'];
+
+	/**
+	 * Focus the input automatically on mount.
+	 */
+	autofocus?: InputHTMLAttributes['autofocus'];
+
+	/**
+	 * Show a clear button whenever a value is present and the control is interactive.
+	 */
+	clearable?: boolean;
+
+	/**
+	 * Display selected values as a comma-separated string instead of individual chips.
+	 * When enabled, options cannot be deselected by clicking individual chips.
+	 */
+	comma?: boolean;
+
+	/**
+	 * Apply the compact density variant.
+	 */
+	compact?: boolean;
+
+	/**
+	 * Additional dependencies that trigger item reloading when changed.
+	 * @defaultValue `[]`
+	 */
+	dependencies?: any[];
+
+	/**
+	 * Debounce delay (ms) for dependency-triggered reloads.
+	 * @defaultValue `0`
+	 */
+	depsDebounceTime?: number;
+
+	/**
+	 * Disables the component.
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Reset modelValue to `null` or empty array if it no longer matches available items (enforces coherence).
+	 * For example, prevents setting v-model to a user not present in the items array.
+	 */
+	enforceCoherence?: boolean;
+
+	/**
+	 * Controls how options are filtered during search.
+	 * Options are always filtered by display text, but can also match additional properties
+	 * when set to a string path, array of paths, or custom function.
+	 * Set to `false` to disable filtering, or `'not_stashed'` to exclude stashed items.
+	 * @defaultValue `() => []`
+	 */
+	filterBy?:
+		| string
+		| string[]
+		| false
+		| 'not_stashed'
+		| ((value: any, item: any, query: string | null) => boolean)
+		| null;
+
+	/**
+	 * Path or function used to group options. When set, options are organized into
+	 * collapsible group headers in the dropdown.
+	 */
+	groupBy?: string | ((item: Item) => string | number | symbol);
+
+	/**
+	 * Height of group headers in the listbox (px). Defaults to 24px (compact) or 32px.
+	 * Only applies when `groupBy` is set.
+	 */
+	headerHeight?: number;
+
+	/**
+	 * Apply error styling to the select.
+	 */
+	hasErrors?: boolean;
+
+	/**
+	 * Explicit id for the input element. Used to generate ids for listbox and options.
+	 */
+	id?: HTMLAttributes['id'];
+
+	/**
+	 * Array of items or function to load them asynchronously.
+	 * Functions receive `(query, prefill, modelValue)` and can return a promise.
+	 * Please check out {@link https://ui-components-docs.vercel.app/it/guides/fetch-data | the docs} for more information.
+	 * @defaultValue `[]`
+	 */
+	items:
+		| Item[]
+		| ((query: string, prefill: boolean, modelValue: any[]) => Promise<Item[]>)
+		| ((query: string, prefill: boolean, modelValue: any[]) => Item[]);
+
+	/**
+	 * Height of the options in the listbox (px). Necessary for option virtualization.
+	 * @defaultValue `40`
+	 */
+	itemHeight?: number;
+
+	/**
+	 * Path to item property for display text or function to extract it.
+	 */
+	itemText?: string | ((item: Item) => string) | undefined;
+
+	/**
+	 * Defines a path that returns a property of the object to use as value or a function that returns any value.
+	 */
+	itemValue?: string | ((item: Item) => string) | undefined;
+
+	/**
+	 * Display the loading state styles.
+	 */
+	loading?: boolean;
+
+	/**
+	 * Message shown while items are being loaded.
+	 */
+	loadingText?: string;
+
+	/**
+	 * Maximum number of selectable items (limits selection when `multiple` is true).
+	 * @defaultValue `Infinity`
+	 */
+	max?: number;
+
+	/**
+	 * Maximum number of selected items to show as individual labels before collapsing.
+	 * @defaultValue `Infinity`
+	 */
+	maxSelectedLabels?: number;
+
+	/**
+	 * v-model value. Single value for single select, array for multiple select.
+	 */
+	modelValue: any;
+
+	/**
+	 * Debounce delay (ms) for modelValue change handling.
+	 * @defaultValue `0`
+	 */
+	modelValueDebounceTime?: number;
+
+	/**
+	 * Enable multiple item selection. When true, modelValue must be an array.
+	 */
+	multiple?: boolean;
+
+	/**
+	 * Name attribute forwarded to the input element.
+	 */
+	name?: InputHTMLAttributes['name'];
+
+	/**
+	 * Message displayed when no items are available.
+	 */
+	noDataText?: string;
+
+	/**
+	 * Placeholder text when no value is selected.
+	 */
+	placeholder?: InputHTMLAttributes['placeholder'];
+
+	/**
+	 * Controls when items are pre-loaded.
+	 * `'focus'` loads on first focus, `true` loads immediately, `false` loads only on search.
+	 * @defaultValue `'focus'`
+	 */
+	prefill?: boolean | 'focus';
+
+	/**
+	 * Name of the icon to render at the left hand side of the input.
+	 */
+	// eslint-disable-next-line vue/prop-name-casing
+	'prepend:icon'?: IconType;
+
+	/**
+	 * Debounce delay (ms) before triggering search queries after user input stops.
+	 * @defaultValue `500`
+	 */
+	queryDebounceTime?: number;
+
+	/**
+	 * Make the input read-only while keeping the dropdown accessible.
+	 */
+	readonly?: boolean;
+
+	/**
+	 * Mark the input as required for form validation.
+	 */
+	required?: boolean;
+
+	/**
+	 * Show the dropdown chevron icon.
+	 * @defaultValue `true`
+	 */
+	showChevron?: boolean;
+
+	/**
+	 * Accumulate selected items across searches instead of replacing them.
+	 * Useful when searching large databases where selections should persist.
+	 */
+	stash?: boolean;
+
+	/**
+	 * Function to generate a summary label when selected items exceed `maxSelectedLabels`.
+	 * Receives the total count and returns display text.
+	 */
+	selectedLabelsFn?: (count: number) => string;
+
+	/**
+	 * Transition duration (ms) for dropdown show/hide animations.
+	 * @defaultValue `300`
+	 */
+	transitionDuration?: number;
+
+	/**
+	 * Force dropdown repositioning on every animation frame (expensive, use sparingly).
+	 * @defaultValue `false`
+	 */
+	updateOnAnimationFrame?: boolean;
+};
+
+export type BaseSelectEvents = {
+	/**
+	 * Emitted when the search input loses focus.
+	 * Forwards the original DOM `FocusEvent`.
+	 */
+	(e: 'blur', event: FocusEvent): void;
+	/**
+	 * Emitted when the input fires a change event.
+	 * Forwards the original DOM `Event`.
+	 */
+	(e: 'change', event: Event): void;
+	/**
+	 * Emitted when the input receives a click interaction.
+	 * Forwards the original DOM `MouseEvent`.
+	 */
+	(e: 'click', event: MouseEvent): void;
+	/**
+	 * Emitted when the search input gains focus.
+	 * Forwards the original DOM `FocusEvent`.
+	 */
+	(e: 'focus', event: FocusEvent): void;
+	/**
+	 * Emitted when focus/click moves outside the component after it was active.
+	 */
+	(e: 'inactive'): void;
+	/**
+	 * Emitted on native input events from the search field.
+	 * Forwards the original DOM `Event`.
+	 */
+	(e: 'input', event: Event): void;
+	/**
+	 * Emitted with the new selected value(s) whenever the selection changes.
+	 * Single value for single-select, array for multiple-select.
+	 */
+	(e: 'update:modelValue', value: any): void;
+	/**
+	 * Emitted when the user confirms a manually typed string that does not match any option.
+	 * Useful for "add new" patterns.
+	 */
+	(e: 'option:add', text: string): void;
+};
+
+/**
+ * Props exposed by slots that receive the current search query and a focus callback
+ * (`append`, `prepend`, `no-data`).
+ */
+export type BaseSelectQueryFocusSlotProps = {
+	/**
+	 * The current text typed in the search input.
+	 */
+	query: string;
+	/**
+	 * Focuses the search input.
+	 */
+	focus: () => void;
+};
+
+/**
+ * Props exposed by slots that receive only the current search query
+ * (`append-outer`, `prepend-outer`, `loading`).
+ */
+export type BaseSelectQueryOnlySlotProps = {
+	/**
+	 * The current text typed in the search input.
+	 */
+	query: string;
+};
+
+/**
+ * Props exposed by the `chevron` slot.
+ */
+export type BaseSelectChevronSlotProps = {
+	/**
+	 * Whether the component is currently loading options.
+	 */
+	loading: boolean;
+	/**
+	 * Whether the dropdown panel is currently open.
+	 */
+	shown: boolean;
+};
+
+/**
+ * Props exposed by the `chip` slot for each selected item when `multiple` is true.
+ */
+export type BaseSelectChipSlotProps = {
+	/**
+	 * Whether this chip's remove action is disabled.
+	 */
+	disabled: boolean | undefined;
+	/**
+	 * Whether the select is in an error state.
+	 */
+	hasErrors?: boolean;
+	/**
+	 * The zero-based index of this chip among the selected items.
+	 */
+	index: number;
+	/**
+	 * The raw selected item from the `items` prop.
+	 */
+	item: any;
+	/**
+	 * Whether the component is currently loading.
+	 */
+	loading: boolean;
+	/**
+	 * Whether the item was added manually (typed by the user).
+	 */
+	manual: boolean;
+	/**
+	 * Whether this chip is in a selected state.
+	 */
+	selected: boolean | undefined;
+	/**
+	 * The resolved display text for this selected item.
+	 */
+	text: string;
+	/**
+	 * The resolved value for this selected item.
+	 */
+	value: any;
+};
+
+/**
+ * Props exposed by the `option` slot for each item in the dropdown list.
+ */
+export type BaseSelectOptionSlotProps<Item = any> = {
+	/**
+	 * Whether this option is disabled.
+	 */
+	disabled: boolean;
+	/**
+	 * Whether this option is currently keyboard-focused.
+	 */
+	focused: boolean;
+	/**
+	 * The zero-based index of this option in the list.
+	 */
+	index: number;
+	/**
+	 * Whether the select is in an error state.
+	 */
+	hasErrors?: boolean;
+	/**
+	 * The raw item from the `items` prop.
+	 */
+	item: Item;
+	/**
+	 * Whether the component is currently loading.
+	 */
+	loading: boolean;
+	/**
+	 * Whether this option is currently selected.
+	 */
+	selected: boolean;
+	/**
+	 * The resolved display text for this option.
+	 */
+	text: string;
+	/**
+	 * The resolved value for this option.
+	 */
+	value: any;
+};
+
+/**
+ * Props exposed by the `group` slot for each group header in the dropdown list.
+ */
+export type BaseSelectGroupSlotProps<Item = any> = {
+	/**
+	 * The display text for this group.
+	 */
+	text: string;
+	/**
+	 * The raw group item from the `items` prop.
+	 */
+	item: Item;
+	/**
+	 * The zero-based index of this group in the list.
+	 */
+	index: number;
+	/**
+	 * The number of options in this group.
+	 */
+	length: number;
+	/**
+	 * Whether this group is disabled.
+	 */
+	disabled: boolean;
+};
+
+/**
+ * Props exposed by dropdown panel boundary slots
+ * (`options:append`, `options:append:outer`, `options:prepend`, `options:prepend:outer`).
+ */
+export type BaseSelectFocusSlotProps = {
+	/**
+	 * Focuses the search input.
+	 */
+	focus: () => void;
+};
+
+export type BaseSelectSlots<Item = any> = {
+	/**
+	 * Content rendered after the input area, at the end of the inner container.
+	 */
+	append?: (props: BaseSelectQueryFocusSlotProps) => any;
+	/**
+	 * Content rendered after the entire select control, outside the input chrome.
+	 */
+	'append-outer'?: (props: BaseSelectQueryOnlySlotProps) => any;
+	/**
+	 * Replaces the default dropdown chevron/arrow icon.
+	 */
+	chevron?: (props: BaseSelectChevronSlotProps) => any;
+	/**
+	 * Replaces the chip rendered for each selected item when `multiple` is true.
+	 */
+	chip?: (props: BaseSelectChipSlotProps) => any;
+	/**
+	 * Replaces the default loading indicator rendered inside the dropdown while options are fetching.
+	 */
+	loading?: (props: BaseSelectQueryOnlySlotProps) => any;
+	/**
+	 * Replaces the default "no data" message rendered inside the dropdown when no options match.
+	 */
+	'no-data'?: (props: BaseSelectQueryFocusSlotProps) => any;
+	/**
+	 * Replaces the default option row rendered for each item in the dropdown list.
+	 */
+	option?: (props: BaseSelectOptionSlotProps<Item>) => any;
+	/**
+	 * Replaces the default group header row rendered above options that belong to a group.
+	 */
+	group?: (props: BaseSelectGroupSlotProps<Item>) => any;
+	/**
+	 * Content rendered after the option list, inside the dropdown panel.
+	 */
+	'options:append'?: (props: BaseSelectFocusSlotProps) => any;
+	/**
+	 * Content rendered after the dropdown panel, outside the scrollable options area.
+	 */
+	'options:append:outer'?: (props: BaseSelectFocusSlotProps) => any;
+	/**
+	 * Content rendered before the option list, inside the dropdown panel.
+	 */
+	'options:prepend'?: (props: BaseSelectFocusSlotProps) => any;
+	/**
+	 * Content rendered before the dropdown panel, outside the scrollable options area.
+	 */
+	'options:prepend:outer'?: (props: BaseSelectFocusSlotProps) => any;
+	/**
+	 * Inline content rendered at the start of the input field area, before the selected value text.
+	 */
+	prefix?: (props: object) => any;
+	/**
+	 * Content rendered before the input area, at the start of the inner container.
+	 */
+	prepend?: (props: BaseSelectQueryFocusSlotProps) => any;
+	/**
+	 * Content rendered before the entire select control, outside the input chrome.
+	 */
+	'prepend-outer'?: (props: BaseSelectQueryOnlySlotProps) => any;
+	/**
+	 * Inline content rendered at the end of the input field area, after the selected value text.
+	 */
+	suffix?: (props: object) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-base-select {
+	/* Get the inner height based on the largest contained element this is not to be edited with arbitrary values */
+	--bb-input-inner-h: max(
+		calc(var(--bb-leading) + var(--bb-input-py) * 2),
+		calc(var(--bb-input-h) - 2px),
+		var(--bb-input-icon)
+	);
+	--floating-py: calc((var(--bb-input-inner-h) - var(--bb-input-icon)) / 2);
+	--bb-arrow: 0;
+	box-sizing: border-box;
+	display: inline-flex;
+	scroll-margin: 10px;
+	width: 100%;
+
+	&--active {
+		.bb-base-select__text-input {
+			/* Approximate the length of the text as min width so the character doesn't go into a newline as often*/
+			min-width: min(100%, calc(var(--characters) * 12px));
+		}
+	}
+	&--loading {
+	}
+	&--disabled {
+	}
+	&--errors {
+	}
+	&--readonly {
+	}
+	&--compact {
+		--floating-py: var(--bb-input-compact-floating-py);
+
+		.bb-chipsbox-item {
+			min-height: 20px;
+		}
+	}
+
+	&--shown {
+		.bb-base-select__chevron {
+			transform: rotate(180deg);
+		}
+	}
+
+	.bb-smooth-height {
+		align-self: center;
+		text-align: left;
+		width: 100%;
+	}
+	.bb-base-select__inner-wrapper {
+		display: block;
+		flex: 1 1 auto;
+
+		.bb-common-input-inner-container {
+			position: relative;
+			align-items: flex-start;
+			width: 100%;
+
+			> .bb-clearable-button {
+				margin-top: var(--floating-py);
+			}
+			> .bb-spinner {
+				margin-top: var(--floating-py);
+			}
+			> .bb-error-icon {
+				margin-top: var(--floating-py);
+			}
+			> .bb-common-input-inner-container__prepend-icon,
+			> .bb-common-input-inner-container__append-icon {
+				margin-top: var(--floating-py);
+			}
+
+			> .bb-common-input-inner-container__prefix,
+			> .bb-common-input-inner-container__suffix {
+				height: var(--bb-input-inner-h);
+			}
+
+			:last-child:not(.bb-error-icon) {
+				order: 1;
+			}
+		}
+	}
+	.bb-listbox {
+		--option-h: var(--option-height);
+		display: block;
+
+		&.bb-listbox--open {
+			transition: min-height 0s 0s;
+
+			.bb-listbox__outer-container {
+				grid-template-rows: 1fr;
+				opacity: 1;
+				transition-delay: 0s, 00ms;
+
+				> * {
+					opacity: 1;
+					transition-delay: calc(var(--transition-duration) * 0.8);
+				}
+			}
+		}
+		&.bb-listbox--no-data {
+			.bb-listbox__outer-container {
+				.bb-listbox__inner-container {
+					.bb-listbox__no-data {
+						display: block;
+					}
+				}
+			}
+		}
+		&.bb-listbox--loading {
+			.bb-listbox__outer-container {
+				.bb-listbox__inner-container {
+					.bb-listbox__loading {
+						display: block;
+						text-align: left;
+					}
+					.bb-listbox__loading {
+						display: hidden;
+					}
+				}
+			}
+		}
+
+		&.bb-listbox--multiple {
+			.autocomplete-option__checkbox {
+				display: inline-block !important;
+			}
+		}
+
+		.bb-listbox__outer-container {
+			background-color: var(--bb-panel);
+			border-color: var(--bb-primary);
+			border-radius: var(--bb-radius);
+			border-width: 0px;
+			display: grid;
+			grid-template-rows: 0fr;
+			opacity: 0;
+			transition-delay: calc(var(--transition-duration) * 0.25), 0s, 0s;
+			transition-duration:
+				var(--transition-duration), calc(var(--transition-duration) * 1.4),
+				var(--transition-duration);
+			transition-property: grid-template-rows, opacity, border;
+
+			> * {
+				opacity: 0;
+				transition-delay: 0s;
+				transition-duration: calc(var(--transition-duration) * 2);
+				transition-property: opacity;
+			}
+
+			.bb-listbox__inner-container {
+				overflow: auto;
+				text-align: left;
+				/* Always show options up to the bottom of the screen, but not more than 6 options */
+				max-height: min(
+					calc(var(--option-h) * 6),
+					calc(round(down, calc(100dvh - 130px), var(--option-h)) - 1px)
+				);
+
+				.bb-listbox__loading,
+				.bb-listbox__no-data {
+					color: var(--bb-text);
+					display: none;
+					padding-bottom: var(--bb-select-option-py);
+					padding-left: var(--bb-select-option-px);
+					padding-right: var(--bb-select-option-px);
+					padding-top: var(--bb-select-option-py);
+				}
+
+				span[role='listbox'] {
+					position: relative;
+					width: 100%;
+					display: block;
+
+					.bb-listbox__group {
+						left: 0;
+						position: absolute;
+						top: 0;
+						width: 100%;
+						display: block;
+					}
+
+					.bb-listbox__group-header {
+						display: flex;
+						align-items: center;
+						height: var(--group-header-height, 32px);
+						padding-left: var(--bb-select-option-px);
+						padding-right: var(--bb-select-option-px);
+
+						user-select: none;
+
+						.bb-listbox__group-header-label {
+							display: flex;
+							align-items: center;
+							gap: 16px;
+							flex: auto;
+							text-align: left;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+							color: color-mix(in srgb, var(--bb-text) 50%, transparent);
+							font-size: 0.75rem;
+							font-weight: 600;
+							letter-spacing: 0.025em;
+							text-transform: uppercase;
+
+							&::after {
+								content: '';
+								display: block;
+								width: 100%;
+								height: 1px;
+								background-color: var(--bb-border);
+							}
+						}
+					}
+
+					.bb-listbox__option {
+						left: 0;
+						position: absolute;
+						display: block;
+						top: 0;
+						width: 100%;
+					}
+
+					.bb-listbox__group > .bb-listbox__option {
+						position: static;
+					}
+
+					.autocomplete-option {
+						--bg-opacity: 0;
+						--bg-base-color: var(--bb-text);
+						align-items: center;
+						background-color: color-mix(
+							in srgb,
+							var(--bg-base-color) calc(100% * var(--bg-opacity)),
+							transparent
+						);
+						color: var(--bb-text);
+						cursor: pointer;
+						display: flex;
+						flex-grow: 1;
+						gap: 8px;
+						height: var(--option-h);
+						padding-left: var(--bb-select-option-px);
+						padding-right: var(--bb-select-option-px);
+						transition-duration: 250ms;
+						transition-property: color, background-color;
+						transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+						width: 100%;
+
+						&:hover:not(.autocomplete-option--disabled) {
+							--bg-opacity: 0.05;
+							--bg-base-color: var(--bb-text);
+						}
+
+						&--focused {
+							--bg-opacity: 0.15;
+							--bg-base-color: var(--bb-text);
+						}
+
+						&--focused:hover:not(.autocomplete-option--disabled) {
+							--bg-opacity: 0.2;
+						}
+
+						&--selected {
+							--bg-opacity: 0.1;
+							--bg-base-color: var(--bb-primary) !important;
+							color: var(--bb-primary);
+						}
+
+						&--selected:hover:not(.autocomplete-option--disabled) {
+							--bg-opacity: 0.15;
+						}
+
+						&--selected.autocomplete-option--focused {
+							--bg-opacity: 0.2;
+						}
+
+						&--selected.autocomplete-option--focused:hover:not(
+								.autocomplete-option--disabled
+							) {
+							--bg-opacity: 0.2;
+						}
+
+						&--disabled {
+							cursor: not-allowed;
+							opacity: 0.5;
+
+							.autocomplete-option__checkbox.autocomplete-option__checkbox {
+								background-color: var(--bb-panel-disabled);
+							}
+						}
+
+						.autocomplete-option__checkbox {
+							pointer-events: none;
+							display: none;
+							width: 16px;
+							height: 16px;
+							background-color: var(--bb-panel);
+							border-color: var(--bb-border);
+							border-radius: min(6px, var(--bb-radius));
+							border-style: solid;
+							border-width: 1px;
+							margin-left: -6px;
+							transition-duration: 300ms;
+							transition-property:
+								color, background-color, border-color, text-decoration-color,
+								box-shadow;
+							transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+							path {
+								stroke: var(--bb-contrasting);
+								stroke-dasharray: 105;
+								stroke-dashoffset: 105;
+								transition: stroke-dashoffset 0.3s;
+							}
+						}
+
+						.autocomplete-option__label {
+							display: block;
+							flex: auto;
+							text-align: left;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+
+						&.autocomplete-option--selected {
+							.autocomplete-option__checkbox {
+								background-color: var(--bb-primary);
+								border-color: var(--bb-primary);
+
+								path {
+									stroke-dashoffset: 0;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&__input-container {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+		padding-bottom: var(--bb-input-py);
+		padding-top: var(--bb-input-py);
+	}
+	&__max-reached {
+		border-right: 1px solid var(--bb-border);
+		color: var(--bb-input-color);
+		font-size: var(--bb-input-font-size);
+		padding-right: 4px;
+	}
+	.bb-chipsbox-item {
+		position: relative;
+		z-index: 1;
+	}
+	.bb-commabox-item {
+	}
+
+	.bb-base-select__text-input {
+		flex-basis: 0px !important;
+		flex-grow: 1 !important;
+		flex-shrink: 10000 !important;
+		margin-bottom: 0px;
+		margin-top: 0px;
+		min-width: 0;
+	}
+
+	&__chevron {
+		background-color: inherit;
+		color: var(--bb-icon-color);
+		flex-shrink: 0;
+		margin-top: var(--floating-py);
+		order: 1;
+		transform: rotate(0deg);
+		transition: transform 0.2s ease-in-out;
+		width: var(--bb-input-icon);
+	}
+}
+```