vanilla-jui 1.7.1 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [

package/src/components/accordion.ts

@@ -21,11 +21,8 @@ import {
   createCollapseTransition,
 } from '../core/motion.ts';
 import { createKeyedElementRefs } from '../utilities/refs.ts';
-import {
-  type ResolveSchema,
-  resolveProps,
-  validateParam,
-} from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
+import { validateParam } from '../utilities/types.ts';
 
 type AccordionActive = number | string | Array<number | string> | null;
 type AccordionDirection = 'vertical' | 'horizontal';
@@ -182,15 +179,12 @@ const ACCORDION_PROPS_SCHEMA = {
   },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    type: 'object',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_CLASS_NAMES,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    type: 'plainObject',
+    merge: 'shallow',
   },
   onChange: { default: null, types: ['function', 'null'] },
   data: { default: [], ...ACCORDION_DATA_RULE },
-} satisfies ResolveSchema<AccordionProps>;
+} satisfies ConfigSchema<AccordionProps>;
 
 function isActiveValue(value: unknown): value is number | string {
   if (typeof value === 'number') return Number.isInteger(value) && value >= 0;
@@ -198,7 +192,7 @@ function isActiveValue(value: unknown): value is number | string {
 }
 
 function normalizeProps(props: AccordionProps): ResolvedAccordionProps {
-  const resolved = resolveProps(
+  const resolved = resolveConfig(
     props,
     ACCORDION_PROPS_SCHEMA,
     'Accordion.props'

package/src/components/flow.ts

@@ -7,11 +7,9 @@ import {
 import { asRenderable, type RenderableContent } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import { isPlainObject } from '../utilities/object.ts';
-import {
-  type ResolveSchema,
-  resolveProps,
-  validateParam,
-} from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
+import { mergeShallowConfig } from '../utilities/merge.ts';
+import { validateParam } from '../utilities/types.ts';
 import { translate } from '../utilities/locale.ts';
 
 export type FlowData = Record<string, unknown>;
@@ -382,15 +380,11 @@ function cloneSteps(steps: unknown): FlowStep[] {
 
 function normalizeClassNames(value: unknown): FlowClassNames {
   if (typeof value === 'string') {
-    return {
-      ...DEFAULT_CLASS_NAMES,
+    return mergeShallowConfig(DEFAULT_CLASS_NAMES, {
       root: [DEFAULT_CLASS_NAMES.root, value.trim()].filter(Boolean).join(' '),
-    };
+    }) as FlowClassNames;
   }
-  return {
-    ...DEFAULT_CLASS_NAMES,
-    ...(isPlainObject(value) ? (value as FlowClassNameConfig) : {}),
-  };
+  return value as FlowClassNames;
 }
 
 function normalizeStepResult(
@@ -434,22 +428,19 @@ const FLOW_PROPS_SCHEMA = {
   showNext: { default: true, type: 'boolean' },
   showReset: { default: false, type: 'boolean' },
   text: {
-    default: {},
+    defaultFactory: () => ({
+      back: translate('b'),
+      next: translate('Next'),
+      finish: translate('Finish'),
+      reset: translate('Reset'),
+    }),
     type: 'plainObject',
-    normalize: (value: unknown) => {
-      const text = isPlainObject(value) ? (value as Partial<FlowText>) : {};
-      return {
-        back: typeof text.back === 'string' ? text.back : translate('b'),
-        next: typeof text.next === 'string' ? text.next : translate('Next'),
-        finish:
-          typeof text.finish === 'string' ? text.finish : translate('Finish'),
-        reset: typeof text.reset === 'string' ? text.reset : translate('Reset'),
-      };
-    },
+    merge: 'shallow',
   },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    types: ['object', 'string'],
+    types: ['plainObject', 'string'],
+    merge: 'shallow',
     normalize: normalizeClassNames,
   },
   renderHeader: {
@@ -473,10 +464,10 @@ const FLOW_PROPS_SCHEMA = {
   onFinish: { default: null, types: ['function', 'null'] },
   onError: { default: null, types: ['function', 'null'] },
   onBusy: { default: null, types: ['function', 'null'] },
-} satisfies ResolveSchema<FlowProps>;
+} satisfies ConfigSchema<FlowProps>;
 
 function normalizeProps(input: FlowProps): ResolvedFlowProps {
-  const props = resolveProps(input, FLOW_PROPS_SCHEMA, 'Flow.props');
+  const props = resolveConfig(input, FLOW_PROPS_SCHEMA, 'Flow.props');
   return {
     id: props.id as string,
     steps: cloneSteps(props.steps),

package/src/components/form.ts

@@ -21,11 +21,8 @@ import {
 } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import { isPlainObject } from '../utilities/object.ts';
-import {
-  type ResolveSchema,
-  resolveProps,
-  validateParam,
-} from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
+import { validateParam } from '../utilities/types.ts';
 import {
   createValidator,
   type ValidatorClassNameConfig,
@@ -261,18 +258,18 @@ const FORM_PROPS_SCHEMA = {
   buttonsPosition: { default: 'start', type: 'string' },
   text: {
     default: DEFAULT_TEXT,
-    type: 'object',
-    normalize: (value: unknown) => resolveText(value),
+    type: 'plainObject',
+    merge: 'shallow',
   },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    type: 'object',
-    normalize: (value: unknown) => resolveClassNames(value),
+    type: 'plainObject',
+    merge: 'shallow',
   },
-  validator: { default: {}, type: 'object' },
+  validator: { default: {}, type: 'plainObject' },
   onSubmit: { default: null, types: ['function', 'null'] },
   onReset: { default: null, types: ['function', 'null'] },
-} satisfies ResolveSchema<FormProps>;
+} satisfies ConfigSchema<FormProps>;
 
 function cloneOptions(
   options: readonly FieldOption[] | undefined
@@ -380,20 +377,6 @@ function fieldIsRequired(
   return !!field.required || !!rules?.[field.name]?.required;
 }
 
-function resolveClassNames(value: unknown): FormClassNames {
-  return {
-    ...DEFAULT_CLASS_NAMES,
-    ...(isPlainObject(value) ? (value as Partial<FormClassNames>) : {}),
-  } as FormClassNames;
-}
-
-function resolveText(value: unknown): FormText {
-  return {
-    ...DEFAULT_TEXT,
-    ...(isPlainObject(value) ? (value as FormTextConfig) : {}),
-  } as FormText;
-}
-
 function renderFormText(
   content: RenderableContent<Form>,
   form: Form
@@ -441,7 +424,7 @@ function cloneValidator(validator: unknown): FormValidatorConfig {
 }
 
 function normalizeProps(input: FormProps): ResolvedFormProps {
-  const props = resolveProps(input, FORM_PROPS_SCHEMA, 'Form.props');
+  const props = resolveConfig(input, FORM_PROPS_SCHEMA, 'Form.props');
   const fields = cloneFields(props.fields as readonly FormItem<FormField>[]);
   return {
     ...props,
@@ -453,8 +436,8 @@ function normalizeProps(input: FormProps): ResolvedFormProps {
     fields,
     buttons: props.buttons as FormButtons,
     buttonsPosition: props.buttonsPosition as string,
-    text: resolveText(props.text),
-    className: resolveClassNames(props.className),
+    text: props.text as FormText,
+    className: props.className as FormClassNames,
     validator: cloneValidator(props.validator),
     onSubmit: props.onSubmit as ResolvedFormProps['onSubmit'],
     onReset: props.onReset as ResolvedFormProps['onReset'],

package/src/components/menu.ts

@@ -18,11 +18,8 @@ import { icon } from '../primitives/icons.ts';
 import { joinClasses } from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
-import {
-  type ResolveSchema,
-  resolveProps,
-  validateParam,
-} from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
+import { validateParam } from '../utilities/types.ts';
 
 export type MenuType = string | undefined;
 export type MenuItemId = string | number;
@@ -123,13 +120,10 @@ const MENU_PROPS_SCHEMA = {
   backText: { default: translate('b'), type: 'string' },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    type: 'object',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_CLASS_NAMES,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    type: 'plainObject',
+    merge: 'shallow',
   },
-} satisfies ResolveSchema<MenuProps>;
+} satisfies ConfigSchema<MenuProps>;
 
 const MENU_STATE_SCHEMA = {
   user: { type: 'number' },
@@ -138,7 +132,7 @@ const MENU_STATE_SCHEMA = {
 };
 
 function normalizeProps(input: MenuProps = {}): ResolvedMenuProps {
-  const props = resolveProps(
+  const props = resolveConfig(
     input,
     MENU_PROPS_SCHEMA,
     'Menu.props'
@@ -148,7 +142,7 @@ function normalizeProps(input: MenuProps = {}): ResolvedMenuProps {
     ...props,
     user: props.user,
     data: props.data,
-    className: { ...props.className },
+    className: props.className,
   };
 }
 

package/src/components/modal.ts

@@ -23,13 +23,13 @@ import {
 } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import { createMotionGroup, createTransition } from '../core/motion.ts';
-import { isPlainObject } from '../utilities/object.ts';
 import { createPresence } from '../core/presence.ts';
 import {
-  type ResolveSchema,
-  resolveProps,
-  validateParam,
-} from '../utilities/types.ts';
+  type ConfigRule,
+  type ConfigSchema,
+  resolveConfig,
+} from '../utilities/config.ts';
+import { validateParam } from '../utilities/types.ts';
 
 type ModalTextInput = Partial<ModalText> & Record<string, unknown>;
 type ModalContentResult = RenderableContent<Modal>;
@@ -142,6 +142,14 @@ const DEFAULT_CLASS_NAMES: ModalClassNames = {
   confirmBtn: 'is-primary',
 };
 
+function createDefaultText(): ModalText {
+  return {
+    title: translate('Tip'),
+    confirm: translate('Confirm'),
+    cancel: translate('Cancel'),
+  };
+}
+
 function cloneProps(props: ResolvedModalProps): ResolvedModalProps {
   return {
     ...props,
@@ -172,21 +180,28 @@ const MODAL_CONTENT_RULE = {
 };
 
 const MODAL_TEXT_RULE = {
-  default: {},
-  type: 'object',
-  plain: true,
-  normalize: (value: unknown) => {
-    const text = (isPlainObject(value) ? value : {}) as ModalTextInput;
-    return {
-      ...text,
-      title: typeof text.title === 'string' ? text.title : translate('Tip'),
-      confirm:
-        typeof text.confirm === 'string' ? text.confirm : translate('Confirm'),
-      cancel:
-        typeof text.cancel === 'string' ? text.cancel : translate('Cancel'),
-    };
+  defaultFactory: createDefaultText,
+  type: 'plainObject',
+  merge: 'shallow',
+  schema: {
+    title: 'string',
+    confirm: 'string',
+    cancel: 'string',
   },
-};
+} satisfies ConfigRule<ModalProps>;
+
+const MODAL_CLASS_NAMES_SCHEMA = {
+  layout: 'string',
+  modal: 'string',
+  header: 'string',
+  body: 'string',
+  footer: 'string',
+  title: 'string',
+  closeBtn: 'string',
+  cancelBtn: 'string',
+  confirmBtn: 'string',
+  button: 'string',
+} satisfies ConfigSchema;
 
 const MODAL_PROPS_SCHEMA = {
   content: { default: '', ...MODAL_CONTENT_RULE },
@@ -196,6 +211,7 @@ const MODAL_PROPS_SCHEMA = {
   showCancel: { default: true, type: 'boolean' },
   showClose: { default: true, type: 'boolean' },
   fullscreen: { default: false, type: 'boolean' },
+  style: { default: null, types: ['string', 'plainObject', 'null'] },
   text: MODAL_TEXT_RULE,
   onShow: { default: null, types: ['function', 'null'] },
   onShown: { default: null, types: ['function', 'null'] },
@@ -221,13 +237,11 @@ const MODAL_PROPS_SCHEMA = {
   bgClose: { default: false, type: 'boolean' },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    type: 'object',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_CLASS_NAMES,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    type: 'plainObject',
+    merge: 'shallow',
+    schema: MODAL_CLASS_NAMES_SCHEMA,
   },
-} satisfies ResolveSchema<ModalProps>;
+} satisfies ConfigSchema<ModalProps>;
 
 const MODAL_STATE_SCHEMA = {
   content: MODAL_PROPS_SCHEMA.content,
@@ -241,7 +255,7 @@ const MODAL_UPDATE_RULE = {
 };
 
 function normalizeProps(input: ModalProps): ResolvedModalProps {
-  const props = resolveProps(input, MODAL_PROPS_SCHEMA, 'Modal');
+  const props = resolveConfig(input, MODAL_PROPS_SCHEMA, 'Modal');
   return {
     content: props.content as ModalContent,
     cache: props.cache as boolean,

package/src/components/offcanvas.ts

@@ -19,11 +19,8 @@ import { createEventManager } from '../utilities/events.ts';
 import { createMotionGroup, createTransition } from '../core/motion.ts';
 import { createPresence } from '../core/presence.ts';
 import { createElementRef } from '../utilities/refs.ts';
-import {
-  type ResolveSchema,
-  resolveProps,
-  validateParam,
-} from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
+import { validateParam } from '../utilities/types.ts';
 
 export type OffcanvasDirection = 'top' | 'right' | 'bottom' | 'left';
 export type OffcanvasAnimate = string;
@@ -147,17 +144,14 @@ const OFFCANVAS_PROPS_SCHEMA = {
   },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    type: 'object',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_CLASS_NAMES,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    type: 'plainObject',
+    merge: 'shallow',
   },
   onShow: { default: null, types: ['function', 'null'] },
   onShown: { default: null, types: ['function', 'null'] },
   onHide: { default: null, types: ['function', 'null'] },
   onHidden: { default: null, types: ['function', 'null'] },
-} satisfies ResolveSchema<OffcanvasProps>;
+} satisfies ConfigSchema<OffcanvasProps>;
 
 const OFFCANVAS_STATE_SCHEMA = {
   content: OFFCANVAS_PROPS_SCHEMA.content,
@@ -170,7 +164,7 @@ function normalizeTtl(ttl: number): number {
 }
 
 function normalizeProps(input: OffcanvasProps): ResolvedOffcanvasProps {
-  const props = resolveProps(input, OFFCANVAS_PROPS_SCHEMA, 'Offcanvas');
+  const props = resolveConfig(input, OFFCANVAS_PROPS_SCHEMA, 'Offcanvas');
   return {
     content: props.content as OffcanvasContent,
     overlay: props.overlay as boolean,

package/src/components/pagination.ts

@@ -13,11 +13,8 @@ import {
 } from '../core/component.ts';
 import { icon } from '../primitives/icons.ts';
 import { isPlainObject } from '../utilities/object.ts';
-import {
-  type ResolveSchema,
-  resolveProps,
-  validateParam,
-} from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
+import { validateParam } from '../utilities/types.ts';
 import { translate } from '../utilities/locale.ts';
 import { createLoading } from '../primitives/loading.ts';
 
@@ -137,34 +134,23 @@ const COUNT_RULE = {
 const PAGINATION_PROPS_SCHEMA = {
   total: TOTAL_RULE,
   page: {
-    default: () => ({ ...DEFAULT_PAGE }),
-    factory: true,
-    normalize: (value: unknown) => ({
-      ...DEFAULT_PAGE,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    default: DEFAULT_PAGE,
+    merge: 'shallow',
     ...PAGE_RULE,
   },
   count: {
-    default: () => ({ ...DEFAULT_COUNT }),
-    factory: true,
-    normalize: (value: unknown) => ({
-      ...DEFAULT_COUNT,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    default: DEFAULT_COUNT,
+    merge: 'shallow',
     ...COUNT_RULE,
   },
   lock: { default: true, type: 'boolean' },
   onChange: { default: null, types: ['function', 'null'] },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    type: 'object',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_CLASS_NAMES,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    type: 'plainObject',
+    merge: 'shallow',
   },
-} satisfies ResolveSchema<PaginationProps>;
+} satisfies ConfigSchema<PaginationProps>;
 
 const PAGINATION_STATE_SCHEMA = {
   total: TOTAL_RULE,
@@ -190,7 +176,7 @@ function cloneCount(count: PaginationCount): PaginationCount {
 }
 
 function normalizeProps(input: PaginationProps = {}): ResolvedPaginationProps {
-  const props = resolveProps(
+  const props = resolveConfig(
     input,
     PAGINATION_PROPS_SCHEMA,
     'Pagination.props'

package/src/components/swiper.ts

@@ -23,11 +23,8 @@ import {
 import { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
 import { createScheduledTask } from '../core/scheduler.ts';
-import {
-  type ResolveSchema,
-  resolveProps,
-  validateParam,
-} from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
+import { validateParam } from '../utilities/types.ts';
 
 const SWIPE_THRESHOLD = 6;
 const AUTOPLAY_DELAY_FLOOR = 16;
@@ -217,13 +214,10 @@ const SWIPER_OPTIONS_SCHEMA = {
   preventClick: { default: true, type: 'boolean' },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    type: 'object',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_CLASS_NAMES,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    type: 'plainObject',
+    merge: 'shallow',
   },
-} satisfies ResolveSchema<SwiperProps>;
+} satisfies ConfigSchema<SwiperProps>;
 
 const SWIPER_DATA_ITEM_RULE = {
   type: 'plainObject',
@@ -270,7 +264,7 @@ function cloneDataSource(source: SwiperDataSource): SwiperDataSource {
 }
 
 function normalizeProps(input: SwiperProps = {}): ResolvedSwiperProps {
-  const props = resolveProps(
+  const props = resolveConfig(
     input,
     SWIPER_OPTIONS_SCHEMA,
     'Swiper.props'
@@ -279,7 +273,7 @@ function normalizeProps(input: SwiperProps = {}): ResolvedSwiperProps {
     ...props,
     id: props.id?.trim() || null,
     data: cloneDataSource(props.data),
-    className: { ...props.className },
+    className: props.className as SwiperClassNames,
   };
 }
 

package/src/components/tabs.ts

@@ -23,11 +23,8 @@ import { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
 import { createElementRef, createKeyedElementRefs } from '../utilities/refs.ts';
 import { createScheduledTask } from '../core/scheduler.ts';
-import {
-  type ResolveSchema,
-  resolveProps,
-  validateParam,
-} from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
+import { validateParam } from '../utilities/types.ts';
 
 export type TabsDirection = 'top' | 'bottom' | 'left' | 'right';
 export type TabsValue = number | string;
@@ -160,13 +157,10 @@ const TABS_PROPS_SCHEMA = {
   data: { default: [], type: 'array' },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    type: 'object',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_CLASS_NAMES,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    type: 'plainObject',
+    merge: 'shallow',
   },
-} satisfies ResolveSchema<TabsProps>;
+} satisfies ConfigSchema<TabsProps>;
 
 const TAB_CONFIG_RULE = {
   type: 'plainObject',
@@ -217,7 +211,7 @@ function normalizeDisabled(disabled: TabsDisabled): TabsDisabled {
 }
 
 function normalizeProps(input: TabsProps): ResolvedTabsProps {
-  const props = resolveProps(input, TABS_PROPS_SCHEMA, 'Tabs.props');
+  const props = resolveConfig(input, TABS_PROPS_SCHEMA, 'Tabs.props');
   return {
     id: props.id as string,
     direction: props.direction as TabsDirection,

package/src/components/toc.ts

@@ -18,7 +18,7 @@ import {
 } from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
-import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
 
 interface TocClassNames {
   toc: string;
@@ -110,19 +110,16 @@ const TOC_PROPS_SCHEMA = {
   reactive: { default: false, type: 'boolean' },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    type: 'object',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_CLASS_NAMES,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    type: 'plainObject',
+    merge: 'shallow',
   },
   onChange: { default: null, types: ['function', 'null'] },
-} satisfies ResolveSchema<TocProps>;
+} satisfies ConfigSchema<TocProps>;
 
 const ACTIVE_OFFSET_TOLERANCE = 1;
 
 function normalizeProps(input: TocProps): ResolvedTocProps {
-  const props = resolveProps(input, TOC_PROPS_SCHEMA, 'Toc.props');
+  const props = resolveConfig(input, TOC_PROPS_SCHEMA, 'Toc.props');
   return {
     target: props.target as DOMReference,
     headings: props.headings as string,

package/src/index.ts

@@ -7,10 +7,13 @@ export * from './utilities/id.ts';
 export * from './utilities/dom.ts';
 export * from './utilities/events.ts';
 export * from './utilities/http.ts';
-export * from './utilities/locale.ts';
+// do not export any function from locale.ts
+// export * from './utilities/locale.ts';
 export * from './utilities/object.ts';
 export * from './utilities/timer.ts';
 export * from './utilities/types.ts';
+export * from './utilities/merge.ts';
+export * from './utilities/config.ts';
 export * from './utilities/state.ts';
 export * from './utilities/refs.ts';
 export * from './utilities/validator.ts';

package/src/primitives/drop.ts

@@ -8,7 +8,7 @@ import {
 } from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
-import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
+import { type ConfigSchema, resolveConfig } from '../utilities/config.ts';
 import { createLoading } from './loading.ts';
 
 type DropMode = 'hover' | 'click';
@@ -144,11 +144,8 @@ const DROP_PROPS_SCHEMA = {
   },
   className: {
     default: DEFAULT_CLASS_NAMES,
-    type: 'object',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_CLASS_NAMES,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    type: 'plainObject',
+    merge: 'shallow',
   },
   id: {
     default: null,
@@ -166,10 +163,10 @@ const DROP_PROPS_SCHEMA = {
   hoverIntent: { default: true, type: 'boolean' },
   onShown: { default: null, types: ['function', 'null'] },
   onHidden: { default: null, types: ['function', 'null'] },
-} satisfies ResolveSchema<DropProps>;
+} satisfies ConfigSchema<DropProps>;
 
 function normalizeProps(input: DropProps): ResolvedDropProps {
-  const props = resolveProps(input, DROP_PROPS_SCHEMA, 'Drop');
+  const props = resolveConfig(input, DROP_PROPS_SCHEMA, 'Drop');
   return {
     name: props.name as string | null,
     mode: props.mode as DropMode,