@agnos-ui/core 0.10.0-next.4 → 0.11.0-next.0

package/{accordion-nxveC0GZ.cjs → accordion-BNq8mApi.cjs}

@@ -4,7 +4,7 @@ const services_transitions_baseTransitions = require("./services/transitions/bas
 const tansu = require("@amadeus-it-group/tansu");
 const utils_func = require("./utils/func.cjs");
 const utils_writables = require("./writables-Dt68gADJ.cjs");
-const utils_directive = require("./dom-Cm9_uROp.cjs");
+const utils_directive = require("./dom-BX4ImCTd.cjs");
 const utils_widget = require("./utils/widget.cjs");
 function adjustItemsCloseOthers(items, openItems, oldOpen) {
   let keepOpen;
@@ -145,7 +145,7 @@ function createAccordionItem(config) {
     events: {
       click: () => {
         if (!disabled$()) {
-          visible$.update((c) => !c);
+          void transition.api.toggle();
         }
       }
     }
@@ -176,15 +176,9 @@ function createAccordionItem(config) {
       initDone: () => {
         initDone$.set(true);
       },
-      collapse: () => {
-        visible$.set(false);
-      },
-      expand: () => {
-        visible$.set(true);
-      },
-      toggle: () => {
-        visible$.update((c) => !c);
-      }
+      collapse: transition.api.hide,
+      expand: transition.api.show,
+      toggle: transition.api.toggle
     },
     directives: {
       toggleDirective,
@@ -237,20 +231,20 @@ function factoryCreateAccordion(itemFactory = createAccordionItem, accordionItem
       ...utils_stores.stateStores({ itemWidgets$, className$ }),
       patch,
       api: {
-        expand: (id) => {
-          getItem(itemWidgets$(), id)?.api.expand();
+        expand: async (id) => {
+          await getItem(itemWidgets$(), id)?.api.expand();
         },
-        collapse: (id) => {
-          getItem(itemWidgets$(), id)?.api.collapse();
+        collapse: async (id) => {
+          await getItem(itemWidgets$(), id)?.api.collapse();
         },
-        toggle: (id) => {
-          getItem(itemWidgets$(), id)?.api.toggle();
+        toggle: async (id) => {
+          await getItem(itemWidgets$(), id)?.api.toggle();
         },
-        expandAll: () => {
-          itemWidgets$().forEach((i) => i.api.expand());
+        expandAll: async () => {
+          await Promise.all(itemWidgets$().map((i) => i.api.expand()));
         },
-        collapseAll: () => {
-          itemWidgets$().forEach((i) => i.api.collapse());
+        collapseAll: async () => {
+          await Promise.all(itemWidgets$().map((i) => i.api.collapse()));
         },
         registerItem: (propsConfig) => {
           const itemProps = accordionItemProps;
@@ -260,6 +254,7 @@ function factoryCreateAccordion(itemFactory = createAccordionItem, accordionItem
               onHidden: defaultItemConfig.onHidden,
               onShown: defaultItemConfig.onShown
             },
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
             { config: config2, props: propsConfig?.props }
           );
           const item = itemFactory({

package/{accordion-47EpOD36.js → accordion-CYAFmYRn.js}

@@ -2,8 +2,8 @@ import { writablesForProps, idWithDefault, stateStores, true$, mergeConfigStores
 import { createTransition } from "./services/transitions/baseTransitions.js";
 import { writable, computed, readable, asWritable } from "@amadeus-it-group/tansu";
 import { noop } from "./utils/func.js";
-import { k as createTypeEnum, e as typeString, h as typeFunction, c as typeBoolean } from "./writables-Is1bF1Vt.js";
-import { n as mergeDirectives, p as createAttributesDirective, r as registrationArray, d as directiveSubscribe } from "./dom-DD1hAVZy.js";
+import { j as typeString, e as typeFunction, b as typeBoolean, c as createTypeEnum } from "./writables-DYGjj5T3.js";
+import { s as mergeDirectives, g as createAttributesDirective, u as registrationArray, o as directiveSubscribe } from "./dom-Bb5ZCr_a.js";
 import { createWidgetFactory } from "./utils/widget.js";
 function adjustItemsCloseOthers(items, openItems, oldOpen) {
   let keepOpen;
@@ -144,7 +144,7 @@ function createAccordionItem(config) {
     events: {
       click: () => {
         if (!disabled$()) {
-          visible$.update((c) => !c);
+          void transition.api.toggle();
         }
       }
     }
@@ -175,15 +175,9 @@ function createAccordionItem(config) {
       initDone: () => {
         initDone$.set(true);
       },
-      collapse: () => {
-        visible$.set(false);
-      },
-      expand: () => {
-        visible$.set(true);
-      },
-      toggle: () => {
-        visible$.update((c) => !c);
-      }
+      collapse: transition.api.hide,
+      expand: transition.api.show,
+      toggle: transition.api.toggle
     },
     directives: {
       toggleDirective,
@@ -236,20 +230,20 @@ function factoryCreateAccordion(itemFactory = createAccordionItem, accordionItem
       ...stateStores({ itemWidgets$, className$ }),
       patch,
       api: {
-        expand: (id) => {
-          getItem(itemWidgets$(), id)?.api.expand();
+        expand: async (id) => {
+          await getItem(itemWidgets$(), id)?.api.expand();
         },
-        collapse: (id) => {
-          getItem(itemWidgets$(), id)?.api.collapse();
+        collapse: async (id) => {
+          await getItem(itemWidgets$(), id)?.api.collapse();
         },
-        toggle: (id) => {
-          getItem(itemWidgets$(), id)?.api.toggle();
+        toggle: async (id) => {
+          await getItem(itemWidgets$(), id)?.api.toggle();
         },
-        expandAll: () => {
-          itemWidgets$().forEach((i) => i.api.expand());
+        expandAll: async () => {
+          await Promise.all(itemWidgets$().map((i) => i.api.expand()));
         },
-        collapseAll: () => {
-          itemWidgets$().forEach((i) => i.api.collapse());
+        collapseAll: async () => {
+          await Promise.all(itemWidgets$().map((i) => i.api.collapse()));
         },
         registerItem: (propsConfig) => {
           const itemProps = accordionItemProps;
@@ -259,6 +253,7 @@ function factoryCreateAccordion(itemFactory = createAccordionItem, accordionItem
               onHidden: defaultItemConfig.onHidden,
               onShown: defaultItemConfig.onShown
             },
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
             { config: config2, props: propsConfig?.props }
           );
           const item = itemFactory({
@@ -307,8 +302,8 @@ function factoryCreateAccordion(itemFactory = createAccordionItem, accordionItem
 }
 const createAccordion = factoryCreateAccordion();
 export {
-  createAccordion as a,
-  createAccordionItem as c,
+  createAccordionItem as a,
+  createAccordion as c,
   factoryCreateAccordion as f,
   getAccordionDefaultConfig as g
 };

package/{alert-anMaigvi.js → alert-Cb9FhbFQ.js}

@@ -1,4 +1,4 @@
-import { g as getCommonAlertDefaultConfig, c as createCommonAlert } from "./common-CCxNtFNM.js";
+import { g as getCommonAlertDefaultConfig, c as createCommonAlert } from "./common-DFyZvkII.js";
 import { createWidgetFactory } from "./utils/widget.js";
 function getAlertDefaultConfig() {
   return { ...getCommonAlertDefaultConfig() };

package/{collapse-CrfvGo_T.js → collapse-Cg9s33tY.js}

@@ -1,7 +1,7 @@
 import { createTransition } from "./services/transitions/baseTransitions.js";
 import { writablesForProps, idWithDefault, stateStores } from "./utils/stores.js";
-import { p as createAttributesDirective, n as mergeDirectives } from "./dom-DD1hAVZy.js";
-import { h as typeFunction, e as typeString, c as typeBoolean } from "./writables-Is1bF1Vt.js";
+import { g as createAttributesDirective, s as mergeDirectives } from "./dom-Bb5ZCr_a.js";
+import { e as typeFunction, j as typeString, b as typeBoolean } from "./writables-DYGjj5T3.js";
 import { computed } from "@amadeus-it-group/tansu";
 import { noop } from "./utils/func.js";
 import { createWidgetFactory } from "./utils/widget.js";

package/{collapse-Da_27YUU.cjs → collapse-yKsOxJlH.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
 const utils_stores = require("./utils/stores.cjs");
-const utils_directive = require("./dom-Cm9_uROp.cjs");
+const utils_directive = require("./dom-BX4ImCTd.cjs");
 const utils_writables = require("./writables-Dt68gADJ.cjs");
 const tansu = require("@amadeus-it-group/tansu");
 const utils_func = require("./utils/func.cjs");

package/{common-CCxNtFNM.js → common-DFyZvkII.js}

@@ -1,7 +1,7 @@
 import { createTransition } from "./services/transitions/baseTransitions.js";
 import { noop } from "./utils/func.js";
 import { writablesForProps, stateStores } from "./utils/stores.js";
-import { e as typeString, c as typeBoolean, h as typeFunction } from "./writables-Is1bF1Vt.js";
+import { j as typeString, b as typeBoolean, e as typeFunction } from "./writables-DYGjj5T3.js";
 const defaultCommonAlertConfig = {
   visible: true,
   dismissible: true,

package/components/accordion/accordion.d.ts

@@ -109,30 +109,37 @@ export interface AccordionApi {
      * Given the itemId, will expand the corresponding accordion-item.
      *
      * If the itemId is not valid, nothing will happen.
+     * @returns A promise that resolves when the expand operation is completed.
      */
-    expand(itemId: string): void;
+    expand(itemId: string): Promise<void>;
     /**
      * Given the itemId, will collapse the corresponding accordion-item.
      *
      * If the itemId is not valid, nothing will happen.
+     * @returns A promise that resolves when the collapse operation is completed.
      */
-    collapse(itemId: string): void;
+    collapse(itemId: string): Promise<void>;
     /**
      * Given the itemId, will toggle the corresponding accordion-item.
      *
+     * @returns A promise that resolves when the toggle operation is completed.
      * If the itemId is not valid, nothing will happen.
      */
-    toggle(itemId: string): void;
+    toggle(itemId: string): Promise<void>;
     /**
      * It will expand all the items in the accordion.
      *
      * If `closeOthers` is `true` it will expand only the last accordion-item.
+     *
+     * @returns A promise that resolves when all the expand operations are completed.
      */
-    expandAll(): void;
+    expandAll(): Promise<void>;
     /**
      * It will collapse all the accordion-items in the accordion.
+     *
+     * @returns A promise that resolves when all the collapse operations are completed.
      */
-    collapseAll(): void;
+    collapseAll(): Promise<void>;
     /**
      * Creates a new accordionItem.
      */
@@ -157,16 +164,19 @@ export type AccordionWidget = Widget<AccordionProps, AccordionState, AccordionAp
 export interface AccordionItemApi {
     /**
      * It will collapse the accordion-item.
+     * @returns A promise that resolves when the collapse operation is completed.
      */
-    collapse(): void;
+    collapse(): Promise<void>;
     /**
      * It will expand the accordion-item.
+     * @returns A promise that resolves when the expand operation is completed.
      */
-    expand(): void;
+    expand(): Promise<void>;
     /**
      * It will toggle the accordion-item.
+     * @returns A promise that resolves when the toggle operation is completed.
      */
-    toggle(): void;
+    toggle(): Promise<void>;
     /**
      * Method to be called after the initialization to allow animations.
      */

package/components/accordion/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const accordion = require("../../accordion-nxveC0GZ.cjs");
+const accordion = require("../../accordion-BNq8mApi.cjs");
 exports.createAccordion = accordion.createAccordion;
 exports.createAccordionItem = accordion.createAccordionItem;
 exports.factoryCreateAccordion = accordion.factoryCreateAccordion;

package/components/accordion/index.js

@@ -1,7 +1,7 @@
-import { a, c, f, g } from "../../accordion-47EpOD36.js";
+import { c, a, f, g } from "../../accordion-CYAFmYRn.js";
 export {
-  a as createAccordion,
-  c as createAccordionItem,
+  c as createAccordion,
+  a as createAccordionItem,
   f as factoryCreateAccordion,
   g as getAccordionDefaultConfig
 };

package/components/alert/common.d.ts

@@ -102,11 +102,11 @@ export interface CommonAlertApi {
     /**
      * Triggers alert closing programmatically (same as clicking on the close button (×)).
      */
-    close(): void;
+    close(): Promise<void>;
     /**
      * Triggers the alert to be displayed for the user.
      */
-    open(): void;
+    open(): Promise<void>;
 }
 /**
  * Interface representing common alert directives.

package/components/alert/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../alert-anMaigvi.js";
+import { c, g } from "../../alert-Cb9FhbFQ.js";
 export {
   c as createAlert,
   g as getAlertDefaultConfig

package/components/carousel/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const utils_stores = require("../../utils/stores.cjs");
-const utils_directive = require("../../dom-Cm9_uROp.cjs");
+const utils_directive = require("../../dom-BX4ImCTd.cjs");
 const EmblaCarousel = require("embla-carousel");
 const tansu = require("@amadeus-it-group/tansu");
 const utils_writables = require("../../writables-Dt68gADJ.cjs");

package/components/carousel/index.js

@@ -1,8 +1,8 @@
-import { writablesForProps, stateStores, true$ } from "../../utils/stores.js";
-import { a as bindDirective, b as browserDirective, p as createAttributesDirective, n as mergeDirectives } from "../../dom-DD1hAVZy.js";
+import { writablesForProps, true$, stateStores } from "../../utils/stores.js";
+import { b as bindDirective, d as browserDirective, g as createAttributesDirective, s as mergeDirectives } from "../../dom-Bb5ZCr_a.js";
 import EmblaCarousel from "embla-carousel";
 import { writable, computed, asReadable, readable } from "@amadeus-it-group/tansu";
-import { h as typeFunction, e as typeString, c as typeBoolean, a as typeNumber, k as createTypeEnum, f as typeStringOrNull, j as typeArray } from "../../writables-Is1bF1Vt.js";
+import { e as typeFunction, j as typeString, b as typeBoolean, g as typeNumber, k as typeStringOrNull, a as typeArray, c as createTypeEnum } from "../../writables-DYGjj5T3.js";
 import { createNavManager } from "../../services/navManager.js";
 import { createWidgetFactory } from "../../utils/widget.js";
 const defaultConfig = {

package/components/collapse/collapse.d.ts

@@ -89,15 +89,15 @@ export interface CollapseApi {
     /**
      * Triggers collapse closing programmatically.
      */
-    close(): void;
+    close(): Promise<void>;
     /**
      * Triggers the collapse content to be displayed for the user.
      */
-    open(): void;
+    open(): Promise<void>;
     /**
      * Toggles the collapse content visibility.
      */
-    toggle(): void;
+    toggle(): Promise<void>;
 }
 /**
  * Interface representing the directives used in a collapse component.

package/components/collapse/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const collapse = require("../../collapse-Da_27YUU.cjs");
+const collapse = require("../../collapse-yKsOxJlH.cjs");
 exports.createCollapse = collapse.createCollapse;
 exports.getCollapseDefaultConfig = collapse.getCollapseDefaultConfig;

package/components/collapse/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../collapse-CrfvGo_T.js";
+import { c, g } from "../../collapse-Cg9s33tY.js";
 export {
   c as createCollapse,
   g as getCollapseDefaultConfig

package/components/drawer/drawer.d.ts

@@ -111,6 +111,12 @@ export interface DrawerProps extends DrawerCommonPropsAndState {
      * @defaultValue `false`
      */
     bodyScroll: boolean;
+    /**
+     * If `true` focuses the drawer when it is opened.
+     *
+     * @defaultValue `true`
+     */
+    focusOnInit: boolean;
     /**
      * Event to be triggered when the transition is completed and the drawer is not visible.
      *
@@ -192,6 +198,10 @@ export interface DrawerState extends DrawerCommonPropsAndState {
      * Flag to show whether the drawer is fully hidden.
      */
     hidden: boolean;
+    /**
+     * Flag to show whether the drawer is vertically positioned.
+     */
+    isVertical: boolean;
 }
 /**
  * Interface representing the API for a Drawer component.
@@ -200,11 +210,11 @@ export interface DrawerApi {
     /**
      * Trigger the opening of the drawer.
      */
-    open: () => void;
+    open: () => Promise<void>;
     /**
      * Trigger the closing of the drawer.
      */
-    close: () => void;
+    close: () => Promise<void>;
 }
 /**
  * Interface representing various directives used in the Drawer component.

package/components/drawer/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const drawer = require("../../drawer-B5Yaqpiu.cjs");
+const drawer = require("../../drawer-DoaLRui_.cjs");
 exports.createDrawer = drawer.createDrawer;
 exports.getDrawerDefaultConfig = drawer.getDrawerDefaultConfig;

package/components/drawer/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../drawer-CGHyRTM9.js";
+import { c, g } from "../../drawer-CYtNS8c1.js";
 export {
   c as createDrawer,
   g as getDrawerDefaultConfig

package/components/modal/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const modal = require("../../modal-B_3Uxplo.cjs");
+const modal = require("../../modal-CMeWLNO-.cjs");
 exports.createModal = modal.createModal;
 exports.getModalDefaultConfig = modal.getModalDefaultConfig;
 exports.modalCloseButtonClick = modal.modalCloseButtonClick;

package/components/modal/index.js

@@ -1,8 +1,8 @@
-import { c, g, a, b, m } from "../../modal-cKd3qUn1.js";
+import { c, g, m, a, b } from "../../modal-EHJERSIp.js";
 export {
   c as createModal,
   g as getModalDefaultConfig,
-  a as modalCloseButtonClick,
-  b as modalCloseEscape,
-  m as modalOutsideClick
+  m as modalCloseButtonClick,
+  a as modalCloseEscape,
+  b as modalOutsideClick
 };

package/components/pagination/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const pagination = require("../../pagination-2Vor6JPZ.cjs");
+const pagination = require("../../pagination-Ddk3z56A.cjs");
 exports.createPagination = pagination.createPagination;
 exports.getPaginationDefaultConfig = pagination.getPaginationDefaultConfig;

package/components/pagination/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../pagination-DlOyP_2C.js";
+import { c, g } from "../../pagination-BDKo2d3i.js";
 export {
   c as createPagination,
   g as getPaginationDefaultConfig

package/components/progressbar/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const progressbar = require("../../progressbar-DyBRINco.cjs");
+const progressbar = require("../../progressbar-ysfDQD0Q.cjs");
 exports.createProgressbar = progressbar.createProgressbar;
 exports.getProgressbarDefaultConfig = progressbar.getProgressbarDefaultConfig;

package/components/progressbar/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../progressbar-B5g76eMV.js";
+import { c, g } from "../../progressbar-BFdAfV5g.js";
 export {
   c as createProgressbar,
   g as getProgressbarDefaultConfig

package/components/rating/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const rating = require("../../rating-C0y1j4SC.cjs");
+const rating = require("../../rating-DO_fKNp3.cjs");
 exports.createRating = rating.createRating;
 exports.getRatingDefaultConfig = rating.getRatingDefaultConfig;

package/components/rating/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../rating-C7C4-p4B.js";
+import { c, g } from "../../rating-D04FQgtR.js";
 export {
   c as createRating,
   g as getRatingDefaultConfig

package/components/slider/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const slider = require("../../slider-DTO58syz.cjs");
+const slider = require("../../slider-BRktp0--.cjs");
 exports.createSlider = slider.createSlider;
 exports.getSliderDefaultConfig = slider.getSliderDefaultConfig;

package/components/slider/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../slider-B4WrdTeE.js";
+import { c, g } from "../../slider-BPQIKRKL.js";
 export {
   c as createSlider,
   g as getSliderDefaultConfig

package/components/toast/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const toaster = require("../../toaster-CT148JSJ.cjs");
+const toaster = require("../../toaster-Kq-cZoiD.cjs");
 exports.Toaster = toaster.Toaster;
 exports.createToast = toaster.createToast;
 exports.defaultToasterProps = toaster.defaultToasterProps;

package/components/toast/index.js

@@ -1,4 +1,4 @@
-import { T, c, d, g } from "../../toaster-CRPErgI2.js";
+import { T, c, d, g } from "../../toaster-y_hXuh4o.js";
 export {
   T as Toaster,
   c as createToast,

package/components/tree/index.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tree = require("../../tree-C4l2Wqny.cjs");
+const tree = require("../../tree-BAE89Xjn.cjs");
 exports.createTree = tree.createTree;
 exports.getTreeDefaultConfig = tree.getTreeDefaultConfig;

package/components/tree/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../tree-CHpFqJPx.js";
+import { c, g } from "../../tree-AM_J23Hz.js";
 export {
   c as createTree,
   g as getTreeDefaultConfig

package/config.d.ts

@@ -3,7 +3,6 @@ import type { ModalProps } from './components/modal/modal';
 import type { AlertProps } from './components/alert/alert';
 import type { PaginationProps } from './components/pagination/pagination';
 import type { RatingProps } from './components/rating/rating';
-import type { SelectProps } from './components/select/select';
 import type { AccordionProps } from './components/accordion/accordion';
 import type { ProgressbarProps } from './components/progressbar/progressbar';
 import type { SliderProps } from './components/slider/slider';
@@ -75,10 +74,6 @@ export type WidgetsConfig = {
      * the rating widget config
      */
     rating: RatingProps;
-    /**
-     * the select widget config
-     */
-    select: SelectProps<any>;
     /**
      * the modal widget config
      */

package/{dom-Cm9_uROp.cjs → dom-BX4ImCTd.cjs}

@@ -122,10 +122,13 @@ function clsx() {
   for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
   return n;
 }
-const isBrowserHTMLElement = esmEnv.BROWSER ? ((element) => {
-  const contentWindow = element?.ownerDocument?.defaultView ?? window;
-  return element instanceof contentWindow.HTMLElement;
-}) : (
+const isBrowserHTMLElement = esmEnv.BROWSER ? (
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+  ((element) => {
+    const contentWindow = element?.ownerDocument?.defaultView ?? window;
+    return element instanceof contentWindow.HTMLElement;
+  })
+) : (
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ((element) => false)
 );
@@ -277,6 +280,26 @@ const createBrowserStoreDirective = () => {
   const { directive, element$ } = createStoreDirective();
   return { directive: browserDirective(directive), element$ };
 };
+const conditionalDirective = (directive, condition) => (element, arg) => {
+  const instance$ = tansu.derived(
+    condition,
+    (enabled, set) => {
+      const instance = enabled ? directive(element, arg) : void 0;
+      set(instance);
+      return () => instance?.destroy?.();
+    },
+    void 0
+  );
+  const destroy = instance$.subscribe(() => {
+  });
+  return {
+    update(newArg) {
+      arg = newArg;
+      instance$()?.update?.(newArg);
+    },
+    destroy
+  };
+};
 const mergeDirectives = (...args) => (element, arg) => {
   const instances = tansu.batch(() => args.map((directive) => directive(element, arg)));
   return {
@@ -481,6 +504,7 @@ exports.bindDirectiveNoArg = bindDirectiveNoArg;
 exports.browserDirective = browserDirective;
 exports.classDirective = classDirective;
 exports.computeCommonAncestor = computeCommonAncestor;
+exports.conditionalDirective = conditionalDirective;
 exports.createAttributesDirective = createAttributesDirective;
 exports.createBrowserStoreArrayDirective = createBrowserStoreArrayDirective;
 exports.createBrowserStoreDirective = createBrowserStoreDirective;