@jsenv/navi 0.12.7 → 0.12.9

package/dist/jsenv_navi.js

@@ -1,10 +1,10 @@
 import { installImportMetaCss } from "./jsenv_navi_side_effects.js";
-import { createIterableWeakSet, createPubSub, createValueEffect, createStyleController, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, allowWheelThrough, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, activeElementSignal, canInterceptKeys, initUITransition, getElementSignature, normalizeStyle, mergeTwoStyles, appendStyles, normalizeStyles, resolveCSSSize, findBefore, findAfter, initFocusGroup, elementIsFocusable, pickLightOrDark, resolveColorLuminance, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
+import { createIterableWeakSet, createPubSub, createValueEffect, createStyleController, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, allowWheelThrough, resolveCSSColor, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, activeElementSignal, canInterceptKeys, createGroupTransitionController, getElementSignature, getBorderRadius, getBackground, preventIntermediateScrollbar, createOpacityTransition, stringifyStyle, mergeOneStyle, mergeTwoStyles, appendStyles, normalizeStyles, resolveCSSSize, findBefore, findAfter, initFocusGroup, elementIsFocusable, pickLightOrDark, resolveColorLuminance, dragAfterThreshold, getScrollContainer, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
 import { prefixFirstAndIndentRemainingLines } from "@jsenv/humanize";
 import { effect, signal, computed, batch, useSignal } from "@preact/signals";
 import { useEffect, useRef, useCallback, useContext, useState, useLayoutEffect, useMemo, useErrorBoundary, useImperativeHandle, useId } from "preact/hooks";
 import { createContext, toChildArray, createRef, cloneElement } from "preact";
-import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
 import { createPortal, forwardRef } from "preact/compat";
 
 const actionPrivatePropertiesWeakMap = new WeakMap();
@@ -2089,10 +2089,11 @@ const openCallout = (
     });
 
     addLevelEffect(() => {
-      anchorElement.style.setProperty(
-        "--callout-color",
-        `var(--navi-${level}-color)`,
+      const levelColor = resolveCSSColor(
+        `var(--${level}-color)`,
+        calloutElement,
       );
+      anchorElement.style.setProperty("--callout-color", levelColor);
       return () => {
         anchorElement.style.removeProperty("--callout-color");
       };
@@ -2200,7 +2201,13 @@ const ARROW_SPACING = 8;
 import.meta.css = /* css */ `
   @layer navi {
     .navi_callout {
+      --success-color: #4caf50;
+      --info-color: #2196f3;
+      --warning-color: #ff9800;
+      --error-color: #f44336;
+
       --background-color: white;
+      --icon-color: black;
       --padding: 8px;
     }
   }
@@ -2218,8 +2225,8 @@ import.meta.css = /* css */ `
     overflow: visible;
 
     --x-border-color: var(--x-level-color);
+    --x-background-color: var(--x-level-color);
     --x-icon-color: var(--x-level-color);
-    --x-background-color: var(--background-color);
   }
 
   .navi_callout_frame {
@@ -2230,16 +2237,6 @@ import.meta.css = /* css */ `
   .navi_callout .navi_callout_border {
     fill: var(--x-border-color);
   }
-  .navi_callout[data-level="info"] {
-    --x-level-color: var(--navi-info-color);
-  }
-  .navi_callout[data-level="warning"] {
-    --x-level-color: var(--navi-warning-color);
-  }
-  .navi_callout[data-level="error"] {
-    --x-level-color: var(--navi-error-color);
-  }
-
   .navi_callout_frame svg {
     position: absolute;
     inset: 0;
@@ -2248,7 +2245,6 @@ import.meta.css = /* css */ `
   .navi_callout_background {
     fill: var(--x-background-color);
   }
-
   .navi_callout_box {
     position: relative;
     border-style: solid;
@@ -2316,6 +2312,19 @@ import.meta.css = /* css */ `
     max-height: 200px;
     overflow: auto;
   }
+
+  .navi_callout[data-level="success"] {
+    --x-level-color: var(--success-color);
+  }
+  .navi_callout[data-level="info"] {
+    --x-level-color: var(--info-color);
+  }
+  .navi_callout[data-level="warning"] {
+    --x-level-color: var(--warning-color);
+  }
+  .navi_callout[data-level="error"] {
+    --x-level-color: var(--error-color);
+  }
 `;
 
 // HTML template for the callout
@@ -5203,11 +5212,11 @@ const useExternalValueSync = (
   }
 };
 
-const UNSET = {};
+const UNSET$1 = {};
 const useInitialValue = (compute) => {
-  const initialValueRef = useRef(UNSET);
+  const initialValueRef = useRef(UNSET$1);
   let initialValue = initialValueRef.current;
-  if (initialValue !== UNSET) {
+  if (initialValue !== UNSET$1) {
     return initialValue;
   }
 
@@ -8576,6 +8585,909 @@ const useUrlSearchParam = (paramName) => {
   return [value, setSearchParamValue];
 };
 
+/**
+ * Fix alignment behavior for flex/grid containers that use `height: 100%`.
+ *
+ * Context:
+ * - When a flex/grid container has `height: 100%`, it is "height-locked".
+ * - If its content becomes taller than the container, alignment rules like
+ *   `align-items: center` will cause content to be partially clipped.
+ *
+ * Goal:
+ * - Center content only when it fits.
+ * - Align content at start when it overflows.
+ *
+ * How:
+ * - Temporarily remove height-constraint (`height:auto`) to measure natural height.
+ * - Compare natural height to container height.
+ * - Add/remove an attribute so CSS can adapt alignment.
+ *
+ * Usage:
+ *   monitorItemsOverflow(containerElement);
+ *
+ * CSS example:
+ *   .container { align-items: center; }
+ *   .container[data-items-height-overflow] { align-items: flex-start; }
+ */
+
+
+const WIDTH_ATTRIBUTE_NAME = "data-items-width-overflow";
+const HEIGHT_ATTRIBUTE_NAME = "data-items-height-overflow";
+const monitorItemsOverflow = (container) => {
+  let widthIsOverflowing;
+  let heightIsOverflowing;
+  const onItemsWidthOverflowChange = () => {
+    if (widthIsOverflowing) {
+      container.setAttribute(WIDTH_ATTRIBUTE_NAME, "");
+    } else {
+      container.removeAttribute(WIDTH_ATTRIBUTE_NAME);
+    }
+  };
+  const onItemsHeightOverflowChange = () => {
+    if (heightIsOverflowing) {
+      container.setAttribute(HEIGHT_ATTRIBUTE_NAME, "");
+    } else {
+      container.removeAttribute(HEIGHT_ATTRIBUTE_NAME);
+    }
+  };
+
+  const update = () => {
+    // Save current manual height constraint
+    const prevWidth = container.style.width;
+    const prevHeight = container.style.height;
+    // Remove constraint → get true content dimension
+    container.style.width = "auto";
+    container.style.height = "auto";
+    const naturalWidth = container.scrollWidth;
+    const naturalHeight = container.scrollHeight;
+    if (prevWidth) {
+      container.style.width = prevWidth;
+    } else {
+      container.style.removeProperty("width");
+    }
+    if (prevHeight) {
+      container.style.height = prevHeight;
+    } else {
+      container.style.removeProperty("height");
+    }
+
+    const lockedWidth = container.clientWidth;
+    const lockedHeight = container.clientHeight;
+    const currentWidthIsOverflowing = naturalWidth > lockedWidth;
+    const currentHeightIsOverflowing = naturalHeight > lockedHeight;
+    if (currentWidthIsOverflowing !== widthIsOverflowing) {
+      widthIsOverflowing = currentWidthIsOverflowing;
+      onItemsWidthOverflowChange();
+    }
+    if (currentHeightIsOverflowing !== heightIsOverflowing) {
+      heightIsOverflowing = currentHeightIsOverflowing;
+      onItemsHeightOverflowChange();
+    }
+  };
+
+  const [teardown, addTeardown] = createPubSub();
+
+  update();
+
+  // mutation observer
+  const mutationObserver = new MutationObserver(() => {
+    update();
+  });
+  mutationObserver.observe(container, {
+    childList: true,
+    characterData: true,
+  });
+  addTeardown(() => {
+    mutationObserver.disconnect();
+  });
+
+  // resize observer
+  const resizeObserver = new ResizeObserver(update);
+  resizeObserver.observe(container);
+  addTeardown(() => {
+    resizeObserver.disconnect();
+  });
+
+  const destroy = () => {
+    teardown();
+    container.removeAttribute(WIDTH_ATTRIBUTE_NAME);
+    container.removeAttribute(HEIGHT_ATTRIBUTE_NAME);
+  };
+  return destroy;
+};
+
+installImportMetaCss(import.meta);
+import.meta.css = /* css */ `
+  * {
+    box-sizing: border-box;
+  }
+
+  .ui_transition {
+    --transition-duration: 300ms;
+    --justify-content: center;
+    --align-items: center;
+
+    --x-transition-duration: var(--transition-duration);
+    --x-justify-content: var(--justify-content);
+    --x-align-items: var(--align-items);
+
+    position: relative;
+  }
+  /* Alignment controls */
+  .ui_transition[data-align-x="start"] {
+    --x-justify-content: flex-start;
+  }
+  .ui_transition[data-align-x="center"] {
+    --x-justify-content: center;
+  }
+  .ui_transition[data-align-x="end"] {
+    --x-justify-content: flex-end;
+  }
+  .ui_transition[data-align-y="start"] {
+    --x-align-items: flex-start;
+  }
+  .ui_transition[data-align-y="center"] {
+    --x-align-items: center;
+  }
+  .ui_transition[data-align-y="end"] {
+    --x-align-items: flex-end;
+  }
+
+  .ui_transition,
+  .active_group,
+  .previous_group,
+  .target_slot,
+  .previous_target_slot,
+  .outgoing_slot,
+  .previous_outgoing_slot {
+    width: 100%;
+    height: 100%;
+  }
+
+  .target_slot,
+  .outgoing_slot,
+  .previous_target_slot,
+  .previous_outgoing_slot {
+    display: flex;
+    align-items: var(--x-align-items);
+    justify-content: var(--x-justify-content);
+  }
+  .target_slot[data-items-width-overflow],
+  .previous_target_slot[data-items-width-overflow],
+  .previous_target_slot[data-items-width-overflow],
+  .previous_outgoing_slot[data-items-width-overflow] {
+    --x-justify-content: flex-start;
+  }
+  .target_slot[data-items-height-overflow],
+  .previous_slot[data-items-height-overflow],
+  .previous_target_slot[data-items-height-overflow],
+  .previous_outgoing_slot[data-items-height-overflow] {
+    --x-align-items: flex-start;
+  }
+
+  .active_group {
+    position: relative;
+  }
+  .target_slot {
+    position: relative;
+  }
+  .outgoing_slot,
+  .previous_outgoing_slot {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .previous_group {
+    position: absolute;
+    inset: 0;
+  }
+  .ui_transition[data-only-previous-group] .previous_group {
+    position: relative;
+  }
+
+  .target_slot_background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    display: none;
+    width: var(--target-slot-width, 100%);
+    height: var(--target-slot-height, 100%);
+    background: var(--target-slot-background, transparent);
+    pointer-events: none;
+  }
+  .ui_transition[data-transitioning] .target_slot_background {
+    display: block;
+  }
+`;
+
+const CONTENT_ID_ATTRIBUTE = "data-content-id";
+const CONTENT_PHASE_ATTRIBUTE = "data-content-phase";
+const UNSET = {
+  domNodes: [],
+  domNodesClone: [],
+  isEmpty: true,
+
+  type: "unset",
+  contentId: "unset",
+  contentPhase: undefined,
+  isContentPhase: false,
+  isContent: false,
+  toString: () => "unset",
+};
+
+const isSameConfiguration = (configA, configB) => {
+  return configA.toString() === configB.toString();
+};
+
+const createUITransitionController = (
+  root,
+  {
+    duration = 300,
+    alignX = "center",
+    alignY = "center",
+    onStateChange = () => {},
+    pauseBreakpoints = [],
+  } = {},
+) => {
+  const debugConfig = {
+    detection: root.hasAttribute("data-debug-detection"),
+    size: root.hasAttribute("data-debug-size"),
+  };
+  const hasDebugLogs = debugConfig.size;
+  const debugDetection = (message) => {
+    if (!debugConfig.detection) return;
+    console.debug(`[detection]`, message);
+  };
+  const debugSize = (message) => {
+    if (!debugConfig.size) return;
+    console.debug(`[size]`, message);
+  };
+
+  const activeGroup = root.querySelector(".active_group");
+  const targetSlot = root.querySelector(".target_slot");
+  const outgoingSlot = root.querySelector(".outgoing_slot");
+  const previousGroup = root.querySelector(".previous_group");
+  const previousTargetSlot = previousGroup?.querySelector(
+    ".previous_target_slot",
+  );
+  const previousOutgoingSlot = previousGroup?.querySelector(
+    ".previous_outgoing_slot",
+  );
+
+  if (
+    !root ||
+    !activeGroup ||
+    !targetSlot ||
+    !outgoingSlot ||
+    !previousGroup ||
+    !previousTargetSlot ||
+    !previousOutgoingSlot
+  ) {
+    throw new Error(
+      "createUITransitionController requires element with .active_group, .target_slot, .outgoing_slot, .previous_group, .previous_target_slot, and .previous_outgoing_slot elements",
+    );
+  }
+
+  // we maintain a background copy behind target slot to avoid showing
+  // the body flashing during the fade-in
+  const targetSlotBackground = document.createElement("div");
+  targetSlotBackground.className = "target_slot_background";
+  activeGroup.insertBefore(targetSlotBackground, targetSlot);
+
+  root.style.setProperty("--x-transition-duration", `${duration}ms`);
+  outgoingSlot.setAttribute("inert", "");
+  previousGroup.setAttribute("inert", "");
+
+  const detectConfiguration = (slot, { contentId, contentPhase } = {}) => {
+    const domNodes = Array.from(slot.childNodes);
+    if (!domNodes) {
+      return UNSET;
+    }
+
+    const isEmpty = domNodes.length === 0;
+    let textNodeCount = 0;
+    let elementNodeCount = 0;
+    let firstElementNode;
+    const domNodesClone = [];
+    if (isEmpty) {
+      if (contentPhase === undefined) {
+        contentPhase = "empty";
+      }
+    } else {
+      const contentIdSlotAttr = slot.getAttribute(CONTENT_ID_ATTRIBUTE);
+      let contentIdChildAttr;
+      for (const domNode of domNodes) {
+        if (domNode.nodeType === Node.TEXT_NODE) {
+          textNodeCount++;
+        } else {
+          if (!firstElementNode) {
+            firstElementNode = domNode;
+          }
+          elementNodeCount++;
+
+          if (domNode.hasAttribute("data-content-phase")) {
+            const contentPhaseAttr = domNode.getAttribute("data-content-phase");
+            contentPhase = contentPhaseAttr || "attr";
+          }
+          if (domNode.hasAttribute("data-content-key")) {
+            contentIdChildAttr = domNode.getAttribute("data-content-key");
+          }
+        }
+        const domNodeClone = domNode.cloneNode(true);
+        domNodesClone.push(domNodeClone);
+      }
+
+      if (contentIdSlotAttr && contentIdChildAttr) {
+        console.warn(
+          `Slot and slot child both have a [${CONTENT_ID_ATTRIBUTE}]. Slot is ${contentIdSlotAttr} and child is ${contentIdChildAttr}, using the child.`,
+        );
+      }
+      if (contentId === undefined) {
+        contentId = contentIdChildAttr || contentIdSlotAttr || undefined;
+      }
+    }
+    const isOnlyTextNodes = elementNodeCount === 0 && textNodeCount > 1;
+    const singleElementNode = elementNodeCount === 1 ? firstElementNode : null;
+
+    contentId = contentId || getElementSignature(domNodes[0]);
+    if (!contentPhase && isEmpty) {
+      // Imagine code rendering null while switching to a new content
+      // or even while staying on the same content.
+      // In the UI we want to consider this as an "empty" phase.
+      // meaning the ui will keep the same size until something else happens
+      // This prevent layout shifts of code not properly handling
+      // intermediate states.
+      contentPhase = "empty";
+    }
+
+    let width;
+    let height;
+    let borderRadius;
+    let border;
+    let background;
+
+    if (isEmpty) {
+      debugSize(`measureSlot(".${slot.className}") -> it is empty`);
+    } else if (singleElementNode) {
+      const rect = singleElementNode.getBoundingClientRect();
+      width = rect.width;
+      height = rect.height;
+      debugSize(`measureSlot(".${slot.className}") -> [${width}x${height}]`);
+      borderRadius = getBorderRadius(singleElementNode);
+      border = getComputedStyle(singleElementNode).border;
+      background = getBackground(singleElementNode);
+    } else {
+      // text, multiple elements
+      const rect = slot.getBoundingClientRect();
+      width = rect.width;
+      height = rect.height;
+      debugSize(`measureSlot(".${slot.className}") -> [${width}x${height}]`);
+    }
+
+    const commonProperties = {
+      domNodes,
+      domNodesClone,
+      isEmpty,
+      isOnlyTextNodes,
+      singleElementNode,
+
+      width,
+      height,
+      borderRadius,
+      border,
+      background,
+
+      contentId,
+    };
+
+    if (contentPhase) {
+      return {
+        ...commonProperties,
+        type: "content_phase",
+        contentPhase,
+        isContentPhase: true,
+        isContent: false,
+        toString: () => `content(${contentId}).phase(${contentPhase})`,
+      };
+    }
+    return {
+      ...commonProperties,
+      type: "content",
+      contentPhase: undefined,
+      isContentPhase: false,
+      isContent: true,
+      toString: () => `content(${contentId})`,
+    };
+  };
+
+  const targetSlotInitialConfiguration = detectConfiguration(targetSlot);
+  const outgoingSlotInitialConfiguration = detectConfiguration(outgoingSlot, {
+    contentPhase: "true",
+  });
+  let targetSlotConfiguration = targetSlotInitialConfiguration;
+  let outgoingSlotConfiguration = outgoingSlotInitialConfiguration;
+  let previousTargetSlotConfiguration = UNSET;
+
+  const updateSlotAttributes = () => {
+    if (targetSlotConfiguration.isEmpty && outgoingSlotConfiguration.isEmpty) {
+      root.setAttribute("data-only-previous-group", "");
+    } else {
+      root.removeAttribute("data-only-previous-group");
+    }
+  };
+  const updateAlignment = () => {
+    // Set data attributes for CSS-based alignment
+    root.setAttribute("data-align-x", alignX);
+    root.setAttribute("data-align-y", alignY);
+  };
+
+  const moveConfigurationIntoSlot = (configuration, slot) => {
+    slot.innerHTML = "";
+    for (const domNode of configuration.domNodesClone) {
+      slot.appendChild(domNode);
+    }
+    // in case border or stuff like that have changed we re-detect the config
+    const updatedConfig = detectConfiguration(slot);
+    if (slot === targetSlot) {
+      targetSlotConfiguration = updatedConfig;
+    } else if (slot === outgoingSlot) {
+      outgoingSlotConfiguration = updatedConfig;
+    } else if (slot === previousTargetSlot) {
+      previousTargetSlotConfiguration = updatedConfig;
+    } else if (slot === previousOutgoingSlot) ; else {
+      throw new Error("Unknown slot for applyConfiguration");
+    }
+  };
+
+  updateAlignment();
+
+  let transitionType = "none";
+  const groupTransitionOptions = {
+    // debugBreakpoints: [0.25],
+    pauseBreakpoints,
+    lifecycle: {
+      setup: () => {
+        updateSlotAttributes();
+        root.setAttribute("data-transitioning", "");
+        onStateChange({ isTransitioning: true });
+        return {
+          teardown: () => {
+            root.removeAttribute("data-transitioning");
+            updateSlotAttributes(); // Update positioning after transition
+            onStateChange({ isTransitioning: false });
+          },
+        };
+      },
+    },
+  };
+  const transitionController = createGroupTransitionController(
+    groupTransitionOptions,
+  );
+
+  const elementToClip = root;
+  const morphContainerIntoTarget = () => {
+    const morphTransitions = [];
+    {
+      // TODO: ideally when scrollContainer is document AND we transition
+      // from a layout with scrollbar to a layout without
+      // we have clip path detecting we go from a given width/height to a new width/height
+      // that might just be the result of scrollbar appearing/disappearing
+      // we should detect when this happens to avoid clipping what correspond to the scrollbar presence toggling
+      const fromWidth = previousTargetSlotConfiguration.width || 0;
+      const fromHeight = previousTargetSlotConfiguration.height || 0;
+      const toWidth = targetSlotConfiguration.width || 0;
+      const toHeight = targetSlotConfiguration.height || 0;
+      debugSize(
+        `transition from [${fromWidth}x${fromHeight}] to [${toWidth}x${toHeight}]`,
+      );
+      const restoreOverflow = preventIntermediateScrollbar(root, {
+        fromWidth,
+        fromHeight,
+        toWidth,
+        toHeight,
+        onPrevent: ({ x, y, scrollContainer }) => {
+          if (x) {
+            debugSize(
+              `Temporarily hiding horizontal overflow during transition on ${getElementSignature(scrollContainer)}`,
+            );
+          }
+          if (y) {
+            debugSize(
+              `Temporarily hiding vertical overflow during transition on ${getElementSignature(scrollContainer)}`,
+            );
+          }
+        },
+        onRestore: () => {
+          debugSize(`Restored overflow after transition`);
+        },
+      });
+
+      const onSizeTransitionFinished = () => {
+        // Restore overflow when transition is complete
+        restoreOverflow();
+      };
+
+      // https://emilkowal.ski/ui/the-magic-of-clip-path
+      const elementToClipRect = elementToClip.getBoundingClientRect();
+      const elementToClipWidth = elementToClipRect.width;
+      const elementToClipHeight = elementToClipRect.height;
+      // Calculate where content is positioned within the large container
+      const getAlignedPosition = (containerSize, contentSize, align) => {
+        switch (align) {
+          case "start":
+            return 0;
+          case "end":
+            return containerSize - contentSize;
+          case "center":
+          default:
+            return (containerSize - contentSize) / 2;
+        }
+      };
+      // Position of "from" content within large container
+      const fromLeft = getAlignedPosition(
+        elementToClipWidth,
+        fromWidth,
+        alignX,
+      );
+      const fromTop = getAlignedPosition(
+        elementToClipHeight,
+        fromHeight,
+        alignY,
+      );
+      // Position of target content within large container
+      const targetLeft = getAlignedPosition(
+        elementToClipWidth,
+        toWidth,
+        alignX,
+      );
+      const targetTop = getAlignedPosition(
+        elementToClipHeight,
+        toHeight,
+        alignY,
+      );
+      debugSize(
+        `Positions in container: from [${fromLeft},${fromTop}] ${fromWidth}x${fromHeight} to [${targetLeft},${targetTop}] ${toWidth}x${toHeight}`,
+      );
+      // Get border-radius values
+      const fromBorderRadius =
+        previousTargetSlotConfiguration.borderRadius || 0;
+      const toBorderRadius = targetSlotConfiguration.borderRadius || 0;
+      const startInsetTop = fromTop;
+      const startInsetRight = elementToClipWidth - (fromLeft + fromWidth);
+      const startInsetBottom = elementToClipHeight - (fromTop + fromHeight);
+      const startInsetLeft = fromLeft;
+
+      const endInsetTop = targetTop;
+      const endInsetRight = elementToClipWidth - (targetLeft + toWidth);
+      const endInsetBottom = elementToClipHeight - (targetTop + toHeight);
+      const endInsetLeft = targetLeft;
+
+      const startClipPath = `inset(${startInsetTop}px ${startInsetRight}px ${startInsetBottom}px ${startInsetLeft}px round ${fromBorderRadius}px)`;
+      const endClipPath = `inset(${endInsetTop}px ${endInsetRight}px ${endInsetBottom}px ${endInsetLeft}px round ${toBorderRadius}px)`;
+      // Create clip-path animation using Web Animations API
+      const clipAnimation = elementToClip.animate(
+        [{ clipPath: startClipPath }, { clipPath: endClipPath }],
+        {
+          duration,
+          easing: "ease",
+          fill: "forwards",
+        },
+      );
+
+      // Handle finish
+      clipAnimation.finished
+        .then(() => {
+          // Clear clip-path to restore normal behavior
+          elementToClip.style.clipPath = "";
+          clipAnimation.cancel();
+          onSizeTransitionFinished();
+        })
+        .catch(() => {
+          // Animation was cancelled
+        });
+      clipAnimation.play();
+    }
+
+    return morphTransitions;
+  };
+  const fadeInTargetSlot = () => {
+    targetSlotBackground.style.setProperty(
+      "--target-slot-background",
+      stringifyStyle(targetSlotConfiguration.background, "background"),
+    );
+    targetSlotBackground.style.setProperty(
+      "--target-slot-width",
+      `${targetSlotConfiguration.width || 0}px`,
+    );
+    targetSlotBackground.style.setProperty(
+      "--target-slot-height",
+      `${targetSlotConfiguration.height || 0}px`,
+    );
+    return createOpacityTransition(targetSlot, 1, {
+      from: 0,
+      duration,
+      styleSynchronizer: "inline_style",
+      onFinish: (targetSlotOpacityTransition) => {
+        targetSlotOpacityTransition.cancel();
+      },
+    });
+  };
+  const fadeOutPreviousGroup = () => {
+    return createOpacityTransition(previousGroup, 0, {
+      from: 1,
+      duration,
+      styleSynchronizer: "inline_style",
+      onFinish: (previousGroupOpacityTransition) => {
+        previousGroupOpacityTransition.cancel();
+        previousGroup.style.opacity = "0"; // keep previous group visually hidden
+      },
+    });
+  };
+  const fadeOutOutgoingSlot = () => {
+    return createOpacityTransition(outgoingSlot, 0, {
+      duration,
+      from: 1,
+      styleSynchronizer: "inline_style",
+      onFinish: (outgoingSlotOpacityTransition) => {
+        outgoingSlotOpacityTransition.cancel();
+        outgoingSlot.style.opacity = "0"; // keep outgoing slot visually hidden
+      },
+    });
+  };
+
+  // content_to_content transition (uses previous_group)
+  const applyContentToContentTransition = (toConfiguration) => {
+    // 1. move target slot to previous
+    moveConfigurationIntoSlot(targetSlotConfiguration, previousTargetSlot);
+    targetSlotConfiguration = toConfiguration;
+    // 2. move outgoing slot to previous
+    moveConfigurationIntoSlot(outgoingSlotConfiguration, previousOutgoingSlot);
+    moveConfigurationIntoSlot(UNSET, outgoingSlot);
+
+    const transitions = [
+      ...morphContainerIntoTarget(),
+      fadeInTargetSlot(),
+      fadeOutPreviousGroup(),
+    ];
+    const transition = transitionController.update(transitions, {
+      onFinish: () => {
+        moveConfigurationIntoSlot(UNSET, previousTargetSlot);
+        moveConfigurationIntoSlot(UNSET, previousOutgoingSlot);
+        if (hasDebugLogs) {
+          console.groupEnd();
+        }
+      },
+    });
+    transition.play();
+  };
+  // content_phase_to_content_phase transition (uses outgoing_slot)
+  const applyContentPhaseToContentPhaseTransition = (toConfiguration) => {
+    // 1. Move target slot to outgoing
+    moveConfigurationIntoSlot(targetSlotConfiguration, outgoingSlot);
+    targetSlotConfiguration = toConfiguration;
+
+    const transitions = [
+      ...morphContainerIntoTarget(),
+      fadeInTargetSlot(),
+      fadeOutOutgoingSlot(),
+    ];
+    const transition = transitionController.update(transitions, {
+      onFinish: () => {
+        moveConfigurationIntoSlot(UNSET, outgoingSlot);
+
+        if (hasDebugLogs) {
+          console.groupEnd();
+        }
+      },
+    });
+    transition.play();
+  };
+  // any_to_empty transition
+  const applyToEmptyTransition = () => {
+    // 1. move target slot to previous
+    moveConfigurationIntoSlot(targetSlotConfiguration, previousTargetSlot);
+    targetSlotConfiguration = UNSET;
+    // 2. move outgoing slot to previous
+    moveConfigurationIntoSlot(outgoingSlotConfiguration, previousOutgoingSlot);
+    outgoingSlotConfiguration = UNSET;
+
+    const transitions = [...morphContainerIntoTarget(), fadeOutPreviousGroup()];
+    const transition = transitionController.update(transitions, {
+      onFinish: () => {
+        moveConfigurationIntoSlot(UNSET, previousTargetSlot);
+        moveConfigurationIntoSlot(UNSET, previousOutgoingSlot);
+        if (hasDebugLogs) {
+          console.groupEnd();
+        }
+      },
+    });
+    transition.play();
+  };
+  // Main transition method
+  const transitionTo = (
+    newContentElement,
+    { contentPhase, contentId } = {},
+  ) => {
+    if (contentId) {
+      targetSlot.setAttribute(CONTENT_ID_ATTRIBUTE, contentId);
+    } else {
+      targetSlot.removeAttribute(CONTENT_ID_ATTRIBUTE);
+    }
+    if (contentPhase) {
+      targetSlot.setAttribute(CONTENT_PHASE_ATTRIBUTE, contentPhase);
+    } else {
+      targetSlot.removeAttribute(CONTENT_PHASE_ATTRIBUTE);
+    }
+    if (newContentElement) {
+      targetSlot.innerHTML = "";
+      targetSlot.appendChild(newContentElement);
+    } else {
+      targetSlot.innerHTML = "";
+    }
+  };
+  // Reset to initial content
+  const resetContent = () => {
+    transitionController.cancel();
+    moveConfigurationIntoSlot(targetSlotInitialConfiguration, targetSlot);
+    moveConfigurationIntoSlot(outgoingSlotInitialConfiguration, outgoingSlot);
+    moveConfigurationIntoSlot(UNSET, previousTargetSlot);
+    moveConfigurationIntoSlot(UNSET, previousOutgoingSlot);
+  };
+
+  const targetSlotEffect = (reasons) => {
+    const fromConfiguration = targetSlotConfiguration;
+    const toConfiguration = detectConfiguration(targetSlot);
+    if (hasDebugLogs) {
+      console.group(`targetSlotEffect()`);
+      console.debug(`reasons:`);
+      console.debug(`- ${reasons.join("\n- ")}`);
+    }
+    if (isSameConfiguration(fromConfiguration, toConfiguration)) {
+      debugDetection(
+        `already in desired state (${toConfiguration}) -> early return`,
+      );
+      if (hasDebugLogs) {
+        console.groupEnd();
+      }
+      return;
+    }
+    const fromConfigType = fromConfiguration.type;
+    const toConfigType = toConfiguration.type;
+    transitionType = `${fromConfigType}_to_${toConfigType}`;
+    debugDetection(
+      `Prepare "${transitionType}" transition (${fromConfiguration} -> ${toConfiguration})`,
+    );
+    // content_to_empty / content_phase_to_empty
+    if (toConfiguration.isEmpty) {
+      applyToEmptyTransition();
+      return;
+    }
+    // content_phase_to_content_phase
+    if (fromConfiguration.isContentPhase && toConfiguration.isContentPhase) {
+      applyContentPhaseToContentPhaseTransition(toConfiguration);
+      return;
+    }
+    // content_phase_to_content
+    if (fromConfiguration.isContentPhase && toConfiguration.isContent) {
+      applyContentPhaseToContentPhaseTransition(toConfiguration);
+      return;
+    }
+    // content_to_content_phase
+    if (fromConfiguration.isContent && toConfiguration.isContentPhase) {
+      applyContentPhaseToContentPhaseTransition(toConfiguration);
+      return;
+    }
+    // content_to_content (default case)
+    applyContentToContentTransition(toConfiguration);
+  };
+
+  const [teardown, addTeardown] = createPubSub();
+  {
+    const mutationObserver = new MutationObserver((mutations) => {
+      const reasonParts = [];
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          const added = mutation.addedNodes.length;
+          const removed = mutation.removedNodes.length;
+          if (added && removed) {
+            reasonParts.push(`addedNodes(${added}) removedNodes(${removed})`);
+          } else if (added) {
+            reasonParts.push(`addedNodes(${added})`);
+          } else {
+            reasonParts.push(`removedNodes(${removed})`);
+          }
+          continue;
+        }
+        if (mutation.type === "attributes") {
+          const { attributeName } = mutation;
+          if (
+            attributeName === CONTENT_ID_ATTRIBUTE ||
+            attributeName === CONTENT_PHASE_ATTRIBUTE
+          ) {
+            const { oldValue } = mutation;
+            if (oldValue === null) {
+              const value = targetSlot.getAttribute(attributeName);
+              reasonParts.push(
+                value
+                  ? `added [${attributeName}=${value}]`
+                  : `added [${attributeName}]`,
+              );
+            } else if (targetSlot.hasAttribute(attributeName)) {
+              const value = targetSlot.getAttribute(attributeName);
+              reasonParts.push(`[${attributeName}] ${oldValue} -> ${value}`);
+            } else {
+              reasonParts.push(
+                oldValue
+                  ? `removed [${attributeName}=${oldValue}]`
+                  : `removed [${attributeName}]`,
+              );
+            }
+          }
+        }
+      }
+
+      if (reasonParts.length === 0) {
+        return;
+      }
+      targetSlotEffect(reasonParts);
+    });
+    mutationObserver.observe(targetSlot, {
+      childList: true,
+      attributes: true,
+      attributeFilter: [CONTENT_ID_ATTRIBUTE, CONTENT_PHASE_ATTRIBUTE],
+      characterData: false,
+    });
+    addTeardown(() => {
+      mutationObserver.disconnect();
+    });
+  }
+  {
+    const slots = [
+      targetSlot,
+      outgoingSlot,
+      previousTargetSlot,
+      previousOutgoingSlot,
+    ];
+    for (const slot of slots) {
+      addTeardown(monitorItemsOverflow(slot));
+    }
+  }
+
+  const setDuration = (newDuration) => {
+    duration = newDuration;
+    // Update CSS variable immediately
+    root.style.setProperty("--x-transition-duration", `${duration}ms`);
+  };
+  const setAlignment = (newAlignX, newAlignY) => {
+    alignX = newAlignX;
+    alignY = newAlignY;
+    updateAlignment();
+  };
+
+  return {
+    updateContentId: (value) => {
+      if (value) {
+        targetSlot.setAttribute(CONTENT_ID_ATTRIBUTE, value);
+      } else {
+        targetSlot.removeAttribute(CONTENT_ID_ATTRIBUTE);
+      }
+    },
+
+    transitionTo,
+    resetContent,
+    setDuration,
+    setAlignment,
+    updateAlignment,
+    setPauseBreakpoints: (value) => {
+      groupTransitionOptions.pauseBreakpoints = value;
+    },
+    cleanup: () => {
+      teardown();
+    },
+  };
+};
+
 /**
  * UITransition
  *
@@ -8591,74 +9503,79 @@ const useUrlSearchParam = (paramName) => {
  *
  * Usage:
  * - Wrap dynamic content in <UITransition> to animate between states
- * - Set a unique `data-content-key` on your rendered content to identify each content variant
+ * - Set a unique `data-content-id` on your rendered content to identify each content variant
  * - Use `data-content-phase` to mark loading/error states for phase transitions
  * - Configure transition types and durations for both content and phase changes
  *
  * Example:
  *
- *   <UITransition
- *     transitionType="slide-left"
- *     transitionDuration={400}
- *     phaseTransitionType="cross-fade"
- *     phaseTransitionDuration={300}
- *   >
+ *   <UITransition>
  *     {isLoading
  *       ? <Spinner data-content-key={userId} data-content-phase />
  *       : <UserProfile user={user} data-content-key={userId} />}
  *   </UITransition>
  *
- * When `data-content-key` changes, UITransition animates content transitions.
+ * When `data-content-id` changes, UITransition animates content transitions.
  * When `data-content-phase` changes for the same key, it animates phase transitions.
  */
 
-const ContentKeyContext = createContext();
+const UITransitionContentIdContext = createContext();
 const UITransition = ({
   children,
-  contentKey,
-  sizeTransition,
-  sizeTransitionDuration,
-  transitionType,
-  transitionDuration,
-  phaseTransitionType,
-  phaseTransitionDuration,
-  debugTransition,
+  contentId,
+  type,
+  duration,
+  debugDetection,
+  debugContent,
+  debugSize,
+  disabled,
+  uiTransitionRef,
   ...props
 }) => {
-  const [contentKeyFromContext, setContentKeyFromContext] = useState();
-  const contentKeyContextValue = useMemo(() => {
-    const keySet = new Set();
-    const onKeySetChange = () => {
-      setContentKeyFromContext(Array.from(keySet).join("|"));
+  const contentIdRef = useRef(contentId);
+  const updateContentId = () => {
+    const uiTransition = uiTransitionRef.current;
+    if (!uiTransition) {
+      return;
+    }
+    const value = contentIdRef.current;
+    uiTransition.updateContentId(value);
+  };
+  const uiTransitionContentIdContextValue = useMemo(() => {
+    const set = new Set();
+    const onSetChange = () => {
+      const value = Array.from(set).join("|");
+      contentIdRef.current = value;
+      updateContentId();
     };
-    const update = (key, newKey) => {
-      if (!keySet.has(key)) {
-        console.warn(`UITransition: trying to update a key that does not exist: ${key}`);
+    const update = (part, newPart) => {
+      if (!set.has(part)) {
+        console.warn(`UITransition: trying to update an id that does not exist: ${part}`);
         return;
       }
-      keySet.delete(key);
-      keySet.add(newKey);
-      onKeySetChange();
+      set.delete(part);
+      set.add(newPart);
+      onSetChange();
     };
-    const add = key => {
-      if (!key) {
+    const add = part => {
+      if (!part) {
         return;
       }
-      if (keySet.has(key)) {
+      if (set.has(part)) {
         return;
       }
-      keySet.add(key);
-      onKeySetChange();
+      set.add(part);
+      onSetChange();
     };
-    const remove = key => {
-      if (!key) {
+    const remove = part => {
+      if (!part) {
         return;
       }
-      if (!keySet.has(key)) {
+      if (!set.has(part)) {
         return;
       }
-      keySet.delete(key);
-      onKeySetChange();
+      set.delete(part);
+      onSetChange();
     };
     return {
       add,
@@ -8666,43 +9583,51 @@ const UITransition = ({
       remove
     };
   }, []);
-  const effectiveContentKey = contentKey || contentKeyFromContext;
   const ref = useRef();
+  const uiTransitionRefDefault = useRef();
+  uiTransitionRef = uiTransitionRef || uiTransitionRefDefault;
   useLayoutEffect(() => {
-    const uiTransition = initUITransition(ref.current);
+    if (disabled) {
+      return null;
+    }
+    const uiTransition = createUITransitionController(ref.current);
+    uiTransitionRef.current = uiTransition;
     return () => {
       uiTransition.cleanup();
     };
-  }, []);
-  return jsx(ContentKeyContext.Provider, {
-    value: contentKeyContextValue,
-    children: jsxs("div", {
-      ref: ref,
-      ...props,
-      className: "ui_transition_container",
-      "data-size-transition": sizeTransition ? "" : undefined,
-      "data-size-transition-duration": sizeTransitionDuration ? sizeTransitionDuration : undefined,
-      "data-content-transition": transitionType ? transitionType : undefined,
-      "data-content-transition-duration": transitionDuration ? transitionDuration : undefined,
-      "data-phase-transition": phaseTransitionType ? phaseTransitionType : undefined,
-      "data-phase-transition-duration": phaseTransitionDuration ? phaseTransitionDuration : undefined,
-      "data-debug-transition": debugTransition ? "" : undefined,
+  }, [disabled]);
+  if (disabled) {
+    return children;
+  }
+  return jsxs("div", {
+    ref: ref,
+    ...props,
+    className: "ui_transition",
+    "data-transition-type": type,
+    "data-transition-duration": duration,
+    "data-debug-detection": debugDetection ? "" : undefined,
+    "data-debug-size": debugSize ? "" : undefined,
+    "data-debug-content": debugContent ? "" : undefined,
+    children: [jsxs("div", {
+      className: "active_group",
       children: [jsx("div", {
-        className: "ui_transition_outer_wrapper",
-        children: jsxs("div", {
-          className: "ui_transition_measure_wrapper",
-          children: [jsx("div", {
-            className: "ui_transition_slot",
-            "data-content-key": effectiveContentKey ? effectiveContentKey : undefined,
-            children: children
-          }), jsx("div", {
-            className: "ui_transition_phase_overlay"
-          })]
+        className: "target_slot",
+        "data-content-id": contentIdRef.current ? contentIdRef.current : undefined,
+        children: jsx(UITransitionContentIdContext.Provider, {
+          value: uiTransitionContentIdContextValue,
+          children: children
         })
       }), jsx("div", {
-        className: "ui_transition_content_overlay"
+        className: "outgoing_slot"
       })]
-    })
+    }), jsxs("div", {
+      className: "previous_group",
+      children: [jsx("div", {
+        className: "previous_target_slot"
+      }), jsx("div", {
+        className: "previous_outgoing_slot"
+      })]
+    })]
   });
 };
 
@@ -8714,28 +9639,28 @@ const UITransition = ({
  * as changed even if the component is still the same
  *
  * This is used by <Route> to set the content key to the route path
- * When the route becomes inactive it will call useContentKey(undefined)
- * And if a sibling route becones active it will call useContentKey with its own path
+ * When the route becomes inactive it will call useUITransitionContentId(undefined)
+ * And if a sibling route becones active it will call useUITransitionContentId with its own path
  *
  */
-const useContentKey = key => {
-  const contentKey = useContext(ContentKeyContext);
-  const keyRef = useRef();
-  if (keyRef.current !== key && contentKey) {
-    const previousKey = keyRef.current;
-    keyRef.current = key;
-    if (previousKey) {
-      contentKey.update(previousKey, key);
+const useUITransitionContentId = value => {
+  const contentId = useContext(UITransitionContentIdContext);
+  const valueRef = useRef();
+  if (contentId !== undefined && valueRef.current !== value) {
+    const previousValue = valueRef.current;
+    valueRef.current = value;
+    if (previousValue === undefined) {
+      contentId.add(value);
     } else {
-      contentKey.add(key);
+      contentId.update(previousValue, value);
     }
   }
   useLayoutEffect(() => {
-    if (!contentKey) {
+    if (contentId === undefined) {
       return null;
     }
     return () => {
-      contentKey.remove(keyRef.current);
+      contentId.remove(valueRef.current);
     };
   }, []);
 };
@@ -8791,10 +9716,13 @@ const Routes = ({
   });
 };
 const SlotContext = createContext(null);
+const RouteInfoContext = createContext(null);
+const useActiveRouteInfo = () => useContext(RouteInfoContext);
 const Route = ({
   element,
   route,
   fallback,
+  meta,
   children
 }) => {
   const forceRender = useForceRender();
@@ -8805,6 +9733,7 @@ const Route = ({
       element: element,
       route: route,
       fallback: fallback,
+      meta: meta,
       onActiveInfoChange: activeInfo => {
         hasDiscoveredRef.current = true;
         activeInfoRef.current = activeInfo;
@@ -8831,18 +9760,23 @@ const ActiveRouteManager = ({
   element,
   route,
   fallback,
+  meta,
   onActiveInfoChange,
   children
 }) => {
+  if (route && fallback) {
+    throw new Error("Route cannot have both route and fallback props");
+  }
   const registerChildRouteFromContext = useContext(RegisterChildRouteContext);
   getElementSignature(element);
   const candidateSet = new Set();
-  const registerChildRoute = (ChildActiveElement, childRoute, childFallback) => {
+  const registerChildRoute = (ChildActiveElement, childRoute, childFallback, childMeta) => {
     getElementSignature(ChildActiveElement);
     candidateSet.add({
       ActiveElement: ChildActiveElement,
       route: childRoute,
-      fallback: childFallback
+      fallback: childFallback,
+      meta: childMeta
     });
   };
   useLayoutEffect(() => {
@@ -8850,6 +9784,7 @@ const ActiveRouteManager = ({
       element,
       route,
       fallback,
+      meta,
       candidateSet,
       onActiveInfoChange,
       registerChildRouteFromContext
@@ -8864,6 +9799,7 @@ const initRouteObserver = ({
   element,
   route,
   fallback,
+  meta,
   candidateSet,
   onActiveInfoChange,
   registerChildRouteFromContext
@@ -8884,19 +9820,13 @@ const initRouteObserver = ({
     let fallbackInfo = null;
     for (const candidate of candidateSet) {
       if (candidate.route?.active) {
-        return {
-          ChildActiveElement: candidate.ActiveElement,
-          route: candidate.route
-        };
+        return candidate;
       }
       // fallback without route can match when no other route matches.
       // This is useful solely for "catch all" fallback used on the <Routes>
       // otherwise a fallback would always match and make the parent route always active
       if (candidate.fallback && !candidate.route.routeFromProps) {
-        fallbackInfo = {
-          ChildActiveElement: candidate.ActiveElement,
-          route: candidate.route
-        };
+        fallbackInfo = candidate;
       }
     }
     return fallbackInfo;
@@ -8913,8 +9843,9 @@ const initRouteObserver = ({
       return activeChildInfo;
     }
     return {
-      ChildActiveElement: null,
-      route
+      ActiveElement: null,
+      route,
+      meta
     };
   } : () => {
     // we don't have a route, do we have an active child?
@@ -8924,22 +9855,22 @@ const initRouteObserver = ({
     }
     return null;
   };
-  const activeRouteSignal = signal();
+  const activeRouteInfoSignal = signal();
   const SlotActiveElementSignal = signal();
   const ActiveElement = () => {
-    const activeRoute = activeRouteSignal.value;
-    useContentKey(activeRoute?.urlPattern);
+    const activeRouteInfo = activeRouteInfoSignal.value;
+    useUITransitionContentId(activeRouteInfo ? activeRouteInfo.route.urlPattern : fallback ? "fallback" : undefined);
     const SlotActiveElement = SlotActiveElementSignal.value;
     if (typeof element === "function") {
       const Element = element;
-      return jsx(SlotContext.Provider, {
-        value: SlotActiveElement,
-        children: jsx(Element, {})
-      });
+      element = jsx(Element, {});
     }
-    return jsx(SlotContext.Provider, {
-      value: SlotActiveElement,
-      children: element
+    return jsx(RouteInfoContext.Provider, {
+      value: activeRouteInfo,
+      children: jsx(SlotContext.Provider, {
+        value: SlotActiveElement,
+        children: element
+      })
     });
   };
   ActiveElement.underlyingElementId = candidateSet.size === 0 ? `${getElementSignature(element)} without slot` : `[${getElementSignature(element)} with slot one of ${candidateElementIds}]`;
@@ -8947,20 +9878,17 @@ const initRouteObserver = ({
     const newActiveInfo = getActiveInfo();
     if (newActiveInfo) {
       compositeRoute.active = true;
-      const {
-        route,
-        ChildActiveElement
-      } = newActiveInfo;
-      activeRouteSignal.value = route;
-      SlotActiveElementSignal.value = ChildActiveElement;
+      activeRouteInfoSignal.value = newActiveInfo;
+      SlotActiveElementSignal.value = newActiveInfo.ActiveElement;
       onActiveInfoChange({
-        route: newActiveInfo.route,
         ActiveElement,
-        SlotActiveElement: ChildActiveElement
+        SlotActiveElement: newActiveInfo.ActiveElement,
+        route: newActiveInfo.route,
+        meta: newActiveInfo.meta
       });
     } else {
       compositeRoute.active = false;
-      activeRouteSignal.value = null;
+      activeRouteInfoSignal.value = null;
       SlotActiveElementSignal.value = null;
       onActiveInfoChange(null);
     }
@@ -8976,7 +9904,7 @@ const initRouteObserver = ({
     candidate.route.subscribeStatus(onChange);
   }
   if (registerChildRouteFromContext) {
-    registerChildRouteFromContext(ActiveElement, compositeRoute, fallback);
+    registerChildRouteFromContext(ActiveElement, compositeRoute, fallback, meta);
   }
   updateActiveInfo();
 };
@@ -9178,14 +10106,11 @@ const renderActionableComponent = (props, {
 
 const normalizeSpacingStyle = (value, property = "padding") => {
   const cssSize = sizeSpacingScale[value];
-  return cssSize || normalizeStyle(value, property, "css");
+  return cssSize || stringifyStyle(value, property);
 };
 const normalizeTypoStyle = (value, property = "fontSize") => {
   const cssSize = sizeTypoScale[value];
-  return cssSize || normalizeStyle(value, property, "css");
-};
-const normalizeCssStyle = (value, property) => {
-  return normalizeStyle(value, property, "css");
+  return cssSize || stringifyStyle(value, property);
 };
 
 const PASS_THROUGH = { name: "pass_through" };
@@ -9236,6 +10161,13 @@ const applyOnTwoProps = (propA, propB) => {
   };
 };
 
+const LAYOUT_PROPS = {
+  // all are handled by data-attributes
+  inline: () => {},
+  box: () => {},
+  row: () => {},
+  column: () => {},
+};
 const OUTER_SPACING_PROPS = {
   margin: PASS_THROUGH,
   marginLeft: PASS_THROUGH,
@@ -9272,21 +10204,21 @@ const DIMENSION_PROPS = {
       return { flexGrow: 1 }; // Grow horizontally in row
     }
     if (parentLayout === "row") {
-      return { minWidth: "100%" }; // Take full width in column
+      return { minWidth: "100%", width: "auto" }; // Take full width in column
     }
-    return { minWidth: "100%" }; // Take full width outside flex
+    return { minWidth: "100%", width: "auto" }; // Take full width outside flex
   },
   expandY: (value, { parentLayout }) => {
     if (!value) {
       return null;
     }
     if (parentLayout === "column") {
-      return { minHeight: "100%" }; // Make column full height
+      return { minHeight: "100%", height: "auto" }; // Make column full height
     }
     if (parentLayout === "row" || parentLayout === "inline-row") {
       return { flexGrow: 1 }; // Make row full height
     }
-    return { minHeight: "100%" }; // Take full height outside flex
+    return { minHeight: "100%", height: "auto" }; // Take full height outside flex
   },
   shrinkX: (value, { parentLayout }) => {
     if (!value) {
@@ -9306,6 +10238,23 @@ const DIMENSION_PROPS = {
     }
     return { maxHeight: "100%" };
   },
+
+  scaleX: (value) => {
+    return { transform: `scaleX(${stringifyStyle(value, "scaleX")})` };
+  },
+  scaleY: (value) => {
+    return { transform: `scaleY(${value})` };
+  },
+  scale: (value) => {
+    if (Array.isArray(value)) {
+      const [x, y] = value;
+      return { transform: `scale(${x}, ${y})` };
+    }
+    return { transform: `scale(${value})` };
+  },
+  scaleZ: (value) => {
+    return { transform: `scaleZ(${value})` };
+  },
 };
 const POSITION_PROPS = {
   // For row, alignX uses auto margins for positioning
@@ -9346,7 +10295,7 @@ const POSITION_PROPS = {
 
     if (value === "start") {
       if (inlineColumnLayout) {
-        return undefined; // this is the default
+        return { alignSelf: "start" };
       }
       return { marginBottom: "auto" };
     }
@@ -9366,8 +10315,49 @@ const POSITION_PROPS = {
   },
   left: PASS_THROUGH,
   top: PASS_THROUGH,
+
+  translateX: (value) => {
+    return { transform: `translateX(${value})` };
+  },
+  translateY: (value) => {
+    return { transform: `translateY(${value})` };
+  },
+  translate: (value) => {
+    if (Array.isArray(value)) {
+      const [x, y] = value;
+      return { transform: `translate(${x}, ${y})` };
+    }
+    return { transform: `translate(${stringifyStyle(value, "translateX")})` };
+  },
+  rotateX: (value) => {
+    return { transform: `rotateX(${value})` };
+  },
+  rotateY: (value) => {
+    return { transform: `rotateY(${value})` };
+  },
+  rotateZ: (value) => {
+    return { transform: `rotateZ(${value})` };
+  },
+  rotate: (value) => {
+    return { transform: `rotate(${value})` };
+  },
+  skewX: (value) => {
+    return { transform: `skewX(${value})` };
+  },
+  skewY: (value) => {
+    return { transform: `skewY(${value})` };
+  },
+  skew: (value) => {
+    if (Array.isArray(value)) {
+      const [x, y] = value;
+      return { transform: `skew(${x}, ${y})` };
+    }
+    return { transform: `skew(${value})` };
+  },
 };
 const TYPO_PROPS = {
+  font: PASS_THROUGH,
+  fontFamily: PASS_THROUGH,
   size: applyOnCSSProp("fontSize"),
   fontSize: PASS_THROUGH,
   bold: applyToCssPropWhenTruthy("fontWeight", "bold", "normal"),
@@ -9384,6 +10374,11 @@ const TYPO_PROPS = {
   preWrap: applyToCssPropWhenTruthy("whiteSpace", "pre-wrap", "normal"),
 };
 const VISUAL_PROPS = {
+  outline: PASS_THROUGH,
+  outlineStyle: PASS_THROUGH,
+  outlineColor: PASS_THROUGH,
+  outlineWidth: PASS_THROUGH,
+  boxDecorationBreak: PASS_THROUGH,
   boxShadow: PASS_THROUGH,
   background: PASS_THROUGH,
   backgroundColor: PASS_THROUGH,
@@ -9463,6 +10458,7 @@ const CONTENT_PROPS = {
   },
 };
 const All_PROPS = {
+  ...LAYOUT_PROPS,
   ...OUTER_SPACING_PROPS,
   ...INNER_SPACING_PROPS,
   ...DIMENSION_PROPS,
@@ -9471,6 +10467,7 @@ const All_PROPS = {
   ...VISUAL_PROPS,
   ...CONTENT_PROPS,
 };
+const LAYOUT_PROP_NAME_SET = new Set(Object.keys(LAYOUT_PROPS));
 const OUTER_SPACING_PROP_NAME_SET = new Set(Object.keys(OUTER_SPACING_PROPS));
 const INNER_SPACING_PROP_NAME_SET = new Set(Object.keys(INNER_SPACING_PROPS));
 const DIMENSION_PROP_NAME_SET = new Set(Object.keys(DIMENSION_PROPS));
@@ -9486,6 +10483,7 @@ const HANDLED_BY_VISUAL_CHILD_PROP_SET = new Set([
   ...CONTENT_PROP_NAME_SET,
 ]);
 const COPIED_ON_VISUAL_CHILD_PROP_SET = new Set([
+  ...LAYOUT_PROP_NAME_SET,
   "expand",
   "shrink",
   "expandX",
@@ -9497,6 +10495,9 @@ const COPIED_ON_VISUAL_CHILD_PROP_SET = new Set([
 const isStyleProp = (name) => STYLE_PROP_NAME_SET.has(name);
 
 const getStylePropGroup = (name) => {
+  if (LAYOUT_PROP_NAME_SET.has(name)) {
+    return "layout";
+  }
   if (OUTER_SPACING_PROP_NAME_SET.has(name)) {
     return "margin";
   }
@@ -9528,7 +10529,7 @@ const getNormalizer = (key) => {
   if (group === "typo") {
     return normalizeTypoStyle;
   }
-  return normalizeCssStyle;
+  return stringifyStyle;
 };
 
 const assignStyle = (
@@ -9536,7 +10537,7 @@ const assignStyle = (
   propValue,
   propName,
   styleContext,
-  normalizer = getNormalizer(propName),
+  context = "js",
 ) => {
   if (propValue === undefined) {
     return;
@@ -9545,6 +10546,7 @@ const assignStyle = (
   if (!managedByCSSVars) {
     throw new Error("managedByCSSVars is required in styleContext");
   }
+  const normalizer = getNormalizer(propName);
   const getStyle = All_PROPS[propName];
   if (
     getStyle === PASS_THROUGH ||
@@ -9553,10 +10555,16 @@ const assignStyle = (
   ) {
     const cssValue = normalizer(propValue, propName);
     const cssVar = managedByCSSVars[propName];
+    const mergedValue = mergeOneStyle(
+      styleObject[propName],
+      cssValue,
+      propName,
+      context,
+    );
     if (cssVar) {
-      styleObject[cssVar] = cssValue;
+      styleObject[cssVar] = mergedValue;
     } else {
-      styleObject[propName] = cssValue;
+      styleObject[propName] = mergedValue;
     }
     return;
   }
@@ -9568,10 +10576,11 @@ const assignStyle = (
     const value = values[key];
     const cssValue = normalizer(value, key);
     const cssVar = managedByCSSVars[key];
+    const mergedValue = mergeOneStyle(styleObject[key], cssValue, key, context);
     if (cssVar) {
-      styleObject[cssVar] = cssValue;
+      styleObject[cssVar] = mergedValue;
     } else {
-      styleObject[key] = cssValue;
+      styleObject[key] = mergedValue;
     }
   }
 };
@@ -9588,12 +10597,8 @@ const sizeSpacingScale = {
   xl: "2em", // 2 = 32px at 16px base
   xxl: "3em", // 3 = 48px at 16px base
 };
-const resolveSpacingSize = (
-  size,
-  property = "padding",
-  context = "css",
-) => {
-  return normalizeStyle(sizeSpacingScale[size] || size, property, context);
+const resolveSpacingSize = (size, property = "padding") => {
+  return stringifyStyle(sizeSpacingScale[size] || size, property);
 };
 
 const sizeTypoScale = {
@@ -9971,7 +10976,7 @@ const initPseudoStyles = (
       }
       currentState[pseudoClass] = currentValue;
       const oldValue = state ? state[pseudoClass] : undefined;
-      if (oldValue !== currentValue) {
+      if (oldValue !== currentValue || !state) {
         someChange = true;
         const { attribute, add, remove } = pseudoClassDefinition;
         if (currentValue) {
@@ -10026,8 +11031,15 @@ const applyStyle = (element, style, pseudoState, pseudoNamedStyles) => {
   updateStyle(element, getStyleToApply(style, pseudoState, pseudoNamedStyles));
 };
 
+const PSEUDO_STATE_DEFAULT = {};
+const PSEUDO_NAMED_STYLES_DEFAULT = {};
 const getStyleToApply = (styles, pseudoState, pseudoNamedStyles) => {
-  if (!pseudoState || !pseudoNamedStyles) {
+  if (
+    !pseudoState ||
+    pseudoState === PSEUDO_STATE_DEFAULT ||
+    !pseudoNamedStyles ||
+    pseudoNamedStyles === PSEUDO_NAMED_STYLES_DEFAULT
+  ) {
     return styles;
   }
 
@@ -10094,7 +11106,13 @@ const updateStyle = (element, style) => {
     }
   }
   for (const toDeleteKey of toDeleteKeySet) {
-    element.style.removeProperty(toDeleteKey);
+    if (toDeleteKey.startsWith("--")) {
+      element.style.removeProperty(toDeleteKey);
+    } else {
+      // we can't use removeProperty because "toDeleteKey" is in camelCase
+      // e.g., backgroundColor (and it's safer to just let the browser do the conversion)
+      element.style[toDeleteKey] = "";
+    }
   }
   styleKeySetWeakMap.set(element, styleKeySet);
   return;
@@ -10153,8 +11171,10 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     flex-direction: row;
   }
 
-  [data-layout-row] > *,
-  [data-layout-column] > * {
+  [data-layout-row] > [data-layout-row],
+  [data-layout-row] > [data-layout-column],
+  [data-layout-column] > [data-layout-column],
+  [data-layout-column] > [data-layout-row] {
     flex-shrink: 0;
   }
 
@@ -10169,9 +11189,6 @@ const MANAGED_BY_CSS_VARS_DEFAULT = {};
 const Box = props => {
   const {
     as = "div",
-    layoutRow,
-    layoutColumn,
-    layoutInline,
     baseClassName,
     className,
     baseStyle,
@@ -10201,30 +11218,78 @@ const Box = props => {
   const defaultRef = useRef();
   const ref = props.ref || defaultRef;
   const TagName = as;
+  const {
+    box,
+    inline = box,
+    row,
+    column = box
+  } = rest;
   let layout;
-  if (layoutInline) {
-    if (layoutRow) {
+  if (inline) {
+    if (row) {
       layout = "inline-row";
-    } else if (layoutColumn) {
+    } else if (column) {
       layout = "inline-column";
     } else {
       layout = "inline";
     }
-  } else if (layoutRow) {
+  } else if (row) {
     layout = "row";
-  } else if (layoutColumn) {
+  } else if (column) {
     layout = "column";
   } else {
     layout = getDefaultDisplay(TagName);
   }
   const innerClassName = withPropsClassName(baseClassName, className);
   const remainingProps = {};
+  const propsToForward = {};
+  const shouldForwardAllToChild = visualSelector && pseudoStateSelector;
   {
     const parentLayout = useContext(BoxLayoutContext);
-    const innerPseudoState = basePseudoState && pseudoState ? {
-      ...basePseudoState,
-      ...pseudoState
-    } : basePseudoState;
+    const styleDeps = [
+    // Layout and alignment props
+    parentLayout, layout,
+    // Style context dependencies
+    managedByCSSVars, pseudoClasses, pseudoElements,
+    // Selectors
+    visualSelector, pseudoStateSelector];
+    let innerPseudoState;
+    if (basePseudoState && pseudoState) {
+      innerPseudoState = {};
+      const baseStateKeys = Object.keys(basePseudoState);
+      const pseudoStateKeySet = new Set(Object.keys(pseudoState));
+      for (const key of baseStateKeys) {
+        if (pseudoStateKeySet.has(key)) {
+          pseudoStateKeySet.delete(key);
+          const value = pseudoState[key];
+          styleDeps.push(value);
+          innerPseudoState[key] = value;
+        } else {
+          const value = basePseudoState[key];
+          styleDeps.push(value);
+          innerPseudoState[key] = value;
+        }
+      }
+      for (const key of pseudoStateKeySet) {
+        const value = pseudoState[key];
+        styleDeps.push(value);
+        innerPseudoState[key] = value;
+      }
+    } else if (basePseudoState) {
+      innerPseudoState = basePseudoState;
+      for (const key of Object.keys(basePseudoState)) {
+        const value = basePseudoState[key];
+        styleDeps.push(value);
+      }
+    } else if (pseudoState) {
+      innerPseudoState = pseudoState;
+      for (const key of Object.keys(pseudoState)) {
+        const value = pseudoState[key];
+        styleDeps.push(value);
+      }
+    } else {
+      innerPseudoState = PSEUDO_STATE_DEFAULT;
+    }
     const styleContext = {
       parentLayout,
       layout,
@@ -10233,13 +11298,6 @@ const Box = props => {
       pseudoClasses,
       pseudoElements
     };
-    const styleDeps = [
-    // Layout and alignment props
-    parentLayout, layout,
-    // Style context dependencies
-    managedByCSSVars, pseudoClasses, pseudoElements,
-    // Selectors
-    visualSelector, pseudoStateSelector];
     const boxStyles = {};
     if (baseStyle) {
       for (const key of baseStyle) {
@@ -10249,22 +11307,6 @@ const Box = props => {
       }
     }
     const stylingKeyCandidateArray = Object.keys(rest);
-    const assignStyleFromProp = (propValue, propName, stylesTarget, context) => {
-      const propEffect = getPropEffect(propName);
-      if (propEffect === "ignore") {
-        return;
-      }
-      if (propEffect === "forward" || propEffect === "style_and_forward") {
-        if (stylesTarget === boxStyles) {
-          remainingProps[propName] = propValue;
-        }
-        if (propEffect === "forward") {
-          return;
-        }
-      }
-      styleDeps.push(propValue);
-      assignStyle(stylesTarget, propValue, propName, context);
-    };
     const getPropEffect = propName => {
       if (visualSelector) {
         if (HANDLED_BY_VISUAL_CHILD_PROP_SET.has(propName)) {
@@ -10274,7 +11316,34 @@ const Box = props => {
           return "style_and_forward";
         }
       }
-      return isStyleProp(propName) ? "style" : "forward";
+      if (isStyleProp(propName)) {
+        return "style";
+      }
+      if (propName.startsWith("data-")) {
+        return "use";
+      }
+      return "forward";
+    };
+    const assignStyleFromProp = (propValue, propName, stylesTarget, styleContext) => {
+      const propEffect = getPropEffect(propName);
+      if (propEffect === "ignore") {
+        return;
+      }
+      const useToStyle = propEffect === "style" || propEffect === "style_and_forward";
+      const shouldForward = propEffect === "forward" || propEffect === "style_and_forward";
+      if (useToStyle) {
+        styleDeps.push(propValue);
+        assignStyle(stylesTarget, propValue, propName, styleContext, "css");
+      }
+      if (stylesTarget === boxStyles) {
+        if (!shouldForwardAllToChild && !useToStyle) {
+          // we'll put these props on ourselves
+          remainingProps[propName] = propValue;
+        }
+        if (shouldForward) {
+          propsToForward[propName] = propValue;
+        }
+      }
     };
     for (const key of stylingKeyCandidateArray) {
       if (key === "ref") {
@@ -10285,46 +11354,49 @@ const Box = props => {
       const value = rest[key];
       assignStyleFromProp(value, key, boxStyles, styleContext);
     }
-    const pseudoNamedStyles = {};
+    let pseudoNamedStyles = PSEUDO_NAMED_STYLES_DEFAULT;
     if (pseudoStyle) {
-      for (const key of Object.keys(pseudoStyle)) {
-        const pseudoStyleContext = {
-          ...styleContext,
-          managedByCSSVars: {
-            ...managedByCSSVars,
-            ...managedByCSSVars[key]
-          },
-          pseudoName: key
-        };
+      const pseudoStyleKeys = Object.keys(pseudoStyle);
+      if (pseudoStyleKeys.length) {
+        pseudoNamedStyles = {};
+        for (const key of pseudoStyleKeys) {
+          const pseudoStyleContext = {
+            ...styleContext,
+            managedByCSSVars: {
+              ...managedByCSSVars,
+              ...managedByCSSVars[key]
+            },
+            pseudoName: key
+          };
 
-        // pseudo class
-        if (key.startsWith(":")) {
-          styleDeps.push(key);
-          const pseudoClassStyles = {};
-          const pseudoClassStyle = pseudoStyle[key];
-          for (const pseudoClassStyleKey of Object.keys(pseudoClassStyle)) {
-            const pseudoClassStyleValue = pseudoClassStyle[pseudoClassStyleKey];
-            assignStyleFromProp(pseudoClassStyleValue, pseudoClassStyleKey, pseudoClassStyles, pseudoStyleContext);
+          // pseudo class
+          if (key.startsWith(":")) {
+            styleDeps.push(key);
+            const pseudoClassStyles = {};
+            const pseudoClassStyle = pseudoStyle[key];
+            for (const pseudoClassStyleKey of Object.keys(pseudoClassStyle)) {
+              const pseudoClassStyleValue = pseudoClassStyle[pseudoClassStyleKey];
+              assignStyleFromProp(pseudoClassStyleValue, pseudoClassStyleKey, pseudoClassStyles, pseudoStyleContext);
+            }
+            pseudoNamedStyles[key] = pseudoClassStyles;
+            continue;
           }
-          pseudoNamedStyles[key] = pseudoClassStyles;
-          continue;
-        }
-        // pseudo element
-        if (key.startsWith("::")) {
-          styleDeps.push(key);
-          const pseudoElementStyles = {};
-          const pseudoElementStyle = pseudoStyle[key];
-          for (const pseudoElementStyleKey of Object.keys(pseudoElementStyle)) {
-            const pseudoElementStyleValue = pseudoElementStyle[pseudoElementStyleKey];
-            assignStyleFromProp(pseudoElementStyleValue, pseudoElementStyleKey, pseudoElementStyles, pseudoStyleContext);
+          // pseudo element
+          if (key.startsWith("::")) {
+            styleDeps.push(key);
+            const pseudoElementStyles = {};
+            const pseudoElementStyle = pseudoStyle[key];
+            for (const pseudoElementStyleKey of Object.keys(pseudoElementStyle)) {
+              const pseudoElementStyleValue = pseudoElementStyle[pseudoElementStyleKey];
+              assignStyleFromProp(pseudoElementStyleValue, pseudoElementStyleKey, pseudoElementStyles, pseudoStyleContext);
+            }
+            pseudoNamedStyles[key] = pseudoElementStyles;
+            continue;
           }
-          pseudoNamedStyles[key] = pseudoElementStyles;
-          continue;
+          console.warn(`unsupported pseudo style key "${key}"`);
         }
-        console.warn(`unsupported pseudo style key "${key}"`);
       }
       remainingProps.pseudoStyle = pseudoStyle;
-      // TODO: we should also pass pseudoState right?
     }
     if (typeof style === "string") {
       appendStyles(boxStyles, normalizeStyles(style, "css"), "css");
@@ -10332,7 +11404,7 @@ const Box = props => {
     } else if (style && typeof style === "object") {
       for (const key of Object.keys(style)) {
         const stylePropValue = style[key];
-        assignStyle(boxStyles, stylePropValue, key, styleContext);
+        assignStyle(boxStyles, stylePropValue, key, styleContext, "css");
         styleDeps.push(stylePropValue); // impact box style -> add to deps
       }
     }
@@ -10384,23 +11456,22 @@ const Box = props => {
   let innerChildren;
   if (hasChildFunction) {
     if (Array.isArray(children)) {
-      innerChildren = children.map(child => typeof child === "function" ? child(remainingProps) : child);
+      innerChildren = children.map(child => typeof child === "function" ? child(propsToForward) : child);
     } else if (typeof children === "function") {
-      innerChildren = children(remainingProps);
+      innerChildren = children(propsToForward);
     } else {
       innerChildren = children;
     }
   } else {
     innerChildren = children;
   }
-  const shouldForwardAllToChild = visualSelector && pseudoStateSelector;
   return jsx(TagName, {
     ref: ref,
     className: innerClassName,
-    "data-layout-inline": layoutInline ? "" : undefined,
-    "data-layout-row": layoutRow ? "" : undefined,
-    "data-layout-column": layoutColumn ? "" : undefined,
-    ...(shouldForwardAllToChild ? undefined : remainingProps),
+    "data-layout-inline": inline ? "" : undefined,
+    "data-layout-row": row ? "" : undefined,
+    "data-layout-column": column ? "" : undefined,
+    ...remainingProps,
     children: jsx(BoxLayoutContext.Provider, {
       value: layout,
       children: innerChildren
@@ -10408,25 +11479,8 @@ const Box = props => {
   });
 };
 const Layout = props => {
-  const {
-    row,
-    column,
-    ...rest
-  } = props;
-  if (row) {
-    return jsx(Box, {
-      layoutRow: true,
-      ...rest
-    });
-  }
-  if (column) {
-    return jsx(Box, {
-      layoutColumn: true,
-      ...rest
-    });
-  }
   return jsx(Box, {
-    ...rest
+    ...props
   });
 };
 
@@ -12357,39 +13411,14 @@ const useAutoFocus = (
     if (autoFocus) {
       const focusableElement = focusableElementRef.current;
       focusableElement.scrollIntoView({ inline: "nearest", block: "nearest" });
-    }
-  }, []);
-};
-
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_text {
-    position: relative;
-    color: inherit;
-  }
-
-  .navi_char_slot_invisible {
-    opacity: 0;
-  }
-
-  .navi_icon {
-    display: flex;
-    aspect-ratio: 1 / 1;
-    height: 100%;
-    max-height: 1em;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .navi_text[data-has-foreground] {
-    display: inline-block;
-  }
+    }
+  }, []);
+};
 
-  .navi_text_foreground {
-    position: absolute;
-    inset: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .navi_text {
+    position: relative;
+    color: inherit;
   }
 
   .navi_text_overflow_wrapper {
@@ -12476,91 +13505,18 @@ const TextOverflowPinned = ({
 };
 const TextBasic = ({
   as = "span",
-  foregroundColor,
-  foregroundElement,
   contentSpacing = " ",
-  box,
   children,
   ...rest
 }) => {
-  const hasForeground = Boolean(foregroundElement || foregroundColor);
-  const text = jsxs(Box, {
+  const text = jsx(Box, {
     ...rest,
     baseClassName: "navi_text",
     as: as,
-    layoutInline: true,
-    layoutColumn: box ? true : undefined,
-    "data-has-foreground": hasForeground ? "" : undefined,
-    children: [applyContentSpacingOnTextChildren(children, contentSpacing), hasForeground && jsx("span", {
-      className: "navi_text_foreground",
-      style: {
-        backgroundColor: foregroundColor
-      },
-      children: foregroundElement
-    })]
+    children: applyContentSpacingOnTextChildren(children, contentSpacing)
   });
   return text;
 };
-const CharSlot = ({
-  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",
-  "aria-label": ariaLabel,
-  role,
-  decorative = false,
-  children,
-  ...rest
-}) => {
-  const invisibleText = baseChar.repeat(charWidth);
-  const ariaProps = decorative ? {
-    "aria-hidden": "true"
-  } : {
-    role,
-    "aria-label": ariaLabel
-  };
-  return jsx(Text, {
-    ...rest,
-    ...ariaProps,
-    foregroundElement: children,
-    children: jsx("span", {
-      className: "navi_char_slot_invisible",
-      "aria-hidden": "true",
-      children: invisibleText
-    })
-  });
-};
-const Icon = ({
-  box,
-  href,
-  children,
-  ...props
-}) => {
-  const innerChildren = href ? jsx("svg", {
-    width: "100%",
-    height: "100%",
-    children: jsx("use", {
-      href: href
-    })
-  }) : children;
-  if (box) {
-    return jsx(Box, {
-      layoutInline: true,
-      layoutColumn: true,
-      ...props,
-      children: innerChildren
-    });
-  }
-  return jsx(CharSlot, {
-    decorative: true,
-    ...props,
-    children: jsx("span", {
-      className: "navi_icon",
-      children: innerChildren
-    })
-  });
-};
 const Paragraph = ({
   contentSpacing = " ",
   marginTop = "md",
@@ -12623,32 +13579,142 @@ const applyContentSpacingOnTextChildren = (children, contentSpacing) => {
   return childrenWithGap;
 };
 
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .navi_icon {
+    display: inline-block;
+    box-sizing: border-box;
+  }
+
+  .navi_icon_char_slot {
+    opacity: 0;
+  }
+  .navi_icon_foreground {
+    position: absolute;
+    inset: 0;
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: start;
+  }
+  .navi_icon_foreground > .navi_text {
+    display: flex;
+    aspect-ratio: 1 / 1;
+    height: 100%;
+    max-height: 1em;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .navi_icon > svg,
+  .navi_icon > img {
+    width: 100%;
+    height: 100%;
+  }
+  .navi_icon[data-width] > svg,
+  .navi_icon[data-width] > img {
+    width: 100%;
+    height: auto;
+  }
+  .navi_icon[data-height] > svg,
+  .navi_icon[data-height] > img {
+    width: auto;
+    height: 100%;
+  }
+`;
+const Icon = ({
+  href,
+  children,
+  className,
+  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",
+  "aria-label": ariaLabel,
+  role,
+  decorative = false,
+  ...props
+}) => {
+  const innerChildren = href ? jsx("svg", {
+    width: "100%",
+    height: "100%",
+    children: jsx("use", {
+      href: href
+    })
+  }) : children;
+  let {
+    box,
+    width,
+    height
+  } = props;
+  if (width !== undefined || height !== undefined) {
+    box = true;
+  }
+  if (box) {
+    return jsx(Box, {
+      ...props,
+      baseClassName: "navi_icon",
+      "data-width": width,
+      "data-height": height,
+      children: innerChildren
+    });
+  }
+  const invisibleText = baseChar.repeat(charWidth);
+  const ariaProps = decorative ? {
+    "aria-hidden": "true"
+  } : {
+    role,
+    "aria-label": ariaLabel
+  };
+  return jsxs(Text, {
+    ...props,
+    ...ariaProps,
+    box: box,
+    className: withPropsClassName("navi_icon", className),
+    "data-icon-char": "",
+    "data-width": width,
+    "data-height": height,
+    children: [jsx("span", {
+      className: "navi_icon_char_slot",
+      "aria-hidden": "true",
+      children: invisibleText
+    }), jsx("span", {
+      className: "navi_icon_foreground",
+      children: jsx(Text, {
+        children: innerChildren
+      })
+    })]
+  });
+};
+
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
     .navi_link {
+      --border-radius: 2px;
+      --outline-color: var(--navi-focus-outline-color);
       --color: rgb(0, 0, 238);
       --color-visited: light-dark(#6a1b9a, #ab47bc);
       --color-active: red;
       --text-decoration: underline;
-      --text-decoration-hover: underline;
+      --text-decoration-hover: var(--text-decoration);
       --cursor: pointer;
     }
   }
 
   .navi_link {
-    position: relative;
-    border-radius: 2px;
-
     --x-color: var(--color);
     --x-color-hover: var(--color-hover, var(--color));
     --x-color-visited: var(--color-visited);
     --x-color-active: var(--color-active);
     --x-text-decoration: var(--text-decoration);
-    --x-text-decoration-hover: var(--text-decoration-hover,);
+    --x-text-decoration-hover: var(--text-decoration-hover);
     --x-cursor: var(--cursor);
 
+    position: relative;
     color: var(--x-color);
     text-decoration: var(--x-text-decoration);
+    border-radius: var(--border-radius);
+    outline-color: var(--outline-color);
     cursor: var(--x-cursor);
   }
   /* Hover */
@@ -12661,6 +13727,10 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     position: relative;
     z-index: 1; /* Ensure focus outline is above other elements */
   }
+  .navi_link[data-focus-visible] {
+    outline-width: 2px;
+    outline-style: solid;
+  }
   /* Visited */
   .navi_link[data-visited] {
     --x-color: var(--x-color-visited);
@@ -12694,9 +13764,18 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   }
 `;
 const LinkManagedByCSSVars = {
-  color: "--color",
-  cursor: "--cursor",
-  textDecoration: "--text-decoration"
+  "outlineColor": "--outline-color",
+  "borderRadius": "--border-radius",
+  "color": "--color",
+  "cursor": "--cursor",
+  "textDecoration": "--text-decoration",
+  ":hover": {
+    color: "--color-hover",
+    textDecoration: "--text-decoration-hover"
+  },
+  ":active": {
+    color: "--color-active"
+  }
 };
 const LinkPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":visited", ":-navi-loading", ":-navi-internal-link", ":-navi-external-link", ":-navi-anchor-link", ":-navi-current-link"];
 const LinkPseudoElements = ["::-navi-loader"];
@@ -12746,7 +13825,6 @@ const LinkPlain = props => {
     rel,
     preventDefault,
     // visual
-    box,
     blankTargetIcon,
     anchorIcon,
     icon,
@@ -12806,8 +13884,6 @@ const LinkPlain = props => {
     // Visual
     ,
     baseClassName: "navi_link",
-    layoutInline: true,
-    layoutColumn: box ? true : undefined,
     managedByCSSVars: LinkManagedByCSSVars,
     pseudoClasses: LinkPseudoClasses,
     pseudoElements: LinkPseudoElements,
@@ -12853,8 +13929,6 @@ const LinkPlain = props => {
 const BlankTargetLinkSvg = () => {
   return jsx("svg", {
     viewBox: "0 0 24 24",
-    width: "100%",
-    height: "100%",
     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",
@@ -12869,8 +13943,6 @@ const BlankTargetLinkSvg = () => {
 const AnchorLinkSvg = () => {
   return jsxs("svg", {
     viewBox: "0 0 24 24",
-    width: "100%",
-    height: "100%",
     xmlns: "http://www.w3.org/2000/svg",
     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",
@@ -12884,8 +13956,6 @@ const AnchorLinkSvg = () => {
 const PhoneSvg = () => {
   return jsx("svg", {
     viewBox: "0 0 24 24",
-    width: "100%",
-    height: "100%",
     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",
@@ -12896,8 +13966,6 @@ const PhoneSvg = () => {
 const SmsSvg = () => {
   return jsx("svg", {
     viewBox: "0 0 24 24",
-    width: "100%",
-    height: "100%",
     xmlns: "http://www.w3.org/2000/svg",
     children: jsx("path", {
       d: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z",
@@ -12908,8 +13976,6 @@ const SmsSvg = () => {
 const EmailSvg = () => {
   return jsxs("svg", {
     viewBox: "0 0 24 24",
-    width: "100%",
-    height: "100%",
     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",
@@ -12929,8 +13995,6 @@ const EmailSvg = () => {
 const GithubSvg = () => {
   return jsx("svg", {
     viewBox: "0 0 24 24",
-    width: "100%",
-    height: "100%",
     xmlns: "http://www.w3.org/2000/svg",
     children: jsx("path", {
       d: "M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z",
@@ -14075,7 +15139,8 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       --width: 13px;
       --height: 13px;
 
-      --outline-color: light-dark(#4476ff, #3b82f6);
+      --outline-color: var(--navi-focus-outline-color);
+      --loader-color: var(--navi-loader-color);
       --border-color: light-dark(#767676, #8e8e93);
       --background-color: white;
       --color: light-dark(#4476ff, #3b82f6);
@@ -14373,7 +15438,7 @@ const InputCheckboxBasic = props => {
     children: [jsx(LoaderBackground, {
       loading: innerLoading,
       inset: -1,
-      color: "var(--navi-loader-color)"
+      color: "var(--loader-color)"
     }), renderCheckboxMemoized, jsx("div", {
       className: "navi_checkbox_field",
       children: jsx("svg", {
@@ -14464,7 +15529,8 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       --width: 13px;
       --height: 13px;
 
-      --outline-color: light-dark(#4476ff, #3b82f6);
+      --outline-color: var(--navi-focus-outline-color);
+      --loader-color: var(--navi-loader-color);
       --border-color: light-dark(#767676, #8e8e93);
       --background-color: white;
       --color: light-dark(#4476ff, #3b82f6);
@@ -14806,7 +15872,7 @@ const InputRadioBasic = props => {
       loading: innerLoading,
       inset: -1,
       targetSelector: ".navi_radio_field",
-      color: "var(--navi-loader-color)"
+      color: "var(--loader-color)"
     }), renderRadioMemoized, jsx("span", {
       className: "navi_radio_field",
       children: jsxs("svg", {
@@ -14851,7 +15917,8 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       --outer-width: calc(var(--border-width) + var(--outline-width));
 
       /* Default */
-      --outline-color: light-dark(#4476ff, #3b82f6);
+      --outline-color: var(--navi-focus-outline-color);
+      --loader-color: var(--navi-loader-color);
       --border-color: light-dark(#767676, #8e8e93);
       --background-color: white;
       --color: currentColor;
@@ -15093,7 +16160,7 @@ const InputTextualBasic = props => {
     ...rest,
     children: [jsx(LoaderBackground, {
       loading: innerLoading,
-      color: "var(--navi-loader-color)",
+      color: "var(--loader-color)",
       inset: -1
     }), renderInputMemoized]
   });
@@ -15454,7 +16521,8 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       --border-width: 1px;
       --border-radius: 2px;
       /* default */
-      --outline-color: light-dark(#4476ff, #3b82f6);
+      --outline-color: var(--navi-focus-outline-color);
+      --loader-color: var(--navi-loader-color);
       --border-color: light-dark(#767676, #8e8e93);
       --background-color: light-dark(#f3f4f6, #2d3748);
       --color: currentColor;
@@ -15497,13 +16565,10 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     --x-color: var(--color);
 
     position: relative;
+    display: inline-flex;
     box-sizing: border-box;
-    width: fit-content;
-    height: fit-content;
     padding: 0;
     flex-direction: inherit;
-    align-items: inherit;
-    justify-content: inherit;
     background: none;
     border: none;
     border-radius: inherit;
@@ -15512,6 +16577,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   }
   .navi_button_content {
     position: relative;
+    box-sizing: border-box;
     padding-top: var(--padding-top, var(--padding-y, var(--padding, 1px)));
     padding-right: var(--padding-right, var(--padding-x, var(--padding, 6px)));
     padding-bottom: var(
@@ -15682,7 +16748,6 @@ const ButtonBasic = props => {
       ...buttonProps,
       as: "span",
       baseClassName: "navi_button_content",
-      layoutInline: true,
       children: [innerChildren, jsx("span", {
         className: "navi_button_shadow"
       })]
@@ -15700,8 +16765,6 @@ const ButtonBasic = props => {
     // style management
     ,
     baseClassName: "navi_button",
-    layoutInline: true,
-    layoutColumn: true,
     managedByCSSVars: ButtonManagedByCSSVars,
     pseudoClasses: ButtonPseudoClasses,
     pseudoElements: ButtonPseudoElements,
@@ -15715,7 +16778,7 @@ const ButtonBasic = props => {
     children: [jsx(LoaderBackground, {
       loading: innerLoading,
       inset: -1,
-      color: "var(--navi-loader-color)"
+      color: "var(--loader-color)"
     }), renderButtonContentMemoized]
   });
 };
@@ -20182,53 +21245,9 @@ const useSignalSync = (value, initialValue = value) => {
   return signal;
 };
 
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_font_sized_svg {
-    display: flex;
-    width: 1em;
-    height: 1em;
-    flex-shrink: 0;
-    align-items: center;
-    justify-self: center;
-    line-height: 1em;
-  }
-`;
-const FontSizedSvg = ({
-  children,
-  ...rest
-}) => {
-  return jsx(Box, {
-    ...rest,
-    as: "span",
-    baseClassName: "navi_font_sized_svg",
-    children: children
-  });
-};
+const FontSizedSvg = () => {};
 
-const IconAndText = ({
-  icon,
-  children,
-  ...rest
-}) => {
-  if (typeof icon === "function") icon = icon({});
-  return jsxs("span", {
-    className: "icon_and_text",
-    ...rest,
-    style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "0.1em",
-      ...rest.style
-    },
-    children: [jsx(FontSizedSvg, {
-      className: "icon",
-      children: icon
-    }), jsx("span", {
-      className: "text",
-      children: children
-    })]
-  });
-};
+const IconAndText = () => {};
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   .svg_mask_content * {
@@ -20296,29 +21315,97 @@ const SVGMaskOverlay = ({
   });
 };
 
+const CSS_VAR_NAME = "--color-contrasting";
+
+const useContrastingColor = (ref) => {
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const lightColor = "var(--navi-color-light)";
+    const darkColor = "var(--navi-color-dark)";
+    const backgroundColor = getComputedStyle(el).backgroundColor;
+    if (!backgroundColor) {
+      el.style.removeProperty(CSS_VAR_NAME);
+      return;
+    }
+    const colorPicked = pickLightOrDark(
+      backgroundColor,
+      lightColor,
+      darkColor,
+      el,
+    );
+    el.style.setProperty(CSS_VAR_NAME, colorPicked);
+  }, []);
+};
+
 installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_count {
-    position: relative;
-    top: -1px;
-    color: rgba(28, 43, 52, 0.4);
+  @layer navi {
+    .navi_badge {
+      --border-radius: 1em;
+    }
+  }
+  .navi_badge {
+    display: inline-block;
+    box-sizing: border-box;
+    min-width: 1.5em;
+    height: 1.5em;
+    max-height: 1.5em;
+    padding-right: var(
+      --padding-right,
+      var(--padding-x, var(--padding, 0.4em))
+    );
+    padding-left: var(--padding-left, var(--padding-x, var(--padding, 0.4em)));
+    color: var(--color, var(--color-contrasting));
+    text-align: center;
+    line-height: 1.5em;
+    vertical-align: middle;
+    border-radius: var(--border-radius, 1em);
   }
 `;
-const Count = ({
+const BadgeManagedByCSSVars = {
+  borderWidth: "--border-width",
+  borderRadius: "--border-radius",
+  paddingRight: "--padding-right",
+  paddingLeft: "--padding-left",
+  backgroundColor: "--background-color",
+  borderColor: "--border-color",
+  color: "--color"
+};
+const BadgeCount = ({
   children,
-  ...rest
+  bold = true,
+  max,
+  ...props
 }) => {
-  return jsxs(Box, {
-    as: "span",
-    baseClassName: ".navi_count",
-    ...rest,
-    children: ["(", children, ")"]
-  });
-};
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
 
-const Image = props => {
-  return jsx(Box, {
+  // Calculer la valeur à afficher en fonction du paramètre max
+  const getDisplayValue = () => {
+    if (max === undefined) {
+      return children;
+    }
+    const numericValue = typeof children === "string" ? parseInt(children, 10) : children;
+    const numericMax = typeof max === "string" ? parseInt(max, 10) : max;
+    if (isNaN(numericValue) || isNaN(numericMax)) {
+      return children;
+    }
+    if (numericValue > numericMax) {
+      return `${numericMax}+`;
+    }
+    return children;
+  };
+  const displayValue = getDisplayValue();
+  useContrastingColor(ref);
+  return jsx(Text, {
     ...props,
-    as: "img"
+    ref: ref,
+    className: "navi_badge",
+    bold: bold,
+    managedByCSSVars: BadgeManagedByCSSVars,
+    children: displayValue
   });
 };
 
@@ -20334,6 +21421,13 @@ const Code = ({
   });
 };
 
+const Image = props => {
+  return jsx(Box, {
+    ...props,
+    as: "img"
+  });
+};
+
 const LinkWithIcon = () => {};
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
@@ -20571,5 +21665,5 @@ const useDependenciesDiff = (inputs) => {
   return diffRef.current;
 };
 
-export { ActionRenderer, ActiveKeyboardShortcuts, Box, Button, CharSlot, Checkbox, CheckboxList, Code, Col, Colgroup, Count, Details, Editable, ErrorBoundaryContext, FontSizedSvg, Form, Icon, IconAndText, Image, Input, Label, Layout, Link, LinkWithIcon, MessageBox, Paragraph, Radio, RadioList, Route, RouteLink, Routes, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, SummaryMarker, Svg, Tab, TabList, Table, TableCell, Tbody, Text, Thead, Title, Tr, UITransition, actionIntegratedVia, addCustomMessage, createAction, createSelectionKeyboardShortcuts, createUniqueValueConstraint, enableDebugActions, enableDebugOnDocumentLoading, forwardActionRequested, goBack, goForward, goTo, installCustomConstraintValidation, isCellSelected, isColumnSelected, isRowSelected, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, setBaseUrl, setupRoutes, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useCellsAndColumns, useDependenciesDiff, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, useUrlSearchParam, valueInLocalStorage };
+export { ActionRenderer, ActiveKeyboardShortcuts, BadgeCount, Box, Button, Checkbox, CheckboxList, Code, Col, Colgroup, Details, Editable, ErrorBoundaryContext, FontSizedSvg, Form, Icon, IconAndText, Image, Input, Label, Layout, Link, LinkWithIcon, MessageBox, Paragraph, Radio, RadioList, Route, RouteLink, Routes, RowNumberCol, RowNumberTableCell, SINGLE_SPACE_CONSTRAINT, SVGMaskOverlay, Select, SelectionContext, SummaryMarker, Svg, Tab, TabList, Table, TableCell, Tbody, Text, Thead, Title, Tr, UITransition, actionIntegratedVia, addCustomMessage, createAction, createSelectionKeyboardShortcuts, createUniqueValueConstraint, enableDebugActions, enableDebugOnDocumentLoading, forwardActionRequested, goBack, goForward, goTo, installCustomConstraintValidation, isCellSelected, isColumnSelected, isRowSelected, openCallout, rawUrlPart, reload, removeCustomMessage, rerunActions, resource, setBaseUrl, setupRoutes, stopLoad, stringifyTableSelectionValue, updateActions, useActionData, useActionStatus, useActiveRouteInfo, useCellsAndColumns, useDependenciesDiff, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useKeyboardShortcuts, useNavState, useRouteStatus, useRunOnMount, useSelectableElement, useSelectionController, useSignalSync, useStateArray, useUrlSearchParam, valueInLocalStorage };
 //# sourceMappingURL=jsenv_navi.js.map