bitboss-ui 2.1.135 → 2.1.136

package/dist/ai/BaseDialog.md

@@ -95,7 +95,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch, type Ref } from 'vue';
+import {
+	computed,
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	ref,
+	watch,
+	type Ref,
+} from 'vue';
+import { registerTopLayerHost } from '@/composables/useTopLayer';
 import { parseSize } from '@/utilities/functions/parseSize';
 import { useId } from '@/composables/useId';
 import { useLocale } from '@/composables/useLocale';
@@ -169,6 +178,10 @@ const toggleDialog = async (value: boolean) => {
 		document.addEventListener('keydown', handleKeyDown, { capture: true });
 		await nextTick();
 		dialog.value?.showModal();
+		// Toasts move inside the open modal so they paint above it and stay
+		// clickable (see useTopLayer).
+		releaseTopLayer?.();
+		if (dialog.value) releaseTopLayer = registerTopLayerHost(dialog.value);
 		if (props.focusTarget) {
 			const element = dialog.value?.querySelector(props.focusTarget!);
 			if (element && element instanceof HTMLElement) {
@@ -186,10 +199,16 @@ const toggleDialog = async (value: boolean) => {
 			document.removeEventListener('keydown', handleKeyDown, { capture: true });
 		}
 		dialog.value?.close();
+		releaseTopLayer?.();
+		releaseTopLayer = undefined;
 		emit('hidden');
 	}
 };
 
+/** Releases this dialog as the toasts' host (see useTopLayer). */
+let releaseTopLayer: (() => void) | undefined;
+onBeforeUnmount(() => releaseTopLayer?.());
+
 watch(model, toggleDialog);
 onMounted(() => {
 	if (model.value) toggleDialog(true);

package/dist/ai/BbOffCanvas.md

@@ -94,7 +94,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch, type Ref } from 'vue';
+import {
+	computed,
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	ref,
+	watch,
+	type Ref,
+} from 'vue';
+import { registerTopLayerHost } from '@/composables/useTopLayer';
 import { parseSize } from '@/utilities/functions/parseSize';
 import { useId } from '@/composables/useId';
 import { useLocale } from '@/composables/useLocale';
@@ -168,6 +177,10 @@ const toggleDialog = async (value: boolean) => {
 		document.addEventListener('keydown', handleKeyDown, { capture: true });
 		await nextTick();
 		dialog.value?.showModal();
+		// Toasts move inside the open modal so they paint above it and stay
+		// clickable (see useTopLayer).
+		releaseTopLayer?.();
+		if (dialog.value) releaseTopLayer = registerTopLayerHost(dialog.value);
 		if (props.focusTarget) {
 			const element = dialog.value?.querySelector(props.focusTarget!);
 			if (element && element instanceof HTMLElement) {
@@ -182,10 +195,16 @@ const toggleDialog = async (value: boolean) => {
 			document.removeEventListener('keydown', handleKeyDown, { capture: true });
 		}
 		dialog.value?.close();
+		releaseTopLayer?.();
+		releaseTopLayer = undefined;
 		emit('hidden');
 	}
 };
 
+/** Releases this dialog as the toasts' host (see useTopLayer). */
+let releaseTopLayer: (() => void) | undefined;
+onBeforeUnmount(() => releaseTopLayer?.());
+
 watch(model, toggleDialog);
 onMounted(() => {
 	if (model.value) toggleDialog(true);

package/dist/ai/BbToast.md

@@ -4,20 +4,31 @@
 
 ```vue
 <template>
-	<div class="bb-toast" :class="{ [`bb-toast--${placement}`]: true }">
-		<TransitionGroup name="toast">
-			<BbToastMessage
-				v-for="message in state.stack"
-				:key="message.id"
-				v-bind="message"
-				@click:close="dismiss"
-			/>
-		</TransitionGroup>
-	</div>
+	<!-- While a modal dialog / off-canvas is open the container moves inside
+	it: outside, the modal makes it inert (see useTopLayer). -->
+	<Teleport :disabled="!topLayerHost" :to="topLayerHost ?? 'body'">
+		<div
+			ref="container"
+			class="bb-toast"
+			:class="{ [`bb-toast--${placement}`]: true }"
+			popover="manual"
+		>
+			<TransitionGroup name="toast">
+				<BbToastMessage
+					v-for="message in state.stack"
+					:key="message.id"
+					v-bind="message"
+					@click:close="dismiss"
+				/>
+			</TransitionGroup>
+		</div>
+	</Teleport>
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
 import { state, useToast } from '../../composables/useToast';
+import { topLayerHost } from '../../composables/useTopLayer';
 
 const { dismiss } = useToast();
 
@@ -27,6 +38,29 @@ import type { BbToastProps } from './types';
 withDefaults(defineProps<BbToastProps>(), {
 	placement: 'bottom',
 });
+
+const container = ref<HTMLElement>();
+
+/**
+ * Promote the container to the top layer (`popover="manual"`), above any modal
+ * `<dialog>` already open. Called again whenever the host changes: moving the
+ * element hides the popover, and re-showing it after the modal opened stacks
+ * it above that modal. A browser without the Popover API keeps the old
+ * `position: fixed` behaviour.
+ */
+const promote = () => {
+	const el = container.value;
+	if (!el || typeof el.showPopover !== 'function') return;
+	try {
+		if (el.matches(':popover-open')) el.hidePopover();
+		el.showPopover();
+	} catch {
+		// Not connected (mid-move) or unsupported: the next host change retries.
+	}
+};
+
+onMounted(promote);
+watch(topLayerHost, promote, { flush: 'post' });
 </script>
 
 <style lang="postcss">
@@ -72,6 +106,16 @@ export type BbToastProps = {
 	position: fixed;
 	z-index: 10;
 
+	/* The container is a `popover` (top layer, so it paints above an open
+	   modal dialog): undo the UA popover box. The placement rules below set
+	   the edges. */
+	background: transparent;
+	border: 0;
+	color: inherit;
+	inset: auto;
+	overflow: visible;
+	padding: 0;
+
 	&[class*='bb-toast--bottom'] {
 		bottom: 0;
 

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

@@ -1,13 +1,18 @@
 import { BaseButtonProps, BaseButtonSlots } from './types';
-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<{}>, {
+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<{}>, {
     tag: string;
     type: HTMLButtonElement["type"];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
+type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,17 +1,20 @@
-/**
- * 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;
+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;
 };
-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;
+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"]>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
+type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

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

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

@@ -1,30 +1,25 @@
 import { BaseCheckboxGroupEvents, BaseCheckboxGroupProps, BaseCheckboxGroupSlots } from './types';
-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;
+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;
     attrs: any;
-    slots: BaseCheckboxGroupSlots<T>;
+    slots: Readonly<BaseCheckboxGroupSlots<T>> & 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> = (T extends any ? {
+type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};
+} & {};

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

@@ -1,6 +1,109 @@
 import { BaseColorInputProps, BaseColorInputSlots } from './types';
-type __VLS_Slots = BaseColorInputSlots;
-declare const __VLS_base: import('vue').DefineComponent<BaseColorInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+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, {} & {
     input: (event: Event) => any;
     "update:modelValue": (value: string | null) => any;
     click: (event: MouseEvent) => any;
@@ -24,11 +127,107 @@ declare const __VLS_base: import('vue').DefineComponent<BaseColorInputProps, {},
     autocomplete: string;
     transitionDuration: number;
     alpha: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
+}, {}, {}, {}, 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"]>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
+type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,5 +1,5 @@
 import { ColorPaletteProps } from './types';
-declare const __VLS_export: import('vue').DefineComponent<ColorPaletteProps, {
+declare const _default: import('vue').DefineComponent<ColorPaletteProps, {
     el: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
@@ -8,6 +8,13 @@ declare const __VLS_export: import('vue').DefineComponent<ColorPaletteProps, {
 }>, {
     alpha: boolean;
     picker: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    pickerRef: HTMLDivElement;
+    canvasWrapRef: HTMLDivElement;
+    mainCanvasRef: HTMLCanvasElement;
+    hueWrapRef: HTMLDivElement;
+    hueCanvasRef: HTMLCanvasElement;
+    alphaWrapRef: HTMLDivElement;
+    alphaCanvasRef: HTMLCanvasElement;
+}, HTMLDivElement>;
 export default _default;

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

@@ -1,6 +1,12 @@
 import { BaseDatePickerProps, BaseDatePickerSlots } from './types';
-type __VLS_Slots = BaseDatePickerSlots;
-declare const __VLS_base: import('vue').DefineComponent<BaseDatePickerProps, {
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<BaseDatePickerSlots> & BaseDatePickerSlots;
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<BaseDatePickerProps, {
     resetStatus: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string | string[] | null) => any;
@@ -8,11 +14,10 @@ declare const __VLS_base: import('vue').DefineComponent<BaseDatePickerProps, {
     "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
 }>, {
     firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
+type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/components/BaseDatePicker/BaseDatePickerHeader.vue.d.ts

@@ -4,12 +4,11 @@ type Props = {
     disabled: boolean;
     hidden: boolean;
 };
-declare const __VLS_export: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "mode:year": () => any;
     "mode:month": () => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     "onMode:year"?: (() => any) | undefined;
     "onMode:month"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;