bitboss-ui 2.1.132 → 2.1.134

package/dist/ai/BbDropdown.md

@@ -49,13 +49,18 @@
 				:placement="placement"
 			></slot>
 			<template
-				v-for="({ original, ...item }, index) in mappedItems"
+				v-for="({ original, isGroupStart, ...item }, index) in mappedItems"
 				:key="item.key"
 			>
+				<hr
+					v-if="isGroupStart && index > 0"
+					aria-hidden="true"
+					class="bb-dropdown__divider"
+				/>
 				<slot
 					:disabled="item.disabled"
 					:index="index"
-					:item="items[index]"
+					:item="flatItems[index]"
 					:name="`item:prepend`"
 					:open="open"
 					:placement="placement"
@@ -66,7 +71,7 @@
 					class="bb-dropdown__item"
 					:class="{
 						'bb-dropdown__item--first': index === 0,
-						'bb-dropdown__item--last': index === items.length - 1,
+						'bb-dropdown__item--last': index === flatItems.length - 1,
 					}"
 					:data-dropdown-item="true"
 					v-bind="item"
@@ -91,7 +96,7 @@
 				><slot
 					:disabled="item.disabled"
 					:index="index"
-					:item="items[index]"
+					:item="flatItems[index]"
 					:name="`item:append`"
 					:open="open"
 					:placement="placement"
@@ -122,15 +127,12 @@ import type { ColumnName } from '@/types/ColumnName';
 import { extractDomContainer } from '@/utilities/functions/extractDomContainer';
 import { useElementSize, useIntersectionObserver } from '@vueuse/core';
 import { parseWidthString } from '@/utilities/functions/parseWidthString';
-import type {
-	BbDropdownProps,
-	BbDropdownSlots,
-	Item,
-	MappedItem,
-	DropdownTrigger,
-} from './types';
-
-type InferredBodySlots = ColumnName<BbDropdownProps['items'][number]['key']>;
+import { normalizeItemGroups } from '@/utilities/functions/normalizeItemGroups';
+import type { BbDropdownProps, BbDropdownSlots, FlatItem } from './types';
+
+type InferredBodySlots = ColumnName<
+	FlatItem<BbDropdownProps['items'][number]>['key']
+>;
 defineSlots<BbDropdownSlots>();
 
 const props = withDefaults(defineProps<BbDropdownProps>(), {
@@ -208,14 +210,35 @@ const { resume, pause } = useIntersectionObserver(
 	{ threshold: [0, 1], immediate: false }
 );
 
+/**
+ * Items normalized into divider-separated groups. A flat `items` array yields a
+ * single group; nested arrays (or loose items around them) become their own
+ * groups. See {@link normalizeItemGroups}.
+ */
+const itemGroups = computed(() => normalizeItemGroups(props.items));
+/** Flattened view of {@link itemGroups}; keyboard navigation and indices are flat. */
+const flatItems = computed(() => itemGroups.value.flat());
+/** Flat indices that begin a new group, used to render dividers between groups. */
+const groupStartIndices = computed(() => {
+	const set = new Set<number>();
+	let offset = 0;
+	for (const group of itemGroups.value) {
+		set.add(offset);
+		offset += group.length;
+	}
+	return set;
+});
+
 const mappedItems = computed(() => {
-	let firstFocusableIndex: number = props.items.findIndex((el) => !el.disabled);
+	let firstFocusableIndex: number = flatItems.value.findIndex(
+		(el) => !el.disabled
+	);
 	let lastFocusableIndex: number = findRightIndex(
-		props.items,
+		flatItems.value,
 		(item) => !item.disabled
 	);
 
-	return props.items.map((item, index) => {
+	return flatItems.value.map((item, index) => {
 		const itemid = `${id}-item-${item.key}`;
 		const { onClick: handler, ...rest } = item;
 
@@ -261,7 +284,7 @@ const mappedItems = computed(() => {
 				event.preventDefault();
 				if (index !== firstFocusableIndex) {
 					const indexOfPrevious = findRightIndex(
-						props.items,
+						flatItems.value,
 						(item, i) => i < index && !item.disabled
 					);
 					const options = Array.from(
@@ -302,6 +325,7 @@ const mappedItems = computed(() => {
 			key: item.key.split(/\W+/g).join('_').toLowerCase() as InferredBodySlots,
 			disabled: rest.disabled || props.disabled,
 			id: itemid,
+			isGroupStart: groupStartIndices.value.has(index),
 			onClick,
 			onKeydown,
 		};
@@ -379,9 +403,9 @@ const onPointerUp = () => {
 
 const onKeydown = async (event: KeyboardEvent) => {
 	if (props.disabled) return;
-	const firstFocusableIndex = props.items.findIndex((el) => !el.disabled);
+	const firstFocusableIndex = flatItems.value.findIndex((el) => !el.disabled);
 	const lastFocusableIndex = findRightIndex(
-		props.items,
+		flatItems.value,
 		(item) => !item.disabled
 	);
 
@@ -573,7 +597,7 @@ import type { IconType } from '@/types/Icon';
 
 export type DropdownTrigger = 'click' | 'contextMenu';
 
-export type Item = Omit<BaseButtonProps, 'block' | 'tag' | 'type'> & {
+export type InternalItem = Omit<BaseButtonProps, 'block' | 'tag' | 'type'> & {
 	/**
 	 * Click handler of the item.
 	 */
@@ -592,7 +616,17 @@ export type Item = Omit<BaseButtonProps, 'block' | 'tag' | 'type'> & {
 	'append:icon'?: IconType;
 };
 
-export type MappedItem = Item & {
+/**
+ * Items accepted by the dropdown. A flat list renders a single group with no
+ * dividers; a nested array introduces a divider before and after the group.
+ * The two shapes can be mixed, e.g. `[item, item, [item, item], item]`.
+ */
+export type Item = InternalItem | InternalItem[];
+
+/** Unwraps the item type out of the (possibly nested) {@link InternalItem} shape. */
+export type FlatItem<T> = T extends (infer U)[] ? U : T;
+
+export type MappedItem = InternalItem & {
 	/**
 	 * Identifier of the element among its siblings.
 	 */
@@ -635,6 +669,10 @@ export type BbDropdownProps = Pick<
 	 * Array used to render each dropdown button.
 	 * They can act as `button`, as `a`, or as `router-link`
 	 * as they are based on the functionality provided by `BaseButton`.
+	 *
+	 * Pass a flat array for a single group, or nest arrays to split the items
+	 * into divider-separated groups. The two shapes can be mixed, e.g.
+	 * `[item, item, [item, item], item]`.
 	 */
 	items: Item[];
 	/**
@@ -696,7 +734,7 @@ export type BbDropdownItemSlotProps = {
 	/** The zero-based index of this item. */
 	index: number;
 	/** The raw item object from the `items` prop. */
-	item: BbDropdownProps['items'][number];
+	item: InternalItem;
 	/** Whether the dropdown panel is currently open. */
 	open: boolean;
 	/** The current placement of the dropdown panel. */
@@ -745,6 +783,14 @@ export type BbDropdownSlots = {
 		display: inline-grid;
 		grid-template-columns: 1fr;
 		padding: 6px;
+		.bb-dropdown__divider {
+			/* Negative inline margins cancel the container padding so the rule
+			 * spans the full width of the dropdown panel, edge to edge. */
+			border: none;
+			border-top: 1px solid color-mix(in srgb, var(--bb-text) 15%, transparent);
+			height: 0;
+			margin: 6px -6px;
+		}
 		.bb-dropdown__item {
 			border-radius: var(--bb-radius);
 			column-gap: 6px;

package/dist/ai/BbDropdownButton.md

@@ -85,7 +85,7 @@
 				<slot name="item:prepend" v-bind="data" />
 			</template>
 			<!-- @vue-ignore - wrong inferred type -->
-			<template v-for="item in mappedItems" #[item.key]="data">
+			<template v-for="item in flatMappedItems" #[item.key]="data">
 				<slot :name="item.key" v-bind="data" />
 			</template>
 			<template #item:append="data">
@@ -103,6 +103,7 @@ import BbDropdown from '../BbDropdown/BbDropdown.vue';
 import { ref } from 'vue';
 import { BbIcon, BbSpinner } from '@/index';
 import { useLocale } from '@/composables/useLocale';
+import type { InternalItem } from '../BbDropdown/types';
 import type { BbDropdownButtonProps, BbDropdownButtonSlots } from './types';
 
 type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -131,23 +132,34 @@ const wrapClick =
 		internalLoading.value--;
 	};
 
-const mappedItems = computed(() =>
-	props.items.map((el) => {
-		if (el.onClick)
-			return {
-				...el,
-				key: el.key.split(/\W+/g).join('_').toLowerCase(),
-				onClick: wrapClick(el.onClick),
-			};
+const transformItem = (el: InternalItem) => {
+	if (el.onClick)
 		return {
 			...el,
 			key: el.key.split(/\W+/g).join('_').toLowerCase(),
+			onClick: wrapClick(el.onClick),
 		};
-	})
+	return {
+		...el,
+		key: el.key.split(/\W+/g).join('_').toLowerCase(),
+	};
+};
+
+/**
+ * Items with leaf transforms applied while preserving the (possibly nested)
+ * group structure, so dividers passed down to `BbDropdown` are kept intact.
+ */
+const mappedItems = computed(() =>
+	props.items.map((entry) =>
+		Array.isArray(entry) ? entry.map(transformItem) : transformItem(entry)
+	)
 );
 
+/** Flattened view used for the main button and per-item named slots. */
+const flatMappedItems = computed(() => mappedItems.value.flat());
+
 const mainBtn = computed(() => {
-	const base = { ...mappedItems.value[0] };
+	const base = { ...flatMappedItems.value[0] };
 	base.disabled = base.disabled || props.disabled;
 	return base;
 });
@@ -178,7 +190,11 @@ const sizeAttributes = Object.entries<Sizes>(baseSize).reduce(
 ## Types
 
 ```ts
-import type { BbDropdownProps, MappedItem } from '../BbDropdown/types';
+import type {
+	BbDropdownProps,
+	FlatItem,
+	MappedItem,
+} from '../BbDropdown/types';
 import type { IconType } from '@/types/Icon';
 
 type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -269,7 +285,7 @@ export type BbDropdownButtonItemSlotProps = {
 	/** The zero-based index of this item. */
 	index: number;
 	/** The raw item object from the `items` prop. */
-	item: BbDropdownProps['items'][number];
+	item: FlatItem<BbDropdownProps['items'][number]>;
 	/** Whether the dropdown panel is currently open. */
 	open: boolean;
 	/** The current placement of the dropdown panel. */

package/dist/components/BaseButton/BaseButton.vue.d.ts

@@ -1,18 +1,13 @@
 import { BaseButtonProps, BaseButtonSlots } from './types';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<BaseButtonSlots> & BaseButtonSlots;
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<BaseButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BaseButtonProps> & Readonly<{}>, {
+type __VLS_Slots = BaseButtonSlots;
+declare const __VLS_base: import('vue').DefineComponent<BaseButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BaseButtonProps> & Readonly<{}>, {
     tag: string;
     type: HTMLButtonElement["type"];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/components/BaseButton/RouterComponent.vue.d.ts

@@ -1,20 +1,17 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        /** Content rendered inside the resolved link component (router-link, Nuxt link, or Inertia link). */
-        default?: (props: object) => any;
-    }> & {
-        /** Content rendered inside the resolved link component (router-link, Nuxt link, or Inertia link). */
-        default?: (props: object) => any;
-    };
-    refs: {};
-    rootEl: any;
+/**
+ * Resolve the appropriate link component at setup time (not computed).
+ * This is critical for Nuxt compatibility - resolveComponent cannot be used
+ * inside computed properties or reactive contexts in Nuxt.
+ */
+type __VLS_Slots = {
+    /** Content rendered inside the resolved link component (router-link, Nuxt link, or Inertia link). */
+    default?: (props: object) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_base: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/components/BaseCheckbox/BaseCheckbox.vue.d.ts

@@ -1,24 +1,11 @@
 import { BaseCheckboxProps, BaseCheckboxIconSlotProps } from './types';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<{
-        /**
-         * Replaces the default checkmark SVG rendered inside the checkbox box.
-         */
-        icon?: (props: BaseCheckboxIconSlotProps) => any;
-    }> & {
-        /**
-         * Replaces the default checkmark SVG rendered inside the checkbox box.
-         */
-        icon?: (props: BaseCheckboxIconSlotProps) => any;
-    };
-    refs: {
-        checkboxInput: HTMLInputElement;
-    };
-    rootEl: HTMLSpanElement;
+type __VLS_Slots = {
+    /**
+     * Replaces the default checkmark SVG rendered inside the checkbox box.
+     */
+    icon?: (props: BaseCheckboxIconSlotProps) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<BaseCheckboxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare const __VLS_base: import('vue').DefineComponent<BaseCheckboxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     input: (event: Event) => any;
     "update:modelValue": (value: any) => any;
     click: (event: MouseEvent) => any;
@@ -41,12 +28,11 @@ declare const __VLS_component: import('vue').DefineComponent<BaseCheckboxProps,
 }>, {
     falseValue: any;
     trueValue: any;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    checkboxInput: HTMLInputElement;
-}, HTMLSpanElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/components/BaseCheckboxGroup/BaseCheckboxGroup.vue.d.ts

@@ -1,25 +1,30 @@
 import { BaseCheckboxGroupEvents, BaseCheckboxGroupProps, BaseCheckboxGroupSlots } from './types';
-declare const _default: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onInput?: ((event: Event) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-        readonly onClick?: ((event: MouseEvent) => any) | undefined;
-        readonly onKeydown?: ((event: KeyboardEvent) => any) | undefined;
-        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
-        readonly onChange?: ((event: Event) => any) | undefined;
-        readonly onFocus?: ((event: FocusEvent) => any) | undefined;
-        readonly onMousedown?: ((event: MouseEvent) => any) | undefined;
-        readonly onMouseup?: ((event: MouseEvent) => any) | undefined;
-        readonly onInactive?: (() => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onInput" | "onKeydown" | "onClick" | "onMousedown" | "onMouseup" | "onUpdate:modelValue" | "onInactive"> & BaseCheckboxGroupProps<T> & Partial<{}>> & import('vue').PublicProps;
-    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+declare const __VLS_export: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<BaseCheckboxGroupProps<T> & {
+        onInput?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+        onClick?: ((event: MouseEvent) => any) | undefined;
+        onKeydown?: ((event: KeyboardEvent) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        onMousedown?: ((event: MouseEvent) => any) | undefined;
+        onMouseup?: ((event: MouseEvent) => any) | undefined;
+        onInactive?: (() => any) | undefined;
+    }> & import('vue').PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
-    slots: Readonly<BaseCheckboxGroupSlots<T>> & BaseCheckboxGroupSlots<T>;
+    slots: BaseCheckboxGroupSlots<T>;
     emit: BaseCheckboxGroupEvents;
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
-} & {};
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/BaseColorInput/BaseColorInput.vue.d.ts

@@ -1,109 +1,6 @@
 import { BaseColorInputProps, BaseColorInputSlots } from './types';
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<BaseColorInputSlots> & BaseColorInputSlots;
-    refs: {
-        wrapper: ({
-            $: import('vue').ComponentInternalInstance;
-            $data: {};
-            $props: Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>;
-            $attrs: {
-                [x: string]: unknown;
-            };
-            $refs: {
-                [x: string]: unknown;
-            };
-            $slots: Readonly<{
-                [name: string]: import('vue').Slot<any> | undefined;
-            }>;
-            $root: import('vue').ComponentPublicInstance | null;
-            $parent: import('vue').ComponentPublicInstance | null;
-            $host: Element | null;
-            $emit: (event: string, ...args: any[]) => void;
-            $el: HTMLSpanElement;
-            $options: import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
-                beforeCreate?: (() => void) | (() => void)[];
-                created?: (() => void) | (() => void)[];
-                beforeMount?: (() => void) | (() => void)[];
-                mounted?: (() => void) | (() => void)[];
-                beforeUpdate?: (() => void) | (() => void)[];
-                updated?: (() => void) | (() => void)[];
-                activated?: (() => void) | (() => void)[];
-                deactivated?: (() => void) | (() => void)[];
-                beforeDestroy?: (() => void) | (() => void)[];
-                beforeUnmount?: (() => void) | (() => void)[];
-                destroyed?: (() => void) | (() => void)[];
-                unmounted?: (() => void) | (() => void)[];
-                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
-            };
-            $forceUpdate: () => void;
-            $nextTick: typeof import('vue').nextTick;
-            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
-        } & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('@vue/runtime-core').ComponentCustomProperties & {} & {
-            $slots: Readonly<import('../CommonInputOuterContainer/types').CommonInputOuterContainerSlots> & import('../CommonInputOuterContainer/types').CommonInputOuterContainerSlots;
-        }) | null;
-        innerContainer: ({
-            $: import('vue').ComponentInternalInstance;
-            $data: {};
-            $props: {
-                readonly 'append:icon'?: import('../..').IconType | undefined;
-                readonly clearable?: boolean | undefined;
-                readonly 'prepend:icon'?: import('../..').IconType | undefined;
-                readonly preventFocus?: boolean | undefined;
-                readonly "onClick:clear"?: (() => any) | undefined;
-            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-            $attrs: {
-                [x: string]: unknown;
-            };
-            $refs: {
-                [x: string]: unknown;
-            } & {
-                container: HTMLSpanElement;
-            };
-            $slots: Readonly<{
-                [name: string]: import('vue').Slot<any> | undefined;
-            }>;
-            $root: import('vue').ComponentPublicInstance | null;
-            $parent: import('vue').ComponentPublicInstance | null;
-            $host: Element | null;
-            $emit: (event: "click:clear") => void;
-            $el: HTMLSpanElement;
-            $options: import('vue').ComponentOptionsBase<Readonly<import('../..').CommonInputInnerContainerProps> & Readonly<{
-                "onClick:clear"?: (() => any) | undefined;
-            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-                "click:clear": () => any;
-            }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
-                beforeCreate?: (() => void) | (() => void)[];
-                created?: (() => void) | (() => void)[];
-                beforeMount?: (() => void) | (() => void)[];
-                mounted?: (() => void) | (() => void)[];
-                beforeUpdate?: (() => void) | (() => void)[];
-                updated?: (() => void) | (() => void)[];
-                activated?: (() => void) | (() => void)[];
-                deactivated?: (() => void) | (() => void)[];
-                beforeDestroy?: (() => void) | (() => void)[];
-                beforeUnmount?: (() => void) | (() => void)[];
-                destroyed?: (() => void) | (() => void)[];
-                unmounted?: (() => void) | (() => void)[];
-                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
-            };
-            $forceUpdate: () => void;
-            $nextTick: typeof import('vue').nextTick;
-            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
-        } & Readonly<{}> & Omit<Readonly<import('../..').CommonInputInnerContainerProps> & Readonly<{
-            "onClick:clear"?: (() => any) | undefined;
-        }>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('@vue/runtime-core').ComponentCustomProperties & {} & {
-            $slots: Readonly<import('../CommonInputInnerContainer/types').CommonInputInnerContainerSlots> & import('../CommonInputInnerContainer/types').CommonInputInnerContainerSlots;
-        }) | null;
-    };
-    rootEl: HTMLSpanElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<BaseColorInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+type __VLS_Slots = BaseColorInputSlots;
+declare const __VLS_base: import('vue').DefineComponent<BaseColorInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     input: (event: Event) => any;
     "update:modelValue": (value: string | null) => any;
     click: (event: MouseEvent) => any;
@@ -127,107 +24,11 @@ declare const __VLS_component: import('vue').DefineComponent<BaseColorInputProps
     autocomplete: string;
     transitionDuration: number;
     alpha: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    wrapper: ({
-        $: import('vue').ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import('vue').Slot<any> | undefined;
-        }>;
-        $root: import('vue').ComponentPublicInstance | null;
-        $parent: import('vue').ComponentPublicInstance | null;
-        $host: Element | null;
-        $emit: (event: string, ...args: any[]) => void;
-        $el: HTMLSpanElement;
-        $options: import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
-            beforeCreate?: (() => void) | (() => void)[];
-            created?: (() => void) | (() => void)[];
-            beforeMount?: (() => void) | (() => void)[];
-            mounted?: (() => void) | (() => void)[];
-            beforeUpdate?: (() => void) | (() => void)[];
-            updated?: (() => void) | (() => void)[];
-            activated?: (() => void) | (() => void)[];
-            deactivated?: (() => void) | (() => void)[];
-            beforeDestroy?: (() => void) | (() => void)[];
-            beforeUnmount?: (() => void) | (() => void)[];
-            destroyed?: (() => void) | (() => void)[];
-            unmounted?: (() => void) | (() => void)[];
-            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import('vue').nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
-    } & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('@vue/runtime-core').ComponentCustomProperties & {} & {
-        $slots: Readonly<import('../CommonInputOuterContainer/types').CommonInputOuterContainerSlots> & import('../CommonInputOuterContainer/types').CommonInputOuterContainerSlots;
-    }) | null;
-    innerContainer: ({
-        $: import('vue').ComponentInternalInstance;
-        $data: {};
-        $props: {
-            readonly 'append:icon'?: import('../..').IconType | undefined;
-            readonly clearable?: boolean | undefined;
-            readonly 'prepend:icon'?: import('../..').IconType | undefined;
-            readonly preventFocus?: boolean | undefined;
-            readonly "onClick:clear"?: (() => any) | undefined;
-        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        } & {
-            container: HTMLSpanElement;
-        };
-        $slots: Readonly<{
-            [name: string]: import('vue').Slot<any> | undefined;
-        }>;
-        $root: import('vue').ComponentPublicInstance | null;
-        $parent: import('vue').ComponentPublicInstance | null;
-        $host: Element | null;
-        $emit: (event: "click:clear") => void;
-        $el: HTMLSpanElement;
-        $options: import('vue').ComponentOptionsBase<Readonly<import('../..').CommonInputInnerContainerProps> & Readonly<{
-            "onClick:clear"?: (() => any) | undefined;
-        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-            "click:clear": () => any;
-        }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
-            beforeCreate?: (() => void) | (() => void)[];
-            created?: (() => void) | (() => void)[];
-            beforeMount?: (() => void) | (() => void)[];
-            mounted?: (() => void) | (() => void)[];
-            beforeUpdate?: (() => void) | (() => void)[];
-            updated?: (() => void) | (() => void)[];
-            activated?: (() => void) | (() => void)[];
-            deactivated?: (() => void) | (() => void)[];
-            beforeDestroy?: (() => void) | (() => void)[];
-            beforeUnmount?: (() => void) | (() => void)[];
-            destroyed?: (() => void) | (() => void)[];
-            unmounted?: (() => void) | (() => void)[];
-            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
-            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import('vue').nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
-    } & Readonly<{}> & Omit<Readonly<import('../..').CommonInputInnerContainerProps> & Readonly<{
-        "onClick:clear"?: (() => any) | undefined;
-    }>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('@vue/runtime-core').ComponentCustomProperties & {} & {
-        $slots: Readonly<import('../CommonInputInnerContainer/types').CommonInputInnerContainerSlots> & import('../CommonInputInnerContainer/types').CommonInputInnerContainerSlots;
-    }) | null;
-}, HTMLSpanElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };