@agnos-ui/core 0.10.0-next.2 → 0.10.0-next.4

package/{slider-Dl4Trh32.cjs → slider-DTO58syz.cjs}

@@ -1,10 +1,11 @@
 "use strict";
 const tansu = require("@amadeus-it-group/tansu");
-const utils_directive = require("./dom-C2gi9OCP.cjs");
+const utils_directive = require("./dom-Cm9_uROp.cjs");
 const utils_func = require("./utils/func.cjs");
 const utils_stores = require("./utils/stores.cjs");
-const utils_writables = require("./writables-DcGT98a7.cjs");
+const utils_writables = require("./writables-Dt68gADJ.cjs");
 const services_resizeObserver = require("./services/resizeObserver.cjs");
+const services_pointerdownPosition = require("./services/pointerdownPosition.cjs");
 const utils_widget = require("./utils/widget.cjs");
 const decimalRegExp = /(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/;
 function getDecimalPrecision(number) {
@@ -176,7 +177,6 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
     patch
   ] = utils_stores.writablesForProps(defaultSliderConfig, config, configValidator);
   const { vertical$, disabled$, readonly$ } = stateProps;
-  let _prevCoordinate = -1;
   const _handleElements = /* @__PURE__ */ new Map();
   const min$ = tansu.computed(() => {
     const _dirtyMinimum = _dirtyMinimum$(), _dirtyMaximum = _dirtyMaximum$();
@@ -239,20 +239,11 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
   const { directive: sliderDirective, element$: sliderDom$ } = utils_directive.createBrowserStoreDirective();
   const { directive: minLabelDomDirective, element$: minLabelDom$ } = utils_directive.createBrowserStoreDirective();
   const { directive: maxLabelDomDirective, element$: maxLabelDom$ } = utils_directive.createBrowserStoreDirective();
-  const { directive: combinedLabelDomDirective, element$: combinedLabelDom$ } = utils_directive.createBrowserStoreDirective();
   const { directive: handleLabelDirective, elements$: currentLabelDoms$ } = utils_directive.createBrowserStoreArrayDirective();
   const { directive: resizeDirective, dimensions$ } = services_resizeObserver.createResizeObserver();
+  const { directive: resizeLabelsDirective, dimensionsMap$: handleDimensions$ } = services_resizeObserver.createResizeObserverMap();
+  const { directive: resizeCombineLabelDirective, dimensions$: combinedDimensions$ } = services_resizeObserver.createResizeObserver();
   const updateSliderSize$ = tansu.writable({});
-  const currentLabelDomsRect$ = tansu.computed(
-    () => {
-      dimensions$();
-      updateSliderSize$();
-      return currentLabelDoms$().map((element) => element.getBoundingClientRect());
-    },
-    {
-      equal: Object.is
-    }
-  );
   const sliderDomRect$ = tansu.computed(
     () => {
       dimensions$();
@@ -283,8 +274,8 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
       equal: (a, b) => Object.is(a, b)
     }
   );
-  const sliderDomRectOffset$ = tansu.computed(() => vertical$() ? sliderDomRect$().top : sliderDomRect$().left);
-  const sliderDomRectSize$ = tansu.computed(() => vertical$() ? sliderDomRect$().height : sliderDomRect$().width);
+  const sliderDomRectOffset$ = tansu.computed(() => sliderDomRect$()[vertical$() ? "top" : "left"]);
+  const sliderDomRectSize$ = tansu.computed(() => sliderDomRect$()[vertical$() ? "height" : "width"]);
   const sortedValues$ = tansu.computed(() => [...values$()].sort((a, b) => a - b));
   const _sortedHandlesValues$ = tansu.computed(() => {
     return values$().map((val, index) => {
@@ -304,21 +295,15 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
   });
   const valuesPercent$ = tansu.computed(() => values$().map((val) => percentCompute(val)));
   const sortedValuesPercent$ = tansu.computed(() => [...valuesPercent$()].sort((a, b) => a - b));
-  const minLabelSize$ = tansu.computed(() => {
-    const minLabelDomRect = minLabelDomRect$();
-    return pixelToPercent(vertical$() ? minLabelDomRect.height : minLabelDomRect.width);
-  });
-  const maxLabelSize$ = tansu.computed(() => {
-    const maxLabelDomRect = maxLabelDomRect$();
-    return pixelToPercent(vertical$() ? maxLabelDomRect.height : maxLabelDomRect.width);
-  });
+  const activeDimension$ = tansu.computed(() => vertical$() ? "height" : "width");
+  const activePosition$ = tansu.computed(() => vertical$() ? "top" : "left");
+  const minLabelSize$ = tansu.computed(() => pixelToPercent(minLabelDomRect$()[activeDimension$()]));
+  const maxLabelSize$ = tansu.computed(() => pixelToPercent(maxLabelDomRect$()[activeDimension$()]));
   const adjustedShowValueLabels$ = tansu.computed(() => showValueLabels$() && (!showTicks$() || !showTickValues$()));
   const pixelToPercent = (pixels) => pixels ? pixels / sliderDomRectSize$() * 100 : 0;
-  const combinedLabelSize$ = tansu.computed(
-    () => pixelToPercent(vertical$() ? combinedLabelDom$()?.getBoundingClientRect().height : combinedLabelDom$()?.getBoundingClientRect().width)
-  );
+  const combinedLabelSize$ = tansu.computed(() => pixelToPercent(combinedDimensions$()?.contentRect[activeDimension$()]));
   const combinedLabelPosition$ = tansu.computed(() => vertical$() ? combinedLabelPositionTop$() : combinedLabelPositionLeft$());
-  const currentLabelSizeByIndex = (index) => pixelToPercent(vertical$() ? currentLabelDomsRect$()[index]?.height : currentLabelDomsRect$()[index]?.width);
+  const currentLabelSizeByIndex = (index) => pixelToPercent(handleDimensions$().get(currentLabelDoms$()[index])?.contentRect[activeDimension$()]);
   const minValueLabelDisplay$ = tansu.computed(() => {
     if (!showMinMaxLabels$() || showTicks$() && showTickValues$()) {
       return false;
@@ -353,23 +338,34 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
     const sortedValuesPercent = sortedValuesPercent$();
     return rtl ? 100 - sortedValuesPercent[sortedValuesPercent.length - 1] - currentLabelSizeByIndex(0) / 2 > maxLabelSize + 1 : sortedValuesPercent[sortedValuesPercent.length - 1] + currentLabelSizeByIndex(sortedValuesPercent.length - 1) / 2 < 100 - maxLabelSize - 1;
   });
-  const storedLabelSize$ = tansu.writable([]);
   const combinedLabelDisplay$ = tansu.computed(() => {
-    const values = sortedValuesPercent$();
-    if (currentLabelDomsRect$().length === values.length) {
-      storedLabelSize$.set(values.map((_, index) => currentLabelSizeByIndex(index) / 2));
+    if (currentLabelDoms$().length == 2) {
+      return doLabelsIntersect();
     }
-    const storedLabelSize = storedLabelSize$();
-    const firstLabelSize = storedLabelSize?.[0] ?? 0;
-    const secondLabelSize = storedLabelSize?.[1] ?? 0;
-    const biggestLabelSize = Math.max(firstLabelSize, secondLabelSize);
-    const intersectionLimit = biggestLabelSize !== 50 ? biggestLabelSize * 2 + 2 : 15;
-    return values.length == 2 && values[1] - secondLabelSize - values[0] + firstLabelSize < intersectionLimit;
+    return false;
   });
+  function doLabelsIntersect() {
+    const handleOptions = handleDisplayOptions$();
+    const activePosition = activePosition$();
+    const labelPosition1 = labelPosition(handleOptions[0][activePosition], currentLabelSizeByIndex(0));
+    const labelPosition2 = labelPosition(handleOptions[1][activePosition], currentLabelSizeByIndex(1));
+    const labelSize1 = currentLabelSizeByIndex(0);
+    const labelSize2 = currentLabelSizeByIndex(1);
+    if (labelSize1 === 100 || labelSize2 === 100) {
+      return false;
+    }
+    const labelStart1 = labelPosition1 - labelSize1;
+    const labelEnd1 = labelPosition1 + labelSize1;
+    const labelStart2 = labelPosition2 - labelSize2;
+    const labelEnd2 = labelPosition2 + labelSize2;
+    return !(labelEnd1 < labelStart2 || labelStart1 > labelEnd2);
+  }
   const interactive$ = tansu.computed(() => !disabled$() && !readonly$());
   const combinedLabelPositionLeft$ = tansu.computed(() => {
     const sortedValuesPercent = sortedValuesPercent$();
-    const combinedPosition = (sortedValuesPercent[0] + sortedValuesPercent[1]) / 2;
+    const combinedLabelSize = combinedLabelSize$();
+    let combinedPosition = (sortedValuesPercent[0] + sortedValuesPercent[1]) / 2;
+    combinedPosition = labelPosition(combinedPosition, combinedLabelSize);
     return vertical$() || sortedValuesPercent.length != 2 ? 0 : rtl$() ? 100 - combinedPosition : combinedPosition;
   });
   const combinedLabelPositionTop$ = tansu.computed(() => {
@@ -386,6 +382,7 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
       };
     });
   });
+  const labelPosition = (initialPosition, labelSize) => utils_writables.clamp(initialPosition, 100 - labelSize / 2, labelSize / 2);
   const progressDisplayOptions$ = tansu.computed(() => {
     const vertical = vertical$(), sortedValuesPercent = sortedValuesPercent$(), rtl = rtl$();
     if (sortedValuesPercent.length === 1) {
@@ -552,119 +549,76 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
       destroy
     };
   });
-  const mouseDown = (event, handleId) => {
-    event.preventDefault();
-    const currentTarget = handleId !== void 0 ? _handleElements.get(handleId) : event.target;
-    const handleDrag = (e) => {
-      e.preventDefault();
-      const newCoord = vertical$() ? e.clientY : e.clientX;
-      currentTarget?.focus();
-      if (_prevCoordinate !== newCoord) {
-        _prevCoordinate = newCoord;
-        adjustCoordinate(newCoord, handleId);
-      }
-    };
-    if (interactive$()) {
-      updateSliderSize$.set({});
-      currentTarget?.focus();
-      document.addEventListener("mousemove", handleDrag);
-      document.addEventListener(
-        "mouseup",
-        () => {
-          document.removeEventListener("mousemove", handleDrag);
-        },
-        { once: true }
-      );
-    }
-  };
-  const touchStart = (event, handleId) => {
+  const pointerMoveStart = (event, handleId) => {
     const currentTarget = handleId !== void 0 ? _handleElements.get(handleId) : event.target;
-    const handleDrag = (e) => {
-      e.preventDefault();
-      const newCoord = vertical$() ? e.touches[0].clientY : e.touches[0].clientX;
-      currentTarget?.focus();
-      if (_prevCoordinate !== newCoord) {
-        _prevCoordinate = newCoord;
-        adjustCoordinate(newCoord, handleId);
-      }
-    };
     if (interactive$()) {
+      const vertical = vertical$();
+      const clientXorY = vertical ? "clientY" : "clientX";
+      let _prevCoordinate = event[clientXorY];
       updateSliderSize$.set({});
       currentTarget?.focus();
-      document.addEventListener("touchmove", handleDrag, { passive: false });
-      document.addEventListener(
-        "touchend",
-        () => {
-          document.removeEventListener("touchmove", handleDrag);
-          document.removeEventListener("touchcancel", handleDrag);
-        },
-        { once: true }
-      );
-      document.addEventListener(
-        "touchcancel",
-        () => {
-          document.removeEventListener("touchmove", handleDrag);
-          document.removeEventListener("touchend", handleDrag);
-        },
-        { once: true }
-      );
+      return {
+        onMove: (event2) => {
+          currentTarget?.focus();
+          const newCoord = event2[clientXorY];
+          if (_prevCoordinate !== newCoord) {
+            _prevCoordinate = newCoord;
+            adjustCoordinate(newCoord, handleId);
+          }
+        }
+      };
     }
+    return void 0;
   };
-  const handleEventsDirective = utils_directive.createAttributesDirective((handleContext$) => ({
-    events: {
-      keydown: (event) => {
-        const handleIndex = handleContext$().item.id;
-        const { key } = event;
-        const rtl = rtl$(), stepSize = stepSize$(), min = min$(), max = max$(), vertical = vertical$();
-        if (interactive$()) {
-          switch (key) {
-            case "ArrowDown":
-              updateValue(handleIndex, values$, stepSize, getUpdateDirection(vertical, rtl, true));
-              break;
-            case "ArrowLeft":
-              updateValue(handleIndex, values$, stepSize, getUpdateDirection(vertical, rtl, false));
-              break;
-            case "ArrowUp":
-              updateValue(handleIndex, values$, stepSize, -1 * getUpdateDirection(vertical, rtl, true));
-              break;
-            case "ArrowRight":
-              updateValue(handleIndex, values$, stepSize, -1 * getUpdateDirection(vertical, rtl, false));
-              break;
-            case "Home":
-              values$.update((value) => {
-                value = [...value];
-                value[handleIndex] = min;
-                return value;
-              });
-              break;
-            case "End":
-              values$.update((value) => {
-                value = [...value];
-                value[handleIndex] = max;
-                return value;
-              });
-              break;
-            case "PageUp":
-              break;
-            case "PageDown":
-              break;
-            default:
-              return;
+  const handleEventsDirective = utils_directive.mergeDirectives(
+    utils_directive.createAttributesDirective((handleContext$) => ({
+      events: {
+        keydown: (event) => {
+          const handleIndex = handleContext$().item.id;
+          const { key } = event;
+          const rtl = rtl$(), stepSize = stepSize$(), min = min$(), max = max$(), vertical = vertical$();
+          if (interactive$()) {
+            switch (key) {
+              case "ArrowDown":
+                updateValue(handleIndex, values$, stepSize, getUpdateDirection(vertical, rtl, true));
+                break;
+              case "ArrowLeft":
+                updateValue(handleIndex, values$, stepSize, getUpdateDirection(vertical, rtl, false));
+                break;
+              case "ArrowUp":
+                updateValue(handleIndex, values$, stepSize, -1 * getUpdateDirection(vertical, rtl, true));
+                break;
+              case "ArrowRight":
+                updateValue(handleIndex, values$, stepSize, -1 * getUpdateDirection(vertical, rtl, false));
+                break;
+              case "Home":
+                values$.update((value) => {
+                  value = [...value];
+                  value[handleIndex] = min;
+                  return value;
+                });
+                break;
+              case "End":
+                values$.update((value) => {
+                  value = [...value];
+                  value[handleIndex] = max;
+                  return value;
+                });
+                break;
+              case "PageUp":
+                break;
+              case "PageDown":
+                break;
+              default:
+                return;
+            }
+            event.preventDefault();
           }
-          event.preventDefault();
-        }
-      },
-      mousedown: (event) => {
-        if (event.button !== 0) {
-          return;
         }
-        mouseDown(event, handleContext$().item.id);
-      },
-      touchstart: (event) => {
-        touchStart(event, handleContext$().item.id);
       }
-    }
-  }));
+    })),
+    services_pointerdownPosition.createPointerdownPositionDirective((position, { item: { id } }) => pointerMoveStart(position, id))
+  );
   const widget = {
     ...utils_stores.stateStores({
       min$,
@@ -706,30 +660,21 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
           "au-slider-progress": utils_stores.true$
         }
       })),
-      clickableAreaDirective: utils_directive.createAttributesDirective(() => ({
-        events: {
-          mousedown: (event) => {
-            if (event.button !== 0) {
-              return;
-            }
-            const clickedCoordinate = vertical$() ? event.clientY : event.clientX;
-            const closestHandle = getClosestSliderHandle(getClickedPercent(clickedCoordinate));
-            adjustCoordinate(clickedCoordinate, closestHandle);
-            mouseDown(event, closestHandle);
-          },
-          touchstart: (event) => {
-            const clickedCoordinate = vertical$() ? event.touches[0].clientY : event.touches[0].clientX;
-            const closestHandle = getClosestSliderHandle(getClickedPercent(clickedCoordinate));
-            adjustCoordinate(clickedCoordinate, closestHandle);
-            touchStart(event, closestHandle);
+      clickableAreaDirective: utils_directive.mergeDirectives(
+        utils_directive.createAttributesDirective(() => ({
+          classNames: {
+            "au-slider-clickable-area": horizontal$,
+            "au-slider-clickable-area-vertical": vertical$,
+            "au-slider-clickable-area-with-ticks": tansu.computed(() => showTicks$() && tickInterval$() === 0)
           }
-        },
-        classNames: {
-          "au-slider-clickable-area": horizontal$,
-          "au-slider-clickable-area-vertical": vertical$,
-          "au-slider-clickable-area-with-ticks": tansu.computed(() => showTicks$() && tickInterval$() === 0)
-        }
-      })),
+        })),
+        services_pointerdownPosition.createPointerdownPositionDirective((position) => {
+          const clickedCoordinate = vertical$() ? position.clientY : position.clientX;
+          const closestHandle = getClosestSliderHandle(getClickedPercent(clickedCoordinate));
+          adjustCoordinate(clickedCoordinate, closestHandle);
+          return pointerMoveStart(position, closestHandle);
+        })
+      ),
       handleEventsDirective,
       handleDirective: utils_directive.mergeDirectives(
         handleElementDirective,
@@ -762,7 +707,7 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
       minLabelDirective: utils_directive.mergeDirectives(minLabelDomDirective, minLabelDirective),
       maxLabelDirective: utils_directive.mergeDirectives(maxLabelDomDirective, maxLabelDirective),
       combinedHandleLabelDisplayDirective: utils_directive.mergeDirectives(
-        combinedLabelDomDirective,
+        resizeCombineLabelDirective,
         utils_directive.createAttributesDirective(() => ({
           classNames: {
             "au-slider-label-vertical": vertical$,
@@ -781,6 +726,7 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
       ),
       handleLabelDisplayDirective: utils_directive.mergeDirectives(
         handleLabelDirective,
+        resizeLabelsDirective,
         utils_directive.createAttributesDirective((labelDisplayContext$) => ({
           classNames: {
             "au-slider-label-vertical": vertical$,
@@ -789,8 +735,13 @@ const createSlider = utils_widget.createWidgetFactory("slider", (config) => {
             "au-slider-label-now": horizontal$
           },
           styles: {
-            left: tansu.computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].left)),
-            top: tansu.computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].top))
+            left: tansu.computed(() => {
+              const handleIndex = labelDisplayContext$().index;
+              const leftPosition = handleDisplayOptions$()[handleIndex].left;
+              return leftPosition === null ? "" : percent(labelPosition(leftPosition, currentLabelSizeByIndex(handleIndex)));
+            }),
+            top: tansu.computed(() => percent(handleDisplayOptions$()[labelDisplayContext$().index].top)),
+            opacity: tansu.computed(() => combinedLabelDisplay$() ? "0" : "1")
           },
           attributes: {
             "aria-hidden": tansu.readable("true")

package/{toaster-_p1GTtHI.js → toaster-CRPErgI2.js}

@@ -1,9 +1,9 @@
 import { computed, readable, writable } from "@amadeus-it-group/tansu";
 import { extendWidgetProps } from "./services/extendWidget.js";
-import { p as createAttributesDirective, d as directiveSubscribe } from "./dom-Bcg9ORcA.js";
+import { p as createAttributesDirective, d as directiveSubscribe } from "./dom-DD1hAVZy.js";
 import { true$ } from "./utils/stores.js";
-import { b as typeNumberInRangeFactory, c as typeBoolean } from "./writables-e0tyaQpe.js";
-import { g as getCommonAlertDefaultConfig, c as createCommonAlert } from "./common-DK0ADNTX.js";
+import { b as typeNumberInRangeFactory, c as typeBoolean } from "./writables-Is1bF1Vt.js";
+import { g as getCommonAlertDefaultConfig, c as createCommonAlert } from "./common-CCxNtFNM.js";
 import { createWidgetFactory } from "./utils/widget.js";
 const toastDefaultConfig = {
   autoHide: true,

package/{toaster-UDglac7x.cjs → toaster-CT148JSJ.cjs}

@@ -1,10 +1,10 @@
 "use strict";
 const tansu = require("@amadeus-it-group/tansu");
 const services_extendWidget = require("./services/extendWidget.cjs");
-const utils_directive = require("./dom-C2gi9OCP.cjs");
+const utils_directive = require("./dom-Cm9_uROp.cjs");
 const utils_stores = require("./utils/stores.cjs");
-const utils_writables = require("./writables-DcGT98a7.cjs");
-const common = require("./common-D3QcdJ6S.cjs");
+const utils_writables = require("./writables-Dt68gADJ.cjs");
+const common = require("./common-B5jS-Ih_.cjs");
 const utils_widget = require("./utils/widget.cjs");
 const toastDefaultConfig = {
   autoHide: true,

package/{tree-rGHtmCnS.cjs → tree-C4l2Wqny.cjs}

@@ -1,10 +1,10 @@
 "use strict";
 const tansu = require("@amadeus-it-group/tansu");
 const services_navManager = require("./services/navManager.cjs");
-const utils_directive = require("./dom-C2gi9OCP.cjs");
+const utils_directive = require("./dom-Cm9_uROp.cjs");
 const utils_func = require("./utils/func.cjs");
 const utils_stores = require("./utils/stores.cjs");
-const utils_writables = require("./writables-DcGT98a7.cjs");
+const utils_writables = require("./writables-Dt68gADJ.cjs");
 const utils_widget = require("./utils/widget.cjs");
 function getTreeDefaultConfig() {
   return {

package/{tree-DV0tfPlZ.js → tree-CHpFqJPx.js}

@@ -1,9 +1,9 @@
 import { writable, computed, readable } from "@amadeus-it-group/tansu";
 import { createNavManager } from "./services/navManager.js";
-import { n as mergeDirectives, p as createAttributesDirective, b as browserDirective, a as bindDirective } from "./dom-Bcg9ORcA.js";
+import { n as mergeDirectives, p as createAttributesDirective, b as browserDirective, a as bindDirective } from "./dom-DD1hAVZy.js";
 import { noop } from "./utils/func.js";
 import { writablesForProps, stateStores, true$ } from "./utils/stores.js";
-import { g as typeFunction, i as typeArray, e as typeString } from "./writables-e0tyaQpe.js";
+import { h as typeFunction, j as typeArray, e as typeString } from "./writables-Is1bF1Vt.js";
 import { createWidgetFactory } from "./utils/widget.js";
 function getTreeDefaultConfig() {
   return {

package/types.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const FACTORY_WIDGET_NAME = Symbol();
-const INVALID_VALUE = Symbol();
+const FACTORY_WIDGET_NAME = /* @__PURE__ */ Symbol();
+const INVALID_VALUE = /* @__PURE__ */ Symbol();
 exports.FACTORY_WIDGET_NAME = FACTORY_WIDGET_NAME;
 exports.INVALID_VALUE = INVALID_VALUE;

package/types.d.ts

@@ -135,7 +135,7 @@ export interface SSRHTMLElement extends Pick<HTMLElement, 'setAttribute' | 'remo
     /**
      * Object allowing to manipulate the style of the element.
      */
-    style: Partial<Record<StyleKey, StyleValue>>;
+    style: Partial<Record<StyleKeyCamelCase | StyleKeyKebabCase, StyleValue>> & Pick<HTMLElement['style'], 'setProperty' | 'removeProperty'>;
 }
 /**
  * Represents a directive function that can be applied to an SSRHTMLElement.
@@ -227,13 +227,31 @@ export type ConfigValidator<T extends object> = {
  * Represents a value that can be assigned to an attribute.
  */
 export type AttributeValue = string | number | boolean | undefined;
+type CamelToKebab<S extends string> = S extends `${infer Head}${infer Tail}` ? `${Head extends Lowercase<Head> ? Head : `-${Lowercase<Head>}`}${CamelToKebab<Tail>}` : S;
 /**
- * Represents a key of the CSSStyleDeclaration interface, excluding certain properties and methods.
+ * Represents a key of the CSSStyleDeclaration interface (in camelCase), excluding certain properties and methods.
  *
  * This is useful for scenarios where you need to work with CSS properties directly without
  * dealing with the methods and other non-style properties of CSSStyleDeclaration.
  */
-export type StyleKey = Exclude<keyof CSSStyleDeclaration, 'length' | 'item' | 'parentRule' | 'getPropertyValue' | 'getPropertyPriority' | 'setProperty' | 'removeProperty' | typeof Symbol.iterator | number | 'cssText'>;
+export type StyleKeyCamelCase = Exclude<keyof CSSStyleDeclaration, 'length' | 'item' | 'parentRule' | 'getPropertyValue' | 'getPropertyPriority' | 'setProperty' | 'removeProperty' | typeof Symbol.iterator | number | 'cssText'>;
+/**
+ * Represents a key of the CSSStyleDeclaration interface, converted to kebab-case, excluding certain properties and methods.
+ *
+ * This is useful for scenarios where you need to work with CSS properties directly without
+ * dealing with the methods and other non-style properties of CSSStyleDeclaration.
+ */
+export type StyleKeyKebabCase = CamelToKebab<StyleKeyCamelCase>;
+/**
+ * Represents a CSS custom property key.
+ * CSS custom properties are defined using the `--` prefix.
+ */
+export type StyleKeyCustomProperty = `--${string}`;
+/**
+ * Represents a key that can be used for styling purposes.
+ * This includes camelCase style keys, kebab-case style keys, and CSS custom property keys.
+ */
+export type StyleKey = StyleKeyCamelCase | StyleKeyKebabCase | StyleKeyCustomProperty;
 /**
  * Represents a value that can be used for styling purposes.
  * @remarks
@@ -258,3 +276,4 @@ export type Extends<T, U> = T extends U ? 1 : 0;
  * @returns `T` if `T` is or extends `SlotContent<any>`, otherwise `0`.
  */
 export type IsSlotContent<T> = Extends<T, SlotContent<any>> | Extends<SlotContent<any>, T> extends 1 ? T : 0;
+export {};

package/types.js

@@ -1,5 +1,5 @@
-const FACTORY_WIDGET_NAME = Symbol();
-const INVALID_VALUE = Symbol();
+const FACTORY_WIDGET_NAME = /* @__PURE__ */ Symbol();
+const INVALID_VALUE = /* @__PURE__ */ Symbol();
 export {
   FACTORY_WIDGET_NAME,
   INVALID_VALUE

package/utils/directive.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("@amadeus-it-group/tansu");
 require("esm-env");
-const utils_directive = require("../dom-C2gi9OCP.cjs");
+const utils_directive = require("../dom-Cm9_uROp.cjs");
 require("./func.cjs");
 exports.attributesData = utils_directive.attributesData;
 exports.bindDirective = utils_directive.bindDirective;

package/utils/directive.d.ts

@@ -1,5 +1,5 @@
 import type { ReadableSignal } from '@amadeus-it-group/tansu';
-import type { AttributeValue, Directive, DirectivesAndOptParam, SSRHTMLElement, StyleKey, StyleValue } from '../types';
+import type { AttributeValue, Directive, DirectivesAndOptParam, SSRHTMLElement, StyleKey, StyleKeyCustomProperty, StyleKeyKebabCase, StyleValue } from '../types';
 import { type ClassValue } from 'clsx';
 /**
  * On a browser environment, returns true if the given element is an HTMLElement.
@@ -311,7 +311,7 @@ export declare const createAttributesDirective: <T = void>(propsFn: (arg: Readab
 export declare const attributesData: <T extends any[]>(...directives: DirectivesAndOptParam<T>) => {
     attributes: Record<string, string>;
     classNames: string[];
-    style: Partial<Record<StyleKey, StyleValue>>;
+    style: Partial<Record<StyleKeyKebabCase | StyleKeyCustomProperty, StyleValue>>;
 };
 /**
  * Directive that takes as an argument a string, array or object containing CSS classes to be put on the HTML element.

package/utils/directive.js

@@ -1,6 +1,6 @@
 import "@amadeus-it-group/tansu";
 import "esm-env";
-import { q, a, c, b, s, p, h, l, j, f, g, k, t, d, e, i, m, n, o, r, u } from "../dom-Bcg9ORcA.js";
+import { q, a, c, b, s, p, h, l, j, f, g, k, t, d, e, i, m, n, o, r, u } from "../dom-DD1hAVZy.js";
 import "./func.js";
 export {
   q as attributesData,

package/utils/internal/ssrHTMLElement.d.ts

@@ -1,4 +1,4 @@
-import type { SSRHTMLElement } from '../../types';
+import type { SSRHTMLElement, StyleKeyCustomProperty, StyleKeyKebabCase, StyleValue } from '../../types';
 /**
  * A unique symbol used to represent the attributes and style of an SSR (Server-Side Rendering) HTML element.
  * This symbol can be used as a key for storing or retrieving attributes and styles associated with an SSR HTML element.
@@ -9,3 +9,9 @@ export declare const ssrHTMLElementAttributesAndStyle: unique symbol;
  * @returns the created SSRHTMLElement
  */
 export declare const ssrHTMLElement: () => SSRHTMLElement;
+/**
+ * Converts a style object to a CSS text string.
+ * @param style - The style object to convert.
+ * @returns The CSS text string representation of the style object.
+ */
+export declare const cssTextFromObject: (style: Partial<Record<StyleKeyKebabCase | StyleKeyCustomProperty, StyleValue>>) => string;

package/utils/stores.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const tansu = require("@amadeus-it-group/tansu");
 const types = require("../types.cjs");
 const utils_func = require("./func.cjs");
-const utils_directive = require("../dom-C2gi9OCP.cjs");
+const utils_directive = require("../dom-Cm9_uROp.cjs");
 function createPatch(stores) {
   return function(storesValues) {
     tansu.batch(() => {

package/utils/stores.js

@@ -1,7 +1,7 @@
 import { readable, writable, asWritable, equal, batch, computed, asReadable, get, derived } from "@amadeus-it-group/tansu";
 import { INVALID_VALUE } from "../types.js";
 import { identity } from "./func.js";
-import { v as generateId } from "../dom-Bcg9ORcA.js";
+import { v as generateId } from "../dom-DD1hAVZy.js";
 function createPatch(stores) {
   return function(storesValues) {
     batch(() => {

package/utils/writables.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils_writables = require("../writables-DcGT98a7.cjs");
+const utils_writables = require("../writables-Dt68gADJ.cjs");
 require("../types.cjs");
 exports.createTypeEnum = utils_writables.createTypeEnum;
 exports.testToNormalizeValue = utils_writables.testToNormalizeValue;
@@ -11,5 +11,6 @@ exports.typeFunction = utils_writables.typeFunction;
 exports.typeHTMLElementOrNull = utils_writables.typeHTMLElementOrNull;
 exports.typeNumber = utils_writables.typeNumber;
 exports.typeNumberInRangeFactory = utils_writables.typeNumberInRangeFactory;
+exports.typeNumberOrNull = utils_writables.typeNumberOrNull;
 exports.typeString = utils_writables.typeString;
 exports.typeStringOrNull = utils_writables.typeStringOrNull;

package/utils/writables.d.ts

@@ -63,6 +63,13 @@ export declare const typeString: WritableWithDefaultOptions<string>;
  * with the `isString` validator.
  */
 export declare const typeStringOrNull: WritableWithDefaultOptions<string | null>;
+/**
+ * A writable with default options that normalizes its value to a number or null.
+ *
+ * This writable uses a normalization function that allows null values and ensures
+ * the value is a boolean.
+ */
+export declare const typeNumberOrNull: WritableWithDefaultOptions<number | null>;
 /**
  * A writable object that holds a function type with default options.
  */