bitboss-ui 2.1.113 → 2.1.115

package/dist/ai/BaseDatePickerInput.md

@@ -0,0 +1,1517 @@
+# BaseDatePickerInput
+
+## Template & Script
+
+```vue
+<template>
+	<CommonInputOuterContainer
+		ref="outerContainer"
+		:class="classes"
+		@focusin="onFocusIn"
+	>
+		<template #prepend-outer><slot name="prepend-outer"></slot></template>
+
+		<div class="bb-base-date-picker-input__inner-wrapper">
+			<CommonInputInnerContainer
+				ref="innerContainer"
+				:append:icon="props['append:icon']"
+				:clearable="props.clearable && !isEmpty(modelValue)"
+				:prepend:icon="props['prepend:icon']"
+				@click:clear="onClickClear"
+			>
+				<template #prepend><slot name="prepend" /></template>
+				<template #prefix><slot name="prefix" /></template>
+
+				<div
+					class="bb-base-date-picker-input__fields"
+					:class="{
+						'bb-base-date-picker-input__fields--empty': showPlaceholder,
+						'bb-base-date-picker-input__fields--range': range,
+					}"
+				>
+					<span
+						v-if="showPlaceholder"
+						aria-hidden="true"
+						class="bb-base-date-picker-input__placeholder"
+						@click="focusFirstField"
+					>
+						{{ placeholderText }}
+					</span>
+					<template
+						v-for="(descriptor, index) in fieldOrder"
+						:key="descriptorKey(descriptor)"
+					>
+						<input
+							:id="getFieldId(descriptor)"
+							:ref="
+								(el) =>
+									(fieldRefs[descriptorKey(descriptor)] =
+										el as HTMLInputElement)
+							"
+							:aria-describedby="descriptionId"
+							:aria-invalid="props.hasErrors ? 'true' : undefined"
+							:aria-label="getFieldLabel(descriptor)"
+							:autocomplete="autocomplete"
+							:autofocus="autofocus && index === 0"
+							:class="[
+								'bb-base-date-picker-input__field',
+								`bb-base-date-picker-input__field--${descriptor.field}`,
+								`bb-base-date-picker-input__field--${descriptor.segment}`,
+							]"
+							:disabled="disabled"
+							:inputmode="inputmode"
+							:maxlength="descriptor.field === 'year' ? 4 : 2"
+							:name="getFieldName(descriptor)"
+							:readonly="isInputReadonly"
+							:required="required"
+							:tabindex="index % 3 === 0 ? 0 : -1"
+							type="text"
+							:value="fields[descriptor.segment][descriptor.field]"
+							@blur="onFieldBlur(descriptor)"
+							@focus="onFieldFocus(descriptor)"
+							@input="onFieldInput(descriptor, $event)"
+							@keydown="onFieldKeydown(descriptor, $event)"
+							@paste="onFieldPaste(descriptor, $event)"
+						/>
+						<span
+							v-if="index < fieldOrder.length - 1"
+							aria-hidden="true"
+							class="bb-base-date-picker-input__separator"
+							:class="{
+								'bb-base-date-picker-input__separator--range':
+									fieldOrder[index].segment !== fieldOrder[index + 1].segment,
+							}"
+							@click="focusField(fieldOrder[index + 1], { select: true })"
+							>{{
+								fieldOrder[index].segment !== fieldOrder[index + 1].segment
+									? '–'
+									: '/'
+							}}</span
+						>
+					</template>
+				</div>
+
+				<button
+					v-if="!isPopoverHidden"
+					:aria-label="accessibleButtonLabel"
+					:aria-controls="calendarId"
+					:aria-expanded="shown"
+					aria-haspopup="dialog"
+					class="bb-base-date-picker-input__calendar-btn"
+					:disabled="disabled || readonly"
+					type="button"
+					@click.stop="open"
+				>
+					<svg
+						fill="none"
+						viewBox="0 0 16 16"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M12.6667 2.66667H3.33333C2.59695 2.66667 2 3.26363 2 4.00001V13.3333C2 14.0697 2.59695 14.6667 3.33333 14.6667H12.6667C13.403 14.6667 14 14.0697 14 13.3333V4.00001C14 3.26363 13.403 2.66667 12.6667 2.66667Z"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							d="M10.6667 1.33333V3.99999"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							d="M5.33333 1.33333V3.99999"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							d="M2 6.66667H14"
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				</button>
+				<span
+					:id="descriptionId"
+					class="bb-base-date-picker-input__accessible-description sr-only"
+					>{{ t('baseDatePickerInput.dateFormat') }}
+					{{
+						props.range
+							? t('baseDatePickerInput.dateFormatRange')
+							: t('baseDatePickerInput.dateFormatSingle')
+					}}</span
+				>
+				<template #append><slot name="append" /></template>
+				<template #suffix><slot name="suffix" /></template>
+			</CommonInputInnerContainer>
+		</div>
+
+		<CommonPopover
+			v-model="shown"
+			:anchor="innerContainer"
+			dialog
+			:offset="4"
+			:transition-duration="transitionDuration"
+		>
+			<div
+				:id="calendarId"
+				ref="calendar"
+				class="bb-base-date-picker-input__calendar"
+				:class="{
+					'bb-base-date-picker-input__calendar--shown': shown,
+				}"
+				:inert="!shown"
+			>
+				<BaseDatePicker
+					:id="id"
+					v-bind="calendarEventListeners"
+					ref="baseDatePicker"
+					:disabled="disabled"
+					:first-day-of-week="firstDayOfWeek"
+					:floating="floating"
+					:max="max"
+					:min="min"
+					:model-value="modelValue"
+					:range="range"
+					:readonly="readonly"
+					:selectable="selectable"
+				/>
+			</div>
+		</CommonPopover>
+		<template #append-outer><slot name="append-outer"></slot></template>
+	</CommonInputOuterContainer>
+</template>
+
+<script setup lang="ts">
+import { _config } from '@/composables/useBbConfig';
+import { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
+import { Dayjs, default as dayjs } from 'dayjs';
+import { default as customParseFormat } from 'dayjs/plugin/customParseFormat';
+import { default as en } from 'dayjs/locale/en';
+import { default as isSameOrAfter } from 'dayjs/plugin/isSameOrAfter';
+import { default as isSameOrBefore } from 'dayjs/plugin/isSameOrBefore';
+import { default as it } from 'dayjs/locale/it';
+import { isEmpty } from '@/utilities/functions/empty';
+import { useId } from '@/composables/useId';
+import { useLocale } from '@/composables/useLocale';
+import { useLogger } from '@/composables/useLogger';
+import { useMobile } from '@/composables/useMobile';
+import BaseDatePicker from '../BaseDatePicker/BaseDatePicker.vue';
+import CommonInputInnerContainer from '../CommonInputInnerContainer/CommonInputInnerContainer.vue';
+import CommonInputOuterContainer from '../CommonInputOuterContainer/CommonInputOuterContainer.vue';
+import CommonPopover from '../CommonPopover/CommonPopover.vue';
+import type {
+	BaseDatePickerInputProps,
+	BaseDatePickerInputEvents,
+	BaseDatePickerInputSlots,
+	DatePickerInputError,
+} from './types';
+
+const locales = { it, en };
+
+dayjs.extend(customParseFormat);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+watchEffect(() => {
+	dayjs.locale(locales[_config.locale] ?? en);
+});
+
+const props = withDefaults(defineProps<BaseDatePickerInputProps>(), {
+	allowWriting: true,
+	autocomplete: 'off',
+});
+
+const emit = defineEmits<BaseDatePickerInputEvents>();
+
+defineSlots<BaseDatePickerInputSlots>();
+
+const { t } = useLocale();
+const logger = useLogger();
+
+const BOUNDARY_DATE_FORMAT = 'YYYY-MM-DD';
+
+const calendar = ref<HTMLElement | null>(null);
+const outerContainer = ref<InstanceType<
+	typeof CommonInputOuterContainer
+> | null>(null);
+const innerContainer = ref<InstanceType<
+	typeof CommonInputInnerContainer
+> | null>(null);
+const baseDatePicker = ref<InstanceType<typeof BaseDatePicker> | null>(null);
+const id = props.id || `bdpi-${useId().id.value}`;
+const descriptionId = `bdpi-description_${id}`;
+const calendarId = `bdpi-calendar_${id}`;
+
+const { isMobile } = useMobile();
+const isWritingAllowed = computed(() => {
+	if (props.allowWriting === 'not-mobile') return !isMobile.value;
+	return !!props.allowWriting;
+});
+
+const isPopoverHidden = computed(() => {
+	if (props.hidePopover === 'not-mobile') return !isMobile.value;
+	return !!props.hidePopover;
+});
+
+const isInputReadonly = computed(
+	() => !!props.readonly || !isWritingAllowed.value
+);
+
+const inputmode = computed(() => (isWritingAllowed.value ? 'numeric' : 'none'));
+
+const classes = computed(() => ({
+	'bb-base-date-picker-input': true,
+	'bb-base-date-picker-input--active': active.value,
+	'bb-base-date-picker-input--errors': props.hasErrors,
+	'bb-base-date-picker-input--loading': props.loading,
+	'bb-base-date-picker-input--readonly': props.readonly,
+	'bb-base-date-picker-input--disabled': props.disabled,
+	'bb-base-date-picker-input--compact': props.compact,
+	'bb-base-date-picker-input--range': props.range,
+}));
+
+if (props.min) {
+	if (!dayjs(props.min, BOUNDARY_DATE_FORMAT, true).isValid()) {
+		logger.throw('BaseDatePickerInput: min must be in the format YYYY-MM-DD');
+	}
+}
+
+if (props.max) {
+	if (!dayjs(props.max, BOUNDARY_DATE_FORMAT, true).isValid()) {
+		logger.throw('BaseDatePickerInput: max must be in the format YYYY-MM-DD');
+	}
+}
+
+// Validate that at least one interaction method is available on each platform.
+// Desktop: writing is on when allowWriting is true or 'not-mobile'; popover is on when hidePopover is not true.
+// Mobile:  writing is on when allowWriting is true; popover is on when hidePopover is not 'not-mobile' and not true.
+const desktopHasWriting = props.allowWriting !== false;
+const desktopHasPopover = props.hidePopover !== true;
+const mobileHasWriting = props.allowWriting === true;
+const mobileHasPopover =
+	props.hidePopover !== true && props.hidePopover !== 'not-mobile';
+
+if (!desktopHasWriting && !desktopHasPopover) {
+	logger.throw(
+		'BaseDatePickerInput: desktop users would have no interaction method — allowWriting:false and hidePopover:true cannot be combined.'
+	);
+}
+if (!mobileHasWriting && !mobileHasPopover) {
+	logger.throw(
+		'BaseDatePickerInput: mobile users would have no interaction method — combine allowWriting:"not-mobile" with hidePopover:"not-mobile" to allow the calendar in mobile while still hiding the virtual keyboard.'
+	);
+}
+
+const toOuterValue = (value: Dayjs): string => {
+	if (props.floating) {
+		return value.format(BOUNDARY_DATE_FORMAT);
+	}
+	return value.toISOString();
+};
+
+const toInnerValue = (value: string): Dayjs => {
+	if (props.floating) {
+		return dayjs(value, BOUNDARY_DATE_FORMAT, true);
+	}
+	return dayjs(value);
+};
+
+/**
+ * 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 calendar so
+ * we track it manually.
+ */
+const active = ref(false);
+
+const onFocusIn = () => {
+	if (active.value) return;
+	emit('active');
+	active.value = true;
+	document.addEventListener('focusin', onDocumentInteraction);
+	document.addEventListener('click', onDocumentInteraction);
+};
+
+const onDocumentInteraction = (event: Event) => {
+	const target = event.target;
+	if (!(target instanceof HTMLElement)) return;
+	if (!outerContainer.value?.$el) return;
+	if (outerContainer.value.$el.contains(target)) return;
+	if (calendar.value?.contains(target)) return;
+
+	// Restore fields to match modelValue when focus leaves the component
+	// This ensures coherence if user left fields in incomplete state
+	restoreFieldsFromModelValue();
+
+	active.value = false;
+	emit('inactive');
+	document.removeEventListener('focusin', onDocumentInteraction);
+	document.removeEventListener('click', onDocumentInteraction);
+};
+
+/**
+ * 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.
+ */
+
+// Option panel is open
+const shown = ref(false);
+
+const onClickDocument = (event: Event) => {
+	const target = event.target;
+	if (!target) return;
+	if (target instanceof HTMLDialogElement) {
+		shown.value = false;
+	}
+};
+
+const open = () => {
+	if (props.disabled || props.readonly || isPopoverHidden.value) return;
+	shown.value = true;
+};
+
+watch(shown, (value) => {
+	if (value) {
+		document.addEventListener('click', onClickDocument, { passive: true });
+	} else {
+		baseDatePicker.value?.resetStatus();
+		document.removeEventListener('click', onClickDocument);
+	}
+});
+
+const satisfiesSelection = (value: typeof props.modelValue) => {
+	if (props.range) {
+		return Array.isArray(value) && value.length === 2;
+	} else {
+		return !!value;
+	}
+};
+
+/**
+ * These events are just propagated
+ */
+const calendarEventListeners = {
+	'onUpdate:modelValue': (value: string | string[] | null) => {
+		emit('update:modelValue', value);
+		if (satisfiesSelection(value)) {
+			shown.value = false;
+		}
+	},
+};
+
+const accessibleButtonLabel = computed(() => {
+	if (props.range) {
+		const values = Array.isArray(props.modelValue) ? props.modelValue : [];
+		const [startRaw, endRaw] = values;
+		if (!startRaw || !endRaw) return t('baseDatePickerInput.emptyRange').value;
+
+		const start = toInnerValue(startRaw);
+		const end = toInnerValue(endRaw);
+		if (!start.isValid() || !end.isValid())
+			return t('baseDatePickerInput.emptyRange').value;
+
+		return t(
+			'baseDatePickerInput.changeSelectionRange',
+			start.format('D MMMM YYYY'),
+			end.format('D MMMM YYYY')
+		).value;
+	}
+
+	if (typeof props.modelValue === 'string') {
+		const parsed = toInnerValue(props.modelValue);
+		if (!parsed.isValid()) return t('baseDatePickerInput.emptySelection').value;
+
+		return t(
+			'baseDatePickerInput.changeSelection',
+			parsed.format('D MMMM YYYY')
+		).value;
+	}
+	return t('baseDatePickerInput.emptySelection').value;
+});
+
+const isDateDisabled = (date: Dayjs) => {
+	if (!date.isValid()) return true;
+
+	let passing = true;
+	if (props.min) {
+		const min = dayjs(props.min, BOUNDARY_DATE_FORMAT, true);
+		passing &&= date.isSameOrAfter(min);
+	}
+	if (props.max) {
+		const max = dayjs(props.max, BOUNDARY_DATE_FORMAT, true);
+		passing &&= date.isSameOrBefore(max);
+	}
+	if (typeof props.selectable === 'function') {
+		passing &&= props.selectable(toOuterValue(date));
+	}
+	return !passing;
+};
+
+const onClickClear = () => {
+	if (props.range) {
+		emit('update:modelValue', []);
+	} else {
+		emit('update:modelValue', null);
+	}
+};
+
+// ==========================================================================
+// Segmented field system — used for both single and range modes
+// ==========================================================================
+
+type DateFieldKey = 'day' | 'month' | 'year';
+type Segment = 'start' | 'end';
+type FieldDescriptor = { segment: Segment; field: DateFieldKey };
+
+const descriptorKey = (d: FieldDescriptor) => `${d.segment}.${d.field}`;
+
+const dateFieldOrder = computed<DateFieldKey[]>(() => {
+	// For Italian and most European locales, use DD/MM/YYYY
+	// For English and US locales, use MM/DD/YYYY
+	const locale = _config.locale;
+	if (locale === 'en') return ['month', 'day', 'year'];
+	return ['day', 'month', 'year'];
+});
+
+const fieldOrder = computed<FieldDescriptor[]>(() => {
+	const order = dateFieldOrder.value;
+	const start: FieldDescriptor[] = order.map((field) => ({
+		segment: 'start',
+		field,
+	}));
+	if (!props.range) return start;
+	const end: FieldDescriptor[] = order.map((field) => ({
+		segment: 'end',
+		field,
+	}));
+	return [...start, ...end];
+});
+
+const emptyFieldGroup = (): Record<DateFieldKey, string> => ({
+	day: '',
+	month: '',
+	year: '',
+});
+
+const fields = ref<Record<Segment, Record<DateFieldKey, string>>>({
+	start: emptyFieldGroup(),
+	end: emptyFieldGroup(),
+});
+
+const fieldRefs: Record<string, HTMLInputElement | null> = {};
+
+const isOwnField = (el: Element) => {
+	for (const key in fieldRefs) {
+		if (fieldRefs[key] === el) return true;
+	}
+	return false;
+};
+
+const getFieldId = (d: FieldDescriptor): string => {
+	if (!props.range) return `${id}-${d.field}`;
+	return `${id}-${d.segment}-${d.field}`;
+};
+
+const getFieldName = (d: FieldDescriptor): string | undefined => {
+	if (!props.name) return undefined;
+	if (!props.range) return `${props.name}-${d.field}`;
+	return `${props.name}-${d.segment}-${d.field}`;
+};
+
+const getFieldLabel = (descriptor: FieldDescriptor): string => {
+	const base: Record<DateFieldKey, string> = {
+		day: 'Day',
+		month: 'Month',
+		year: 'Year',
+	};
+	if (!props.range) return base[descriptor.field];
+	const prefix = descriptor.segment === 'start' ? 'Start' : 'End';
+	return `${prefix} ${base[descriptor.field].toLowerCase()}`;
+};
+
+const placeholderText = computed(() => {
+	if (props.placeholder) return props.placeholder;
+	if (props.range) return 'DD/MM/YYYY – DD/MM/YYYY';
+	return 'DD/MM/YYYY';
+});
+
+const showPlaceholder = computed(() => {
+	const s = fields.value.start;
+	const startEmpty = !s.day && !s.month && !s.year;
+	if (!props.range) return startEmpty;
+	const e = fields.value.end;
+	const endEmpty = !e.day && !e.month && !e.year;
+	return startEmpty && endEmpty;
+});
+
+const parseValueToFieldGroup = (
+	value: string | null | undefined
+): Record<DateFieldKey, string> => {
+	if (!value) return emptyFieldGroup();
+	const parsed = toInnerValue(value);
+	if (!parsed.isValid()) return emptyFieldGroup();
+	return {
+		day: parsed.format('DD'),
+		month: parsed.format('MM'),
+		year: parsed.format('YYYY'),
+	};
+};
+
+const parseModelValueToFields = (value: typeof props.modelValue) => {
+	if (!value) {
+		fields.value = { start: emptyFieldGroup(), end: emptyFieldGroup() };
+		return;
+	}
+	if (props.range) {
+		const arr = Array.isArray(value) ? value : [];
+		const [startRaw, endRaw] = arr;
+		fields.value = {
+			start: parseValueToFieldGroup(startRaw),
+			end: parseValueToFieldGroup(endRaw),
+		};
+		return;
+	}
+	if (Array.isArray(value)) {
+		fields.value = { start: emptyFieldGroup(), end: emptyFieldGroup() };
+		return;
+	}
+	fields.value = {
+		start: parseValueToFieldGroup(value),
+		end: emptyFieldGroup(),
+	};
+};
+
+/**
+ * Restores the field inputs to match the current modelValue.
+ * Called when focus leaves the component to ensure display coherence.
+ */
+const restoreFieldsFromModelValue = () => {
+	parseModelValueToFields(props.modelValue);
+};
+
+// Initialize fields from modelValue
+parseModelValueToFields(props.modelValue);
+
+// Watch for external modelValue changes
+watch(
+	() => props.modelValue,
+	(value) => {
+		// Always clear fields when modelValue is cleared from outside
+		if (value === null || (Array.isArray(value) && value.length === 0)) {
+			parseModelValueToFields(value);
+			return;
+		}
+
+		// Only update if not currently editing (to avoid overwriting user input)
+		const activeEl = document.activeElement;
+		if (activeEl && isOwnField(activeEl)) return;
+		parseModelValueToFields(value);
+	}
+);
+
+const focusField = (
+	descriptor: FieldDescriptor,
+	options: {
+		select?: boolean;
+		caretToEnd?: boolean;
+		caretToStart?: boolean;
+	} = {}
+) => {
+	const input = fieldRefs[descriptorKey(descriptor)];
+	if (!input) return;
+	input.focus();
+	if (options.select) input.select();
+	else if (options.caretToEnd)
+		input.setSelectionRange(input.value.length, input.value.length);
+	else if (options.caretToStart) input.setSelectionRange(0, 0);
+};
+
+const focusFirstField = () => {
+	focusField(fieldOrder.value[0]);
+};
+
+const findDescriptorIndex = (descriptor: FieldDescriptor) =>
+	fieldOrder.value.findIndex(
+		(d) => d.segment === descriptor.segment && d.field === descriptor.field
+	);
+
+const advanceFromField = (descriptor: FieldDescriptor) => {
+	const idx = findDescriptorIndex(descriptor);
+	if (idx < fieldOrder.value.length - 1) {
+		focusField(fieldOrder.value[idx + 1], { select: true });
+	}
+};
+
+const retreatFromField = (descriptor: FieldDescriptor) => {
+	const idx = findDescriptorIndex(descriptor);
+	if (idx > 0) focusField(fieldOrder.value[idx - 1], { caretToEnd: true });
+};
+
+type SegmentStatus = 'empty' | 'partial' | 'complete';
+
+const segmentStatus = (segment: Segment): SegmentStatus => {
+	const g = fields.value[segment];
+	const filledCount = (g.day ? 1 : 0) + (g.month ? 1 : 0) + (g.year ? 1 : 0);
+	if (filledCount === 0) return 'empty';
+	// Year must be 4 digits to disambiguate; day/month can be 1 or 2 (they'll be
+	// padded by parseSegmentAndCorrect before emission).
+	if (g.day && g.month && g.year && g.year.length === 4) return 'complete';
+	return 'partial';
+};
+
+const parseSegmentAndCorrect = (segment: Segment): Dayjs | null => {
+	const g = fields.value[segment];
+	if (!g.day || !g.month || !g.year) return null;
+
+	const dayNum = parseInt(g.day, 10);
+	const monthNum = parseInt(g.month, 10);
+	const yearNum = parseInt(g.year, 10);
+
+	if (
+		dayNum < 1 ||
+		dayNum > 31 ||
+		monthNum < 1 ||
+		monthNum > 12 ||
+		yearNum < 1000 ||
+		yearNum > 9999
+	) {
+		return null;
+	}
+
+	const year = g.year.padStart(4, '0');
+	const month = g.month.padStart(2, '0');
+	const day = g.day.padStart(2, '0');
+	const dateString = `${year}-${month}-${day}`;
+	let parsed = dayjs(dateString, BOUNDARY_DATE_FORMAT, true);
+
+	// If date is invalid (e.g., Feb 31), snap to the last valid day of that month
+	if (!parsed.isValid()) {
+		const lastDayOfMonth = dayjs(
+			`${year}-${month}-01`,
+			BOUNDARY_DATE_FORMAT,
+			true
+		)
+			.endOf('month')
+			.date();
+		const correctedDay = Math.min(dayNum, lastDayOfMonth);
+		const correctedDateString = `${year}-${month}-${String(correctedDay).padStart(2, '0')}`;
+		parsed = dayjs(correctedDateString, BOUNDARY_DATE_FORMAT, true);
+		fields.value[segment].day = String(correctedDay).padStart(2, '0');
+	}
+
+	return parsed.isValid() ? parsed : null;
+};
+
+/**
+ * Converts a Dayjs into the three display field strings (DD, MM, YYYY) used by the inputs.
+ */
+const dayjsToFieldGroup = (d: Dayjs): Record<DateFieldKey, string> => ({
+	day: d.format('DD'),
+	month: d.format('MM'),
+	year: d.format('YYYY'),
+});
+
+/**
+ * Attempts to snap a disabled date to the nearest valid boundary.
+ *
+ * - If the date is below `min`, returns `min` (provided `min` itself passes all constraints).
+ * - If the date is above `max`, returns `max` (same caveat).
+ * - If the date is disabled only by `selectable` (i.e. within min/max), there is no
+ *   deterministic "closest" value, so `null` is returned and the caller should remove it.
+ */
+const normalizeDisabledDate = (date: Dayjs): Dayjs | null => {
+	let candidate = date;
+	if (props.min) {
+		const min = dayjs(props.min, BOUNDARY_DATE_FORMAT, true);
+		if (candidate.isBefore(min, 'day')) candidate = min;
+	}
+	if (props.max) {
+		const max = dayjs(props.max, BOUNDARY_DATE_FORMAT, true);
+		if (candidate.isAfter(max, 'day')) candidate = max;
+	}
+	// No boundary clamping happened → date is disabled by `selectable` only
+	if (candidate.isSame(date, 'day')) return null;
+	// The boundary itself might be blocked by `selectable`
+	if (isDateDisabled(candidate)) return null;
+	return candidate;
+};
+
+const emitError = (error: DatePickerInputError) => {
+	logger.warn(
+		`[${error.code}] original: ${JSON.stringify(error.original)} → normalized: ${JSON.stringify(error.normalized)}`
+	);
+	emit('error', error);
+};
+
+const combineFieldsToModelValue = (): void => {
+	const startStatus = segmentStatus('start');
+
+	if (!props.range) {
+		if (startStatus === 'empty') {
+			emit('update:modelValue', null);
+			return;
+		}
+		if (startStatus === 'partial') return;
+
+		const parsed = parseSegmentAndCorrect('start');
+		if (!parsed) return;
+		if (isDateDisabled(parsed)) {
+			const original = toOuterValue(parsed);
+			const candidate = normalizeDisabledDate(parsed);
+			if (candidate) {
+				const normalized = toOuterValue(candidate);
+				fields.value.start = dayjsToFieldGroup(candidate);
+				emit('update:modelValue', normalized);
+				emitError({ code: 'disabled_date', original, normalized });
+			} else {
+				fields.value.start = emptyFieldGroup();
+				emit('update:modelValue', null);
+				emitError({ code: 'disabled_date', original, normalized: null });
+			}
+			return;
+		}
+		emit('update:modelValue', toOuterValue(parsed));
+		return;
+	}
+
+	// ── Range mode ──────────────────────────────────────────────────────────────
+
+	const endStatus = segmentStatus('end');
+
+	if (startStatus === 'empty' && endStatus === 'empty') {
+		emit('update:modelValue', null);
+		return;
+	}
+	if (startStatus === 'partial' || endStatus === 'partial') return;
+	// end complete but start empty is ambiguous — defer until user fills start
+	if (startStatus === 'empty') return;
+
+	const startParsed = parseSegmentAndCorrect('start');
+	if (!startParsed) return;
+	const endParsed =
+		endStatus !== 'empty' ? parseSegmentAndCorrect('end') : null;
+
+	// Original outer values captured before any normalization
+	const startOriginal = toOuterValue(startParsed);
+	const endOriginal = endParsed ? toOuterValue(endParsed) : null;
+
+	// Normalize start if disabled ──────────────────────────────────────────────
+	let effectiveStart = startParsed;
+	let startNormalized = false;
+
+	if (isDateDisabled(startParsed)) {
+		const candidate = normalizeDisabledDate(startParsed);
+		const original: string[] = endOriginal
+			? [startOriginal, endOriginal]
+			: [startOriginal];
+		if (!candidate) {
+			fields.value.start = emptyFieldGroup();
+			fields.value.end = emptyFieldGroup();
+			emit('update:modelValue', null);
+			emitError({ code: 'disabled_range_start', original, normalized: null });
+			return;
+		}
+		effectiveStart = candidate;
+		startNormalized = true;
+		fields.value.start = dayjsToFieldGroup(candidate);
+		if (!endParsed) {
+			const normalized = [toOuterValue(candidate)];
+			emit('update:modelValue', normalized);
+			emitError({ code: 'disabled_range_start', original, normalized });
+			return;
+		}
+	}
+
+	if (!endParsed) {
+		emit('update:modelValue', [toOuterValue(effectiveStart)]);
+		return;
+	}
+
+	// Normalize end if disabled ────────────────────────────────────────────────
+	let effectiveEnd = endParsed;
+	let endNormalized = false;
+
+	if (isDateDisabled(endParsed)) {
+		const candidate = normalizeDisabledDate(endParsed);
+		const original: [string, string] = [startOriginal, endOriginal!];
+		if (!candidate) {
+			const normalized: [string] = [toOuterValue(effectiveStart)];
+			fields.value.end = emptyFieldGroup();
+			emit('update:modelValue', normalized);
+			if (startNormalized)
+				emitError({
+					code: 'disabled_range_start',
+					original,
+					normalized,
+				});
+			emitError({ code: 'disabled_range_end', original, normalized });
+			return;
+		}
+		effectiveEnd = candidate;
+		endNormalized = true;
+		fields.value.end = dayjsToFieldGroup(candidate);
+	}
+
+	// Ordering check ───────────────────────────────────────────────────────────
+	if (effectiveEnd.isBefore(effectiveStart, 'day')) {
+		const original: [string, string] = [
+			toOuterValue(effectiveStart),
+			toOuterValue(effectiveEnd),
+		];
+		const normalized: [string, string] = [
+			toOuterValue(effectiveEnd),
+			toOuterValue(effectiveStart),
+		];
+		const savedStart = { ...fields.value.start };
+		fields.value.start = { ...fields.value.end };
+		fields.value.end = savedStart;
+		emit('update:modelValue', normalized);
+		if (startNormalized)
+			emitError({
+				code: 'disabled_range_start',
+				original: [startOriginal, endOriginal!],
+				normalized,
+			});
+		if (endNormalized)
+			emitError({
+				code: 'disabled_range_end',
+				original: [startOriginal, endOriginal!],
+				normalized,
+			});
+		emitError({ code: 'end_before_start', original, normalized });
+		return;
+	}
+
+	// All valid ────────────────────────────────────────────────────────────────
+	const finalValue: [string, string] = [
+		toOuterValue(effectiveStart),
+		toOuterValue(effectiveEnd),
+	];
+	emit('update:modelValue', finalValue);
+	if (startNormalized)
+		emitError({
+			code: 'disabled_range_start',
+			original: endOriginal ? [startOriginal, endOriginal] : [startOriginal],
+			normalized: finalValue,
+		});
+	if (endNormalized)
+		emitError({
+			code: 'disabled_range_end',
+			original: [startOriginal, endOriginal!],
+			normalized: finalValue,
+		});
+};
+
+const onFieldInput = (descriptor: FieldDescriptor, event: Event) => {
+	const { segment, field } = descriptor;
+	const target = event.target as HTMLInputElement;
+	let value = target.value.replace(/\D/g, ''); // Only keep digits
+
+	const previous = fields.value[segment][field];
+
+	// Clamp values based on field type
+	if (field === 'day') {
+		if (value.length > 0) {
+			const num = parseInt(value, 10);
+			// Reject "00" or values over 31
+			if (value === '00' || num > 31) {
+				value = previous;
+			}
+		}
+	} else if (field === 'month') {
+		if (value.length > 0) {
+			const num = parseInt(value, 10);
+			// Reject "00" or values over 12
+			if (value === '00' || num > 12) {
+				value = previous;
+			}
+		}
+	} else if (field === 'year') {
+		value = value.slice(0, 4);
+	}
+
+	fields.value[segment][field] = value;
+	target.value = value;
+
+	// Smart auto-advance: if field is complete OR can't accept another digit
+	const maxLength = field === 'year' ? 4 : 2;
+	let shouldAdvance = value.length === maxLength;
+
+	// For single-digit day/month, check if another digit is possible
+	if (!shouldAdvance && value.length === 1) {
+		const num = parseInt(value, 10);
+		if (field === 'day' && num >= 4) {
+			// Days 4-9 can only be 04-09 (no valid 40+)
+			value = value.padStart(2, '0');
+			fields.value[segment][field] = value;
+			target.value = value;
+			shouldAdvance = true;
+		} else if (field === 'month' && num >= 2) {
+			// Months 2-9 can only be 02-09 (no valid 20+)
+			value = value.padStart(2, '0');
+			fields.value[segment][field] = value;
+			target.value = value;
+			shouldAdvance = true;
+		}
+	}
+
+	if (shouldAdvance) advanceFromField(descriptor);
+
+	combineFieldsToModelValue();
+};
+
+const onFieldKeydown = (descriptor: FieldDescriptor, event: KeyboardEvent) => {
+	const target = event.target as HTMLInputElement;
+
+	// Any of `/`, `-`, ` ` advances to the next field, padding a single digit first
+	if (event.key === '/' || event.key === '-' || event.key === ' ') {
+		event.preventDefault();
+		const current = fields.value[descriptor.segment][descriptor.field];
+		if (descriptor.field !== 'year' && current.length === 1) {
+			if (current === '0')
+				fields.value[descriptor.segment][descriptor.field] = '';
+			else
+				fields.value[descriptor.segment][descriptor.field] = current.padStart(
+					2,
+					'0'
+				);
+		}
+		advanceFromField(descriptor);
+		return;
+	}
+
+	// Backspace at start of field: go to previous field (don't swallow the delete
+	// otherwise — let the browser remove a digit normally).
+	if (
+		event.key === 'Backspace' &&
+		target.selectionStart === 0 &&
+		target.selectionEnd === 0
+	) {
+		const idx = findDescriptorIndex(descriptor);
+		if (idx > 0) {
+			event.preventDefault();
+			retreatFromField(descriptor);
+		}
+		return;
+	}
+
+	// Arrow left at start: go to previous field
+	if (event.key === 'ArrowLeft' && target.selectionStart === 0) {
+		const idx = findDescriptorIndex(descriptor);
+		if (idx > 0) {
+			event.preventDefault();
+			retreatFromField(descriptor);
+		}
+		return;
+	}
+
+	// Arrow right at end: go to next field
+	if (
+		event.key === 'ArrowRight' &&
+		target.selectionStart === target.value.length
+	) {
+		const idx = findDescriptorIndex(descriptor);
+		if (idx < fieldOrder.value.length - 1) {
+			event.preventDefault();
+			focusField(fieldOrder.value[idx + 1], { caretToStart: true });
+		}
+		return;
+	}
+};
+
+const onFieldFocus = (descriptor: FieldDescriptor) => {
+	// If all fields are empty and focusing a non-first field, redirect to first
+	const first = fieldOrder.value[0];
+	const allEmpty = fieldOrder.value.every(
+		(d) => !fields.value[d.segment][d.field]
+	);
+
+	if (
+		allEmpty &&
+		(descriptor.segment !== first.segment || descriptor.field !== first.field)
+	) {
+		requestAnimationFrame(() => focusField(first));
+		return;
+	}
+
+	// Select all on focus for easy replacement
+	const input = fieldRefs[descriptorKey(descriptor)];
+	if (input && input.value) {
+		requestAnimationFrame(() => input.select());
+	}
+};
+
+const onFieldBlur = (descriptor: FieldDescriptor) => {
+	const { segment, field } = descriptor;
+	// Pad values when blurring, but clear if it's just "0"
+	if (field === 'day' || field === 'month') {
+		const val = fields.value[segment][field];
+		if (val && val.length === 1) {
+			if (val === '0') fields.value[segment][field] = '';
+			else fields.value[segment][field] = val.padStart(2, '0');
+		}
+	}
+	combineFieldsToModelValue();
+};
+
+/**
+ * Paste handling: distribute digits across the remaining fields starting from the
+ * current one. This makes pasting strings like "01/02/2024" or
+ * "01/02/2024 - 03/04/2025" feel natural regardless of the original separators.
+ */
+const onFieldPaste = (descriptor: FieldDescriptor, event: ClipboardEvent) => {
+	const text = event.clipboardData?.getData('text') ?? '';
+	const digits = text.replace(/\D/g, '');
+	if (digits.length < 2) return; // let the native handler process single digits
+
+	event.preventDefault();
+
+	const startIndex = findDescriptorIndex(descriptor);
+	let cursor = 0;
+	let lastFilled: FieldDescriptor | null = null;
+
+	for (
+		let i = startIndex;
+		i < fieldOrder.value.length && cursor < digits.length;
+		i++
+	) {
+		const d = fieldOrder.value[i];
+		const maxLen = d.field === 'year' ? 4 : 2;
+		const slice = digits.slice(cursor, cursor + maxLen);
+		if (!slice) break;
+		fields.value[d.segment][d.field] = slice;
+		lastFilled = d;
+		cursor += maxLen;
+	}
+
+	if (lastFilled) {
+		const target = lastFilled;
+		requestAnimationFrame(() => focusField(target, { caretToEnd: true }));
+	}
+
+	combineFieldsToModelValue();
+};
+
+onBeforeUnmount(() => {
+	document.removeEventListener('focusin', onDocumentInteraction);
+	document.removeEventListener('click', onDocumentInteraction);
+	document.removeEventListener('click', onClickDocument);
+});
+</script>
+
+<style lang="postcss">
+@import './index.css';
+</style>
+```
+
+## Types
+
+```ts
+import type { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import type { IconType } from '@/types/Icon';
+
+/**
+ * Props for the low-level date-picker input that couples a segmented text field with a popover calendar.
+ * Accepts ISO strings (or `YYYY-MM-DD` when `floating` is true) and can operate in single or range mode.
+ * In both modes users type directly into segmented day / month / year inputs with auto-advance between them.
+ */
+export type BaseDatePickerInputProps = {
+	/**
+	 * Controls whether manual typing is allowed inside the text fields.
+	 * Use `'not-mobile'` to disable typing on mobile devices while keeping it on desktop.
+	 * Applies to both single and range modes.
+	 * @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;
+
+	/**
+	 * Browser autocomplete hint for the input.
+	 * @defaultValue `'off'`
+	 */
+	autocomplete?: InputHTMLAttributes['autocomplete'];
+
+	/**
+	 * Focus the first text field automatically when the component mounts.
+	 */
+	autofocus?: InputHTMLAttributes['autofocus'];
+
+	/**
+	 * Displays a clear button whenever a value is present and the control is interactive.
+	 */
+	clearable?: boolean;
+
+	/**
+	 * Applies the compact density styles to the control.
+	 */
+	compact?: boolean;
+
+	/**
+	 * Disables the input, calendar trigger, and popover.
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Sets the first day of the week for the calendar (0 = Sunday, 6 = Saturday).
+	 */
+	firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+	/**
+	 * Emit dates formatted as `YYYY-MM-DD` instead of ISO strings.
+	 */
+	floating?: boolean;
+
+	/**
+	 * Marks the control as invalid, applying error styles and setting `aria-invalid`.
+	 */
+	hasErrors?: boolean;
+
+	/**
+	 * Explicit id for the input element. Falls back to an auto-generated `bdpi-<uid>` value.
+	 */
+	id?: HTMLAttributes['id'];
+
+	/**
+	 * Shows loading visuals on the input.
+	 */
+	loading?: boolean;
+
+	/**
+	 * Maximum selectable date in `YYYY-MM-DD` format.
+	 * Values outside the pattern throw during setup to surface configuration mistakes.
+	 */
+	max?: string;
+
+	/**
+	 * Minimum selectable date in `YYYY-MM-DD` format.
+	 * Values outside the pattern throw during setup to surface configuration mistakes.
+	 */
+	min?: string;
+
+	/**
+	 * v-model value. Use `null` for empty, a single string for single selection,
+	 * or a two-element string array (`[start, end]`) when `range` is true.
+	 */
+	modelValue: string | string[] | null;
+
+	/**
+	 * Name attribute forwarded to the native inputs. In single mode fields are named
+	 * `${name}-day`, `${name}-month`, `${name}-year`; in range mode they are prefixed
+	 * with the segment (`${name}-start-day`, `${name}-end-day`, …).
+	 */
+	name?: InputHTMLAttributes['name'];
+
+	/**
+	 * Placeholder text displayed when no value is present. Defaults to a format hint
+	 * (`DD/MM/YYYY` or `DD/MM/YYYY – DD/MM/YYYY` for range mode).
+	 */
+	placeholder?: InputHTMLAttributes['placeholder'];
+
+	/**
+	 * Icon name rendered before the input field.
+	 */
+	// eslint-disable-next-line vue/prop-name-casing
+	'prepend:icon'?: IconType;
+
+	/**
+	 * Enables range selection. When active, v-model expects a two-element array `[start, end]`.
+	 * Users can still type into the start and end segments as long as `allowWriting` is truthy.
+	 */
+	range?: boolean;
+
+	/**
+	 * Makes the text fields read-only and prevents opening the calendar.
+	 */
+	readonly?: boolean;
+
+	/**
+	 * Marks the inputs as required to the browser.
+	 */
+	required?: boolean;
+
+	/**
+	 * Predicate invoked for each candidate date. Return `false` to disable selection for that value.
+	 */
+	selectable?: (date: string) => boolean;
+
+	/**
+	 * Hides the calendar trigger button and prevents the calendar popover from opening.
+	 * Use `'not-mobile'` to hide the popover on desktop while keeping it visible on mobile,
+	 * complementing `allowWriting: 'not-mobile'` (desktop = keyboard-first, mobile = calendar-first).
+	 * An error is thrown if both writing and the popover would be unavailable on the same platform.
+	 */
+	hidePopover?: boolean | 'not-mobile';
+
+	/**
+	 * Transition duration, in milliseconds, for the popover appearance.
+	 */
+	transitionDuration?: number;
+};
+
+/**
+ * Structured payload carried by every `error` event.
+ *
+ * | `code`                 | Trigger                            | `original`                   | `normalized`                                          |
+ * |------------------------|------------------------------------|------------------------------|-------------------------------------------------------|
+ * | `disabled_date`        | Typed single date is disabled      | The disabled date            | Snapped to `min`/`max`, or `null` if not normalizable |
+ * | `disabled_range_start` | Typed range start is disabled      | `[start]` or `[start, end]`  | Snapped range, or `null` if start is not normalizable |
+ * | `disabled_range_end`   | Typed range end is disabled        | `[start, end]`               | Snapped range (length 1 or 2), or `null`              |
+ * | `end_before_start`     | Typed end is chronologically first | `[start, end]` (wrong order) | `[end, start]` — always the swapped pair              |
+ */
+export type DatePickerInputError =
+	| {
+			code: 'disabled_date';
+			/** The value the user typed before normalization. */
+			original: string;
+			/** Snapped to the nearest `min`/`max` boundary, or `null` if disabled by `selectable`. */
+			normalized: string | null;
+	  }
+	| {
+			code: 'disabled_range_start';
+			/** The range value before normalization (may be `[start]` or `[start, end]`). */
+			original: string[];
+			/** Snapped range, or `null` if start could not be normalized. */
+			normalized: string[] | null;
+	  }
+	| {
+			code: 'disabled_range_end';
+			/** The full range before normalization. */
+			original: [string, string];
+			/** Range with end snapped, or `[start]` if end could not be normalized. */
+			normalized: string[] | null;
+	  }
+	| {
+			code: 'end_before_start';
+			/** `[start, end]` in the order the user typed them. */
+			original: [string, string];
+			/** `[end, start]` — the chronologically corrected pair. */
+			normalized: [string, string];
+	  };
+
+export type BaseDatePickerInputEvents = {
+	/**
+	 * Emitted when the composite control receives focus (first focusin after being inactive).
+	 */
+	(e: 'active'): void;
+	/**
+	 * Emitted alongside every value normalization or removal when the typed date is invalid or out of range.
+	 * See `DatePickerInputError` for the full code map and payload shapes.
+	 */
+	(e: 'error', error: DatePickerInputError): void;
+	/**
+	 * Emitted when a native text field inside the control gains focus.
+	 * Forwards the original DOM `FocusEvent`.
+	 */
+	(e: 'focus', event: FocusEvent): void;
+	/**
+	 * Emitted when focus/click moves outside the entire composite control.
+	 */
+	(e: 'inactive'): void;
+	/**
+	 * Emitted whenever the selected date value changes.
+	 * Payload is `null` for cleared values, a single string for single-date mode,
+	 * or a two-element array for range mode.
+	 */
+	(e: 'update:modelValue', value: BaseDatePickerInputProps['modelValue']): void;
+};
+
+export type BaseDatePickerInputSlots = {
+	/**
+	 * Content rendered before the entire input control, outside the input chrome.
+	 */
+	'prepend-outer'?: (props: object) => any;
+	/**
+	 * Content rendered before the date fields, at the start of the inner container.
+	 */
+	prepend?: (props: object) => any;
+	/**
+	 * Inline content rendered at the start of the input field area, before the date fields.
+	 */
+	prefix?: (props: object) => any;
+	/**
+	 * Content rendered after the date fields, at the end of the inner container (before the calendar toggle button).
+	 */
+	append?: (props: object) => any;
+	/**
+	 * Content rendered after the entire input control, outside the input chrome.
+	 */
+	'append-outer'?: (props: object) => any;
+	/**
+	 * Inline content rendered at the end of the input field area, after the date fields.
+	 */
+	suffix?: (props: object) => any;
+};
+```
+
+## Styles
+
+```css
+.bb-base-date-picker-input {
+	--bb-arrow: 0;
+
+	&--disabled {
+	}
+	&--errors {
+	}
+	&--loading {
+	}
+	&--readonly {
+	}
+
+	.bb-base-date-picker-input__inner-wrapper {
+		display: block;
+		flex: 1 1 auto;
+	}
+	.bb-common-input-inner-container {
+		position: relative;
+		display: flex;
+		> :last-child {
+			order: 2;
+		}
+		> input {
+		}
+		.bb-base-date-picker-input__fields {
+			display: flex;
+			align-items: center;
+			gap: 0;
+			flex: 1;
+			position: relative;
+
+			&--empty {
+				.bb-base-date-picker-input__separator {
+					opacity: 0;
+				}
+			}
+		}
+		.bb-base-date-picker-input__placeholder {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			color: var(--bb-text-tertiary, #9ca3af);
+			background: inherit;
+			pointer-events: none;
+			user-select: none;
+			z-index: 1;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+		.bb-base-date-picker-input__field {
+			flex: 0 0 auto;
+			min-width: 0;
+			text-align: left;
+			padding: 0;
+			border: none;
+			background: transparent;
+			color: inherit;
+			font: inherit;
+			outline: none;
+
+			&--day,
+			&--month {
+				width: 2ch;
+			}
+
+			&--day {
+			}
+
+			&--month {
+				text-align: center;
+			}
+
+			&--year {
+				width: 4ch;
+			}
+
+			&::placeholder {
+				color: transparent;
+			}
+
+			&:disabled {
+				cursor: not-allowed;
+			}
+
+			&[readonly] {
+				cursor: default;
+			}
+		}
+		.bb-base-date-picker-input__separator {
+			color: currentColor;
+			user-select: none;
+			flex-shrink: 0;
+			opacity: 0.5;
+			cursor: text;
+
+			&--range {
+				padding: 0 0.375rem;
+				opacity: 0.6;
+			}
+		}
+		.bb-base-date-picker-input__calendar-btn {
+			background-color: inherit;
+			border-radius: var(--bb-radius);
+			margin-right: -0.25rem;
+			isolation: isolate;
+			z-index: 1;
+			order: 1;
+			outline-style: none;
+			padding: clamp(
+				var(--bb-input-compact-py),
+				calc((var(--bb-input-h) - var(--bb-input-icon)) / 4),
+				4px
+			);
+			transition-duration: 150ms;
+			transition-property: color, background-color;
+			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+			&:focus:not(:disabled),
+			&:hover:not(:disabled) {
+				background-color: var(--bb-primary);
+
+				svg {
+					color: var(--bb-contrasting);
+				}
+			}
+			&:disabled {
+				display: none;
+			}
+			svg {
+				color: var(--bb-primary);
+				transition-duration: 150ms;
+				transition-property: color, background-color;
+				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+				width: var(--bb-input-icon);
+			}
+			> span {
+			}
+		}
+
+		.bb-common-input-inner-container__prepend-icon,
+		.bb-common-input-inner-container__append-icon {
+		}
+		.bb-spinner {
+		}
+		.bb-error-icon {
+		}
+		.bb-common-input-inner-container__prefix,
+		.bb-common-input-inner-container__suffix {
+			height: var(--bb-input-h);
+		}
+	}
+	&__accessible-description {
+	}
+}
+```