@design-factory/core 22.0.0-next.0 → 22.0.0

package/{accordion-B5RqDwi3.js → accordion-DUFLBQkV.js}

@@ -16,8 +16,8 @@ function adjustItemsCloseOthers(items, openItems, oldOpen) {
   }
   if (keepOpen) {
     items.forEach((item) => {
-      if (item.stores.id$() !== keepOpen && item.stores.visible$()) {
-        item.patch({ visible: false });
+      if (item.stores.id$() !== keepOpen && item.stores.expanded$()) {
+        item.patch({ expanded: false });
       }
     });
   }
@@ -58,12 +58,12 @@ const defaultItemConfig = {
   id: "",
   destroyOnHide: defaultAccordionConfig.itemDestroyOnHide,
   disabled: false,
-  visible: false,
+  expanded: false,
   animated: defaultAccordionConfig.animated,
   transition: defaultAccordionConfig.itemTransition,
   onShown: noop,
   onHidden: noop,
-  onVisibleChange: noop,
+  onExpandedChange: noop,
   className: defaultAccordionConfig.itemClassName,
   headerClassName: defaultAccordionConfig.itemHeaderClassName,
   buttonClassName: defaultAccordionConfig.itemButtonClassName,
@@ -102,12 +102,12 @@ const configItemValidator = {
   id: typeString,
   destroyOnHide: typeBoolean,
   disabled: typeBoolean,
-  visible: typeBoolean,
+  expanded: typeBoolean,
   animated: typeBoolean,
   transition: typeFunction,
   onShown: typeFunction,
   onHidden: typeFunction,
-  onVisibleChange: typeFunction,
+  onExpandedChange: typeFunction,
   className: typeString,
   headerClassName: typeString,
   buttonClassName: typeString,
@@ -127,8 +127,8 @@ function createAccordionItem(config) {
       destroyOnHide$,
       onShown$,
       onHidden$,
-      onVisibleChange$,
-      visible$,
+      onExpandedChange$,
+      expanded$: requestedExpanded$,
       id$: _dirtyId$,
       disabled$,
       ...stateProps
@@ -140,8 +140,8 @@ function createAccordionItem(config) {
   const transition = createTransition({
     props: {
       transition: transition$,
-      visible: visible$,
-      onVisibleChange: onVisibleChange$,
+      visible: requestedExpanded$,
+      onVisibleChange: onExpandedChange$,
       animated: animated$,
       animatedOnInit: false,
       initDone: initDone$,
@@ -153,16 +153,17 @@ function createAccordionItem(config) {
       }
     }
   });
+  const expanded$ = transition.stores.visible$;
   const shouldBeInDOM$ = computed(() => !destroyOnHide$() || !transition.stores.hidden$());
   const toggleDirective = createAttributesDirective(() => ({
     attributes: {
       id: computed(() => `${id$()}-toggle`),
-      "aria-expanded": computed(() => `${visible$()}`),
+      "aria-expanded": computed(() => `${expanded$()}`),
       "aria-disabled": computed(() => `${disabled$()}`),
       "aria-controls": computed(() => `${id$()}-body-container`),
       disabled: disabled$
     },
-    classNames: { "df-collapsed": computed(() => !visible$()) },
+    classNames: { "df-collapsed": computed(() => !expanded$()) },
     events: {
       click: () => {
         if (!disabled$()) {
@@ -182,7 +183,7 @@ function createAccordionItem(config) {
   }));
   return {
     ...stateStores({
-      visible$,
+      expanded$,
       id$,
       shouldBeInDOM$,
       disabled$,
@@ -252,7 +253,7 @@ function factoryCreateAccordion(itemFactory = createAccordionItem, accordionItem
     const openItems$ = computed(() => {
       const openItems = [];
       itemWidgets$().forEach((item) => {
-        if (item.stores.visible$()) {
+        if (item.stores.expanded$()) {
           openItems.push(item.stores.id$());
         }
       });

package/{alert-Db6cG6JE.js → alert-klFrSyNy.js}

@@ -71,6 +71,7 @@ const createExtendedAlert = extendWidgetProps(
   alertDefaultConfig,
   alertConfigValidator,
   {
+    dismissible: false,
     transition: alertFadeTransition
   }
 );

package/components/accordion/accordion.d.ts

@@ -42,7 +42,7 @@ interface AccordionCommonPropsAndState extends WidgetsCommonPropsAndState {
      */
     addon: 'none' | 'icon' | 'number';
     /**
-     * When an item is visible (expanded), a separator line is shown below the item header.
+     * When an item is expanded, a separator line is shown below the item header.
      *
      * @defaultValue `false`
      */
@@ -183,7 +183,7 @@ export interface AccordionApi {
      * @returns A promise that resolves when the toggle operation is completed.
      * If the itemId is not valid, nothing will happen.
      */
-    toggle(itemId: string): Promise<void>;
+    toggle(itemId: string, animated?: boolean): Promise<void>;
     /**
      * It will expand all the items in the accordion.
      *
@@ -282,9 +282,9 @@ export interface AccordionItemDirectives {
  */
 interface AccordionItemCommonPropsAndState extends WidgetsCommonPropsAndState {
     /**
-     * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
+     * If `true`, the accordion-item will be expanded. Otherwise, it will be collapsed.
      */
-    visible: boolean;
+    expanded: 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.
@@ -341,11 +341,11 @@ export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
      */
     onHidden: () => void;
     /**
-     * An event fired when the `visible` value changes.
+     * An event fired when the `expanded` value changes.
      *
-     * Event payload is the new value of visible.
+     * Event payload is the new value of expanded.
      */
-    onVisibleChange: (visible: boolean) => void;
+    onExpandedChange: (expanded: boolean) => void;
 }
 /**
  * Represents the state of an accordion item.
@@ -353,7 +353,7 @@ export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
 export interface AccordionItemState extends AccordionItemCommonPropsAndState {
     /**
      * If `true` the content of the accordion-item collapse should be in DOM. Its value depends on the
-     * value of the `visible` and `destroyOnHide`.
+     * value of the `expanded` and `destroyOnHide`.
      */
     shouldBeInDOM: boolean;
 }

package/components/accordion/index.js

@@ -1,4 +1,4 @@
-import { c, a, f, g } from "../../accordion-B5RqDwi3.js";
+import { c, a, f, g } from "../../accordion-DUFLBQkV.js";
 export {
   c as createAccordion,
   a as createAccordionItem,

package/components/alert/alert.d.ts

@@ -74,6 +74,12 @@ export interface AlertState extends CommonAlertState, AlertExtraPropsAndState {
  * Represents the properties for the alert component.
  */
 export interface AlertProps extends CommonAlertProps, AlertExtraProps {
+    /**
+     * If `true`, alert can be dismissed by the user.
+     *
+     * @defaultValue `false`
+     */
+    dismissible: boolean;
 }
 /**
  * Represents the API for an alert component.

package/components/alert/index.js

@@ -1,4 +1,4 @@
-import { c } from "../../alert-Db6cG6JE.js";
+import { c } from "../../alert-klFrSyNy.js";
 export {
   c as createAlert
 };

package/components/drawer/drawer.d.ts

@@ -107,6 +107,13 @@ export interface DrawerProps extends DrawerCommonPropsAndState {
      * @defaultValue `true`
      */
     animated: boolean;
+    /**
+     * If `true` the backdrop fade in / out will be animated.
+     * Will use the `animated` property if set to `null`.
+     *
+     * @defaultValue `null`
+     */
+    backdropAnimated: boolean | null;
     /**
      * aria-labelledby attribute to use for the drawer element.
      *

package/components/drawer/index.js

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

package/components/dropdown/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../dropdown-Bjj2ql6d.js";
+import { c, g } from "../../dropdown-BZiBfdNu.js";
 export {
   c as createDropdown,
   g as getDropdownDefaultConfig

package/components/slider/index.js

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

package/components/tooltip/index.js

@@ -1,174 +1,6 @@
-import { writable, derived, computed, readable } from "@amadeus-it-group/tansu";
-import { createHasFocus, activeElement$ } from "../../services/focustrack.js";
-import { createHasMouseInside } from "../../services/mousetrack.js";
-import { typePlacement, createPositioning } from "../../services/positioning.js";
-import { createTransition } from "../../services/transitions/baseTransitions.js";
-import { createSimpleClassTransition } from "../../services/transitions/simpleClassTransition.js";
-import { debounceSignal } from "../../utils/debounceSignal.js";
-import { w as addEvent, s as mergeDirectives, g as createAttributesDirective, o as directiveSubscribe } from "../../directive-CMT2vEDg.js";
-import { createEdgeState } from "../../utils/edgeState.js";
-import { generateId } from "../../utils/id.js";
-import { writablesForProps, stateStores } from "../../utils/stores.js";
-import { createWidgetFactory } from "../../utils/widget.js";
-import { a as createTypeStringSpacedArray, d as typeBoolean, l as typeStringOrNull, c as createTypeEnum } from "../../writables-_7BriMb2.js";
-const verticalPlacement = ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"];
-const horizontalPlacement = ["end", "end-end", "end-start", "start", "start-end", "start-start"];
-const defaultPlacement = [...verticalPlacement, ...horizontalPlacement];
-const fadeTransition = createSimpleClassTransition({
-  animationPendingClasses: ["df-fade"],
-  animationPendingShowClasses: ["df-show"],
-  showClasses: ["df-show", "df-fade"],
-  hideClasses: ["df-hidden", "df-fade"]
-});
-const defaultTooltipConfig = {
-  animated: true,
-  content: "",
-  disabled: false,
-  placement: defaultPlacement,
-  size: "md"
-};
-const tooltipConfigValidator = {
-  animated: typeBoolean,
-  content: typeStringOrNull,
-  disabled: typeBoolean,
-  placement: createTypeStringSpacedArray((placement) => {
-    if (placement === "auto") {
-      return defaultPlacement;
-    } else if (placement === "vertical") {
-      return verticalPlacement;
-    } else if (placement === "horizontal") {
-      return horizontalPlacement;
-    }
-    return typePlacement.normalizeValue(placement);
-  }),
-  size: createTypeEnum(["sm", "md", "lg"])
-};
-const DEBOUNCE_DELAY = 200;
-const createTooltip = createWidgetFactory(
-  "tooltip",
-  (config) => {
-    const [{ placement$, animated$, disabled$, content$, ...stateProps }, patch] = writablesForProps(
-      defaultTooltipConfig,
-      config,
-      tooltipConfigValidator
-    );
-    const floating = createPositioning({
-      props: {
-        placement: placement$
-      }
-    });
-    const { directive: hasFocusDirective, hasFocus$ } = createHasFocus();
-    const forceVisibleOnFocus$ = writable(false);
-    const hasVisibleFocus$ = derived(
-      [hasFocus$, activeElement$, forceVisibleOnFocus$],
-      ([hasFocus, activeElement, forceVisibleOnFocus], set) => {
-        if (hasFocus) {
-          if (forceVisibleOnFocus || activeElement?.matches(":focus-visible")) {
-            set(true);
-          }
-        } else {
-          set(false);
-        }
-      },
-      false
-    );
-    const debouncedHasVisibleFocus$ = debounceSignal(hasVisibleFocus$, (value) => value ? DEBOUNCE_DELAY : -1);
-    const { directive: hasMouseInsideDirective, hasMouseInside$ } = createHasMouseInside();
-    const debouncedHasMouseInside$ = debounceSignal(hasMouseInside$, DEBOUNCE_DELAY);
-    const visible$ = createEdgeState(
-      {
-        mouseInside: debouncedHasMouseInside$,
-        hasVisibleFocus: debouncedHasVisibleFocus$
-      },
-      computed(() => disabled$() || !content$() || floating.stores.referenceHidden$())
-    );
-    const transition = createTransition({
-      props: {
-        transition: fadeTransition,
-        visible: visible$,
-        animated: animated$,
-        animatedOnInit: true
-      }
-    });
-    const escDismiss$ = readable(void 0, {
-      onUse: () => addEvent(
-        document.documentElement,
-        "keydown",
-        (event) => {
-          if (visible$() && event.key === "Escape") {
-            visible$.set(false);
-            event.preventDefault();
-            event.stopPropagation();
-          }
-        },
-        { capture: true }
-      )
-    });
-    const id$ = computed(generateId);
-    return {
-      ...stateStores({
-        ...stateProps,
-        content$,
-        animated$,
-        disabled$,
-        placement$,
-        visible$: transition.stores.visible$,
-        hidden$: transition.stores.hidden$
-      }),
-      patch,
-      api: {},
-      directives: {
-        referenceDirective: mergeDirectives(
-          floating.directives.referenceDirective,
-          hasFocusDirective,
-          hasMouseInsideDirective,
-          createAttributesDirective(() => ({
-            attributes: {
-              "aria-describedby": computed(() => transition.stores.hidden$() ? void 0 : id$())
-            },
-            styles: {
-              // prevents the trigger element from being selected when long-pressing on touch devices
-              userSelect: computed(() => disabled$() ? void 0 : "none")
-            },
-            events: {
-              contextmenu: (event) => {
-                if (event.pointerType === "touch" && !disabled$()) {
-                  event.preventDefault();
-                  if (hasVisibleFocus$()) {
-                    visible$.set(true);
-                  } else {
-                    forceVisibleOnFocus$.set(true);
-                    event.currentTarget?.focus?.();
-                    forceVisibleOnFocus$.set(false);
-                  }
-                }
-              }
-            }
-          }))
-        ),
-        floatingDirective: mergeDirectives(
-          floating.directives.floatingDirective,
-          transition.directives.directive,
-          hasMouseInsideDirective,
-          directiveSubscribe(escDismiss$),
-          createAttributesDirective(() => ({
-            attributes: {
-              role: readable("tooltip"),
-              id: id$
-            },
-            events: {
-              mousedown: (event) => {
-                if (hasVisibleFocus$() && debouncedHasMouseInside$() && !event.defaultPrevented) {
-                  visible$.skipNextSourceValue("hasVisibleFocus", false);
-                }
-              }
-            }
-          }))
-        )
-      }
-    };
-  }
-);
+import { c, d, t } from "../../tooltip-Cl7tQomt.js";
 export {
-  createTooltip
+  c as createTooltip,
+  d as defaultPlacement,
+  t as tooltipPlacementValidator
 };

package/components/tooltip/tooltip.d.ts

@@ -1,5 +1,5 @@
 import { type Placement } from '../../services/positioning';
-import type { Directive, SSRHTMLElement, Widget, WidgetFactory } from '../../types';
+import type { Directive, PickRequired, SSRHTMLElement, Widget, WidgetFactory, WritableWithDefaultOptions } from '../../types';
 /**
  * Valid placement values for the tooltip.
  * Includes all individual {@link Placement} values plus `'auto'`, `'vertical'` and `'horizontal'` shortcuts.
@@ -9,6 +9,10 @@ import type { Directive, SSRHTMLElement, Widget, WidgetFactory } from '../../typ
  * - `'horizontal'` expands to `'end end-end end-start start start-end start-start'`
  */
 export type TooltipPlacement = Placement | 'auto' | 'vertical' | 'horizontal';
+/**
+ * Default tooltip placements, in order of preference (vertical first, then horizontal).
+ */
+export declare const defaultPlacement: Placement[];
 export type TooltipSize = 'sm' | 'md' | 'lg';
 export interface TooltipCommonPropsAndState {
     /**
@@ -55,6 +59,11 @@ export interface TooltipDirectives {
     floatingDirective: Directive<void, SSRHTMLElement>;
 }
 export type TooltipWidget = Widget<TooltipProps, TooltipState, Record<string, never>, TooltipDirectives>;
+/**
+ * Validator for the tooltip `placement` prop. Normalizes a space-separated string or array of placements, expanding the
+ * `'auto'`, `'vertical'` and `'horizontal'` shortcuts to their respective placement lists.
+ */
+export declare const tooltipPlacementValidator: PickRequired<WritableWithDefaultOptions<Placement[]>, 'normalizeValue' | 'equal'>;
 /**
  * Create a TooltipWidget with given config props
  * @param config - an optional tooltip config

package/components/tooltip-overflow/index.d.ts

@@ -0,0 +1 @@
+export * from './tooltip-overflow';

package/components/tooltip-overflow/index.js

@@ -0,0 +1,78 @@
+import { derived, computed, asWritable } from "@amadeus-it-group/tansu";
+import { createResizeObserver } from "../../services/resizeObserver.js";
+import { i as createBrowserStoreDirective, s as mergeDirectives } from "../../directive-CMT2vEDg.js";
+import { noop } from "../../utils/func.js";
+import { writablesForProps, stateStores } from "../../utils/stores.js";
+import { createWidgetFactory } from "../../utils/widget.js";
+import { k as typeString, l as typeStringOrNull, d as typeBoolean, c as createTypeEnum } from "../../writables-_7BriMb2.js";
+import { t as tooltipPlacementValidator, d as defaultPlacement } from "../../tooltip-Cl7tQomt.js";
+const defaultOverflowTooltipConfig = {
+  animated: true,
+  content: "",
+  placement: defaultPlacement,
+  size: "md",
+  iconAriaLabel: "Show full text"
+};
+const overflowTooltipConfigValidator = {
+  animated: typeBoolean,
+  content: typeStringOrNull,
+  placement: tooltipPlacementValidator,
+  size: createTypeEnum(["sm", "md", "lg"]),
+  iconAriaLabel: typeString
+};
+const createOverflowTooltip = createWidgetFactory(
+  "tooltip",
+  // reuses the same config as the tooltip widget
+  (config) => {
+    const [{ content$, ...stateProps }, patch] = writablesForProps(
+      defaultOverflowTooltipConfig,
+      config,
+      overflowTooltipConfigValidator
+    );
+    const { directive: elementDirective, element$ } = createBrowserStoreDirective();
+    const textContent$ = derived(
+      element$,
+      (el, set) => {
+        if (!el) {
+          set("");
+          return noop;
+        }
+        set(el.textContent?.trim() ?? "");
+        const observer = new MutationObserver(() => set(el.textContent?.trim() ?? ""));
+        observer.observe(el, { childList: true, characterData: true, subtree: true });
+        return () => observer.disconnect();
+      },
+      ""
+    );
+    const { directive: resizeDirective, dimensions$ } = createResizeObserver();
+    const overflowing$ = computed(() => {
+      dimensions$();
+      textContent$();
+      const el = element$();
+      if (!el) {
+        return false;
+      }
+      return el.offsetWidth < el.scrollWidth;
+    });
+    const resolvedContent$ = asWritable(
+      computed(() => content$() || textContent$()),
+      content$.set
+    );
+    const referenceDirective = mergeDirectives(elementDirective, resizeDirective);
+    return {
+      ...stateStores({
+        ...stateProps,
+        content$: resolvedContent$,
+        overflowing$
+      }),
+      patch,
+      api: {},
+      directives: {
+        referenceDirective
+      }
+    };
+  }
+);
+export {
+  createOverflowTooltip
+};

package/components/tooltip-overflow/tooltip-overflow.d.ts

@@ -0,0 +1,34 @@
+import type { Directive, Widget, WidgetFactory } from '../../types';
+import { TooltipCommonPropsAndState } from '../tooltip/tooltip';
+export interface OverflowTooltipCommonPropsAndState extends Omit<TooltipCommonPropsAndState, 'disabled'> {
+    /**
+     * Text content to be displayed inside the tooltip.
+     * When empty, defaults to the element's textContent.
+     */
+    content: string | null;
+    /**
+     * Aria label for the tooltip ellipsis icon.
+     */
+    iconAriaLabel: string;
+}
+export interface OverflowTooltipState extends OverflowTooltipCommonPropsAndState {
+    /**
+     * Whether the element is currently overflowing.
+     */
+    overflowing: boolean;
+}
+export interface OverflowTooltipProps extends OverflowTooltipCommonPropsAndState {
+}
+export interface OverflowTooltipDirectives {
+    /**
+     * Directive to apply to the reference element.
+     */
+    referenceDirective: Directive;
+}
+export type OverflowTooltipWidget = Widget<OverflowTooltipProps, OverflowTooltipState, Record<string, never>, OverflowTooltipDirectives>;
+/**
+ * Create a OverflowTooltipWidget with given config props
+ * @param config - an optional overflow-tooltip config
+ * @returns a OverflowTooltipWidget
+ */
+export declare const createOverflowTooltip: WidgetFactory<OverflowTooltipWidget>;

package/{drawer-CpGnS2ln.js → drawer-D4xSbhcT.js}

@@ -9,7 +9,7 @@ import { noop } from "./utils/func.js";
 import { a as revertScrollbars, r as removeScrollbars } from "./scrollbars-ChGk75QR.js";
 import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
 import { createWidgetFactory } from "./utils/widget.js";
-import { d as typeBoolean, j as typeNumberOrNull, f as typeFunction, g as typeHTMLElementOrNull, k as typeString, c as createTypeEnum } from "./writables-_7BriMb2.js";
+import { d as typeBoolean, j as typeNumberOrNull, f as typeFunction, g as typeHTMLElementOrNull, k as typeString, e as typeBooleanOrNull, c as createTypeEnum } from "./writables-_7BriMb2.js";
 import { g as getTextDirection } from "./textDirection-cNgt24LJ.js";
 function getDrawerDefaultConfig() {
   return {
@@ -18,6 +18,7 @@ function getDrawerDefaultConfig() {
 }
 const defaultDrawerConfig = {
   animated: true,
+  backdropAnimated: null,
   ariaDescribedBy: "",
   ariaLabelledBy: "",
   backdropClass: "",
@@ -45,6 +46,7 @@ const defaultDrawerConfig = {
 };
 const configValidator = {
   animated: typeBoolean,
+  backdropAnimated: typeBooleanOrNull,
   ariaDescribedBy: typeString,
   ariaLabelledBy: typeString,
   backdropClass: typeString,
@@ -75,6 +77,7 @@ const createDrawer = createWidgetFactory(
   (config) => {
     const [
       {
+        backdropAnimated$: _backdropAnimated$,
         backdrop$: _backdrop$,
         backdropTransition$,
         backdropClass$,
@@ -159,9 +162,13 @@ const createDrawer = createWidgetFactory(
         }
       }))
     );
+    const backdropAnimated$ = asWritable(
+      computed(() => _backdropAnimated$() ?? animated$()),
+      (val) => _backdropAnimated$.set(val)
+    );
     const backdropTransition = createTransition({
       props: {
-        animated: animated$,
+        animated: backdropAnimated$,
         transition: backdropTransition$
       }
     });

package/{dropdown-Bjj2ql6d.js → dropdown-BZiBfdNu.js}

@@ -1,8 +1,8 @@
-import { computed, readable, derived } from "@amadeus-it-group/tansu";
+import { computed, readable } from "@amadeus-it-group/tansu";
 import { createHasFocus } from "./services/focustrack.js";
 import { createNavManager } from "./services/navManager.js";
 import { typePlacementArray, createPositioning } from "./services/positioning.js";
-import { s as mergeDirectives, g as createAttributesDirective, d as browserDirective, o as directiveSubscribe, b as bindDirective } from "./directive-CMT2vEDg.js";
+import { s as mergeDirectives, g as createAttributesDirective, d as browserDirective, b as bindDirective, w as addEvent } from "./directive-CMT2vEDg.js";
 import { noop } from "./utils/func.js";
 import { generateId } from "./utils/id.js";
 import { i as isFocusable, f as findPreviousFocusableElement, a as findNextFocusableElement, b as findNextElementSkippingSubtree, c as findNextElement } from "./isFocusable-C2iRr0zh.js";
@@ -83,11 +83,6 @@ const createDropdown = createWidgetFactory(
         End: ({ event }) => {
           event.preventDefault();
           focusLast({ event });
-        },
-        Escape: ({ event }) => {
-          event.preventDefault();
-          toggle(false);
-          anchorElement?.focus();
         }
       },
       selector: (menuElement) => menuElement.querySelectorAll(menuItemSelector)
@@ -100,18 +95,54 @@ const createDropdown = createWidgetFactory(
     });
     const positioningBeforeRef$ = computed(() => positioning.stores.placement$()?.startsWith("top"));
     const { directive: hasFocusDirective, hasFocus$ } = createHasFocus();
-    let previousHasFocus = false;
-    const autoClose$ = derived(hasFocus$, (hasFocus) => {
-      if (previousHasFocus && !hasFocus) {
-        toggle(false);
-      }
-      previousHasFocus = hasFocus;
-    });
     function toggle(opened) {
       opened$.update((currentOpened) => {
         return opened !== void 0 ? opened : !currentOpened;
       });
     }
+    const menuDismissDirective = browserDirective((menuElement) => {
+      let hadFocus = hasFocus$();
+      const unsubscribeFocus = hasFocus$.subscribe((hasFocus) => {
+        if (hadFocus && !hasFocus) {
+          toggle(false);
+        }
+        hadFocus = hasFocus;
+      });
+      const isInsideDropdown = (event) => {
+        const eventPath = event.composedPath();
+        return eventPath.includes(menuElement) || !!anchorElement && eventPath.includes(anchorElement);
+      };
+      const removeClickEvent = addEvent(
+        document.documentElement,
+        "click",
+        (event) => {
+          if (opened$() && !isInsideDropdown(event)) {
+            toggle(false);
+          }
+        },
+        { capture: true }
+      );
+      const removeKeydownEvent = addEvent(
+        document.documentElement,
+        "keydown",
+        (event) => {
+          if (opened$() && event.key === "Escape") {
+            toggle(false);
+            anchorElement?.focus();
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        },
+        { capture: true }
+      );
+      return {
+        destroy: () => {
+          unsubscribeFocus();
+          removeClickEvent();
+          removeKeydownEvent();
+        }
+      };
+    });
     const menuIdIfNeeded$ = computed(() => opened$() && container$() === "body" ? menuId$() : void 0);
     const idIfOpen$ = computed(() => opened$() ? id$() : void 0);
     return {
@@ -127,7 +158,7 @@ const createDropdown = createWidgetFactory(
           positioning.directives.floatingDirective,
           bindDirective(navDirective, navManagerConfig$),
           hasFocusDirective,
-          directiveSubscribe(autoClose$),
+          menuDismissDirective,
           createAttributesDirective(() => ({
             events: {
               // Clicking a non-interactive region of the menu (separator, padding, headers, aria-disabled items)
@@ -200,9 +231,6 @@ const createDropdown = createWidgetFactory(
                     event.preventDefault();
                     refreshElements(true);
                     focusLast();
-                  } else if (key === "Escape") {
-                    event.preventDefault();
-                    toggle(false);
                   } else if (key === "Tab") {
                     const before = positioningBeforeRef$();
                     if (!!event.shiftKey === before) {

package/index.js

@@ -1,16 +1,16 @@
 import { FACTORY_WIDGET_NAME, INVALID_VALUE } from "./types.js";
-import { c, a, f, g } from "./accordion-B5RqDwi3.js";
-import { c as c2 } from "./alert-Db6cG6JE.js";
+import { c, a, f, g } from "./accordion-DUFLBQkV.js";
+import { c as c2 } from "./alert-klFrSyNy.js";
 import { c as c3, g as g2 } from "./collapse-D8Jo56k9.js";
-import { c as c4, g as g3 } from "./dropdown-Bjj2ql6d.js";
+import { c as c4, g as g3 } from "./dropdown-BZiBfdNu.js";
 import { c as c5, g as g4, m, a as a2, b } from "./modal-CQWh2Sm5.js";
 import { c as c6, g as g5 } from "./pagination-DIRcpdRE.js";
 import { c as c7, g as g6 } from "./progressbar-Bth8r3Qu.js";
 import { c as c8, g as g7 } from "./rating-DLsgFSyB.js";
-import { c as c9, g as g8 } from "./slider-b9cVFNAL.js";
+import { c as c9, g as g8 } from "./slider-tH5g55yQ.js";
 import { T, c as c10, d, g as g9 } from "./toaster-BS9qeRLF.js";
 import { c as c11, g as g10 } from "./tree-DW6iLxdw.js";
-import { c as c12, g as g11 } from "./drawer-CpGnS2ln.js";
+import { c as c12, g as g11 } from "./drawer-D4xSbhcT.js";
 import { createWidgetsConfig, mergeInto } from "./config.js";
 import { extendWidgetProps } from "./services/extendWidget.js";
 import { activeElement$, createHasFocus } from "./services/focustrack.js";
@@ -27,7 +27,7 @@ import { createTransition, noAnimation } from "./services/transitions/baseTransi
 import { createCSSTransition, getTransitionDurationMs, hasTransition } from "./services/transitions/cssTransitions.js";
 import { createSimpleClassTransition } from "./services/transitions/simpleClassTransition.js";
 import { a as a3, b as b2, c as c13, d as d2, e, f as f2, g as g12, h, i, j, k, l, m as m2, n, o, p, q, r, s, t, u, v } from "./directive-CMT2vEDg.js";
-import { bindableDerived, bindableProp, createPatch, false$, findChangedProperties, idWithDefault, isStore, mergeConfigStores, normalizeConfigStores, stateStores, toReadableStore, toWritableStore, true$, writableWithDefault, writablesForProps, writablesWithDefault } from "./utils/stores.js";
+import { bindableProp, createPatch, false$, findChangedProperties, idWithDefault, isStore, mergeConfigStores, normalizeConfigStores, stateStores, toReadableStore, toWritableStore, true$, writableWithDefault, writablesForProps, writablesWithDefault } from "./utils/stores.js";
 import { c as c14, a as a4, t as t2, b as b3, d as d3, e as e2, f as f3, g as g13, h as h2, i as i2, j as j2, k as k2, l as l2 } from "./writables-_7BriMb2.js";
 export {
   FACTORY_WIDGET_NAME,
@@ -37,7 +37,6 @@ export {
   a3 as attributesData,
   b2 as bindDirective,
   c13 as bindDirectiveNoArg,
-  bindableDerived,
   bindableProp,
   d2 as browserDirective,
   e as classDirective,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@design-factory/core",
 	"description": "Internal package used by the Design Factory.",
-	"version": "22.0.0-next.0",
+	"version": "22.0.0",
 	"type": "module",
 	"main": "./index.cjs",
 	"module": "./index.js",

package/services/transitions/baseTransitions.js

@@ -2,7 +2,7 @@ import { computed, writable, derived, batch } from "@amadeus-it-group/tansu";
 import { e as typeBooleanOrNull, f as typeFunction, d as typeBoolean } from "../../writables-_7BriMb2.js";
 import { b as promiseWithResolve } from "../../promise-CkIc0KKt.js";
 import { noop } from "../../utils/func.js";
-import { writablesForProps, bindableDerived, stateStores } from "../../utils/stores.js";
+import { writablesForProps, bindableProp, stateStores } from "../../utils/stores.js";
 import { m as createStoreDirective, s as mergeDirectives, o as directiveSubscribe } from "../../directive-CMT2vEDg.js";
 const neverEndingPromise = new Promise(noop);
 const noAnimation = (element, direction) => {
@@ -44,7 +44,7 @@ const createTransition = (config) => {
   ] = writablesForProps(defaultValues, config, configValidator);
   const { element$, directive: storeDirective } = createStoreDirective();
   const elementPresent$ = computed(() => !!element$());
-  const visible$ = bindableDerived(onVisibleChange$, [requestedVisible$], ([visible]) => visible);
+  const visible$ = bindableProp(requestedVisible$, onVisibleChange$);
   const currentTransition$ = writable(
     null
   );
@@ -91,7 +91,7 @@ const createTransition = (config) => {
   const effectiveAnimation$ = computed(() => initDone$() ? animated$() : animatedOnInit$());
   const animationFromToggle$ = writable(null);
   let previousElement;
-  let previousVisible = requestedVisible$();
+  let previousVisible = visible$();
   let pendingTransition = null;
   const visibleAction$ = derived(
     [visible$, element$, effectiveAnimation$, animationFromToggle$, transition$, currentTransition$],
@@ -132,14 +132,14 @@ const createTransition = (config) => {
     }
   );
   let lastToggle = {};
-  const toggle = async (visible = !requestedVisible$(), animated = effectiveAnimation$()) => {
+  const toggle = async (visible = !visible$(), animated = effectiveAnimation$()) => {
     const currentToggle = {};
     lastToggle = currentToggle;
     try {
       await batch(() => {
         try {
           animationFromToggle$.set(animated);
-          requestedVisible$.set(visible);
+          visible$.set(visible);
           return visibleAction$();
         } finally {
           animationFromToggle$.set(null);

package/services/transitions/collapse.d.ts

@@ -3,6 +3,10 @@ import type { TransitionFn } from './baseTransitions';
  * Represents the context for a collapsible element.
  */
 export interface CollapseContext {
+    /**
+     * Whether the previous transition using this context was interrupted.
+     */
+    interrupted?: boolean;
     /**
      * the maximum size of the collapseable content.
      */

package/services/transitions/collapse.js

@@ -7,22 +7,29 @@ const createCollapseTransition = ({
   animationPendingClasses
 } = {}) => createCSSTransition((element, direction, animated, context) => {
   if (animated && isBrowserHTMLElement(element)) {
-    removeClasses(element, animationPendingClasses);
-    removeClasses(element, hideClasses);
-    addClasses(element, showClasses);
-    context.maxSize = element.getBoundingClientRect()[dimension] + "px";
-    removeClasses(element, animationPendingClasses);
-    removeClasses(element, showClasses);
-    addClasses(element, hideClasses);
-    context.minSize = element.getBoundingClientRect()[dimension] + "px";
-    removeClasses(element, showClasses);
-    removeClasses(element, hideClasses);
+    const interrupted = context.interrupted;
+    if (!context.maxSize || !context.minSize) {
+      element.style[dimension] = "";
+      removeClasses(element, animationPendingClasses);
+      removeClasses(element, hideClasses);
+      addClasses(element, showClasses);
+      context.maxSize = element.getBoundingClientRect()[dimension] + "px";
+      removeClasses(element, animationPendingClasses);
+      removeClasses(element, showClasses);
+      addClasses(element, hideClasses);
+      context.minSize = element.getBoundingClientRect()[dimension] + "px";
+      removeClasses(element, showClasses);
+      removeClasses(element, hideClasses);
+    }
     const values = direction === "show" ? [context.minSize, context.maxSize] : [context.maxSize, context.minSize];
-    element.style[dimension] = values[0];
-    reflow(element);
-    addClasses(element, animationPendingClasses);
-    reflow(element);
+    if (!interrupted) {
+      element.style[dimension] = values[0];
+      reflow(element);
+      addClasses(element, animationPendingClasses);
+      reflow(element);
+    }
     element.style[dimension] = values[1];
+    context.interrupted = true;
   } else {
     removeClasses(element, direction === "show" ? hideClasses : showClasses);
   }

package/{slider-b9cVFNAL.js → slider-tH5g55yQ.js}

@@ -131,13 +131,6 @@ const computeCleanValue = (value, min, max, intStepSize, decimalPrecision) => {
   const indexMin = Math.floor((value - min) * magnitude / intStepSize);
   return +(((value - min) * magnitude % intStepSize < intStepSize / 2 ? indexMin : indexMin + 1) * intStepSize / magnitude + min).toFixed(decimalPrecision);
 };
-const updateValue = (handleIndex, values$, stepSize, updateDirection) => {
-  values$.update((value) => {
-    value = [...value];
-    value[handleIndex] = value[handleIndex] + stepSize * updateDirection;
-    return value;
-  });
-};
 const getUpdateDirection = (vertical, rtl, keysVertical) => {
   if (vertical && rtl) {
     return keysVertical ? 1 : -1;
@@ -215,7 +208,6 @@ const createSlider = createWidgetFactory(
       () => Math.max(getDecimalPrecision(stepSize$()), getDecimalPrecision(min$()), getDecimalPrecision(max$()))
     );
     const _intStepSize$ = computed(() => stepSize$() * Math.pow(10, _decimalPrecision$()));
-    let previousValues = _dirtyValues$();
     const values$ = bindableProp(
       _dirtyValues$,
       onValuesChange$,
@@ -224,23 +216,28 @@ const createSlider = createWidgetFactory(
         const max = max$();
         const intStepSize = _intStepSize$();
         const decimalPrecision = _decimalPrecision$();
-        const newValues = dirtyValues.map((dv) => computeCleanValue(dv, min, max, intStepSize, decimalPrecision));
-        if (dirtyValues.length > 1) {
+        return dirtyValues.map((dv) => computeCleanValue(dv, min, max, intStepSize, decimalPrecision));
+      },
+      typeArray.equal
+    );
+    const updateValueAtIndex = (index, newValue) => {
+      values$.update((vals) => {
+        const min = min$();
+        const max = max$();
+        const intStepSize = _intStepSize$();
+        const decimalPrecision = _decimalPrecision$();
+        const newVals = [...vals];
+        newVals[index] = computeCleanValue(newValue, min, max, intStepSize, decimalPrecision);
+        if (newVals.length > 1) {
           const minRange = minRange$();
           const maxRange = maxRange$();
           if (minRange || maxRange) {
-            const pushRange = pushRange$();
-            const changedIndex = newValues.findIndex((dv, index) => dv !== previousValues[index]);
-            if (changedIndex !== -1) {
-              manageMinMaxRange(newValues, changedIndex, minRange, maxRange, min, max, pushRange);
-            }
+            manageMinMaxRange(newVals, index, minRange, maxRange, min, max, pushRange$());
           }
         }
-        previousValues = newValues;
-        return newValues;
-      },
-      typeArray.equal
-    );
+        return newVals;
+      });
+    };
     const { directive: sliderDirective, element$: sliderDom$ } = createBrowserStoreDirective();
     const { directive: minLabelDomDirective, element$: minLabelDom$ } = createBrowserStoreDirective();
     const { directive: maxLabelDomDirective, element$: maxLabelDom$ } = createBrowserStoreDirective();
@@ -516,11 +513,7 @@ const createSlider = createWidgetFactory(
         const clickedPercent = getClickedPercent(clickedCoordinate);
         const derivedHandleIndex = handleNumber ?? getClosestSliderHandle(clickedPercent);
         const newValue = clickedPercent * (max$() - min$()) + min$();
-        values$.update((dh) => {
-          dh = [...dh];
-          dh[derivedHandleIndex] = newValue;
-          return dh;
-        });
+        updateValueAtIndex(derivedHandleIndex, newValue);
       }
     };
     const horizontal$ = computed(() => !vertical$());
@@ -621,30 +614,34 @@ const createSlider = createWidgetFactory(
             if (interactive$()) {
               switch (key) {
                 case "ArrowDown":
-                  updateValue(handleIndex, values$, stepSize, getUpdateDirection(vertical, rtl, true));
+                  updateValueAtIndex(
+                    handleIndex,
+                    values$()[handleIndex] + stepSize * getUpdateDirection(vertical, rtl, true)
+                  );
                   break;
                 case "ArrowLeft":
-                  updateValue(handleIndex, values$, stepSize, getUpdateDirection(vertical, rtl, false));
+                  updateValueAtIndex(
+                    handleIndex,
+                    values$()[handleIndex] + stepSize * getUpdateDirection(vertical, rtl, false)
+                  );
                   break;
                 case "ArrowUp":
-                  updateValue(handleIndex, values$, stepSize, -1 * getUpdateDirection(vertical, rtl, true));
+                  updateValueAtIndex(
+                    handleIndex,
+                    values$()[handleIndex] + stepSize * -1 * getUpdateDirection(vertical, rtl, true)
+                  );
                   break;
                 case "ArrowRight":
-                  updateValue(handleIndex, values$, stepSize, -1 * getUpdateDirection(vertical, rtl, false));
+                  updateValueAtIndex(
+                    handleIndex,
+                    values$()[handleIndex] + stepSize * -1 * getUpdateDirection(vertical, rtl, false)
+                  );
                   break;
                 case "Home":
-                  values$.update((value) => {
-                    value = [...value];
-                    value[handleIndex] = min;
-                    return value;
-                  });
+                  updateValueAtIndex(handleIndex, min);
                   break;
                 case "End":
-                  values$.update((value) => {
-                    value = [...value];
-                    value[handleIndex] = max;
-                    return value;
-                  });
+                  updateValueAtIndex(handleIndex, max);
                   break;
                 case "PageUp":
                   break;

package/tooltip-Cl7tQomt.js

@@ -0,0 +1,177 @@
+import { writable, derived, computed, readable } from "@amadeus-it-group/tansu";
+import { createHasFocus, activeElement$ } from "./services/focustrack.js";
+import { createHasMouseInside } from "./services/mousetrack.js";
+import { typePlacement, createPositioning } from "./services/positioning.js";
+import { createTransition } from "./services/transitions/baseTransitions.js";
+import { createSimpleClassTransition } from "./services/transitions/simpleClassTransition.js";
+import { debounceSignal } from "./utils/debounceSignal.js";
+import { w as addEvent, s as mergeDirectives, g as createAttributesDirective, o as directiveSubscribe } from "./directive-CMT2vEDg.js";
+import { createEdgeState } from "./utils/edgeState.js";
+import { generateId } from "./utils/id.js";
+import { writablesForProps, stateStores } from "./utils/stores.js";
+import { createWidgetFactory } from "./utils/widget.js";
+import { a as createTypeStringSpacedArray, d as typeBoolean, l as typeStringOrNull, c as createTypeEnum } from "./writables-_7BriMb2.js";
+const verticalPlacement = ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"];
+const horizontalPlacement = ["end", "end-end", "end-start", "start", "start-end", "start-start"];
+const defaultPlacement = [...verticalPlacement, ...horizontalPlacement];
+const fadeTransition = createSimpleClassTransition({
+  animationPendingClasses: ["df-fade"],
+  animationPendingShowClasses: ["df-show"],
+  showClasses: ["df-show", "df-fade"],
+  hideClasses: ["df-hidden", "df-fade"]
+});
+const defaultTooltipConfig = {
+  animated: true,
+  content: "",
+  disabled: false,
+  placement: defaultPlacement,
+  size: "md"
+};
+const tooltipPlacementValidator = createTypeStringSpacedArray((placement) => {
+  if (placement === "auto") {
+    return defaultPlacement;
+  } else if (placement === "vertical") {
+    return verticalPlacement;
+  } else if (placement === "horizontal") {
+    return horizontalPlacement;
+  }
+  return typePlacement.normalizeValue(placement);
+});
+const tooltipConfigValidator = {
+  animated: typeBoolean,
+  content: typeStringOrNull,
+  disabled: typeBoolean,
+  placement: tooltipPlacementValidator,
+  size: createTypeEnum(["sm", "md", "lg"])
+};
+const DEBOUNCE_DELAY = 200;
+const createTooltip = createWidgetFactory(
+  "tooltip",
+  (config) => {
+    const [{ placement$, animated$, disabled$, content$, ...stateProps }, patch] = writablesForProps(
+      defaultTooltipConfig,
+      config,
+      tooltipConfigValidator
+    );
+    const floating = createPositioning({
+      props: {
+        placement: placement$
+      }
+    });
+    const { directive: hasFocusDirective, hasFocus$ } = createHasFocus();
+    const forceVisibleOnFocus$ = writable(false);
+    const hasVisibleFocus$ = derived(
+      [hasFocus$, activeElement$, forceVisibleOnFocus$],
+      ([hasFocus, activeElement, forceVisibleOnFocus], set) => {
+        if (hasFocus) {
+          if (forceVisibleOnFocus || activeElement?.matches(":focus-visible")) {
+            set(true);
+          }
+        } else {
+          set(false);
+        }
+      },
+      false
+    );
+    const debouncedHasVisibleFocus$ = debounceSignal(hasVisibleFocus$, (value) => value ? DEBOUNCE_DELAY : -1);
+    const { directive: hasMouseInsideDirective, hasMouseInside$ } = createHasMouseInside();
+    const debouncedHasMouseInside$ = debounceSignal(hasMouseInside$, DEBOUNCE_DELAY);
+    const visible$ = createEdgeState(
+      {
+        mouseInside: debouncedHasMouseInside$,
+        hasVisibleFocus: debouncedHasVisibleFocus$
+      },
+      computed(() => disabled$() || !content$() || floating.stores.referenceHidden$())
+    );
+    const transition = createTransition({
+      props: {
+        transition: fadeTransition,
+        visible: visible$,
+        animated: animated$,
+        animatedOnInit: true
+      }
+    });
+    const escDismiss$ = readable(void 0, {
+      onUse: () => addEvent(
+        document.documentElement,
+        "keydown",
+        (event) => {
+          if (visible$() && event.key === "Escape") {
+            void transition.api.toggle(false);
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        },
+        { capture: true }
+      )
+    });
+    const id$ = computed(generateId);
+    return {
+      ...stateStores({
+        ...stateProps,
+        content$,
+        animated$,
+        disabled$,
+        placement$,
+        visible$: transition.stores.visible$,
+        hidden$: transition.stores.hidden$
+      }),
+      patch,
+      api: {},
+      directives: {
+        referenceDirective: mergeDirectives(
+          floating.directives.referenceDirective,
+          hasFocusDirective,
+          hasMouseInsideDirective,
+          createAttributesDirective(() => ({
+            attributes: {
+              "aria-describedby": computed(() => transition.stores.hidden$() ? void 0 : id$())
+            },
+            styles: {
+              // prevents the trigger element from being selected when long-pressing on touch devices
+              userSelect: computed(() => disabled$() ? void 0 : "none")
+            },
+            events: {
+              contextmenu: (event) => {
+                if (event.pointerType === "touch" && !disabled$()) {
+                  event.preventDefault();
+                  if (hasVisibleFocus$()) {
+                    void transition.api.toggle(true);
+                  } else {
+                    forceVisibleOnFocus$.set(true);
+                    event.currentTarget?.focus?.();
+                    forceVisibleOnFocus$.set(false);
+                  }
+                }
+              }
+            }
+          }))
+        ),
+        floatingDirective: mergeDirectives(
+          floating.directives.floatingDirective,
+          transition.directives.directive,
+          hasMouseInsideDirective,
+          directiveSubscribe(escDismiss$),
+          createAttributesDirective(() => ({
+            attributes: {
+              role: readable("tooltip"),
+              id: id$
+            },
+            events: {
+              mousedown: (event) => {
+                if (hasVisibleFocus$() && debouncedHasMouseInside$() && !event.defaultPrevented) {
+                  visible$.skipNextSourceValue("hasVisibleFocus", false);
+                }
+              }
+            }
+          }))
+        )
+      }
+    };
+  }
+);
+export {
+  createTooltip as c,
+  defaultPlacement as d,
+  tooltipPlacementValidator as t
+};

package/utils/stores.d.ts

@@ -1,4 +1,4 @@
-import type { ReadableSignal, StoreInput, StoresInputValues, WritableSignal } from '@amadeus-it-group/tansu';
+import type { ReadableSignal, WritableSignal } from '@amadeus-it-group/tansu';
 import type { ConfigValidator, PropsConfig, ValuesOrReadableSignals, WritableWithDefaultOptions } from '../types';
 /**
  * Transforms the properties of a given type `P` into writable signals.
@@ -188,20 +188,6 @@ export declare const stateStores: <A extends object>(inputStores: { [K in keyof
     state$: ReadableSignal<A>;
     stores: { [K in keyof A as `${K & string}$`]: ReadableSignal<A[K]>; };
 };
-/**
- * Creates a writable signal that derives its value from multiple stores and allows for custom adjustment and equality checks.
- *
- * @template T - The type of the derived value.
- * @template U - A tuple type where the first element is a writable signal of type T and the rest are store inputs.
- *
- * @param onChange$ - A readable signal that emits a function to be called when the derived value changes.
- * @param stores - A tuple of stores where the first element is a writable signal of type T and the rest are store inputs.
- * @param adjustValue - A function to adjust the derived value based on the input values from the stores.
- * @param equal - A function to compare the current and new values for equality.
- *
- * @returns A writable signal that derives its value from the provided stores and allows for custom adjustment and equality checks.
- */
-export declare const bindableDerived: <T, U extends [WritableSignal<T>, ...StoreInput<any>[]]>(onChange$: ReadableSignal<(value: T) => void>, stores: U, adjustValue?: (arg: StoresInputValues<U>) => T, equal?: (currentValue: T, newValue: T) => boolean) => WritableSignal<T>;
 /**
  * Creates a bindable property that synchronizes a writable signal with an optional adjustment function and equality check.
  *

package/utils/stores.js

@@ -1,4 +1,4 @@
-import { readable, equal, asWritable, derived, computed, batch, asReadable, get, writable } from "@amadeus-it-group/tansu";
+import { readable, equal, asWritable, computed, batch, asReadable, get, writable } from "@amadeus-it-group/tansu";
 import { INVALID_VALUE } from "../types.js";
 import { identity } from "./func.js";
 import { generateId } from "./id.js";
@@ -118,27 +118,6 @@ const stateStores = (inputStores) => {
     })
   };
 };
-const bindableDerived = (onChange$, stores, adjustValue = (arg) => arg[0], equal2 = (currentValue, newValue) => newValue === currentValue) => {
-  let currentValue = stores[0]();
-  return asWritable(
-    derived(stores, {
-      derive(values) {
-        const newValue = adjustValue(values);
-        const rectifiedValue = !equal2(values[0], newValue);
-        if (rectifiedValue) {
-          stores[0].set(newValue);
-        }
-        if (rectifiedValue || !equal2(currentValue, newValue)) {
-          currentValue = newValue;
-          onChange$()(newValue);
-        }
-        return newValue;
-      },
-      equal: equal2
-    }),
-    stores[0].set.bind(stores[0])
-  );
-};
 const bindableProp = (store$, onChange$, adjustValue = identity, equal$1 = equal) => asWritable(
   computed(() => adjustValue(store$()), { equal: equal$1 }),
   (newValue) => {
@@ -156,7 +135,6 @@ function idWithDefault(id$) {
 const true$ = readable(true);
 const false$ = readable(false);
 export {
-  bindableDerived,
   bindableProp,
   createPatch,
   false$,