@agnos-ui/core 0.0.1-alpha.0 → 0.0.1-alpha.2

package/README.md

@@ -2,11 +2,11 @@
 
 [![npm](https://img.shields.io/npm/v/@agnos-ui/core)](https://www.npmjs.com/package/@agnos-ui/core)
 
-[AgnosUI](https://amadeusitgroup.github.io/AgnosUI/latest/) is a framework-agnostic widget library with adapters for multiple frameworks:
+[AgnosUI](https://amadeusitgroup.github.io/AgnosUI/latest/) is a framework-agnostic widget library with adapters for multiple frameworks, either [Bootstrap](https://getbootstrap.com/)-based or headless:
 
-- [Angular](https://www.npmjs.com/package/@agnos-ui/angular)
-- [React](https://www.npmjs.com/package/@agnos-ui/react)
-- [Svelte](https://www.npmjs.com/package/@agnos-ui/svelte)
+- [Angular](https://www.npmjs.com/package/@agnos-ui/angular), [Angular headless](https://www.npmjs.com/package/@agnos-ui/angular-headless)
+- [React](https://www.npmjs.com/package/@agnos-ui/react), [React headless](https://www.npmjs.com/package/@agnos-ui/react-headless)
+- [Svelte](https://www.npmjs.com/package/@agnos-ui/svelte), [Svelte headless](https://www.npmjs.com/package/@agnos-ui/svelte-headless)
 
 This `@agnos-ui/core` package contains the framework-agnostic common code used by the above framework adapters.
 

package/{dist/lib/accordion.d.ts → accordion.d.ts}

@@ -1,13 +1,8 @@
 import type { PropsConfig } from './services';
 import type { TransitionFn } from './transitions';
 import type { Directive, SlotContent, Widget, WidgetSlotContext } from './types';
-export interface AccordionCommonPropsAndState {
-    /**
-     * Classes to add on the accordion DOM element.
-     */
-    accordionClass: string;
-}
-export interface AccordionProps extends AccordionCommonPropsAndState {
+import type { WidgetsCommonPropsAndState } from './commonProps';
+export interface AccordionProps extends WidgetsCommonPropsAndState {
     /**
      * If `true`, only one item at the time can stay open.
      */
@@ -44,11 +39,11 @@ export interface AccordionProps extends AccordionCommonPropsAndState {
      */
     itemDisabled: boolean;
     /**
-     * If `true`, the accordion-item will be collapsed. Otherwise, it will be expanded.
+     * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
      *
      * It is a prop of the accordion-item.
      */
-    itemCollapsed: boolean;
+    itemVisible: boolean;
     /**
      * If `true`, accordion-item will be animated.
      *
@@ -74,13 +69,13 @@ export interface AccordionProps extends AccordionCommonPropsAndState {
      */
     onItemHidden: () => void;
     /**
-     * An event fired when the `collapsed` value changes.
+     * An event fired when the `visible` value changes.
      *
-     * Event payload is the new value of collapsed.
+     * Event payload is the new value of visible.
      *
      * It is a prop of the accordion-item.
      */
-    onItemCollapsedChange: (collapsed: boolean) => void;
+    onItemVisibleChange: (visible: boolean) => void;
     /**
      * Structure of the accordion-item. The default item structure is: accordion-item
      * contains accordion header and accordion collapse; the accordion header contains the accordion button
@@ -132,7 +127,7 @@ export interface AccordionProps extends AccordionCommonPropsAndState {
      */
     itemBodyClass: string;
 }
-export interface AccordionState extends AccordionCommonPropsAndState {
+export interface AccordionState extends WidgetsCommonPropsAndState {
     /**
      * Array containing all the accordion-items contained in the accordion.
      */
@@ -140,7 +135,7 @@ export interface AccordionState extends AccordionCommonPropsAndState {
 }
 export interface AccordionApi {
     /**
-     * Given the itemId, it will return if such item is expanded or not.
+     * Given the itemId, it will return if such item is visible (expanded) or not.
      *
      * If the itemId is not a valid id it will return `false`.
      */
@@ -174,7 +169,7 @@ export interface AccordionApi {
      */
     collapseAll(): void;
     /**
-     * Creates a new in accordionItem.
+     * Creates a new accordionItem.
      */
     registerItem(itemConfig?: PropsConfig<AccordionItemProps>): AccordionItemWidget;
 }
@@ -222,9 +217,9 @@ export interface AccordionItemDirectives {
 }
 export interface AccordionItemCommonPropsAndState {
     /**
-     * If `true`, the accordion-item will be collapsed. Otherwise, it will be expanded.
+     * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
      */
-    itemCollapsed: boolean;
+    itemVisible: boolean;
     /**
      * If `true`, the accordion-item will be disabled.
      * It will not react to user's clicks, but still will be possible to toggle programmatically.
@@ -291,16 +286,16 @@ export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
      */
     onItemHidden: () => void;
     /**
-     * An event fired when the `collapsed` value changes.
+     * An event fired when the `visible` value changes.
      *
-     * Event payload is the new value of collapsed.
+     * Event payload is the new value of visible.
      */
-    onItemCollapsedChange: (collapsed: boolean) => void;
+    onItemVisibleChange: (visible: boolean) => void;
 }
 export interface AccordionItemState extends AccordionItemCommonPropsAndState {
     /**
-     * If `true` the collapse inside the accordion-item should be in DOM. Its value depends on the
-     * value of the `itemCollapse` and `itemDestroyOnHide`.
+     * If `true` the content of the accordion-item collapse should be in DOM. Its value depends on the
+     * value of the `itemVisible` and `itemDestroyOnHide`.
      */
     shouldBeInDOM: boolean;
 }

package/{dist/lib/accordion.js → accordion.js}

@@ -1,4 +1,4 @@
-import { bindDirectiveNoArg, bindableDerived, directiveSubscribe, registrationArray, stateStores, typeBoolean, typeFunction, typeString, writablesForProps, } from './services';
+import { bindDirectiveNoArg, bindableDerived, directiveSubscribe, registrationArray, stateStores, typeBoolean, typeFunction, typeString, writablesForProps, normalizeConfigStores, mergeConfigStores, } from './services';
 import { createTransition } from './transitions';
 import { collapseVerticalTransition } from './transitions/bootstrap';
 import { computed, readable, writable } from '@amadeus-it-group/tansu';
@@ -8,21 +8,19 @@ function getItemId() {
     return `accordion-item-${itemId++}`;
 }
 function adjustItemsCloseOthers(items, openItems, oldOpen) {
+    let keepOpen;
     if (openItems.length == 2) {
         oldOpen = oldOpen ?? openItems[0];
-        const keepOpen = openItems.find((id) => id !== oldOpen);
-        items.forEach((item) => {
-            if (item.state$().itemId !== keepOpen && !item.state$().itemCollapsed) {
-                item.patch({ itemCollapsed: true });
-            }
-        });
+        keepOpen = openItems.find((id) => id !== oldOpen);
     }
     else if (openItems.length > 2) {
         //this case can happen when you have multiple items open and you toggle the close others
-        const keepOpen = openItems[0];
+        keepOpen = openItems[0];
+    }
+    if (keepOpen) {
         items.forEach((item) => {
-            if (item.state$().itemId !== keepOpen && !item.state$().itemCollapsed) {
-                item.patch({ itemCollapsed: true });
+            if (item.state$().itemId !== keepOpen && item.state$().itemVisible) {
+                item.patch({ itemVisible: false });
             }
         });
     }
@@ -35,16 +33,16 @@ const defaultAccordionConfig = {
     closeOthers: false,
     onShown: noop,
     onHidden: noop,
-    accordionClass: '',
+    className: '',
     itemId: '',
     itemDestroyOnHide: false,
     itemDisabled: false,
-    itemCollapsed: true,
+    itemVisible: false,
     itemAnimation: true,
     itemTransition: collapseVerticalTransition,
     onItemShown: noop,
     onItemHidden: noop,
-    onItemCollapsedChange: noop,
+    onItemVisibleChange: noop,
     slotItemStructure: undefined,
     slotItemBody: undefined,
     slotItemHeader: undefined,
@@ -58,12 +56,12 @@ const defaultItemConfig = {
     itemId: defaultAccordionConfig.itemId,
     itemDestroyOnHide: defaultAccordionConfig.itemDestroyOnHide,
     itemDisabled: defaultAccordionConfig.itemDisabled,
-    itemCollapsed: defaultAccordionConfig.itemCollapsed,
+    itemVisible: defaultAccordionConfig.itemVisible,
     itemAnimation: defaultAccordionConfig.itemAnimation,
     itemTransition: defaultAccordionConfig.itemTransition,
     onItemShown: defaultAccordionConfig.onItemShown,
     onItemHidden: defaultAccordionConfig.onItemHidden,
-    onItemCollapsedChange: defaultAccordionConfig.onItemCollapsedChange,
+    onItemVisibleChange: defaultAccordionConfig.onItemVisibleChange,
     slotItemStructure: defaultAccordionConfig.slotItemStructure,
     slotItemBody: defaultAccordionConfig.slotItemBody,
     slotItemHeader: defaultAccordionConfig.slotItemHeader,
@@ -73,6 +71,7 @@ const defaultItemConfig = {
     itemCollapseClass: defaultAccordionConfig.itemCollapseClass,
     itemBodyClass: defaultAccordionConfig.itemBodyClass,
 };
+const accordionItemProps = Object.keys(defaultItemConfig);
 /**
  * Retrieve a shallow copy of the default accordion config
  * @returns the default accordion config
@@ -87,12 +86,12 @@ const configAccordionValidator = {
     itemId: typeString,
     itemDestroyOnHide: typeBoolean,
     itemDisabled: typeBoolean,
-    itemCollapsed: typeBoolean,
+    itemVisible: typeBoolean,
     itemAnimation: typeBoolean,
     itemTransition: typeFunction,
     onItemShown: typeFunction,
     onItemHidden: typeFunction,
-    onItemCollapsedChange: typeFunction,
+    onItemVisibleChange: typeFunction,
     itemClass: typeString,
     itemHeaderClass: typeString,
     itemButtonClass: typeString,
@@ -103,12 +102,12 @@ const configItemValidator = {
     itemId: typeString,
     itemDestroyOnHide: typeBoolean,
     itemDisabled: typeBoolean,
-    itemCollapsed: typeBoolean,
+    itemVisible: typeBoolean,
     itemAnimation: typeBoolean,
     itemTransition: typeFunction,
     onItemShown: typeFunction,
     onItemHidden: typeFunction,
-    onItemCollapsedChange: typeFunction,
+    onItemVisibleChange: typeFunction,
     itemClass: typeString,
     itemHeaderClass: typeString,
     itemButtonClass: typeString,
@@ -116,34 +115,33 @@ const configItemValidator = {
     itemBodyClass: typeString,
 };
 function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
-    const [{ itemAnimation$, itemTransition$, itemDestroyOnHide$, onItemShown$, onItemHidden$, onItemCollapsedChange$, itemCollapsed$, itemId$: _dirtyItemId$, itemDisabled$, ...stateProps }, patch,] = writablesForProps(defaultItemConfig, config, configItemValidator);
+    const [{ itemAnimation$, itemTransition$, itemDestroyOnHide$, onItemShown$, onItemHidden$, onItemVisibleChange$, itemVisible$, itemId$: _dirtyItemId$, itemDisabled$, ...stateProps }, patch,] = writablesForProps(defaultItemConfig, config, configItemValidator);
     const initDone$ = writable(false);
     const itemId$ = bindableDerived(readable(noop), [_dirtyItemId$], ([dirtyItemId]) => (dirtyItemId ? dirtyItemId : getItemId()));
     const shouldBeInDOM$ = computed(() => {
         return itemDestroyOnHide$() === false || !itemTransition.state$().hidden;
     });
     const itemTransition = createTransition({
-        transition: itemTransition$,
-        visible: computed(() => {
-            const collapsed = itemCollapsed$();
-            onItemCollapsedChange$()(collapsed);
-            return !collapsed;
-        }),
-        animation: itemAnimation$,
-        animationOnInit: false,
-        initDone: initDone$,
-        onHidden: () => {
-            accordionOnHidden()(itemId$());
-            onItemHidden$()();
-        },
-        onShown: () => {
-            accordionOnShown()(itemId$());
-            onItemShown$()();
+        props: {
+            transition: itemTransition$,
+            visible: itemVisible$,
+            onVisibleChange: onItemVisibleChange$,
+            animation: itemAnimation$,
+            animationOnInit: false,
+            initDone: initDone$,
+            onHidden: () => {
+                accordionOnHidden()(itemId$());
+                onItemHidden$()();
+            },
+            onShown: () => {
+                accordionOnShown()(itemId$());
+                onItemShown$()();
+            },
         },
     });
     return {
         ...stateStores({
-            itemCollapsed$,
+            itemVisible$,
             itemId$,
             shouldBeInDOM$,
             itemDisabled$,
@@ -153,7 +151,7 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
         actions: {
             click: () => {
                 if (!itemDisabled$()) {
-                    itemCollapsed$.update((c) => !c);
+                    itemVisible$.update((c) => !c);
                 }
             },
         },
@@ -162,13 +160,13 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
                 initDone$.set(true);
             },
             collapse: () => {
-                itemCollapsed$.set(true);
+                itemVisible$.set(false);
             },
             expand: () => {
-                itemCollapsed$.set(false);
+                itemVisible$.set(true);
             },
             toggle: () => {
-                itemCollapsed$.update((c) => !c);
+                itemVisible$.update((c) => !c);
             },
         },
         directives: { collapseDirective: bindDirectiveNoArg(itemTransition.directives.directive), accordionItemDirective: noop },
@@ -180,12 +178,31 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
  * @returns a new accordion widget instance
  */
 export function createAccordion(config) {
-    const [{ closeOthers$, onShown$, onHidden$, itemId$, itemAnimation$, itemClass$, itemDisabled$, itemCollapsed$, itemTransition$, itemDestroyOnHide$, itemBodyClass$, itemButtonClass$, itemCollapseClass$, itemHeaderClass$, onItemCollapsedChange$, onItemHidden$, onItemShown$, slotItemStructure$, slotItemBody$, slotItemHeader$, ...stateProps }, patch,] = writablesForProps(defaultAccordionConfig, config, configAccordionValidator);
+    const [{ closeOthers$, onShown$, onHidden$, itemId$, itemAnimation$, itemClass$, itemDisabled$, itemVisible$, itemTransition$, itemDestroyOnHide$, itemBodyClass$, itemButtonClass$, itemCollapseClass$, itemHeaderClass$, onItemVisibleChange$, onItemHidden$, onItemShown$, slotItemStructure$, slotItemBody$, slotItemHeader$, ...stateProps }, patch,] = writablesForProps(defaultAccordionConfig, config, configAccordionValidator);
+    const accordionItemConfig = {
+        itemId: itemId$,
+        itemClass: itemClass$,
+        itemAnimation: itemAnimation$,
+        itemDisabled: itemDisabled$,
+        itemVisible: itemVisible$,
+        itemTransition: itemTransition$,
+        itemDestroyOnHide: itemDestroyOnHide$,
+        itemBodyClass: itemBodyClass$,
+        itemButtonClass: itemButtonClass$,
+        itemCollapseClass: itemCollapseClass$,
+        itemHeaderClass: itemHeaderClass$,
+        onItemVisibleChange: onItemVisibleChange$,
+        onItemHidden: onItemHidden$,
+        onItemShown: onItemShown$,
+        slotItemStructure: slotItemStructure$,
+        slotItemBody: slotItemBody$,
+        slotItemHeader: slotItemHeader$,
+    };
     const itemsWidget$ = registrationArray();
     const openItems$ = computed(() => {
         const openItems = [];
         itemsWidget$().forEach((item) => {
-            if (!item.state$().itemCollapsed) {
+            if (item.state$().itemVisible) {
                 openItems.push(item.state$().itemId);
             }
         });
@@ -197,9 +214,6 @@ export function createAccordion(config) {
             adjustItemsCloseOthers(itemsWidget$(), openItems$(), oldOpenItem$());
             oldOpenItem$.set(openItems$()[0]);
         }
-        else {
-            itemsWidget$();
-        }
     });
     const action$ = computed(() => {
         checkCloseOthersAction$();
@@ -212,7 +226,7 @@ export function createAccordion(config) {
             isExpanded: (id) => {
                 const item = getItem(itemsWidget$(), id);
                 if (item) {
-                    return !item.state$().itemCollapsed;
+                    return item.state$().itemVisible;
                 }
                 else {
                     return false;
@@ -233,27 +247,11 @@ export function createAccordion(config) {
             collapseAll: () => {
                 itemsWidget$().forEach((i) => i.api.collapse());
             },
-            registerItem: (itemConfig) => {
-                const item = createAccordionItem(onShown$, onHidden$, computed(() => ({
-                    itemId: itemId$(),
-                    itemClass: itemClass$(),
-                    itemAnimation: itemAnimation$(),
-                    itemDisabled: itemDisabled$(),
-                    itemCollapsed: itemCollapsed$(),
-                    itemTransition: itemTransition$(),
-                    itemDestroyOnHide: itemDestroyOnHide$(),
-                    itemBodyClass: itemBodyClass$(),
-                    itemButtonClass: itemButtonClass$(),
-                    itemCollapseClass: itemCollapseClass$(),
-                    itemHeaderClass: itemHeaderClass$(),
-                    onItemCollapsedChange: onItemCollapsedChange$(),
-                    onItemHidden: onItemHidden$(),
-                    onItemShown: onItemShown$(),
-                    slotItemStructure: slotItemStructure$(),
-                    slotItemBody: slotItemBody$(),
-                    slotItemHeader: slotItemHeader$(),
-                    ...itemConfig?.(),
-                })));
+            registerItem: (propsConfig) => {
+                const item = createAccordionItem(onShown$, onHidden$, {
+                    config: mergeConfigStores(accordionItemProps, normalizeConfigStores(accordionItemProps, propsConfig?.config), accordionItemConfig),
+                    props: propsConfig?.props,
+                });
                 item.directives.accordionItemDirective = () => ({ destroy: itemsWidget$.register(item) });
                 return item;
             },

package/{dist/lib/alert.d.ts → alert.d.ts}

@@ -1,8 +1,9 @@
+import type { WidgetsCommonPropsAndState } from './commonProps';
 import type { PropsConfig } from './services';
 import type { TransitionFn } from './transitions';
 import type { Directive, SlotContent, Widget, WidgetSlotContext } from './types';
 export type AlertContext = WidgetSlotContext<AlertWidget>;
-export interface AlertCommonPropsAndState {
+export interface AlertCommonPropsAndState extends WidgetsCommonPropsAndState {
     /**
      * If `true`, alert can be dismissed by the user.
      * The close button (×) will be displayed and you can be notified of the event with the (close) output.

package/{dist/lib/alert.js → alert.js}

@@ -15,6 +15,7 @@ const defaultConfig = {
     animation: true,
     animationOnInit: false,
     transition: fadeTransition,
+    className: '',
 };
 /**
  * Retrieve a shallow copy of the default alert config
@@ -35,13 +36,15 @@ const configValidator = {
 export function createAlert(config) {
     const [{ transition$, animationOnInit$, animation$, visible$: requestedVisible$, onVisibleChange$, onHidden$, onShown$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config, configValidator);
     const transition = createTransition({
-        transition: transition$,
-        visible: requestedVisible$,
-        animation: animation$,
-        animationOnInit: animationOnInit$,
-        onVisibleChange: onVisibleChange$,
-        onHidden: onHidden$,
-        onShown: onShown$,
+        props: {
+            transition: transition$,
+            visible: requestedVisible$,
+            animation: animation$,
+            animationOnInit: animationOnInit$,
+            onVisibleChange: onVisibleChange$,
+            onHidden: onHidden$,
+            onShown: onShown$,
+        },
     });
     const close = () => {
         patch({ visible: false });

package/commonProps.d.ts

@@ -0,0 +1,6 @@
+export interface WidgetsCommonPropsAndState {
+    /**
+     * CSS classes to be applied on the widget main container
+     */
+    className: string;
+}

package/commonProps.js

@@ -0,0 +1 @@
+export {};

package/{dist/lib/config.d.ts → config.d.ts}

@@ -5,6 +5,7 @@ import type { PaginationProps } from './pagination';
 import type { RatingProps } from './rating';
 import type { SelectProps } from './select';
 import type { AccordionProps } from './accordion';
+import type { ProgressbarProps } from './progressbar';
 export type Partial2Levels<T> = Partial<{
     [Level1 in keyof T]: Partial<T[Level1]>;
 }>;
@@ -68,4 +69,8 @@ export interface WidgetsConfig {
      * the accordion widget config
      */
     accordion: AccordionProps;
+    /**
+     * the progress bar widget config
+     */
+    progressbar: ProgressbarProps;
 }

package/extendWidget.d.ts

@@ -0,0 +1,3 @@
+import type { ConfigValidator } from './services/stores';
+import type { Widget, WidgetFactory, WidgetProps, WidgetState } from './types';
+export declare const extendWidgetProps: <W extends Widget<object, object, object, object, object>, ExtraProps extends object>(factory: WidgetFactory<W>, extraPropsDefaults: ExtraProps, extraPropsConfig?: ConfigValidator<ExtraProps> | undefined) => WidgetFactory<Widget<WidgetProps<W> & ExtraProps, WidgetState<W> & ExtraProps, W["api"], W["actions"], W["directives"]>>;

package/extendWidget.js

@@ -0,0 +1,28 @@
+import { batch } from '@amadeus-it-group/tansu';
+import { stateStores, writablesWithDefault } from './services/stores';
+export const extendWidgetProps = (factory, extraPropsDefaults, extraPropsConfig) => (propsConfig) => {
+    const extraPropsWritables = writablesWithDefault(extraPropsDefaults, propsConfig, extraPropsConfig);
+    const widget = factory(propsConfig);
+    return {
+        ...widget,
+        ...stateStores({ ...widget.stores, ...extraPropsWritables }),
+        patch: (storesValues) => batch(() => {
+            let widgetProps;
+            for (const [name, value] of Object.entries(storesValues ?? {})) {
+                const extraPropsStore = extraPropsWritables[`${name}$`];
+                if (extraPropsStore) {
+                    extraPropsStore.set(value);
+                }
+                else {
+                    if (!widgetProps) {
+                        widgetProps = {};
+                    }
+                    widgetProps[name] = value;
+                }
+            }
+            if (widgetProps) {
+                widget.patch(widgetProps);
+            }
+        }),
+    };
+};

package/{dist/lib/index.d.ts → index.d.ts}

@@ -9,3 +9,6 @@ export * from './config';
 export * from './modal/modal';
 export * from './alert';
 export * from './accordion';
+export * from './commonProps';
+export * from './progressbar';
+export * from './extendWidget';

package/{dist/lib/index.js → index.js}

@@ -9,3 +9,6 @@ export * from './config';
 export * from './modal/modal';
 export * from './alert';
 export * from './accordion';
+export * from './commonProps';
+export * from './progressbar';
+export * from './extendWidget';

package/{dist/lib/modal → modal}/modal.d.ts

@@ -1,6 +1,7 @@
 import type { PropsConfig } from '../services';
 import type { TransitionFn } from '../transitions';
 import type { Widget, Directive, SlotContent, WidgetSlotContext } from '../types';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
 /**
  * Value present in the {@link ModalBeforeCloseEvent.result|result} property of the {@link ModalProps.onBeforeClose|onBeforeClose} event
  * and returned by the {@link ModalApi.open|open} method, when the modal is closed by a click inside the viewport but outside the modal.
@@ -18,7 +19,7 @@ export type ModalContext = WidgetSlotContext<ModalWidget>;
 /**
  * Properties of the modal widget that are also in the state of the modal.
  */
-export interface ModalCommonPropsAndState {
+export interface ModalCommonPropsAndState extends WidgetsCommonPropsAndState {
     /**
      * Value of the aria-label attribute to put on the close button.
      */
@@ -37,10 +38,6 @@ export interface ModalCommonPropsAndState {
      * Otherwise, they stay where the widget is located.
      */
     container: HTMLElement | null;
-    /**
-     * Classes to add on the modal DOM element.
-     */
-    modalClass: string;
     /**
      * Body of the modal.
      */
@@ -280,10 +277,6 @@ export declare function getModalDefaultConfig(): {
      * Otherwise, they stay where the widget is located.
      */
     container: HTMLElement | null;
-    /**
-     * Classes to add on the modal DOM element.
-     */
-    modalClass: string;
     /**
      * Body of the modal.
      */
@@ -309,6 +302,7 @@ export declare function getModalDefaultConfig(): {
      * Whether the modal should be visible when the transition is completed.
      */
     visible: boolean;
+    className: string;
 };
 /**
  * Creates a new modal widget instance.

package/{dist/lib/modal → modal}/modal.js

@@ -24,7 +24,7 @@ const defaultConfig = {
     closeButton: true,
     closeOnOutsideClick: true,
     container: typeof window !== 'undefined' ? document.body : null,
-    modalClass: '',
+    className: '',
     modalTransition: fadeTransition,
     onBeforeClose: noop,
     onVisibleChange: noop,
@@ -65,22 +65,26 @@ const modalsAction$ = computed(() => {
 export const createModal = (config$) => {
     const [{ animation$, backdrop$, backdropTransition$, closeOnOutsideClick$, container$, modalTransition$, onBeforeClose$, onVisibleChange$, onHidden$, onShown$, visible$: requestedVisible$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config$);
     const modalTransition = createTransition({
-        transition: modalTransition$,
-        visible: requestedVisible$,
-        animation: animation$,
-        animationOnInit: animation$,
-        onVisibleChange: onVisibleChange$,
-        // TODO: for onHidden and onShown, should we combine with information from the backdrop transition?
-        // (especially in case one of the two transitions takes more time than the other)
-        onHidden: onHidden$,
-        onShown: onShown$,
+        props: {
+            transition: modalTransition$,
+            visible: requestedVisible$,
+            animation: animation$,
+            animationOnInit: animation$,
+            onVisibleChange: onVisibleChange$,
+            // TODO: for onHidden and onShown, should we combine with information from the backdrop transition?
+            // (especially in case one of the two transitions takes more time than the other)
+            onHidden: onHidden$,
+            onShown: onShown$,
+        },
     });
     const visible$ = modalTransition.stores.visible$;
     const backdropTransition = createTransition({
-        transition: backdropTransition$,
-        visible: requestedVisible$,
-        animation: animation$,
-        animationOnInit: animation$,
+        props: {
+            transition: backdropTransition$,
+            visible: requestedVisible$,
+            animation: animation$,
+            animationOnInit: animation$,
+        },
     });
     const transitioning$ = computed(() => modalTransition.stores.transitioning$() || (backdrop$() && backdropTransition.stores.transitioning$()));
     const hidden$ = computed(() => !transitioning$() && !visible$());