@jsenv/navi 0.16.58 → 0.16.60

package/dist/jsenv_navi.js

@@ -1,7 +1,7 @@
 import { installImportMetaCss } from "./jsenv_navi_side_effects.js";
 import { useErrorBoundary, useLayoutEffect, useEffect, useCallback, useRef, useState, useContext, useMemo, useImperativeHandle, useId } from "preact/hooks";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
-import { createIterableWeakSet, mergeOneStyle, stringifyStyle, createPubSub, mergeTwoStyles, normalizeStyles, createGroupTransitionController, getElementSignature, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, resolveCSSSize, findBefore, findAfter, createValueEffect, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, allowWheelThrough, resolveCSSColor, createStyleController, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, hasCSSSizeUnit, activeElementSignal, canInterceptKeys, pickLightOrDark, resolveColorLuminance, initFocusGroup, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, elementIsFocusable } from "@jsenv/dom";
+import { createIterableWeakSet, mergeOneStyle, stringifyStyle, createPubSub, mergeTwoStyles, normalizeStyles, createGroupTransitionController, getElementSignature, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, findBefore, findAfter, createValueEffect, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, allowWheelThrough, resolveCSSColor, createStyleController, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, hasCSSSizeUnit, resolveCSSSize, activeElementSignal, canInterceptKeys, pickLightOrDark, resolveColorLuminance, initFocusGroup, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement, elementIsFocusable } from "@jsenv/dom";
 import { prefixFirstAndIndentRemainingLines } from "@jsenv/humanize";
 import { effect, signal, computed, batch, useSignal } from "@preact/signals";
 import { createValidity } from "@jsenv/validity";
@@ -1448,6 +1448,7 @@ const createAction = (callback, rootOptions = {}) => {
           for (const key of keyArray) {
             const signalForThisKey = signalMap.get(key);
             if (signalForThisKey) {
+              // eslint-disable-next-line signals/no-conditional-value-read
               params[key] = signalForThisKey.value;
             } else {
               params[key] = staticParams[key];
@@ -12102,691 +12103,141 @@ const renderActionableComponent = (props, {
   });
 };
 
-const useDebounceTrue = (value, delay = 300) => {
-  const [debouncedTrue, setDebouncedTrue] = useState(false);
-  const timerRef = useRef(null);
-
-  useLayoutEffect(() => {
-    // If value is true or becomes true, start a timer
-    if (value) {
-      timerRef.current = setTimeout(() => {
-        setDebouncedTrue(true);
-      }, delay);
-    } else {
-      // If value becomes false, clear any pending timer and immediately set to false
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-      setDebouncedTrue(false);
-    }
-
-    // Cleanup function
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-    };
-  }, [value, delay]);
-
-  return debouncedTrue;
-};
+/**
+ * Custom hook creating a stable callback that doesn't trigger re-renders.
+ *
+ * PROBLEM: Parent components often forget to use useCallback, causing library
+ * components to re-render unnecessarily when receiving callback props.
+ *
+ * SOLUTION: Library components can use this hook to create stable callback
+ * references internally, making them defensive against parents who don't
+ * optimize their callbacks. This ensures library components don't force
+ * consumers to think about useCallback.
+ *
+ * USAGE:
+ * ```js
+ * // Parent component (consumer) - no useCallback needed
+ * const Parent = () => {
+ *   const [count, setCount] = useState(0);
+ *
+ *   // Parent naturally creates new function reference each render
+ *   // (forgetting useCallback is common and shouldn't break performance)
+ *   return <LibraryButton onClick={(e) => setCount(count + 1)} />;
+ * };
+ *
+ * // Library component - defensive against changing callbacks
+ * const LibraryButton = ({ onClick }) => {
+ *   // ✅ Create stable reference from parent's potentially changing callback
+ *   const stableClick = useStableCallback(onClick);
+ *
+ *   // Internal expensive components won't re-render when parent updates
+ *   return <ExpensiveInternalButton onClick={stableClick} />;
+ * };
+ *
+ * // Deep internal component gets stable reference
+ * const ExpensiveInternalButton = memo(({ onClick }) => {
+ *   // This won't re-render when Parent's count changes
+ *   // But onClick will always call the latest Parent callback
+ *   return <button onClick={onClick}>Click me</button>;
+ * });
+ * ```
+ *
+ * Perfect for library components that need performance without burdening consumers.
+ */
 
-const useNetworkSpeed = () => {
-  return networkSpeedSignal.value;
-};
 
-const connection =
-  window.navigator.connection ||
-  window.navigator.mozConnection ||
-  window.navigator.webkitConnection;
+const useStableCallback = (callback, mapper) => {
+  const callbackRef = useRef();
+  callbackRef.current = callback;
+  const stableCallbackRef = useRef();
 
-const getNetworkSpeed = () => {
-  // ✅ Network Information API (support moderne)
-  if (!connection) {
-    return "3g";
-  }
-  if (connection) {
-    const effectiveType = connection.effectiveType;
-    if (effectiveType) {
-      return effectiveType; // "slow-2g", "2g", "3g", "4g", "5g"
-    }
-    const downlink = connection.downlink;
-    if (downlink) {
-      // downlink is in Mbps
-      if (downlink < 1) return "slow-2g"; // < 1 Mbps
-      if (downlink < 2.5) return "2g"; // 1-2.5 Mbps
-      if (downlink < 10) return "3g"; // 2.5-10 Mbps
-      return "4g"; // > 10 Mbps
-    }
+  // Return original falsy value directly when callback is not a function
+  if (!callback) {
+    return callback;
   }
-  return "3g";
-};
-
-const updateNetworkSpeed = () => {
-  networkSpeedSignal.value = getNetworkSpeed();
-};
-
-const networkSpeedSignal = signal(getNetworkSpeed());
-
-const setupNetworkMonitoring = () => {
-  const cleanupFunctions = [];
-
-  // ✅ 1. Écouter les changements natifs
 
-  if (connection) {
-    connection.addEventListener("change", updateNetworkSpeed);
-    cleanupFunctions.push(() => {
-      connection.removeEventListener("change", updateNetworkSpeed);
-    });
+  const existingStableCallback = stableCallbackRef.current;
+  if (existingStableCallback) {
+    return existingStableCallback;
   }
-
-  // ✅ 2. Polling de backup (toutes les 60 secondes)
-  const pollInterval = setInterval(updateNetworkSpeed, 60000);
-  cleanupFunctions.push(() => clearInterval(pollInterval));
-
-  // ✅ 3. Vérifier lors de la reprise d'activité
-  const handleVisibilityChange = () => {
-    if (!document.hidden) {
-      updateNetworkSpeed();
-    }
-  };
-
-  document.addEventListener("visibilitychange", handleVisibilityChange);
-  cleanupFunctions.push(() => {
-    document.removeEventListener("visibilitychange", handleVisibilityChange);
-  });
-
-  // ✅ 4. Vérifier lors de la reprise de connexion
-  const handleOnline = () => {
-    updateNetworkSpeed();
-  };
-
-  window.addEventListener("online", handleOnline);
-  cleanupFunctions.push(() => {
-    window.removeEventListener("online", handleOnline);
-  });
-
-  // Cleanup global
-  return () => {
-    cleanupFunctions.forEach((cleanup) => cleanup());
+  const stableCallback = (...args) => {
+    const currentCallback = callbackRef.current;
+    return currentCallback(...args);
   };
+  stableCallbackRef.current = stableCallback;
+  return stableCallback;
 };
-setupNetworkMonitoring();
-
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_rectangle_loading {
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-  }
 
-  .navi_rectangle_loading[data-visible] {
-    opacity: 1;
+const DEBUG = {
+  registration: false,
+  // Element registration/unregistration
+  interaction: false,
+  // Click and keyboard interactions
+  selection: false,
+  // Selection state changes (set, add, remove, toggle)
+  navigation: false,
+  // Arrow key navigation and element finding
+  valueExtraction: false // Value extraction from elements
+};
+const debug = (category, ...args) => {
+  if (DEBUG[category]) {
+    console.debug(`[selection:${category}]`, ...args);
   }
-`;
-const RectangleLoading = ({
-  shouldShowSpinner,
-  color = "currentColor",
-  radius = 0,
-  size = 2
+};
+const SelectionContext = createContext();
+const useSelectionController = ({
+  elementRef,
+  layout,
+  value,
+  onChange,
+  multiple,
+  selectAllName
 }) => {
-  const containerRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [containerHeight, setContainerHeight] = useState(0);
+  if (!elementRef) {
+    throw new Error("useSelectionController: elementRef is required");
+  }
+  onChange = useStableCallback(onChange);
+  const currentValueRef = useRef(value);
+  currentValueRef.current = value;
+  const lastInternalValueRef = useRef(null);
+  const selectionController = useMemo(() => {
+    const innerOnChange = (newValue, ...args) => {
+      lastInternalValueRef.current = newValue;
+      onChange?.(newValue, ...args);
+    };
+    const getCurrentValue = () => currentValueRef.current;
+    if (layout === "grid") {
+      return createGridSelectionController({
+        getCurrentValue,
+        onChange: innerOnChange,
+        enabled: Boolean(onChange),
+        multiple,
+        selectAllName
+      });
+    }
+    return createLinearSelectionController({
+      getCurrentValue,
+      onChange: innerOnChange,
+      layout,
+      elementRef,
+      multiple,
+      enabled: Boolean(onChange),
+      selectAllName
+    });
+  }, [layout, multiple, elementRef]);
+  useEffect(() => {
+    selectionController.element = elementRef.current;
+  }, [selectionController]);
   useLayoutEffect(() => {
-    const container = containerRef.current;
-    if (!container) {
-      return null;
-    }
-    const {
-      width,
-      height
-    } = container.getBoundingClientRect();
-    setContainerWidth(width);
-    setContainerHeight(height);
-    let animationFrameId = null;
-    // Create a resize observer to detect changes in the container's dimensions
-    const resizeObserver = new ResizeObserver(entries => {
-      // Use requestAnimationFrame to debounce updates
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
-      }
-      animationFrameId = requestAnimationFrame(() => {
-        const [containerEntry] = entries;
-        const {
-          width,
-          height
-        } = containerEntry.contentRect;
-        setContainerWidth(width);
-        setContainerHeight(height);
-      });
-    });
-    resizeObserver.observe(container);
-    return () => {
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
-      }
-      resizeObserver.disconnect();
-    };
-  }, []);
-  return jsx("span", {
-    ref: containerRef,
-    className: "navi_rectangle_loading",
-    "data-visible": shouldShowSpinner ? "" : undefined,
-    children: containerWidth > 0 && containerHeight > 0 && jsx(RectangleLoadingSvg, {
-      radius: radius,
-      color: color,
-      width: containerWidth,
-      height: containerHeight,
-      strokeWidth: size
-    })
-  });
-};
-const RectangleLoadingSvg = ({
-  width,
-  height,
-  color,
-  radius,
-  trailColor = "transparent",
-  strokeWidth
-}) => {
-  const margin = Math.max(2, Math.min(width, height) * 0.03);
-
-  // Calculate the drawable area
-  const drawableWidth = width - margin * 2;
-  const drawableHeight = height - margin * 2;
-
-  // ✅ Check if this should be a circle - only if width and height are nearly equal
-  const maxPossibleRadius = Math.min(drawableWidth, drawableHeight) / 2;
-  const actualRadius = Math.min(radius || Math.min(drawableWidth, drawableHeight) * 0.05, maxPossibleRadius // ✅ Limité au radius maximum possible
-  );
-  const aspectRatio = Math.max(drawableWidth, drawableHeight) / Math.min(drawableWidth, drawableHeight);
-  const isNearlySquare = aspectRatio <= 1.2; // Allow some tolerance for nearly square shapes
-  const isCircle = isNearlySquare && actualRadius >= maxPossibleRadius * 0.95;
-  let pathLength;
-  let rectPath;
-  if (isCircle) {
-    // ✅ Circle: perimeter = 2πr
-    pathLength = 2 * Math.PI * actualRadius;
-
-    // ✅ Circle path centered in the drawable area
-    const centerX = margin + drawableWidth / 2;
-    const centerY = margin + drawableHeight / 2;
-    rectPath = `
-      M ${centerX + actualRadius},${centerY}
-      A ${actualRadius},${actualRadius} 0 1 1 ${centerX - actualRadius},${centerY}
-      A ${actualRadius},${actualRadius} 0 1 1 ${centerX + actualRadius},${centerY}
-    `;
-  } else {
-    // ✅ Rectangle: calculate perimeter properly
-    const straightEdges = 2 * (drawableWidth - 2 * actualRadius) + 2 * (drawableHeight - 2 * actualRadius);
-    const cornerArcs = actualRadius > 0 ? 2 * Math.PI * actualRadius : 0;
-    pathLength = straightEdges + cornerArcs;
-    rectPath = `
-      M ${margin + actualRadius},${margin}
-      L ${margin + drawableWidth - actualRadius},${margin}
-      A ${actualRadius},${actualRadius} 0 0 1 ${margin + drawableWidth},${margin + actualRadius}
-      L ${margin + drawableWidth},${margin + drawableHeight - actualRadius}
-      A ${actualRadius},${actualRadius} 0 0 1 ${margin + drawableWidth - actualRadius},${margin + drawableHeight}
-      L ${margin + actualRadius},${margin + drawableHeight}
-      A ${actualRadius},${actualRadius} 0 0 1 ${margin},${margin + drawableHeight - actualRadius}
-      L ${margin},${margin + actualRadius}
-      A ${actualRadius},${actualRadius} 0 0 1 ${margin + actualRadius},${margin}
-    `;
-  }
-
-  // Fixed segment size in pixels
-  const maxSegmentSize = 40;
-  const segmentLength = Math.min(maxSegmentSize, pathLength * 0.25);
-  const gapLength = pathLength - segmentLength;
-
-  // Vitesse constante en pixels par seconde
-  const networkSpeed = useNetworkSpeed();
-  const pixelsPerSecond = {
-    "slow-2g": 40,
-    "2g": 60,
-    "3g": 80,
-    "4g": 120
-  }[networkSpeed] || 80;
-  const animationDuration = Math.max(1.5, pathLength / pixelsPerSecond);
-
-  // ✅ Calculate correct offset based on actual segment size
-  const segmentRatio = segmentLength / pathLength;
-  const circleOffset = -animationDuration * segmentRatio;
-  return jsxs("svg", {
-    width: "100%",
-    height: "100%",
-    viewBox: `0 0 ${width} ${height}`,
-    preserveAspectRatio: "none",
-    style: "overflow: visible",
-    xmlns: "http://www.w3.org/2000/svg",
-    "shape-rendering": "geometricPrecision",
-    children: [isCircle ? jsx("circle", {
-      cx: margin + drawableWidth / 2,
-      cy: margin + drawableHeight / 2,
-      r: actualRadius,
-      fill: "none",
-      stroke: trailColor,
-      strokeWidth: strokeWidth
-    }) : jsx("rect", {
-      x: margin,
-      y: margin,
-      width: drawableWidth,
-      height: drawableHeight,
-      fill: "none",
-      stroke: trailColor,
-      strokeWidth: strokeWidth,
-      rx: actualRadius
-    }), jsx("path", {
-      d: rectPath,
-      fill: "none",
-      stroke: color,
-      strokeWidth: strokeWidth,
-      strokeLinecap: "round",
-      strokeDasharray: `${segmentLength} ${gapLength}`,
-      pathLength: pathLength,
-      children: jsx("animate", {
-        attributeName: "stroke-dashoffset",
-        from: pathLength,
-        to: "0",
-        dur: `${animationDuration}s`,
-        repeatCount: "indefinite",
-        begin: "0s"
-      })
-    }), jsx("circle", {
-      r: strokeWidth,
-      fill: color,
-      children: jsx("animateMotion", {
-        path: rectPath,
-        dur: `${animationDuration}s`,
-        repeatCount: "indefinite",
-        rotate: "auto",
-        begin: `${circleOffset}s`
-      })
-    })]
-  });
-};
-
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_loading_rectangle_wrapper {
-    position: absolute;
-    top: var(--rectangle-top, 0);
-    right: var(--rectangle-right, 0);
-    bottom: var(--rectangle-bottom, 0);
-    left: var(--rectangle-left, 0);
-    z-index: 1;
-    opacity: 0;
-    pointer-events: none;
-  }
-  .navi_loading_rectangle_wrapper[data-visible] {
-    opacity: 1;
-  }
-`;
-const LoaderBackground = ({
-  loading,
-  containerRef,
-  targetSelector,
-  color,
-  inset = 0,
-  spacingTop = 0,
-  spacingLeft = 0,
-  spacingBottom = 0,
-  spacingRight = 0,
-  children
-}) => {
-  if (containerRef) {
-    const container = containerRef.current;
-    if (!container) {
-      return children;
-    }
-    return createPortal(jsx(LoaderBackgroundWithPortal, {
-      container: container,
-      loading: loading,
-      color: color,
-      inset: inset,
-      spacingTop: spacingTop,
-      spacingLeft: spacingLeft,
-      spacingBottom: spacingBottom,
-      spacingRight: spacingRight,
-      children: children
-    }), container);
-  }
-  return jsx(LoaderBackgroundBasic, {
-    targetSelector: targetSelector,
-    loading: loading,
-    color: color,
-    inset: inset,
-    spacingTop: spacingTop,
-    spacingLeft: spacingLeft,
-    spacingBottom: spacingBottom,
-    spacingRight: spacingRight,
-    children: children
-  });
-};
-const LoaderBackgroundWithPortal = ({
-  container,
-  loading,
-  color,
-  inset,
-  spacingTop,
-  spacingLeft,
-  spacingBottom,
-  spacingRight,
-  children
-}) => {
-  const shouldShowSpinner = useDebounceTrue(loading, 300);
-  if (!shouldShowSpinner) {
-    return children;
-  }
-  container.style.position = "relative";
-  let paddingTop = 0;
-  if (container.nodeName === "DETAILS") {
-    paddingTop = container.querySelector("summary").offsetHeight;
-  }
-  return jsxs(Fragment, {
-    children: [jsx("div", {
-      style: {
-        position: "absolute",
-        top: `${inset + paddingTop + spacingTop}px`,
-        bottom: `${inset + spacingBottom}px`,
-        left: `${inset + spacingLeft}px`,
-        right: `${inset + spacingRight}px`
-      },
-      children: shouldShowSpinner && jsx(RectangleLoading, {
-        color: color
-      })
-    }), children]
-  });
-};
-const LoaderBackgroundBasic = ({
-  loading,
-  targetSelector,
-  color,
-  spacingTop,
-  spacingLeft,
-  spacingBottom,
-  spacingRight,
-  inset,
-  children
-}) => {
-  const shouldShowSpinner = useDebounceTrue(loading, 300);
-  const rectangleRef = useRef(null);
-  const [, setOutlineOffset] = useState(0);
-  const [borderRadius, setBorderRadius] = useState(0);
-  const [borderTopWidth, setBorderTopWidth] = useState(0);
-  const [borderLeftWidth, setBorderLeftWidth] = useState(0);
-  const [borderRightWidth, setBorderRightWidth] = useState(0);
-  const [borderBottomWidth, setBorderBottomWidth] = useState(0);
-  const [marginTop, setMarginTop] = useState(0);
-  const [marginBottom, setMarginBottom] = useState(0);
-  const [marginLeft, setMarginLeft] = useState(0);
-  const [marginRight, setMarginRight] = useState(0);
-  const [paddingTop, setPaddingTop] = useState(0);
-  const [paddingLeft, setPaddingLeft] = useState(0);
-  const [paddingRight, setPaddingRight] = useState(0);
-  const [paddingBottom, setPaddingBottom] = useState(0);
-  const [currentColor, setCurrentColor] = useState(color);
-  useLayoutEffect(() => {
-    let animationFrame;
-    const updateStyles = () => {
-      const rectangle = rectangleRef.current;
-      if (!rectangle) {
-        return;
-      }
-      const container = rectangle.parentElement;
-      const containedElement = rectangle.nextElementSibling;
-      const target = targetSelector ? container.querySelector(targetSelector) : containedElement;
-      if (target) {
-        const {
-          width,
-          height
-        } = target.getBoundingClientRect();
-        const containedComputedStyle = window.getComputedStyle(containedElement);
-        const targetComputedStyle = window.getComputedStyle(target);
-        const newBorderTopWidth = resolveCSSSize(targetComputedStyle.borderTopWidth);
-        const newBorderLeftWidth = resolveCSSSize(targetComputedStyle.borderLeftWidth);
-        const newBorderRightWidth = resolveCSSSize(targetComputedStyle.borderRightWidth);
-        const newBorderBottomWidth = resolveCSSSize(targetComputedStyle.borderBottomWidth);
-        const newBorderRadius = resolveCSSSize(targetComputedStyle.borderRadius, {
-          availableSize: Math.min(width, height)
-        });
-        const newOutlineColor = targetComputedStyle.outlineColor;
-        const newBorderColor = targetComputedStyle.borderColor;
-        const newDetectedColor = targetComputedStyle.color;
-        const newOutlineOffset = resolveCSSSize(targetComputedStyle.outlineOffset);
-        const newMarginTop = resolveCSSSize(targetComputedStyle.marginTop);
-        const newMarginBottom = resolveCSSSize(targetComputedStyle.marginBottom);
-        const newMarginLeft = resolveCSSSize(targetComputedStyle.marginLeft);
-        const newMarginRight = resolveCSSSize(targetComputedStyle.marginRight);
-        const paddingTop = resolveCSSSize(containedComputedStyle.paddingTop);
-        const paddingLeft = resolveCSSSize(containedComputedStyle.paddingLeft);
-        const paddingRight = resolveCSSSize(containedComputedStyle.paddingRight);
-        const paddingBottom = resolveCSSSize(containedComputedStyle.paddingBottom);
-        setBorderTopWidth(newBorderTopWidth);
-        setBorderLeftWidth(newBorderLeftWidth);
-        setBorderRightWidth(newBorderRightWidth);
-        setBorderBottomWidth(newBorderBottomWidth);
-        setBorderRadius(newBorderRadius);
-        setOutlineOffset(newOutlineOffset);
-        setMarginTop(newMarginTop);
-        setMarginBottom(newMarginBottom);
-        setMarginLeft(newMarginLeft);
-        setMarginRight(newMarginRight);
-        setPaddingTop(paddingTop);
-        setPaddingLeft(paddingLeft);
-        setPaddingRight(paddingRight);
-        setPaddingBottom(paddingBottom);
-        if (color) {
-          // const resolvedColor = resolveCSSColor(color, rectangle, "css");
-          //  console.log(resolvedColor);
-          setCurrentColor(color);
-        } else if (newOutlineColor && newOutlineColor !== "rgba(0, 0, 0, 0)" && (document.activeElement === containedElement || newBorderColor === "rgba(0, 0, 0, 0)")) {
-          setCurrentColor(newOutlineColor);
-        } else if (newBorderColor && newBorderColor !== "rgba(0, 0, 0, 0)") {
-          setCurrentColor(newBorderColor);
-        } else {
-          setCurrentColor(newDetectedColor);
-        }
-      }
-      // updateStyles is very cheap so we run it every frame
-      animationFrame = requestAnimationFrame(updateStyles);
-    };
-    updateStyles();
-    return () => {
-      cancelAnimationFrame(animationFrame);
-    };
-  }, [color, targetSelector]);
-  spacingTop += inset;
-  // spacingTop += outlineOffset;
-  // spacingTop -= borderTopWidth;
-  spacingTop += marginTop;
-  spacingLeft += inset;
-  // spacingLeft += outlineOffset;
-  // spacingLeft -= borderLeftWidth;
-  spacingLeft += marginLeft;
-  spacingRight += inset;
-  // spacingRight += outlineOffset;
-  // spacingRight -= borderRightWidth;
-  spacingRight += marginRight;
-  spacingBottom += inset;
-  // spacingBottom += outlineOffset;
-  // spacingBottom -= borderBottomWidth;
-  spacingBottom += marginBottom;
-  if (targetSelector) {
-    // oversimplification that actually works
-    // (simplified because it assumes the targeted element is a direct child of the contained element which may have padding)
-    spacingTop += paddingTop;
-    spacingLeft += paddingLeft;
-    spacingRight += paddingRight;
-    spacingBottom += paddingBottom;
-  }
-  const maxBorderWidth = Math.max(borderTopWidth, borderLeftWidth, borderRightWidth, borderBottomWidth);
-  const halfMaxBorderSize = maxBorderWidth / 2;
-  const size = halfMaxBorderSize < 2 ? 2 : halfMaxBorderSize;
-  const lineHalfSize = size / 2;
-  spacingTop -= lineHalfSize;
-  spacingLeft -= lineHalfSize;
-  spacingRight -= lineHalfSize;
-  spacingBottom -= lineHalfSize;
-  return jsxs(Fragment, {
-    children: [jsx("span", {
-      ref: rectangleRef,
-      className: "navi_loading_rectangle_wrapper",
-      "data-visible": shouldShowSpinner ? "" : undefined,
-      style: {
-        "--rectangle-top": `${spacingTop}px`,
-        "--rectangle-left": `${spacingLeft}px`,
-        "--rectangle-bottom": `${spacingBottom}px`,
-        "--rectangle-right": `${spacingRight}px`
-      },
-      children: loading && jsx(RectangleLoading, {
-        shouldShowSpinner: shouldShowSpinner,
-        color: currentColor,
-        radius: borderRadius,
-        size: size
-      })
-    }), children]
-  });
-};
-
-/**
- * Custom hook creating a stable callback that doesn't trigger re-renders.
- *
- * PROBLEM: Parent components often forget to use useCallback, causing library
- * components to re-render unnecessarily when receiving callback props.
- *
- * SOLUTION: Library components can use this hook to create stable callback
- * references internally, making them defensive against parents who don't
- * optimize their callbacks. This ensures library components don't force
- * consumers to think about useCallback.
- *
- * USAGE:
- * ```js
- * // Parent component (consumer) - no useCallback needed
- * const Parent = () => {
- *   const [count, setCount] = useState(0);
- *
- *   // Parent naturally creates new function reference each render
- *   // (forgetting useCallback is common and shouldn't break performance)
- *   return <LibraryButton onClick={(e) => setCount(count + 1)} />;
- * };
- *
- * // Library component - defensive against changing callbacks
- * const LibraryButton = ({ onClick }) => {
- *   // ✅ Create stable reference from parent's potentially changing callback
- *   const stableClick = useStableCallback(onClick);
- *
- *   // Internal expensive components won't re-render when parent updates
- *   return <ExpensiveInternalButton onClick={stableClick} />;
- * };
- *
- * // Deep internal component gets stable reference
- * const ExpensiveInternalButton = memo(({ onClick }) => {
- *   // This won't re-render when Parent's count changes
- *   // But onClick will always call the latest Parent callback
- *   return <button onClick={onClick}>Click me</button>;
- * });
- * ```
- *
- * Perfect for library components that need performance without burdening consumers.
- */
-
-
-const useStableCallback = (callback, mapper) => {
-  const callbackRef = useRef();
-  callbackRef.current = callback;
-  const stableCallbackRef = useRef();
-
-  // Return original falsy value directly when callback is not a function
-  if (!callback) {
-    return callback;
-  }
-
-  const existingStableCallback = stableCallbackRef.current;
-  if (existingStableCallback) {
-    return existingStableCallback;
-  }
-  const stableCallback = (...args) => {
-    const currentCallback = callbackRef.current;
-    return currentCallback(...args);
-  };
-  stableCallbackRef.current = stableCallback;
-  return stableCallback;
-};
-
-const DEBUG = {
-  registration: false,
-  // Element registration/unregistration
-  interaction: false,
-  // Click and keyboard interactions
-  selection: false,
-  // Selection state changes (set, add, remove, toggle)
-  navigation: false,
-  // Arrow key navigation and element finding
-  valueExtraction: false // Value extraction from elements
-};
-const debug = (category, ...args) => {
-  if (DEBUG[category]) {
-    console.debug(`[selection:${category}]`, ...args);
-  }
-};
-const SelectionContext = createContext();
-const useSelectionController = ({
-  elementRef,
-  layout,
-  value,
-  onChange,
-  multiple,
-  selectAllName
-}) => {
-  if (!elementRef) {
-    throw new Error("useSelectionController: elementRef is required");
-  }
-  onChange = useStableCallback(onChange);
-  const currentValueRef = useRef(value);
-  currentValueRef.current = value;
-  const lastInternalValueRef = useRef(null);
-  const selectionController = useMemo(() => {
-    const innerOnChange = (newValue, ...args) => {
-      lastInternalValueRef.current = newValue;
-      onChange?.(newValue, ...args);
-    };
-    const getCurrentValue = () => currentValueRef.current;
-    if (layout === "grid") {
-      return createGridSelectionController({
-        getCurrentValue,
-        onChange: innerOnChange,
-        enabled: Boolean(onChange),
-        multiple,
-        selectAllName
-      });
-    }
-    return createLinearSelectionController({
-      getCurrentValue,
-      onChange: innerOnChange,
-      layout,
-      elementRef,
-      multiple,
-      enabled: Boolean(onChange),
-      selectAllName
-    });
-  }, [layout, multiple, elementRef]);
-  useEffect(() => {
-    selectionController.element = elementRef.current;
-  }, [selectionController]);
-  useLayoutEffect(() => {
-    selectionController.enabled = Boolean(onChange);
-  }, [selectionController, onChange]);
-
-  // Smart sync: only update selection when value changes externally
-  useEffect(() => {
-    // Check if this is an external change (not from our internal onChange)
-    const isExternalChange = !compareTwoJsValues(value, lastInternalValueRef.current);
-    if (isExternalChange) {
-      selectionController.update(value);
+    selectionController.enabled = Boolean(onChange);
+  }, [selectionController, onChange]);
+
+  // Smart sync: only update selection when value changes externally
+  useEffect(() => {
+    // Check if this is an external change (not from our internal onChange)
+    const isExternalChange = !compareTwoJsValues(value, lastInternalValueRef.current);
+    if (isExternalChange) {
+      selectionController.update(value);
     }
   }, [value, selectionController]);
   return selectionController;
@@ -16862,1045 +16313,1626 @@ const installCustomConstraintValidation = (
           // an other button is explicitly submitting the form, this one would not submit it
           return null;
         }
-        // this is the only button inside the form without type attribute, so it defaults to type="submit"
-        return button;
-      };
-      const formSubmitTarget = determineClosestFormSubmitTargetForClickEvent();
-      if (formSubmitTarget) {
-        clickEvent.preventDefault();
+        // this is the only button inside the form without type attribute, so it defaults to type="submit"
+        return button;
+      };
+      const formSubmitTarget = determineClosestFormSubmitTargetForClickEvent();
+      if (formSubmitTarget) {
+        clickEvent.preventDefault();
+      }
+      dispatchActionRequestedCustomEvent(elementWithAction, {
+        event: clickEvent,
+        requester: formSubmitTarget || button,
+      });
+    };
+    element.addEventListener("click", onclick);
+    addTeardown(() => {
+      element.removeEventListener("click", onclick);
+    });
+  }
+
+  request_on_input_change: {
+    const isInput =
+      element.tagName === "INPUT" || element.tagName === "TEXTAREA";
+    if (!isInput) {
+      break request_on_input_change;
+    }
+    const stop = listenInputChange(element, (e) => {
+      const elementWithAction = closestElementWithAction(element);
+      if (!elementWithAction) {
+        return;
+      }
+      dispatchActionRequestedCustomEvent(elementWithAction, {
+        event: e,
+        requester: element,
+      });
+    });
+    addTeardown(() => {
+      stop();
+    });
+  }
+
+  request_on_checkbox_change: {
+    const isCheckbox =
+      element.tagName === "INPUT" && element.type === "checkbox";
+    if (!isCheckbox) {
+      break request_on_checkbox_change;
+    }
+    const onchange = (e) => {
+      if (element.parentNode.hasAttribute("data-action")) {
+        dispatchActionRequestedCustomEvent(element, {
+          event: e,
+          requester: element,
+        });
+        return;
+      }
+    };
+    element.addEventListener("change", onchange);
+    addTeardown(() => {
+      element.removeEventListener("change", onchange);
+    });
+  }
+
+  execute_on_form_submit: {
+    if (!isForm) {
+      break execute_on_form_submit;
+    }
+    // We will dispatch "action" when "submit" occurs (code called from.submit() to bypass validation)
+    const form = element;
+    const removeListener = addEventListener(form, "submit", (e) => {
+      e.preventDefault();
+      const actionCustomEvent = new CustomEvent("action", {
+        detail: {
+          action: null,
+          event: e,
+          method: "rerun",
+          requester: form,
+          meta: {
+            isSubmit: true,
+          },
+        },
+      });
+      form.dispatchEvent(actionCustomEvent);
+    });
+    addTeardown(() => {
+      removeListener();
+    });
+  }
+
+  {
+    const onkeydown = (e) => {
+      if (e.key === "Escape") {
+        if (!closeElementValidationMessage("escape_key")) {
+          dispatchCancelCustomEvent({ detail: { reason: "escape_key" } });
+        }
+      }
+    };
+    element.addEventListener("keydown", onkeydown);
+    addTeardown(() => {
+      element.removeEventListener("keydown", onkeydown);
+    });
+  }
+
+  {
+    const onblur = () => {
+      if (element.value === "") {
+        dispatchCancelCustomEvent({
+          detail: {
+            reason: "blur_empty",
+          },
+        });
+        return;
+      }
+      // if we have failed constraint, we cancel too
+      if (failedConstraintInfo) {
+        dispatchCancelCustomEvent({
+          detail: {
+            reason: "blur_invalid",
+            failedConstraintInfo,
+          },
+        });
+        return;
+      }
+    };
+    element.addEventListener("blur", onblur);
+    addTeardown(() => {
+      element.removeEventListener("blur", onblur);
+    });
+  }
+
+  return validationInterface;
+};
+
+// When interacting with an element we want to find the closest element
+// eventually handling the action
+// 1. <button> itself has an action
+// 2. <button> is inside a <form> with an action
+// 3. <button> is inside a wrapper <div> with an action (data-action is not necessarly on the interactive element itself, it can be on a wrapper, we want to support that)
+// 4. <button> is inside a <fieldset> or any element that catches the action like a <form> would
+// In examples above <button> can also be <input> etc..
+const closestElementWithAction = (el) => {
+  if (el.hasAttribute("data-action")) {
+    return el;
+  }
+  const closestDataActionElement = el.closest("[data-action]");
+  if (!closestDataActionElement) {
+    return null;
+  }
+  const visualSelector = closestDataActionElement.getAttribute(
+    "data-visual-selector",
+  );
+  if (!visualSelector) {
+    return closestDataActionElement;
+  }
+  const visualElement = closestDataActionElement.querySelector(visualSelector);
+  return visualElement;
+};
+
+const pickConstraint = (a, b) => {
+  const aPrio = getConstraintPriority(a);
+  const bPrio = getConstraintPriority(b);
+  if (aPrio > bPrio) {
+    return a;
+  }
+  return b;
+};
+const getConstraintPriority = (constraint) => {
+  if (constraint.name === "required") {
+    return 100;
+  }
+  if (STANDARD_CONSTRAINT_SET.has(constraint)) {
+    return 10;
+  }
+  return 1;
+};
+
+const getFirstButtonSubmittingForm = (form) => {
+  return form.querySelector(
+    `button[type="submit"], input[type="submit"], input[type="image"]`,
+  );
+};
+
+const dispatchActionRequestedCustomEvent = (
+  elementWithAction,
+  { actionOrigin = "action_prop", event, requester },
+) => {
+  const actionRequestedCustomEvent = new CustomEvent("actionrequested", {
+    cancelable: true,
+    detail: {
+      actionOrigin,
+      event,
+      requester,
+    },
+  });
+  elementWithAction.dispatchEvent(actionRequestedCustomEvent);
+};
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation
+const requestSubmit = HTMLFormElement.prototype.requestSubmit;
+HTMLFormElement.prototype.requestSubmit = function (submitter) {
+  const form = this;
+  const isInstrumented = formInstrumentedWeakSet.has(form);
+  if (!isInstrumented) {
+    requestSubmit.call(form, submitter);
+    return;
+  }
+  const programmaticEvent = new CustomEvent("programmatic_requestsubmit", {
+    cancelable: true,
+    detail: {
+      submitter,
+    },
+  });
+  dispatchActionRequestedCustomEvent(form, {
+    event: programmaticEvent,
+    requester: submitter,
+  });
+
+  // When all fields are valid calling the native requestSubmit would let browser go through the
+  // standard form validation steps leading to form submission.
+  // We don't want that because we have our own action system to handle forms
+  // If we did that the form submission would happen in parallel of our action system
+  // and because we listen to "submit" event to dispatch "action" event
+  // we would end up with two actions being executed.
+  //
+  // In case we have discrepencies in our implementation compared to the browser standard
+  // this also prevent the native validation message to show up.
+
+  // requestSubmit.call(this, submitter);
+};
+
+// const submit = HTMLFormElement.prototype.submit;
+// HTMLFormElement.prototype.submit = function (...args) {
+//   const form = this;
+//   if (form.hasAttribute("data-method")) {
+//     console.warn("You must use form.requestSubmit() instead of form.submit()");
+//     return form.requestSubmit();
+//   }
+//   return submit.apply(this, args);
+// };
+
+const addEventListener = (element, event, callback) => {
+  element.addEventListener(event, callback);
+  return () => {
+    element.removeEventListener(event, callback);
+  };
+};
+
+const useCustomValidationRef = (elementRef, targetSelector) => {
+  const customValidationRef = useRef();
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      console.warn(
+        "useCustomValidationRef: elementRef.current is null, make sure to pass a ref to an element",
+      );
+      /* can happen if the component does this for instance:
+      const Component = () => {
+        const ref = useRef(null) 
+        
+        if (something) {
+          return <input ref={ref} />  
+        }
+        return <span></span>
       }
-      dispatchActionRequestedCustomEvent(elementWithAction, {
-        event: clickEvent,
-        requester: formSubmitTarget || button,
-      });
-    };
-    element.addEventListener("click", onclick);
-    addTeardown(() => {
-      element.removeEventListener("click", onclick);
-    });
-  }
 
-  request_on_input_change: {
-    const isInput =
-      element.tagName === "INPUT" || element.tagName === "TEXTAREA";
-    if (!isInput) {
-      break request_on_input_change;
+      usually it's better to split the component in two but hey 
+      */
+      return null;
     }
-    const stop = listenInputChange(element, (e) => {
-      const elementWithAction = closestElementWithAction(element);
-      if (!elementWithAction) {
-        return;
+    let target;
+    if (targetSelector) {
+      target = element.querySelector(targetSelector);
+      if (!target) {
+        console.warn(
+          `useCustomValidationRef: targetSelector "${targetSelector}" did not match in element`,
+        );
+        return null;
       }
-      dispatchActionRequestedCustomEvent(elementWithAction, {
-        event: e,
-        requester: element,
-      });
-    });
-    addTeardown(() => {
-      stop();
-    });
+    } else {
+      target = element;
+    }
+    const unsubscribe = subscribe(element, target);
+    const validationInterface = element.__validationInterface__;
+    customValidationRef.current = validationInterface;
+    return () => {
+      unsubscribe();
+    };
+  }, [targetSelector]);
+
+  return customValidationRef;
+};
+
+const subscribeCountWeakMap = new WeakMap();
+const subscribe = (element, target) => {
+  if (element.__validationInterface__) {
+    let subscribeCount = subscribeCountWeakMap.get(element);
+    subscribeCountWeakMap.set(element, subscribeCount + 1);
+  } else {
+    installCustomConstraintValidation(element, target);
+    subscribeCountWeakMap.set(element, 1);
   }
+  return () => {
+    unsubscribe(element);
+  };
+};
 
-  request_on_checkbox_change: {
-    const isCheckbox =
-      element.tagName === "INPUT" && element.type === "checkbox";
-    if (!isCheckbox) {
-      break request_on_checkbox_change;
+const unsubscribe = (element) => {
+  const subscribeCount = subscribeCountWeakMap.get(element);
+  if (subscribeCount === 1) {
+    element.__validationInterface__.uninstall();
+    subscribeCountWeakMap.delete(element);
+  } else {
+    subscribeCountWeakMap.set(element, subscribeCount - 1);
+  }
+};
+
+const NO_CONSTRAINTS = [];
+const useConstraints = (elementRef, props, { targetSelector } = {}) => {
+  const {
+    constraints = NO_CONSTRAINTS,
+    disabledMessage,
+    requiredMessage,
+    patternMessage,
+    minLengthMessage,
+    maxLengthMessage,
+    typeMessage,
+    minMessage,
+    maxMessage,
+    singleSpaceMessage,
+    sameAsMessage,
+    minDigitMessage,
+    minLowerLetterMessage,
+    minUpperLetterMessage,
+    minSpecialCharMessage,
+    availableMessage,
+    ...remainingProps
+  } = props;
+
+  const customValidationRef = useCustomValidationRef(
+    elementRef,
+    targetSelector,
+  );
+  useLayoutEffect(() => {
+    const customValidation = customValidationRef.current;
+    const cleanupCallbackSet = new Set();
+    for (const constraint of constraints) {
+      const unregister = customValidation.registerConstraint(constraint);
+      cleanupCallbackSet.add(unregister);
     }
-    const onchange = (e) => {
-      if (element.parentNode.hasAttribute("data-action")) {
-        dispatchActionRequestedCustomEvent(element, {
-          event: e,
-          requester: element,
-        });
-        return;
+    return () => {
+      for (const cleanupCallback of cleanupCallbackSet) {
+        cleanupCallback();
       }
     };
-    element.addEventListener("change", onchange);
-    addTeardown(() => {
-      element.removeEventListener("change", onchange);
-    });
-  }
+  }, constraints);
 
-  execute_on_form_submit: {
-    if (!isForm) {
-      break execute_on_form_submit;
+  useLayoutEffect(() => {
+    const el = elementRef.current;
+    if (!el) {
+      return null;
     }
-    // We will dispatch "action" when "submit" occurs (code called from.submit() to bypass validation)
-    const form = element;
-    const removeListener = addEventListener(form, "submit", (e) => {
-      e.preventDefault();
-      const actionCustomEvent = new CustomEvent("action", {
-        detail: {
-          action: null,
-          event: e,
-          method: "rerun",
-          requester: form,
-          meta: {
-            isSubmit: true,
-          },
-        },
+    const cleanupCallbackSet = new Set();
+    const setupCustomEvent = (el, constraintName, Component) => {
+      const attrName = `data-${constraintName}-message-event`;
+      const customEventName = `${constraintName}_message_jsx`;
+      el.setAttribute(attrName, customEventName);
+      const onCustomEvent = (e) => {
+        e.detail.render(Component);
+      };
+      el.addEventListener(customEventName, onCustomEvent);
+      cleanupCallbackSet.add(() => {
+        el.removeEventListener(customEventName, onCustomEvent);
+        el.removeAttribute(attrName);
       });
-      form.dispatchEvent(actionCustomEvent);
-    });
-    addTeardown(() => {
-      removeListener();
-    });
-  }
-
-  {
-    const onkeydown = (e) => {
-      if (e.key === "Escape") {
-        if (!closeElementValidationMessage("escape_key")) {
-          dispatchCancelCustomEvent({ detail: { reason: "escape_key" } });
-        }
-      }
     };
-    element.addEventListener("keydown", onkeydown);
-    addTeardown(() => {
-      element.removeEventListener("keydown", onkeydown);
-    });
-  }
 
-  {
-    const onblur = () => {
-      if (element.value === "") {
-        dispatchCancelCustomEvent({
-          detail: {
-            reason: "blur_empty",
-          },
-        });
-        return;
-      }
-      // if we have failed constraint, we cancel too
-      if (failedConstraintInfo) {
-        dispatchCancelCustomEvent({
-          detail: {
-            reason: "blur_invalid",
-            failedConstraintInfo,
-          },
-        });
-        return;
+    if (disabledMessage) {
+      setupCustomEvent(el, "disabled", disabledMessage);
+    }
+    if (requiredMessage) {
+      setupCustomEvent(el, "required", requiredMessage);
+    }
+    if (patternMessage) {
+      setupCustomEvent(el, "pattern", patternMessage);
+    }
+    if (minLengthMessage) {
+      setupCustomEvent(el, "min-length", minLengthMessage);
+    }
+    if (maxLengthMessage) {
+      setupCustomEvent(el, "max-length", maxLengthMessage);
+    }
+    if (typeMessage) {
+      setupCustomEvent(el, "type", typeMessage);
+    }
+    if (minMessage) {
+      setupCustomEvent(el, "min", minMessage);
+    }
+    if (maxMessage) {
+      setupCustomEvent(el, "max", maxMessage);
+    }
+    if (singleSpaceMessage) {
+      setupCustomEvent(el, "single-space", singleSpaceMessage);
+    }
+    if (sameAsMessage) {
+      setupCustomEvent(el, "same-as", sameAsMessage);
+    }
+    if (minDigitMessage) {
+      setupCustomEvent(el, "min-digit", minDigitMessage);
+    }
+    if (minLowerLetterMessage) {
+      setupCustomEvent(el, "min-lower-letter", minLowerLetterMessage);
+    }
+    if (minUpperLetterMessage) {
+      setupCustomEvent(el, "min-upper-letter", minUpperLetterMessage);
+    }
+    if (minSpecialCharMessage) {
+      setupCustomEvent(el, "min-special-char", minSpecialCharMessage);
+    }
+    if (availableMessage) {
+      setupCustomEvent(el, "available", availableMessage);
+    }
+    return () => {
+      for (const cleanupCallback of cleanupCallbackSet) {
+        cleanupCallback();
       }
     };
-    element.addEventListener("blur", onblur);
-    addTeardown(() => {
-      element.removeEventListener("blur", onblur);
-    });
-  }
+  }, [
+    disabledMessage,
+    requiredMessage,
+    patternMessage,
+    minLengthMessage,
+    maxLengthMessage,
+    typeMessage,
+    minMessage,
+    maxMessage,
+    singleSpaceMessage,
+    sameAsMessage,
+    minDigitMessage,
+    minLowerLetterMessage,
+    minUpperLetterMessage,
+    minSpecialCharMessage,
+    availableMessage,
+  ]);
 
-  return validationInterface;
+  return remainingProps;
 };
 
-// When interacting with an element we want to find the closest element
-// eventually handling the action
-// 1. <button> itself has an action
-// 2. <button> is inside a <form> with an action
-// 3. <button> is inside a wrapper <div> with an action (data-action is not necessarly on the interactive element itself, it can be on a wrapper, we want to support that)
-// 4. <button> is inside a <fieldset> or any element that catches the action like a <form> would
-// In examples above <button> can also be <input> etc..
-const closestElementWithAction = (el) => {
-  if (el.hasAttribute("data-action")) {
-    return el;
-  }
-  const closestDataActionElement = el.closest("[data-action]");
-  if (!closestDataActionElement) {
-    return null;
-  }
-  const visualSelector = closestDataActionElement.getAttribute(
-    "data-visual-selector",
-  );
-  if (!visualSelector) {
-    return closestDataActionElement;
+const useInitialTextSelection = (ref, textSelection) => {
+  const deps = [];
+  if (Array.isArray(textSelection)) {
+    deps.push(...textSelection);
+  } else {
+    deps.push(textSelection);
   }
-  const visualElement = closestDataActionElement.querySelector(visualSelector);
-  return visualElement;
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || !textSelection) {
+      return;
+    }
+    const range = document.createRange();
+    const selection = window.getSelection();
+    if (Array.isArray(textSelection)) {
+      if (textSelection.length === 2) {
+        const [start, end] = textSelection;
+        if (typeof start === "number" && typeof end === "number") {
+          // Format: [0, 10] - character indices
+          selectByCharacterIndices(el, range, start, end);
+        } else if (typeof start === "string" && typeof end === "string") {
+          // Format: ["Click on the", "button to return"] - text strings
+          selectByTextStrings(el, range, start, end);
+        }
+      }
+    } else if (typeof textSelection === "string") {
+      // Format: "some text" - select the entire string occurrence
+      selectSingleTextString(el, range, textSelection);
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }, deps);
 };
+const selectByCharacterIndices = (element, range, startIndex, endIndex) => {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+  let currentIndex = 0;
+  let startNode = null;
+  let startOffset = 0;
+  let endNode = null;
+  let endOffset = 0;
+  while (walker.nextNode()) {
+    const textContent = walker.currentNode.textContent;
+    const nodeLength = textContent.length;
 
-const pickConstraint = (a, b) => {
-  const aPrio = getConstraintPriority(a);
-  const bPrio = getConstraintPriority(b);
-  if (aPrio > bPrio) {
-    return a;
-  }
-  return b;
-};
-const getConstraintPriority = (constraint) => {
-  if (constraint.name === "required") {
-    return 100;
+    // Check if start position is in this text node
+    if (!startNode && currentIndex + nodeLength > startIndex) {
+      startNode = walker.currentNode;
+      startOffset = startIndex - currentIndex;
+    }
+
+    // Check if end position is in this text node
+    if (currentIndex + nodeLength >= endIndex) {
+      endNode = walker.currentNode;
+      endOffset = endIndex - currentIndex;
+      break;
+    }
+    currentIndex += nodeLength;
   }
-  if (STANDARD_CONSTRAINT_SET.has(constraint)) {
-    return 10;
+  if (startNode && endNode) {
+    range.setStart(startNode, startOffset);
+    range.setEnd(endNode, endOffset);
   }
-  return 1;
-};
-
-const getFirstButtonSubmittingForm = (form) => {
-  return form.querySelector(
-    `button[type="submit"], input[type="submit"], input[type="image"]`,
-  );
 };
-
-const dispatchActionRequestedCustomEvent = (
-  elementWithAction,
-  { actionOrigin = "action_prop", event, requester },
-) => {
-  const actionRequestedCustomEvent = new CustomEvent("actionrequested", {
-    cancelable: true,
-    detail: {
-      actionOrigin,
-      event,
-      requester,
-    },
-  });
-  elementWithAction.dispatchEvent(actionRequestedCustomEvent);
-};
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation
-const requestSubmit = HTMLFormElement.prototype.requestSubmit;
-HTMLFormElement.prototype.requestSubmit = function (submitter) {
-  const form = this;
-  const isInstrumented = formInstrumentedWeakSet.has(form);
-  if (!isInstrumented) {
-    requestSubmit.call(form, submitter);
-    return;
+const selectSingleTextString = (element, range, text) => {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+  while (walker.nextNode()) {
+    const textContent = walker.currentNode.textContent;
+    const index = textContent.indexOf(text);
+    if (index !== -1) {
+      range.setStart(walker.currentNode, index);
+      range.setEnd(walker.currentNode, index + text.length);
+      return;
+    }
   }
-  const programmaticEvent = new CustomEvent("programmatic_requestsubmit", {
-    cancelable: true,
-    detail: {
-      submitter,
-    },
-  });
-  dispatchActionRequestedCustomEvent(form, {
-    event: programmaticEvent,
-    requester: submitter,
-  });
-
-  // When all fields are valid calling the native requestSubmit would let browser go through the
-  // standard form validation steps leading to form submission.
-  // We don't want that because we have our own action system to handle forms
-  // If we did that the form submission would happen in parallel of our action system
-  // and because we listen to "submit" event to dispatch "action" event
-  // we would end up with two actions being executed.
-  //
-  // In case we have discrepencies in our implementation compared to the browser standard
-  // this also prevent the native validation message to show up.
-
-  // requestSubmit.call(this, submitter);
 };
-
-// const submit = HTMLFormElement.prototype.submit;
-// HTMLFormElement.prototype.submit = function (...args) {
-//   const form = this;
-//   if (form.hasAttribute("data-method")) {
-//     console.warn("You must use form.requestSubmit() instead of form.submit()");
-//     return form.requestSubmit();
-//   }
-//   return submit.apply(this, args);
-// };
-
-const addEventListener = (element, event, callback) => {
-  element.addEventListener(event, callback);
-  return () => {
-    element.removeEventListener(event, callback);
-  };
+const selectByTextStrings = (element, range, startText, endText) => {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
+  let startNode = null;
+  let endNode = null;
+  let foundStart = false;
+  while (walker.nextNode()) {
+    const textContent = walker.currentNode.textContent;
+    if (!foundStart && textContent.includes(startText)) {
+      startNode = walker.currentNode;
+      foundStart = true;
+    }
+    if (foundStart && textContent.includes(endText)) {
+      endNode = walker.currentNode;
+      break;
+    }
+  }
+  if (startNode && endNode) {
+    const startOffset = startNode.textContent.indexOf(startText);
+    const endOffset = endNode.textContent.indexOf(endText) + endText.length;
+    range.setStart(startNode, startOffset);
+    range.setEnd(endNode, endOffset);
+  }
 };
 
-const useCustomValidationRef = (elementRef, targetSelector) => {
-  const customValidationRef = useRef();
-
-  useLayoutEffect(() => {
-    const element = elementRef.current;
-    if (!element) {
-      console.warn(
-        "useCustomValidationRef: elementRef.current is null, make sure to pass a ref to an element",
-      );
-      /* can happen if the component does this for instance:
-      const Component = () => {
-        const ref = useRef(null) 
-        
-        if (something) {
-          return <input ref={ref} />  
-        }
-        return <span></span>
-      }
-
-      usually it's better to split the component in two but hey 
-      */
-      return null;
-    }
-    let target;
-    if (targetSelector) {
-      target = element.querySelector(targetSelector);
-      if (!target) {
-        console.warn(
-          `useCustomValidationRef: targetSelector "${targetSelector}" did not match in element`,
-        );
-        return null;
-      }
-    } else {
-      target = element;
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  *[data-navi-space] {
+    /* user-select: none; */
+  }
+
+  .navi_text {
+    position: relative;
+    color: inherit;
+
+    &[data-has-absolute-child] {
+      display: inline-block;
     }
-    const unsubscribe = subscribe(element, target);
-    const validationInterface = element.__validationInterface__;
-    customValidationRef.current = validationInterface;
-    return () => {
-      unsubscribe();
-    };
-  }, [targetSelector]);
+  }
 
-  return customValidationRef;
-};
+  .navi_text_overflow {
+    flex-wrap: wrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 
-const subscribeCountWeakMap = new WeakMap();
-const subscribe = (element, target) => {
-  if (element.__validationInterface__) {
-    let subscribeCount = subscribeCountWeakMap.get(element);
-    subscribeCountWeakMap.set(element, subscribeCount + 1);
-  } else {
-    installCustomConstraintValidation(element, target);
-    subscribeCountWeakMap.set(element, 1);
+  .navi_text_overflow_wrapper {
+    display: flex;
+    width: 0;
+    flex-grow: 1;
+    gap: 0.3em;
   }
-  return () => {
-    unsubscribe(element);
-  };
-};
 
-const unsubscribe = (element) => {
-  const subscribeCount = subscribeCountWeakMap.get(element);
-  if (subscribeCount === 1) {
-    element.__validationInterface__.uninstall();
-    subscribeCountWeakMap.delete(element);
-  } else {
-    subscribeCountWeakMap.set(element, subscribeCount - 1);
+  .navi_text_overflow_text {
+    max-width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
-};
 
-const NO_CONSTRAINTS = [];
-const useConstraints = (elementRef, props, { targetSelector } = {}) => {
-  const {
-    constraints = NO_CONSTRAINTS,
-    disabledMessage,
-    requiredMessage,
-    patternMessage,
-    minLengthMessage,
-    maxLengthMessage,
-    typeMessage,
-    minMessage,
-    maxMessage,
-    singleSpaceMessage,
-    sameAsMessage,
-    minDigitMessage,
-    minLowerLetterMessage,
-    minUpperLetterMessage,
-    minSpecialCharMessage,
-    availableMessage,
-    ...remainingProps
-  } = props;
+  .navi_custom_space {
+  }
 
-  const customValidationRef = useCustomValidationRef(
-    elementRef,
-    targetSelector,
-  );
-  useLayoutEffect(() => {
-    const customValidation = customValidationRef.current;
-    const cleanupCallbackSet = new Set();
-    for (const constraint of constraints) {
-      const unregister = customValidation.registerConstraint(constraint);
-      cleanupCallbackSet.add(unregister);
-    }
-    return () => {
-      for (const cleanupCallback of cleanupCallbackSet) {
-        cleanupCallback();
-      }
-    };
-  }, constraints);
+  .navi_text_bold_wrapper {
+    position: relative;
+    display: inline-block;
+  }
+  .navi_text_bold_clone {
+    font-weight: bold;
+    opacity: 0;
+  }
+  .navi_text_bold_foreground {
+    position: absolute;
+    inset: 0;
+  }
 
-  useLayoutEffect(() => {
-    const el = elementRef.current;
-    if (!el) {
-      return null;
-    }
-    const cleanupCallbackSet = new Set();
-    const setupCustomEvent = (el, constraintName, Component) => {
-      const attrName = `data-${constraintName}-message-event`;
-      const customEventName = `${constraintName}_message_jsx`;
-      el.setAttribute(attrName, customEventName);
-      const onCustomEvent = (e) => {
-        e.detail.render(Component);
-      };
-      el.addEventListener(customEventName, onCustomEvent);
-      cleanupCallbackSet.add(() => {
-        el.removeEventListener(customEventName, onCustomEvent);
-        el.removeAttribute(attrName);
-      });
-    };
+  .navi_text_bold_background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: currentColor;
+    font-weight: normal;
+    background: currentColor;
+    background-clip: text;
+    -webkit-background-clip: text;
+    transform-origin: center;
+    -webkit-text-fill-color: transparent;
+    opacity: 0;
+  }
 
-    if (disabledMessage) {
-      setupCustomEvent(el, "disabled", disabledMessage);
-    }
-    if (requiredMessage) {
-      setupCustomEvent(el, "required", requiredMessage);
-    }
-    if (patternMessage) {
-      setupCustomEvent(el, "pattern", patternMessage);
-    }
-    if (minLengthMessage) {
-      setupCustomEvent(el, "min-length", minLengthMessage);
-    }
-    if (maxLengthMessage) {
-      setupCustomEvent(el, "max-length", maxLengthMessage);
-    }
-    if (typeMessage) {
-      setupCustomEvent(el, "type", typeMessage);
-    }
-    if (minMessage) {
-      setupCustomEvent(el, "min", minMessage);
-    }
-    if (maxMessage) {
-      setupCustomEvent(el, "max", maxMessage);
-    }
-    if (singleSpaceMessage) {
-      setupCustomEvent(el, "single-space", singleSpaceMessage);
+  .navi_text[data-bold] {
+    .navi_text_bold_background {
+      opacity: 1;
     }
-    if (sameAsMessage) {
-      setupCustomEvent(el, "same-as", sameAsMessage);
+  }
+
+  .navi_text[data-bold-transition] {
+    .navi_text_bold_foreground {
+      transition-property: font-weight;
+      transition-duration: 0.3s;
+      transition-timing-function: ease;
     }
-    if (minDigitMessage) {
-      setupCustomEvent(el, "min-digit", minDigitMessage);
+
+    .navi_text_bold_background {
+      transition-property: opacity;
+      transition-duration: 0.3s;
+      transition-timing-function: ease;
     }
-    if (minLowerLetterMessage) {
-      setupCustomEvent(el, "min-lower-letter", minLowerLetterMessage);
+  }
+`;
+const REGULAR_SPACE = jsx("span", {
+  "data-navi-space": "",
+  children: " "
+});
+const CustomWidthSpace = ({
+  value
+}) => {
+  return jsx("span", {
+    className: "navi_custom_space",
+    style: `padding-left: ${value}`,
+    children: "\u200B"
+  });
+};
+const applySpacingOnTextChildren = (children, spacing) => {
+  if (spacing === "pre" || spacing === "0" || spacing === 0) {
+    return children;
+  }
+  if (!children) {
+    return children;
+  }
+  const childArray = toChildArray(children);
+  const childCount = childArray.length;
+  if (childCount <= 1) {
+    return children;
+  }
+  let separator;
+  if (spacing === undefined) {
+    spacing = REGULAR_SPACE;
+  } else if (typeof spacing === "string") {
+    if (isSizeSpacingScaleKey(spacing)) {
+      separator = jsx(CustomWidthSpace, {
+        value: resolveSpacingSize(spacing)
+      });
+    } else if (hasCSSSizeUnit(spacing)) {
+      separator = jsx(CustomWidthSpace, {
+        value: resolveSpacingSize(spacing)
+      });
+    } else {
+      separator = spacing;
     }
-    if (minUpperLetterMessage) {
-      setupCustomEvent(el, "min-upper-letter", minUpperLetterMessage);
+  } else if (typeof spacing === "number") {
+    separator = jsx(CustomWidthSpace, {
+      value: spacing
+    });
+  } else {
+    separator = spacing;
+  }
+  const childrenWithGap = [];
+  let i = 0;
+  while (true) {
+    const child = childArray[i];
+    childrenWithGap.push(child);
+    i++;
+    if (i === childCount) {
+      break;
     }
-    if (minSpecialCharMessage) {
-      setupCustomEvent(el, "min-special-char", minSpecialCharMessage);
+    const currentChild = childArray[i - 1];
+    const nextChild = childArray[i];
+    if (endsWithWhitespace(currentChild)) {
+      continue;
     }
-    if (availableMessage) {
-      setupCustomEvent(el, "available", availableMessage);
+    if (startsWithWhitespace(nextChild)) {
+      continue;
     }
-    return () => {
-      for (const cleanupCallback of cleanupCallbackSet) {
-        cleanupCallback();
-      }
-    };
-  }, [
-    disabledMessage,
-    requiredMessage,
-    patternMessage,
-    minLengthMessage,
-    maxLengthMessage,
-    typeMessage,
-    minMessage,
-    maxMessage,
-    singleSpaceMessage,
-    sameAsMessage,
-    minDigitMessage,
-    minLowerLetterMessage,
-    minUpperLetterMessage,
-    minSpecialCharMessage,
-    availableMessage,
-  ]);
-
-  return remainingProps;
+    childrenWithGap.push(separator);
+  }
+  return childrenWithGap;
 };
-
-const useInitialTextSelection = (ref, textSelection) => {
-  const deps = [];
-  if (Array.isArray(textSelection)) {
-    deps.push(...textSelection);
-  } else {
-    deps.push(textSelection);
+const endsWithWhitespace = jsxChild => {
+  if (typeof jsxChild === "string") {
+    return /\s$/.test(jsxChild);
   }
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el || !textSelection) {
-      return;
-    }
-    const range = document.createRange();
-    const selection = window.getSelection();
-    if (Array.isArray(textSelection)) {
-      if (textSelection.length === 2) {
-        const [start, end] = textSelection;
-        if (typeof start === "number" && typeof end === "number") {
-          // Format: [0, 10] - character indices
-          selectByCharacterIndices(el, range, start, end);
-        } else if (typeof start === "string" && typeof end === "string") {
-          // Format: ["Click on the", "button to return"] - text strings
-          selectByTextStrings(el, range, start, end);
-        }
-      }
-    } else if (typeof textSelection === "string") {
-      // Format: "some text" - select the entire string occurrence
-      selectSingleTextString(el, range, textSelection);
-    }
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }, deps);
+  return false;
 };
-const selectByCharacterIndices = (element, range, startIndex, endIndex) => {
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
-  let currentIndex = 0;
-  let startNode = null;
-  let startOffset = 0;
-  let endNode = null;
-  let endOffset = 0;
-  while (walker.nextNode()) {
-    const textContent = walker.currentNode.textContent;
-    const nodeLength = textContent.length;
-
-    // Check if start position is in this text node
-    if (!startNode && currentIndex + nodeLength > startIndex) {
-      startNode = walker.currentNode;
-      startOffset = startIndex - currentIndex;
-    }
-
-    // Check if end position is in this text node
-    if (currentIndex + nodeLength >= endIndex) {
-      endNode = walker.currentNode;
-      endOffset = endIndex - currentIndex;
-      break;
-    }
-    currentIndex += nodeLength;
+const startsWithWhitespace = jsxChild => {
+  if (typeof jsxChild === "string") {
+    return /^\s/.test(jsxChild);
   }
-  if (startNode && endNode) {
-    range.setStart(startNode, startOffset);
-    range.setEnd(endNode, endOffset);
+  return false;
+};
+const OverflowPinnedElementContext = createContext(null);
+const Text = props => {
+  const {
+    overflowEllipsis,
+    ...rest
+  } = props;
+  if (overflowEllipsis) {
+    return jsx(TextOverflow, {
+      ...rest
+    });
+  }
+  if (props.overflowPinned) {
+    return jsx(TextOverflowPinned, {
+      ...props
+    });
+  }
+  if (props.selectRange) {
+    return jsx(TextWithSelectRange, {
+      ...props
+    });
   }
+  return jsx(TextBasic, {
+    ...props
+  });
 };
-const selectSingleTextString = (element, range, text) => {
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
-  while (walker.nextNode()) {
-    const textContent = walker.currentNode.textContent;
-    const index = textContent.indexOf(text);
-    if (index !== -1) {
-      range.setStart(walker.currentNode, index);
-      range.setEnd(walker.currentNode, index + text.length);
-      return;
-    }
+const TextOverflow = ({
+  noWrap,
+  children,
+  ...rest
+}) => {
+  const [OverflowPinnedElement, setOverflowPinnedElement] = useState(null);
+  return jsx(Text, {
+    column: true,
+    as: "div",
+    nowWrap: noWrap,
+    pre: !noWrap
+    // For paragraph we prefer to keep lines and only hide unbreakable long sections
+    ,
+    preLine: rest.as === "p",
+    ...rest,
+    className: "navi_text_overflow",
+    expandX: true,
+    spacing: "pre",
+    children: jsxs("span", {
+      className: "navi_text_overflow_wrapper",
+      children: [jsx(OverflowPinnedElementContext.Provider, {
+        value: setOverflowPinnedElement,
+        children: jsx(Text, {
+          className: "navi_text_overflow_text",
+          children: children
+        })
+      }), OverflowPinnedElement]
+    })
+  });
+};
+const TextOverflowPinned = ({
+  overflowPinned,
+  ...props
+}) => {
+  const setOverflowPinnedElement = useContext(OverflowPinnedElementContext);
+  const text = jsx(Text, {
+    ...props
+  });
+  if (!setOverflowPinnedElement) {
+    console.warn("<Text overflowPinned> declared outside a <Text overflowEllipsis>");
+    return text;
+  }
+  if (overflowPinned) {
+    setOverflowPinnedElement(text);
+    return null;
   }
+  setOverflowPinnedElement(null);
+  return text;
 };
-const selectByTextStrings = (element, range, startText, endText) => {
-  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
-  let startNode = null;
-  let endNode = null;
-  let foundStart = false;
-  while (walker.nextNode()) {
-    const textContent = walker.currentNode.textContent;
-    if (!foundStart && textContent.includes(startText)) {
-      startNode = walker.currentNode;
-      foundStart = true;
-    }
-    if (foundStart && textContent.includes(endText)) {
-      endNode = walker.currentNode;
-      break;
-    }
+const TextWithSelectRange = ({
+  selectRange,
+  ...props
+}) => {
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
+  useInitialTextSelection(ref, selectRange);
+  return jsx(Text, {
+    ref: ref,
+    ...props
+  });
+};
+const TextBasic = ({
+  spacing = " ",
+  boldTransition,
+  boldStable,
+  preventBoldLayoutShift = boldTransition,
+  children,
+  ...rest
+}) => {
+  const boxProps = {
+    "as": "span",
+    "data-bold-transition": boldTransition ? "" : undefined,
+    ...rest,
+    "baseClassName": withPropsClassName("navi_text", rest.baseClassName)
+  };
+  const shouldPreserveSpacing = rest.as === "pre" || rest.box || rest.column || rest.row;
+  if (shouldPreserveSpacing) {
+    boxProps.spacing = spacing;
+  } else {
+    children = applySpacingOnTextChildren(children, spacing);
   }
-  if (startNode && endNode) {
-    const startOffset = startNode.textContent.indexOf(startText);
-    const endOffset = endNode.textContent.indexOf(endText) + endText.length;
-    range.setStart(startNode, startOffset);
-    range.setEnd(endNode, endOffset);
+  if (boldStable) {
+    const {
+      bold
+    } = boxProps;
+    return jsxs(Box, {
+      ...boxProps,
+      bold: undefined,
+      "data-bold": bold ? "" : undefined,
+      "data-has-absolute-child": "",
+      children: [jsx("span", {
+        className: "navi_text_bold_background",
+        "aria-hidden": "true",
+        children: children
+      }), children]
+    });
+  }
+  if (preventBoldLayoutShift) {
+    const alignX = rest.alignX || rest.align || "start";
+
+    // La technique consiste a avoid un double gras qui force une taille
+    // et la version light par dessus en position absolute
+    // on la centre aussi pour donner l'impression que le gras s'applique depuis le centre
+    // ne fonctionne que sur une seul ligne de texte (donc lorsque noWrap est actif)
+    // on pourrait auto-active cela sur une prop genre boldCanChange
+    return jsx(Box, {
+      ...boxProps,
+      children: jsxs("span", {
+        className: "navi_text_bold_wrapper",
+        children: [jsx("span", {
+          className: "navi_text_bold_clone",
+          "aria-hidden": "true",
+          children: children
+        }), jsx("span", {
+          className: "navi_text_bold_foreground",
+          "data-align": alignX,
+          children: children
+        })]
+      })
+    });
   }
+  return jsx(Box, {
+    ...boxProps,
+    children: children
+  });
 };
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
-  *[data-navi-space] {
-    /* user-select: none; */
-  }
-
-  .navi_text {
-    position: relative;
-    color: inherit;
+  .navi_icon {
+    display: inline-block;
+    box-sizing: border-box;
+    max-width: 100%;
+    max-height: 100%;
 
-    &[data-has-absolute-child] {
-      display: inline-block;
+    &[data-flow-inline] {
+      width: 1em;
+      height: 1em;
+    }
+    &[data-icon-char] {
+      flex-grow: 0 !important;
+      line-height: normal;
     }
   }
 
-  .navi_text_overflow {
-    flex-wrap: wrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  .navi_icon[data-interactive] {
+    cursor: pointer;
   }
 
-  .navi_text_overflow_wrapper {
-    display: flex;
-    width: 0;
-    flex-grow: 1;
-    gap: 0.3em;
+  .navi_icon_char_slot {
+    opacity: 0;
+    cursor: default;
+    user-select: none;
   }
-
-  .navi_text_overflow_text {
-    max-width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  .navi_icon_foreground {
+    position: absolute;
+    inset: 0;
   }
-
-  .navi_custom_space {
+  .navi_icon_foreground > .navi_text {
+    display: flex;
+    aspect-ratio: 1 / 1;
+    min-width: 0;
+    height: 100%;
+    max-height: 1em;
+    align-items: center;
+    justify-content: center;
   }
 
-  .navi_text_bold_wrapper {
-    position: relative;
-    display: inline-block;
+  .navi_icon > svg,
+  .navi_icon > img {
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
   }
-  .navi_text_bold_clone {
-    font-weight: bold;
-    opacity: 0;
+  .navi_icon[data-has-width] > svg,
+  .navi_icon[data-has-width] > img {
+    width: 100%;
+    height: auto;
   }
-  .navi_text_bold_foreground {
-    position: absolute;
-    inset: 0;
+  .navi_icon[data-has-height] > svg,
+  .navi_icon[data-has-height] > img {
+    width: auto;
+    height: 100%;
   }
-
-  .navi_text_bold_background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    color: currentColor;
-    font-weight: normal;
-    background: currentColor;
-    background-clip: text;
-    -webkit-background-clip: text;
-    transform-origin: center;
-    -webkit-text-fill-color: transparent;
-    opacity: 0;
+  .navi_icon[data-has-width][data-has-height] > svg,
+  .navi_icon[data-has-width][data-has-height] > img {
+    width: 100%;
+    height: 100%;
   }
 
-  .navi_text[data-bold] {
-    .navi_text_bold_background {
-      opacity: 1;
+  .navi_icon[data-icon-char] svg,
+  .navi_icon[data-icon-char] img {
+    width: 100%;
+    height: 100%;
+  }
+  .navi_icon[data-icon-char] svg {
+    overflow: visible;
+  }
+`;
+const Icon = ({
+  href,
+  children,
+  charWidth = 1,
+  // 0 (zéro) is the real char width
+  // but 2 zéros gives too big icons
+  // while 1 "W" gives a nice result
+  baseChar = "W",
+  decorative,
+  onClick,
+  ...props
+}) => {
+  const innerChildren = href ? jsx("svg", {
+    width: "100%",
+    height: "100%",
+    children: jsx("use", {
+      href: href
+    })
+  }) : children;
+  let {
+    box,
+    width,
+    height
+  } = props;
+  if (width === "auto") width = undefined;
+  if (height === "auto") height = undefined;
+  const hasExplicitWidth = width !== undefined;
+  const hasExplicitHeight = height !== undefined;
+  if (!hasExplicitWidth && !hasExplicitHeight) {
+    if (decorative === undefined && !onClick) {
+      decorative = true;
     }
+  } else {
+    box = true;
+  }
+  const ariaProps = decorative ? {
+    "aria-hidden": "true"
+  } : {};
+  if (typeof children === "string") {
+    return jsx(Text, {
+      ...props,
+      ...ariaProps,
+      "data-icon-text": "",
+      children: children
+    });
+  }
+  if (box) {
+    return jsx(Box, {
+      square: true,
+      ...props,
+      ...ariaProps,
+      box: box,
+      baseClassName: "navi_icon",
+      "data-has-width": hasExplicitWidth ? "" : undefined,
+      "data-has-height": hasExplicitHeight ? "" : undefined,
+      "data-interactive": onClick ? "" : undefined,
+      onClick: onClick,
+      children: innerChildren
+    });
   }
+  const invisibleText = baseChar.repeat(charWidth);
+  return jsxs(Text, {
+    ...props,
+    ...ariaProps,
+    className: withPropsClassName("navi_icon", props.className),
+    spacing: "pre",
+    "data-icon-char": "",
+    "data-has-width": hasExplicitWidth ? "" : undefined,
+    "data-has-height": hasExplicitHeight ? "" : undefined,
+    "data-interactive": onClick ? "" : undefined,
+    onClick: onClick,
+    children: [jsx("span", {
+      className: "navi_icon_char_slot",
+      "aria-hidden": "true",
+      children: invisibleText
+    }), jsx(Text, {
+      className: "navi_icon_foreground",
+      spacing: "pre",
+      children: innerChildren
+    })]
+  });
+};
 
-  .navi_text[data-bold-transition] {
-    .navi_text_bold_foreground {
-      transition-property: font-weight;
-      transition-duration: 0.3s;
-      transition-timing-function: ease;
-    }
+const EmailSvg = () => {
+  return jsxs("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsx("path", {
+      d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2"
+    }), jsx("path", {
+      d: "m2 6 8 5 2 1.5 2-1.5 8-5",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })]
+  });
+};
+
+const LinkBlankTargetSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsx("path", {
+      d: "M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11",
+      stroke: "currentColor",
+      fill: "none",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    })
+  });
+};
+const LinkAnchorSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsxs("g", {
+      children: [jsx("path", {
+        d: "M13.2218 3.32234C15.3697 1.17445 18.8521 1.17445 21 3.32234C23.1479 5.47022 23.1479 8.95263 21 11.1005L17.4645 14.636C15.3166 16.7839 11.8342 16.7839 9.6863 14.636C9.48752 14.4373 9.30713 14.2271 9.14514 14.0075C8.90318 13.6796 8.97098 13.2301 9.25914 12.9419C9.73221 12.4688 10.5662 12.6561 11.0245 13.1435C11.0494 13.1699 11.0747 13.196 11.1005 13.2218C12.4673 14.5887 14.6834 14.5887 16.0503 13.2218L19.5858 9.6863C20.9526 8.31947 20.9526 6.10339 19.5858 4.73655C18.219 3.36972 16.0029 3.36972 14.636 4.73655L13.5754 5.79721C13.1849 6.18774 12.5517 6.18774 12.1612 5.79721C11.7706 5.40669 11.7706 4.77352 12.1612 4.383L13.2218 3.32234Z",
+        fill: "currentColor"
+      }), jsx("path", {
+        d: "M6.85787 9.6863C8.90184 7.64233 12.2261 7.60094 14.3494 9.42268C14.7319 9.75083 14.7008 10.3287 14.3444 10.685C13.9253 11.1041 13.2317 11.0404 12.7416 10.707C11.398 9.79292 9.48593 9.88667 8.27209 11.1005L4.73655 14.636C3.36972 16.0029 3.36972 18.219 4.73655 19.5858C6.10339 20.9526 8.31947 20.9526 9.6863 19.5858L10.747 18.5251C11.1375 18.1346 11.7706 18.1346 12.1612 18.5251C12.5517 18.9157 12.5517 19.5488 12.1612 19.9394L11.1005 21C8.95263 23.1479 5.47022 23.1479 3.32234 21C1.17445 18.8521 1.17445 15.3697 3.32234 13.2218L6.85787 9.6863Z",
+        fill: "currentColor"
+      })]
+    })
+  });
+};
 
-    .navi_text_bold_background {
-      transition-property: opacity;
-      transition-duration: 0.3s;
-      transition-timing-function: ease;
-    }
-  }
-`;
-const REGULAR_SPACE = jsx("span", {
-  "data-navi-space": "",
-  children: " "
-});
-const CustomWidthSpace = ({
-  value
-}) => {
-  return jsx("span", {
-    className: "navi_custom_space",
-    style: `padding-left: ${value}`,
-    children: "\u200B"
+const PhoneSvg = () => {
+  return jsx("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: jsx("path", {
+      d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z",
+      fill: "currentColor"
+    })
   });
 };
-const applySpacingOnTextChildren = (children, spacing) => {
-  if (spacing === "pre" || spacing === "0" || spacing === 0) {
-    return children;
-  }
-  if (!children) {
-    return children;
-  }
-  const childArray = toChildArray(children);
-  const childCount = childArray.length;
-  if (childCount <= 1) {
-    return children;
-  }
-  let separator;
-  if (spacing === undefined) {
-    spacing = REGULAR_SPACE;
-  } else if (typeof spacing === "string") {
-    if (isSizeSpacingScaleKey(spacing)) {
-      separator = jsx(CustomWidthSpace, {
-        value: resolveSpacingSize(spacing)
-      });
-    } else if (hasCSSSizeUnit(spacing)) {
-      separator = jsx(CustomWidthSpace, {
-        value: resolveSpacingSize(spacing)
-      });
+
+const useDebounceTrue = (value, delay = 300) => {
+  const [debouncedTrue, setDebouncedTrue] = useState(false);
+  const timerRef = useRef(null);
+
+  useLayoutEffect(() => {
+    // If value is true or becomes true, start a timer
+    if (value) {
+      timerRef.current = setTimeout(() => {
+        setDebouncedTrue(true);
+      }, delay);
     } else {
-      separator = spacing;
+      // If value becomes false, clear any pending timer and immediately set to false
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      setDebouncedTrue(false);
     }
-  } else if (typeof spacing === "number") {
-    separator = jsx(CustomWidthSpace, {
-      value: spacing
-    });
-  } else {
-    separator = spacing;
+
+    // Cleanup function
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [value, delay]);
+
+  return debouncedTrue;
+};
+
+const useNetworkSpeed = () => {
+  return networkSpeedSignal.value;
+};
+
+const connection =
+  window.navigator.connection ||
+  window.navigator.mozConnection ||
+  window.navigator.webkitConnection;
+
+const getNetworkSpeed = () => {
+  // ✅ Network Information API (support moderne)
+  if (!connection) {
+    return "3g";
   }
-  const childrenWithGap = [];
-  let i = 0;
-  while (true) {
-    const child = childArray[i];
-    childrenWithGap.push(child);
-    i++;
-    if (i === childCount) {
-      break;
-    }
-    const currentChild = childArray[i - 1];
-    const nextChild = childArray[i];
-    if (endsWithWhitespace(currentChild)) {
-      continue;
+  if (connection) {
+    const effectiveType = connection.effectiveType;
+    if (effectiveType) {
+      return effectiveType; // "slow-2g", "2g", "3g", "4g", "5g"
     }
-    if (startsWithWhitespace(nextChild)) {
-      continue;
+    const downlink = connection.downlink;
+    if (downlink) {
+      // downlink is in Mbps
+      if (downlink < 1) return "slow-2g"; // < 1 Mbps
+      if (downlink < 2.5) return "2g"; // 1-2.5 Mbps
+      if (downlink < 10) return "3g"; // 2.5-10 Mbps
+      return "4g"; // > 10 Mbps
     }
-    childrenWithGap.push(separator);
   }
-  return childrenWithGap;
-};
-const endsWithWhitespace = jsxChild => {
-  if (typeof jsxChild === "string") {
-    return /\s$/.test(jsxChild);
-  }
-  return false;
+  return "3g";
 };
-const startsWithWhitespace = jsxChild => {
-  if (typeof jsxChild === "string") {
-    return /^\s/.test(jsxChild);
-  }
-  return false;
+
+const updateNetworkSpeed = () => {
+  networkSpeedSignal.value = getNetworkSpeed();
 };
-const OverflowPinnedElementContext = createContext(null);
-const Text = props => {
-  const {
-    overflowEllipsis,
-    ...rest
-  } = props;
-  if (overflowEllipsis) {
-    return jsx(TextOverflow, {
-      ...rest
-    });
-  }
-  if (props.overflowPinned) {
-    return jsx(TextOverflowPinned, {
-      ...props
-    });
-  }
-  if (props.selectRange) {
-    return jsx(TextWithSelectRange, {
-      ...props
+
+const networkSpeedSignal = signal(getNetworkSpeed());
+
+const setupNetworkMonitoring = () => {
+  const cleanupFunctions = [];
+
+  // ✅ 1. Écouter les changements natifs
+
+  if (connection) {
+    connection.addEventListener("change", updateNetworkSpeed);
+    cleanupFunctions.push(() => {
+      connection.removeEventListener("change", updateNetworkSpeed);
     });
   }
-  return jsx(TextBasic, {
-    ...props
+
+  // ✅ 2. Polling de backup (toutes les 60 secondes)
+  const pollInterval = setInterval(updateNetworkSpeed, 60000);
+  cleanupFunctions.push(() => clearInterval(pollInterval));
+
+  // ✅ 3. Vérifier lors de la reprise d'activité
+  const handleVisibilityChange = () => {
+    if (!document.hidden) {
+      updateNetworkSpeed();
+    }
+  };
+
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+  cleanupFunctions.push(() => {
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
   });
-};
-const TextOverflow = ({
-  noWrap,
-  children,
-  ...rest
-}) => {
-  const [OverflowPinnedElement, setOverflowPinnedElement] = useState(null);
-  return jsx(Text, {
-    column: true,
-    as: "div",
-    nowWrap: noWrap,
-    pre: !noWrap
-    // For paragraph we prefer to keep lines and only hide unbreakable long sections
-    ,
-    preLine: rest.as === "p",
-    ...rest,
-    className: "navi_text_overflow",
-    expandX: true,
-    spacing: "pre",
-    children: jsxs("span", {
-      className: "navi_text_overflow_wrapper",
-      children: [jsx(OverflowPinnedElementContext.Provider, {
-        value: setOverflowPinnedElement,
-        children: jsx(Text, {
-          className: "navi_text_overflow_text",
-          children: children
-        })
-      }), OverflowPinnedElement]
-    })
+
+  // ✅ 4. Vérifier lors de la reprise de connexion
+  const handleOnline = () => {
+    updateNetworkSpeed();
+  };
+
+  window.addEventListener("online", handleOnline);
+  cleanupFunctions.push(() => {
+    window.removeEventListener("online", handleOnline);
   });
+
+  // Cleanup global
+  return () => {
+    cleanupFunctions.forEach((cleanup) => cleanup());
+  };
 };
-const TextOverflowPinned = ({
-  overflowPinned,
-  ...props
-}) => {
-  const setOverflowPinnedElement = useContext(OverflowPinnedElementContext);
-  const text = jsx(Text, {
-    ...props
-  });
-  if (!setOverflowPinnedElement) {
-    console.warn("<Text overflowPinned> declared outside a <Text overflowEllipsis>");
-    return text;
+setupNetworkMonitoring();
+
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .navi_rectangle_loading {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
   }
-  if (overflowPinned) {
-    setOverflowPinnedElement(text);
-    return null;
+
+  .navi_rectangle_loading[data-visible] {
+    opacity: 1;
   }
-  setOverflowPinnedElement(null);
-  return text;
-};
-const TextWithSelectRange = ({
-  selectRange,
-  ...props
+`;
+const RectangleLoading = ({
+  shouldShowSpinner,
+  color = "currentColor",
+  radius = 0,
+  size = 2
 }) => {
-  const defaultRef = useRef();
-  const ref = props.ref || defaultRef;
-  useInitialTextSelection(ref, selectRange);
-  return jsx(Text, {
-    ref: ref,
-    ...props
+  const containerRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return null;
+    }
+    const {
+      width,
+      height
+    } = container.getBoundingClientRect();
+    setContainerWidth(width);
+    setContainerHeight(height);
+    let animationFrameId = null;
+    // Create a resize observer to detect changes in the container's dimensions
+    const resizeObserver = new ResizeObserver(entries => {
+      // Use requestAnimationFrame to debounce updates
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      animationFrameId = requestAnimationFrame(() => {
+        const [containerEntry] = entries;
+        const {
+          width,
+          height
+        } = containerEntry.contentRect;
+        setContainerWidth(width);
+        setContainerHeight(height);
+      });
+    });
+    resizeObserver.observe(container);
+    return () => {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+      }
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return jsx("span", {
+    ref: containerRef,
+    className: "navi_rectangle_loading",
+    "data-visible": shouldShowSpinner ? "" : undefined,
+    children: containerWidth > 0 && containerHeight > 0 && jsx(RectangleLoadingSvg, {
+      radius: radius,
+      color: color,
+      width: containerWidth,
+      height: containerHeight,
+      strokeWidth: size
+    })
   });
 };
-const TextBasic = ({
-  spacing = " ",
-  boldTransition,
-  boldStable,
-  preventBoldLayoutShift = boldTransition,
-  children,
-  ...rest
+const RectangleLoadingSvg = ({
+  width,
+  height,
+  color,
+  radius,
+  trailColor = "transparent",
+  strokeWidth
 }) => {
-  const boxProps = {
-    "as": "span",
-    "data-bold-transition": boldTransition ? "" : undefined,
-    ...rest,
-    "baseClassName": withPropsClassName("navi_text", rest.baseClassName)
-  };
-  const shouldPreserveSpacing = rest.as === "pre" || rest.box || rest.column || rest.row;
-  if (shouldPreserveSpacing) {
-    boxProps.spacing = spacing;
+  const margin = Math.max(2, Math.min(width, height) * 0.03);
+
+  // Calculate the drawable area
+  const drawableWidth = width - margin * 2;
+  const drawableHeight = height - margin * 2;
+
+  // ✅ Check if this should be a circle - only if width and height are nearly equal
+  const maxPossibleRadius = Math.min(drawableWidth, drawableHeight) / 2;
+  const actualRadius = Math.min(radius || Math.min(drawableWidth, drawableHeight) * 0.05, maxPossibleRadius // ✅ Limité au radius maximum possible
+  );
+  const aspectRatio = Math.max(drawableWidth, drawableHeight) / Math.min(drawableWidth, drawableHeight);
+  const isNearlySquare = aspectRatio <= 1.2; // Allow some tolerance for nearly square shapes
+  const isCircle = isNearlySquare && actualRadius >= maxPossibleRadius * 0.95;
+  let pathLength;
+  let rectPath;
+  if (isCircle) {
+    // ✅ Circle: perimeter = 2πr
+    pathLength = 2 * Math.PI * actualRadius;
+
+    // ✅ Circle path centered in the drawable area
+    const centerX = margin + drawableWidth / 2;
+    const centerY = margin + drawableHeight / 2;
+    rectPath = `
+      M ${centerX + actualRadius},${centerY}
+      A ${actualRadius},${actualRadius} 0 1 1 ${centerX - actualRadius},${centerY}
+      A ${actualRadius},${actualRadius} 0 1 1 ${centerX + actualRadius},${centerY}
+    `;
   } else {
-    children = applySpacingOnTextChildren(children, spacing);
-  }
-  if (boldStable) {
-    const {
-      bold
-    } = boxProps;
-    return jsxs(Box, {
-      ...boxProps,
-      bold: undefined,
-      "data-bold": bold ? "" : undefined,
-      "data-has-absolute-child": "",
-      children: [jsx("span", {
-        className: "navi_text_bold_background",
-        "aria-hidden": "true",
-        children: children
-      }), children]
-    });
+    // ✅ Rectangle: calculate perimeter properly
+    const straightEdges = 2 * (drawableWidth - 2 * actualRadius) + 2 * (drawableHeight - 2 * actualRadius);
+    const cornerArcs = actualRadius > 0 ? 2 * Math.PI * actualRadius : 0;
+    pathLength = straightEdges + cornerArcs;
+    rectPath = `
+      M ${margin + actualRadius},${margin}
+      L ${margin + drawableWidth - actualRadius},${margin}
+      A ${actualRadius},${actualRadius} 0 0 1 ${margin + drawableWidth},${margin + actualRadius}
+      L ${margin + drawableWidth},${margin + drawableHeight - actualRadius}
+      A ${actualRadius},${actualRadius} 0 0 1 ${margin + drawableWidth - actualRadius},${margin + drawableHeight}
+      L ${margin + actualRadius},${margin + drawableHeight}
+      A ${actualRadius},${actualRadius} 0 0 1 ${margin},${margin + drawableHeight - actualRadius}
+      L ${margin},${margin + actualRadius}
+      A ${actualRadius},${actualRadius} 0 0 1 ${margin + actualRadius},${margin}
+    `;
   }
-  if (preventBoldLayoutShift) {
-    const alignX = rest.alignX || rest.align || "start";
 
-    // La technique consiste a avoid un double gras qui force une taille
-    // et la version light par dessus en position absolute
-    // on la centre aussi pour donner l'impression que le gras s'applique depuis le centre
-    // ne fonctionne que sur une seul ligne de texte (donc lorsque noWrap est actif)
-    // on pourrait auto-active cela sur une prop genre boldCanChange
-    return jsx(Box, {
-      ...boxProps,
-      children: jsxs("span", {
-        className: "navi_text_bold_wrapper",
-        children: [jsx("span", {
-          className: "navi_text_bold_clone",
-          "aria-hidden": "true",
-          children: children
-        }), jsx("span", {
-          className: "navi_text_bold_foreground",
-          "data-align": alignX,
-          children: children
-        })]
+  // Fixed segment size in pixels
+  const maxSegmentSize = 40;
+  const segmentLength = Math.min(maxSegmentSize, pathLength * 0.25);
+  const gapLength = pathLength - segmentLength;
+
+  // Vitesse constante en pixels par seconde
+  const networkSpeed = useNetworkSpeed();
+  const pixelsPerSecond = {
+    "slow-2g": 40,
+    "2g": 60,
+    "3g": 80,
+    "4g": 120
+  }[networkSpeed] || 80;
+  const animationDuration = Math.max(1.5, pathLength / pixelsPerSecond);
+
+  // ✅ Calculate correct offset based on actual segment size
+  const segmentRatio = segmentLength / pathLength;
+  const circleOffset = -animationDuration * segmentRatio;
+  return jsxs("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: `0 0 ${width} ${height}`,
+    preserveAspectRatio: "none",
+    style: "overflow: visible",
+    xmlns: "http://www.w3.org/2000/svg",
+    "shape-rendering": "geometricPrecision",
+    children: [isCircle ? jsx("circle", {
+      cx: margin + drawableWidth / 2,
+      cy: margin + drawableHeight / 2,
+      r: actualRadius,
+      fill: "none",
+      stroke: trailColor,
+      strokeWidth: strokeWidth
+    }) : jsx("rect", {
+      x: margin,
+      y: margin,
+      width: drawableWidth,
+      height: drawableHeight,
+      fill: "none",
+      stroke: trailColor,
+      strokeWidth: strokeWidth,
+      rx: actualRadius
+    }), jsx("path", {
+      d: rectPath,
+      fill: "none",
+      stroke: color,
+      strokeWidth: strokeWidth,
+      strokeLinecap: "round",
+      strokeDasharray: `${segmentLength} ${gapLength}`,
+      pathLength: pathLength,
+      children: jsx("animate", {
+        attributeName: "stroke-dashoffset",
+        from: pathLength,
+        to: "0",
+        dur: `${animationDuration}s`,
+        repeatCount: "indefinite",
+        begin: "0s"
       })
-    });
-  }
-  return jsx(Box, {
-    ...boxProps,
-    children: children
+    }), jsx("circle", {
+      r: strokeWidth,
+      fill: color,
+      children: jsx("animateMotion", {
+        path: rectPath,
+        dur: `${animationDuration}s`,
+        repeatCount: "indefinite",
+        rotate: "auto",
+        begin: `${circleOffset}s`
+      })
+    })]
   });
 };
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_icon {
-    display: inline-block;
-    box-sizing: border-box;
-    max-width: 100%;
-    max-height: 100%;
-
-    &[data-flow-inline] {
-      width: 1em;
-      height: 1em;
-    }
-    &[data-icon-char] {
-      flex-grow: 0 !important;
-      line-height: normal;
-    }
-  }
-
-  .navi_icon[data-interactive] {
-    cursor: pointer;
-  }
-
-  .navi_icon_char_slot {
-    opacity: 0;
-    cursor: default;
-    user-select: none;
-  }
-  .navi_icon_foreground {
+  .navi_loading_rectangle_wrapper {
     position: absolute;
-    inset: 0;
-  }
-  .navi_icon_foreground > .navi_text {
-    display: flex;
-    aspect-ratio: 1 / 1;
-    min-width: 0;
-    height: 100%;
-    max-height: 1em;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .navi_icon > svg,
-  .navi_icon > img {
-    width: 100%;
-    height: 100%;
-    backface-visibility: hidden;
-  }
-  .navi_icon[data-has-width] > svg,
-  .navi_icon[data-has-width] > img {
-    width: 100%;
-    height: auto;
-  }
-  .navi_icon[data-has-height] > svg,
-  .navi_icon[data-has-height] > img {
-    width: auto;
-    height: 100%;
-  }
-  .navi_icon[data-has-width][data-has-height] > svg,
-  .navi_icon[data-has-width][data-has-height] > img {
-    width: 100%;
-    height: 100%;
-  }
-
-  .navi_icon[data-icon-char] svg,
-  .navi_icon[data-icon-char] img {
-    width: 100%;
-    height: 100%;
+    top: var(--rectangle-top, 0);
+    right: var(--rectangle-right, 0);
+    bottom: var(--rectangle-bottom, 0);
+    left: var(--rectangle-left, 0);
+    z-index: 1;
+    opacity: 0;
+    pointer-events: none;
   }
-  .navi_icon[data-icon-char] svg {
-    overflow: visible;
+  .navi_loading_rectangle_wrapper[data-visible] {
+    opacity: 1;
   }
 `;
-const Icon = ({
-  href,
-  children,
-  charWidth = 1,
-  // 0 (zéro) is the real char width
-  // but 2 zéros gives too big icons
-  // while 1 "W" gives a nice result
-  baseChar = "W",
-  decorative,
-  onClick,
-  ...props
+const LoaderBackground = ({
+  loading,
+  containerRef,
+  targetSelector,
+  color,
+  inset = 0,
+  spacingTop = 0,
+  spacingLeft = 0,
+  spacingBottom = 0,
+  spacingRight = 0,
+  children
 }) => {
-  const innerChildren = href ? jsx("svg", {
-    width: "100%",
-    height: "100%",
-    children: jsx("use", {
-      href: href
-    })
-  }) : children;
-  let {
-    box,
-    width,
-    height
-  } = props;
-  if (width === "auto") width = undefined;
-  if (height === "auto") height = undefined;
-  const hasExplicitWidth = width !== undefined;
-  const hasExplicitHeight = height !== undefined;
-  if (!hasExplicitWidth && !hasExplicitHeight) {
-    if (decorative === undefined && !onClick) {
-      decorative = true;
+  if (containerRef) {
+    const container = containerRef.current;
+    if (!container) {
+      return children;
     }
-  } else {
-    box = true;
-  }
-  const ariaProps = decorative ? {
-    "aria-hidden": "true"
-  } : {};
-  if (typeof children === "string") {
-    return jsx(Text, {
-      ...props,
-      ...ariaProps,
-      "data-icon-text": "",
+    return createPortal(jsx(LoaderBackgroundWithPortal, {
+      container: container,
+      loading: loading,
+      color: color,
+      inset: inset,
+      spacingTop: spacingTop,
+      spacingLeft: spacingLeft,
+      spacingBottom: spacingBottom,
+      spacingRight: spacingRight,
       children: children
-    });
+    }), container);
   }
-  if (box) {
-    return jsx(Box, {
-      square: true,
-      ...props,
-      ...ariaProps,
-      box: box,
-      baseClassName: "navi_icon",
-      "data-has-width": hasExplicitWidth ? "" : undefined,
-      "data-has-height": hasExplicitHeight ? "" : undefined,
-      "data-interactive": onClick ? "" : undefined,
-      onClick: onClick,
-      children: innerChildren
-    });
+  return jsx(LoaderBackgroundBasic, {
+    targetSelector: targetSelector,
+    loading: loading,
+    color: color,
+    inset: inset,
+    spacingTop: spacingTop,
+    spacingLeft: spacingLeft,
+    spacingBottom: spacingBottom,
+    spacingRight: spacingRight,
+    children: children
+  });
+};
+const LoaderBackgroundWithPortal = ({
+  container,
+  loading,
+  color,
+  inset,
+  spacingTop,
+  spacingLeft,
+  spacingBottom,
+  spacingRight,
+  children
+}) => {
+  const shouldShowSpinner = useDebounceTrue(loading, 300);
+  if (!shouldShowSpinner) {
+    return children;
+  }
+  container.style.position = "relative";
+  let paddingTop = 0;
+  if (container.nodeName === "DETAILS") {
+    paddingTop = container.querySelector("summary").offsetHeight;
+  }
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      style: {
+        position: "absolute",
+        top: `${inset + paddingTop + spacingTop}px`,
+        bottom: `${inset + spacingBottom}px`,
+        left: `${inset + spacingLeft}px`,
+        right: `${inset + spacingRight}px`
+      },
+      children: shouldShowSpinner && jsx(RectangleLoading, {
+        color: color
+      })
+    }), children]
+  });
+};
+const LoaderBackgroundBasic = ({
+  loading,
+  targetSelector,
+  color,
+  spacingTop,
+  spacingLeft,
+  spacingBottom,
+  spacingRight,
+  inset,
+  children
+}) => {
+  const shouldShowSpinner = useDebounceTrue(loading, 300);
+  const rectangleRef = useRef(null);
+  const [, setOutlineOffset] = useState(0);
+  const [borderRadius, setBorderRadius] = useState(0);
+  const [borderTopWidth, setBorderTopWidth] = useState(0);
+  const [borderLeftWidth, setBorderLeftWidth] = useState(0);
+  const [borderRightWidth, setBorderRightWidth] = useState(0);
+  const [borderBottomWidth, setBorderBottomWidth] = useState(0);
+  const [marginTop, setMarginTop] = useState(0);
+  const [marginBottom, setMarginBottom] = useState(0);
+  const [marginLeft, setMarginLeft] = useState(0);
+  const [marginRight, setMarginRight] = useState(0);
+  const [paddingTop, setPaddingTop] = useState(0);
+  const [paddingLeft, setPaddingLeft] = useState(0);
+  const [paddingRight, setPaddingRight] = useState(0);
+  const [paddingBottom, setPaddingBottom] = useState(0);
+  const [currentColor, setCurrentColor] = useState(color);
+  useLayoutEffect(() => {
+    let animationFrame;
+    const updateStyles = () => {
+      const rectangle = rectangleRef.current;
+      if (!rectangle) {
+        return;
+      }
+      const container = rectangle.parentElement;
+      const containedElement = rectangle.nextElementSibling;
+      const target = targetSelector ? container.querySelector(targetSelector) : containedElement;
+      if (target) {
+        const {
+          width,
+          height
+        } = target.getBoundingClientRect();
+        const containedComputedStyle = window.getComputedStyle(containedElement);
+        const targetComputedStyle = window.getComputedStyle(target);
+        const newBorderTopWidth = resolveCSSSize(targetComputedStyle.borderTopWidth);
+        const newBorderLeftWidth = resolveCSSSize(targetComputedStyle.borderLeftWidth);
+        const newBorderRightWidth = resolveCSSSize(targetComputedStyle.borderRightWidth);
+        const newBorderBottomWidth = resolveCSSSize(targetComputedStyle.borderBottomWidth);
+        const newBorderRadius = resolveCSSSize(targetComputedStyle.borderRadius, {
+          availableSize: Math.min(width, height)
+        });
+        const newOutlineColor = targetComputedStyle.outlineColor;
+        const newBorderColor = targetComputedStyle.borderColor;
+        const newDetectedColor = targetComputedStyle.color;
+        const newOutlineOffset = resolveCSSSize(targetComputedStyle.outlineOffset);
+        const newMarginTop = resolveCSSSize(targetComputedStyle.marginTop);
+        const newMarginBottom = resolveCSSSize(targetComputedStyle.marginBottom);
+        const newMarginLeft = resolveCSSSize(targetComputedStyle.marginLeft);
+        const newMarginRight = resolveCSSSize(targetComputedStyle.marginRight);
+        const paddingTop = resolveCSSSize(containedComputedStyle.paddingTop);
+        const paddingLeft = resolveCSSSize(containedComputedStyle.paddingLeft);
+        const paddingRight = resolveCSSSize(containedComputedStyle.paddingRight);
+        const paddingBottom = resolveCSSSize(containedComputedStyle.paddingBottom);
+        setBorderTopWidth(newBorderTopWidth);
+        setBorderLeftWidth(newBorderLeftWidth);
+        setBorderRightWidth(newBorderRightWidth);
+        setBorderBottomWidth(newBorderBottomWidth);
+        setBorderRadius(newBorderRadius);
+        setOutlineOffset(newOutlineOffset);
+        setMarginTop(newMarginTop);
+        setMarginBottom(newMarginBottom);
+        setMarginLeft(newMarginLeft);
+        setMarginRight(newMarginRight);
+        setPaddingTop(paddingTop);
+        setPaddingLeft(paddingLeft);
+        setPaddingRight(paddingRight);
+        setPaddingBottom(paddingBottom);
+        if (color) {
+          // const resolvedColor = resolveCSSColor(color, rectangle, "css");
+          //  console.log(resolvedColor);
+          setCurrentColor(color);
+        } else if (newOutlineColor && newOutlineColor !== "rgba(0, 0, 0, 0)" && (document.activeElement === containedElement || newBorderColor === "rgba(0, 0, 0, 0)")) {
+          setCurrentColor(newOutlineColor);
+        } else if (newBorderColor && newBorderColor !== "rgba(0, 0, 0, 0)") {
+          setCurrentColor(newBorderColor);
+        } else {
+          setCurrentColor(newDetectedColor);
+        }
+      }
+      // updateStyles is very cheap so we run it every frame
+      animationFrame = requestAnimationFrame(updateStyles);
+    };
+    updateStyles();
+    return () => {
+      cancelAnimationFrame(animationFrame);
+    };
+  }, [color, targetSelector]);
+  spacingTop += inset;
+  // spacingTop += outlineOffset;
+  // spacingTop -= borderTopWidth;
+  spacingTop += marginTop;
+  spacingLeft += inset;
+  // spacingLeft += outlineOffset;
+  // spacingLeft -= borderLeftWidth;
+  spacingLeft += marginLeft;
+  spacingRight += inset;
+  // spacingRight += outlineOffset;
+  // spacingRight -= borderRightWidth;
+  spacingRight += marginRight;
+  spacingBottom += inset;
+  // spacingBottom += outlineOffset;
+  // spacingBottom -= borderBottomWidth;
+  spacingBottom += marginBottom;
+  if (targetSelector) {
+    // oversimplification that actually works
+    // (simplified because it assumes the targeted element is a direct child of the contained element which may have padding)
+    spacingTop += paddingTop;
+    spacingLeft += paddingLeft;
+    spacingRight += paddingRight;
+    spacingBottom += paddingBottom;
   }
-  const invisibleText = baseChar.repeat(charWidth);
-  return jsxs(Text, {
-    ...props,
-    ...ariaProps,
-    className: withPropsClassName("navi_icon", props.className),
-    spacing: "pre",
-    "data-icon-char": "",
-    "data-has-width": hasExplicitWidth ? "" : undefined,
-    "data-has-height": hasExplicitHeight ? "" : undefined,
-    "data-interactive": onClick ? "" : undefined,
-    onClick: onClick,
+  const maxBorderWidth = Math.max(borderTopWidth, borderLeftWidth, borderRightWidth, borderBottomWidth);
+  const halfMaxBorderSize = maxBorderWidth / 2;
+  const size = halfMaxBorderSize < 2 ? 2 : halfMaxBorderSize;
+  const lineHalfSize = size / 2;
+  spacingTop -= lineHalfSize;
+  spacingLeft -= lineHalfSize;
+  spacingRight -= lineHalfSize;
+  spacingBottom -= lineHalfSize;
+  return jsxs(Fragment, {
     children: [jsx("span", {
-      className: "navi_icon_char_slot",
-      "aria-hidden": "true",
-      children: invisibleText
-    }), jsx(Text, {
-      className: "navi_icon_foreground",
-      spacing: "pre",
-      children: innerChildren
-    })]
-  });
-};
-
-const LinkBlankTargetSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: jsx("path", {
-      d: "M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11",
-      stroke: "currentColor",
-      fill: "none",
-      "stroke-width": "2",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
-    })
-  });
-};
-const LinkAnchorSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: jsxs("g", {
-      children: [jsx("path", {
-        d: "M13.2218 3.32234C15.3697 1.17445 18.8521 1.17445 21 3.32234C23.1479 5.47022 23.1479 8.95263 21 11.1005L17.4645 14.636C15.3166 16.7839 11.8342 16.7839 9.6863 14.636C9.48752 14.4373 9.30713 14.2271 9.14514 14.0075C8.90318 13.6796 8.97098 13.2301 9.25914 12.9419C9.73221 12.4688 10.5662 12.6561 11.0245 13.1435C11.0494 13.1699 11.0747 13.196 11.1005 13.2218C12.4673 14.5887 14.6834 14.5887 16.0503 13.2218L19.5858 9.6863C20.9526 8.31947 20.9526 6.10339 19.5858 4.73655C18.219 3.36972 16.0029 3.36972 14.636 4.73655L13.5754 5.79721C13.1849 6.18774 12.5517 6.18774 12.1612 5.79721C11.7706 5.40669 11.7706 4.77352 12.1612 4.383L13.2218 3.32234Z",
-        fill: "currentColor"
-      }), jsx("path", {
-        d: "M6.85787 9.6863C8.90184 7.64233 12.2261 7.60094 14.3494 9.42268C14.7319 9.75083 14.7008 10.3287 14.3444 10.685C13.9253 11.1041 13.2317 11.0404 12.7416 10.707C11.398 9.79292 9.48593 9.88667 8.27209 11.1005L4.73655 14.636C3.36972 16.0029 3.36972 18.219 4.73655 19.5858C6.10339 20.9526 8.31947 20.9526 9.6863 19.5858L10.747 18.5251C11.1375 18.1346 11.7706 18.1346 12.1612 18.5251C12.5517 18.9157 12.5517 19.5488 12.1612 19.9394L11.1005 21C8.95263 23.1479 5.47022 23.1479 3.32234 21C1.17445 18.8521 1.17445 15.3697 3.32234 13.2218L6.85787 9.6863Z",
-        fill: "currentColor"
-      })]
-    })
+      ref: rectangleRef,
+      className: "navi_loading_rectangle_wrapper",
+      "data-visible": shouldShowSpinner ? "" : undefined,
+      style: {
+        "--rectangle-top": `${spacingTop}px`,
+        "--rectangle-left": `${spacingLeft}px`,
+        "--rectangle-bottom": `${spacingBottom}px`,
+        "--rectangle-right": `${spacingRight}px`
+      },
+      children: loading && jsx(RectangleLoading, {
+        shouldShowSpinner: shouldShowSpinner,
+        color: currentColor,
+        radius: borderRadius,
+        size: size
+      })
+    }), children]
   });
 };
 
@@ -20069,16 +20101,6 @@ const LinkPlain = props => {
     })]
   });
 };
-const PhoneSvg = () => {
-  return jsx("svg", {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: jsx("path", {
-      d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z",
-      fill: "currentColor"
-    })
-  });
-};
 const SmsSvg = () => {
   return jsx("svg", {
     viewBox: "0 0 24 24",
@@ -20089,25 +20111,6 @@ const SmsSvg = () => {
     })
   });
 };
-const EmailSvg = () => {
-  return jsxs("svg", {
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [jsx("path", {
-      d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z",
-      fill: "none",
-      stroke: "currentColor",
-      "stroke-width": "2"
-    }), jsx("path", {
-      d: "m2 6 8 5 2 1.5 2-1.5 8-5",
-      fill: "none",
-      stroke: "currentColor",
-      "stroke-width": "2",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
-    })]
-  });
-};
 const GithubSvg = () => {
   return jsx("svg", {
     viewBox: "0 0 24 24",
@@ -22825,6 +22828,10 @@ const InputTextualBasic = props => {
   if (icon === undefined) {
     if (type === "search") {
       innerIcon = jsx(SearchSvg, {});
+    } else if (type === "email") {
+      innerIcon = jsx(EmailSvg, {});
+    } else if (type === "tel") {
+      innerIcon = jsx(PhoneSvg, {});
     }
   } else {
     innerIcon = icon;
@@ -27389,6 +27396,69 @@ const Address = ({
   });
 };
 
+const LoadingDots = ({
+  color = "FF156D"
+}) => {
+  return jsxs("svg", {
+    viewBox: "0 0 200 200",
+    width: "100%",
+    height: "100%",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsx("rect", {
+      fill: color,
+      stroke: color,
+      "stroke-width": "15",
+      width: "30",
+      height: "30",
+      x: "25",
+      y: "85",
+      children: jsx("animate", {
+        attributeName: "opacity",
+        calcMode: "spline",
+        dur: "2",
+        values: "1;0;1;",
+        keySplines: ".5 0 .5 1;.5 0 .5 1",
+        repeatCount: "indefinite",
+        begin: "-.4"
+      })
+    }), jsx("rect", {
+      fill: color,
+      stroke: color,
+      "stroke-width": "15",
+      width: "30",
+      height: "30",
+      x: "85",
+      y: "85",
+      children: jsx("animate", {
+        attributeName: "opacity",
+        calcMode: "spline",
+        dur: "2",
+        values: "1;0;1;",
+        keySplines: ".5 0 .5 1;.5 0 .5 1",
+        repeatCount: "indefinite",
+        begin: "-.2"
+      })
+    }), jsx("rect", {
+      fill: color,
+      stroke: color,
+      "stroke-width": "15",
+      width: "30",
+      height: "30",
+      x: "145",
+      y: "85",
+      children: jsx("animate", {
+        attributeName: "opacity",
+        calcMode: "spline",
+        dur: "2",
+        values: "1;0;1;",
+        keySplines: ".5 0 .5 1;.5 0 .5 1",
+        repeatCount: "indefinite",
+        begin: "0"
+      })
+    })]
+  });
+};
+
 const CSS_VAR_NAME = "--x-color-contrasting";
 
 const useContrastingColor = (ref, backgroundElementSelector) => {
@@ -27425,63 +27495,73 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
   }
   .navi_badge_count {
-    --x-size: 1.5em;
-    --x-border-radius: var(--border-radius);
-    --x-number-font-size: var(--font-size);
+    --x-background: var(--background);
+    --x-background-color: var(--background-color);
     position: relative;
     display: inline-block;
-
     color: var(--color, var(--x-color-contrasting));
     font-size: var(--font-size);
     vertical-align: middle;
-    border-radius: var(--x-border-radius);
-  }
-  .navi_count_badge_overflow {
-    position: relative;
-    top: -0.1em;
-  }
-  /* Ellipse */
-  .navi_badge_count[data-ellipse] {
-    padding-right: 0.4em;
-    padding-left: 0.4em;
-    background: var(--background);
-    background-color: var(--background-color, var(--background));
-    border-radius: 1em;
-  }
-  /* Circle */
-  .navi_badge_count[data-circle] {
-    width: var(--x-size);
-    height: var(--x-size);
-  }
-  .navi_badge_count_frame {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--background);
-    background-color: var(--background-color, var(--background));
-    border-radius: inherit;
-    transform: translateY(-50%);
-  }
-  .navi_badge_count_text {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    font-size: var(--x-number-font-size, inherit);
-    transform: translate(-50%, -50%);
-  }
-  .navi_badge_count[data-single-char] {
-    --x-border-radius: 100%;
-    --x-number-font-size: unset;
-  }
-  .navi_badge_count[data-two-chars] {
-    --x-border-radius: 100%;
-    --x-number-font-size: 0.8em;
-  }
-  .navi_badge_count[data-three-chars] {
-    --x-border-radius: 100%;
-    --x-number-font-size: 0.6em;
+
+    .navi_count_badge_overflow {
+      position: relative;
+      top: -0.1em;
+    }
+
+    /* Ellipse */
+    &[data-ellipse] {
+      padding-right: 0.4em;
+      padding-left: 0.4em;
+      background: var(--x-background);
+      background-color: var(--x-background-color, var(--x-background));
+      border-radius: 1em;
+      &[data-loading] {
+        --x-background: transparent;
+      }
+    }
+
+    /* Circle */
+    &[data-circle] {
+      --x-size: 1.5em;
+      --x-border-radius: var(--border-radius);
+      --x-number-font-size: var(--font-size);
+
+      width: var(--x-size);
+      height: var(--x-size);
+      border-radius: var(--x-border-radius);
+      &[data-single-char] {
+        --x-border-radius: 100%;
+        --x-number-font-size: unset;
+      }
+      &[data-two-chars] {
+        --x-border-radius: 100%;
+        --x-number-font-size: 0.8em;
+      }
+      &[data-three-chars] {
+        --x-border-radius: 100%;
+        --x-number-font-size: 0.6em;
+      }
+
+      .navi_badge_count_frame {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--x-background);
+        background-color: var(--x-background-color, var(--x-background));
+        border-radius: inherit;
+        transform: translateY(-50%);
+      }
+
+      .navi_badge_count_text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        font-size: var(--x-number-font-size, inherit);
+        transform: translate(-50%, -50%);
+      }
+    }
   }
 `;
 const BadgeStyleCSSVars = {
@@ -27502,11 +27582,11 @@ const BadgeCountOverflow = () => jsx("span", {
 const MAX_CHAR_AS_CIRCLE = 3;
 const BadgeCount = ({
   children,
-  max = 99,
   maxElement = jsx(BadgeCountOverflow, {}),
   // When you use max="none" (or max > 99) it might be a good idea to force ellipse
   // so that visually the interface do not suddently switch from circle to ellipse depending on the count
   ellipse,
+  max = ellipse ? Infinity : 99,
   ...props
 }) => {
   const defaultRef = useRef();
@@ -27556,10 +27636,11 @@ const BadgeCountCircle = ({
   ref,
   charCount,
   hasOverflow,
+  loading,
   children,
   ...props
 }) => {
-  return jsxs(Text, {
+  return jsx(Text, {
     ref: ref,
     className: "navi_badge_count",
     "data-circle": "",
@@ -27571,42 +27652,50 @@ const BadgeCountCircle = ({
     ...props,
     styleCSSVars: BadgeStyleCSSVars,
     spacing: "pre",
-    children: [jsx("span", {
-      style: "user-select: none",
-      children: "\u200B"
-    }), jsx("span", {
-      className: "navi_badge_count_frame"
-    }), jsx("span", {
-      className: "navi_badge_count_text",
-      children: children
-    }), jsx("span", {
-      style: "user-select: none",
-      children: "\u200B"
-    })]
+    children: loading ? jsx(LoadingDots, {}) : jsxs(Fragment, {
+      children: [jsx("span", {
+        style: "user-select: none",
+        children: "\u200B"
+      }), jsx("span", {
+        className: "navi_badge_count_frame"
+      }), jsx("span", {
+        className: "navi_badge_count_text",
+        children: children
+      }), jsx("span", {
+        style: "user-select: none",
+        children: "\u200B"
+      })]
+    })
   });
 };
 const BadgeCountEllipse = ({
   ref,
+  loading,
   children,
   hasOverflow,
   ...props
 }) => {
-  return jsxs(Text, {
+  return jsx(Text, {
     ref: ref,
     className: "navi_badge_count",
     bold: true,
     "data-ellipse": "",
     "data-value-overflow": hasOverflow ? "" : undefined,
+    "data-loading": loading ? "" : undefined,
     ...props,
     styleCSSVars: BadgeStyleCSSVars,
     spacing: "pre",
-    children: [jsx("span", {
-      style: "user-select: none",
-      children: "\u200B"
-    }), children, jsx("span", {
-      style: "user-select: none",
-      children: "\u200B"
-    })]
+    children: loading ? jsx(Icon, {
+      children: jsx(LoadingDots, {})
+    }) : jsxs(Fragment, {
+      children: [jsx("span", {
+        style: "user-select: none",
+        children: "\u200B"
+      }), children, jsx("span", {
+        style: "user-select: none",
+        children: "\u200B"
+      })]
+    })
   });
 };