@jsenv/navi 0.12.9 → 0.12.11

package/dist/jsenv_navi.js

@@ -1,5 +1,5 @@
 import { installImportMetaCss } from "./jsenv_navi_side_effects.js";
-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 { createIterableWeakSet, createPubSub, createValueEffect, createStyleController, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, allowWheelThrough, resolveCSSColor, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, activeElementSignal, canInterceptKeys, createGroupTransitionController, getElementSignature, getBorderRadius, getBackground, preventIntermediateScrollbar, createOpacityTransition, stringifyStyle, mergeOneStyle, mergeTwoStyles, 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";
@@ -8734,58 +8734,58 @@ import.meta.css = /* css */ `
   }
 
   .ui_transition,
-  .active_group,
-  .previous_group,
-  .target_slot,
-  .previous_target_slot,
-  .outgoing_slot,
-  .previous_outgoing_slot {
+  .ui_transition_active_group,
+  .ui_transition_previous_group,
+  .ui_transition_target_slot,
+  .ui_transition_previous_target_slot,
+  .ui_transition_outgoing_slot,
+  .ui_transition_previous_outgoing_slot {
     width: 100%;
     height: 100%;
   }
 
-  .target_slot,
-  .outgoing_slot,
-  .previous_target_slot,
-  .previous_outgoing_slot {
+  .ui_transition_target_slot,
+  .ui_transition_outgoing_slot,
+  .ui_transition_previous_target_slot,
+  .ui_transition_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] {
+  .ui_transition_target_slot[data-items-width-overflow],
+  .ui_transition_previous_target_slot[data-items-width-overflow],
+  .ui_transition_previous_target_slot[data-items-width-overflow],
+  .ui_transition_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] {
+  .ui_transition_target_slot[data-items-height-overflow],
+  .ui_transition_previous_slot[data-items-height-overflow],
+  .ui_transition_previous_target_slot[data-items-height-overflow],
+  .ui_transition_previous_outgoing_slot[data-items-height-overflow] {
     --x-align-items: flex-start;
   }
 
-  .active_group {
+  .ui_transition_active_group {
     position: relative;
   }
-  .target_slot {
+  .ui_transition_target_slot {
     position: relative;
   }
-  .outgoing_slot,
-  .previous_outgoing_slot {
+  .ui_transition_outgoing_slot,
+  .ui_transition_previous_outgoing_slot {
     position: absolute;
     top: 0;
     left: 0;
   }
-  .previous_group {
+  .ui_transition_previous_group {
     position: absolute;
     inset: 0;
   }
-  .ui_transition[data-only-previous-group] .previous_group {
+  .ui_transition[data-only-previous-group] .ui_transition_previous_group {
     position: relative;
   }
 
-  .target_slot_background {
+  .ui_transition_target_slot_background {
     position: absolute;
     top: 0;
     left: 0;
@@ -8796,7 +8796,7 @@ import.meta.css = /* css */ `
     background: var(--target-slot-background, transparent);
     pointer-events: none;
   }
-  .ui_transition[data-transitioning] .target_slot_background {
+  .ui_transition[data-transitioning] .ui_transition_target_slot_background {
     display: block;
   }
 `;
@@ -8844,15 +8844,15 @@ const createUITransitionController = (
     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 activeGroup = root.querySelector(".ui_transition_active_group");
+  const targetSlot = root.querySelector(".ui_transition_target_slot");
+  const outgoingSlot = root.querySelector(".ui_transition_outgoing_slot");
+  const previousGroup = root.querySelector(".ui_transition_previous_group");
   const previousTargetSlot = previousGroup?.querySelector(
-    ".previous_target_slot",
+    ".ui_transition_previous_target_slot",
   );
   const previousOutgoingSlot = previousGroup?.querySelector(
-    ".previous_outgoing_slot",
+    ".ui_transition_previous_outgoing_slot",
   );
 
   if (
@@ -8872,7 +8872,7 @@ const createUITransitionController = (
   // 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";
+  targetSlotBackground.className = "ui_transition_target_slot_background";
   activeGroup.insertBefore(targetSlotBackground, targetSlot);
 
   root.style.setProperty("--x-transition-duration", `${duration}ms`);
@@ -9209,6 +9209,9 @@ const createUITransitionController = (
       duration,
       styleSynchronizer: "inline_style",
       onFinish: (targetSlotOpacityTransition) => {
+        targetSlotBackground.style.removeProperty("--target-slot-background");
+        targetSlotBackground.style.removeProperty("--target-slot-width");
+        targetSlotBackground.style.removeProperty("--target-slot-height");
         targetSlotOpacityTransition.cancel();
       },
     });
@@ -9530,6 +9533,8 @@ const UITransition = ({
   debugSize,
   disabled,
   uiTransitionRef,
+  alignX,
+  alignY,
   ...props
 }) => {
   const contentIdRef = useRef(contentId);
@@ -9590,12 +9595,15 @@ const UITransition = ({
     if (disabled) {
       return null;
     }
-    const uiTransition = createUITransitionController(ref.current);
+    const uiTransition = createUITransitionController(ref.current, {
+      alignX,
+      alignY
+    });
     uiTransitionRef.current = uiTransition;
     return () => {
       uiTransition.cleanup();
     };
-  }, [disabled]);
+  }, [disabled, alignX, alignY]);
   if (disabled) {
     return children;
   }
@@ -9609,23 +9617,23 @@ const UITransition = ({
     "data-debug-size": debugSize ? "" : undefined,
     "data-debug-content": debugContent ? "" : undefined,
     children: [jsxs("div", {
-      className: "active_group",
+      className: "ui_transition_active_group",
       children: [jsx("div", {
-        className: "target_slot",
+        className: "ui_transition_target_slot",
         "data-content-id": contentIdRef.current ? contentIdRef.current : undefined,
         children: jsx(UITransitionContentIdContext.Provider, {
           value: uiTransitionContentIdContextValue,
           children: children
         })
       }), jsx("div", {
-        className: "outgoing_slot"
+        className: "ui_transition_outgoing_slot"
       })]
     }), jsxs("div", {
-      className: "previous_group",
+      className: "ui_transition_previous_group",
       children: [jsx("div", {
-        className: "previous_target_slot"
+        className: "ui_transition_previous_target_slot"
       }), jsx("div", {
-        className: "previous_outgoing_slot"
+        className: "ui_transition_previous_outgoing_slot"
       })]
     })]
   });
@@ -10477,11 +10485,6 @@ const VISUAL_PROP_NAME_SET = new Set(Object.keys(VISUAL_PROPS));
 const CONTENT_PROP_NAME_SET = new Set(Object.keys(CONTENT_PROPS));
 const STYLE_PROP_NAME_SET = new Set(Object.keys(All_PROPS));
 
-const HANDLED_BY_VISUAL_CHILD_PROP_SET = new Set([
-  ...INNER_SPACING_PROP_NAME_SET,
-  ...VISUAL_PROP_NAME_SET,
-  ...CONTENT_PROP_NAME_SET,
-]);
 const COPIED_ON_VISUAL_CHILD_PROP_SET = new Set([
   ...LAYOUT_PROP_NAME_SET,
   "expand",
@@ -10491,6 +10494,20 @@ const COPIED_ON_VISUAL_CHILD_PROP_SET = new Set([
   "contentAlignX",
   "contentAlignY",
 ]);
+const HANDLED_BY_VISUAL_CHILD_PROP_SET = new Set([
+  ...INNER_SPACING_PROP_NAME_SET,
+  ...VISUAL_PROP_NAME_SET,
+  ...CONTENT_PROP_NAME_SET,
+]);
+const getVisualChildStylePropStrategy = (name) => {
+  if (COPIED_ON_VISUAL_CHILD_PROP_SET.has(name)) {
+    return "copy";
+  }
+  if (HANDLED_BY_VISUAL_CHILD_PROP_SET.has(name)) {
+    return "forward";
+  }
+  return null;
+};
 
 const isStyleProp = (name) => STYLE_PROP_NAME_SET.has(name);
 
@@ -10522,6 +10539,9 @@ const getStylePropGroup = (name) => {
   return null;
 };
 const getNormalizer = (key) => {
+  if (key === "borderRadius") {
+    return normalizeTypoStyle;
+  }
   const group = getStylePropGroup(key);
   if (group === "margin" || group === "padding") {
     return normalizeSpacingStyle;
@@ -10531,58 +10551,18 @@ const getNormalizer = (key) => {
   }
   return stringifyStyle;
 };
-
-const assignStyle = (
-  styleObject,
-  propValue,
-  propName,
-  styleContext,
-  context = "js",
-) => {
-  if (propValue === undefined) {
-    return;
-  }
-  const { managedByCSSVars } = styleContext;
-  if (!managedByCSSVars) {
-    throw new Error("managedByCSSVars is required in styleContext");
-  }
-  const normalizer = getNormalizer(propName);
-  const getStyle = All_PROPS[propName];
-  if (
-    getStyle === PASS_THROUGH ||
-    // style not listed can be passed through as-is (accentColor, zIndex, ...)
-    getStyle === undefined
-  ) {
-    const cssValue = normalizer(propValue, propName);
-    const cssVar = managedByCSSVars[propName];
-    const mergedValue = mergeOneStyle(
-      styleObject[propName],
-      cssValue,
-      propName,
-      context,
-    );
-    if (cssVar) {
-      styleObject[cssVar] = mergedValue;
-    } else {
-      styleObject[propName] = mergedValue;
-    }
-    return;
-  }
-  const values = getStyle(propValue, styleContext);
-  if (!values) {
-    return;
-  }
-  for (const key of Object.keys(values)) {
-    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] = mergedValue;
-    } else {
-      styleObject[key] = mergedValue;
-    }
+const getHowToHandleStyleProp = (name) => {
+  const getStyle = All_PROPS[name];
+  if (getStyle === PASS_THROUGH) {
+    return null;
   }
+  return getStyle;
+};
+const prepareStyleValue = (existingValue, value, name, context) => {
+  const normalizer = getNormalizer(name);
+  const cssValue = normalizer(value, name);
+  const mergedValue = mergeOneStyle(existingValue, cssValue, name, context);
+  return mergedValue;
 };
 
 // Unified design scale using t-shirt sizes with rem units for accessibility.
@@ -10938,6 +10918,20 @@ const PSEUDO_CLASSES = {
   },
 };
 
+const dispatchNaviPseudoStateEvent = (element, value, previousValue) => {
+  if (!element) {
+    return;
+  }
+  element.dispatchEvent(
+    new CustomEvent("navi_pseudo_state", {
+      detail: {
+        pseudoState: value,
+        previousPseudoState: previousValue,
+      },
+    }),
+  );
+};
+
 const EMPTY_STATE = {};
 const initPseudoStyles = (
   element,
@@ -10946,10 +10940,20 @@ const initPseudoStyles = (
     pseudoState, // ":disabled", ":read-only", ":-navi-loading", etc...
     effect,
     elementToImpact = element,
+    elementListeningPseudoState,
   },
 ) => {
+  const onStateChange = (value, previousValue) => {
+    effect?.(value, previousValue);
+    dispatchNaviPseudoStateEvent(
+      elementListeningPseudoState,
+      value,
+      previousValue,
+    );
+  };
+
   if (!pseudoClasses || pseudoClasses.length === 0) {
-    effect?.(EMPTY_STATE);
+    onStateChange(EMPTY_STATE);
     return () => {};
   }
 
@@ -10995,10 +10999,17 @@ const initPseudoStyles = (
     if (!someChange) {
       return;
     }
-    effect?.(currentState, state);
+    const previousState = state;
     state = currentState;
+    onStateChange(state, previousState);
   };
 
+  element.addEventListener("navi_pseudo_state_check", (event) => {
+    const previousState = event.detail.previousPseudoState;
+    state = event.detail.pseudoState;
+    onStateChange(state, previousState);
+  });
+
   for (const pseudoClass of pseudoClasses) {
     const pseudoClassDefinition = PSEUDO_CLASSES[pseudoClass];
     if (!pseudoClassDefinition) {
@@ -11076,7 +11087,7 @@ const getStyleToApply = (styles, pseudoState, pseudoNamedStyles) => {
   }
   let style = styles || {};
   for (const styleToAdd of styleToAddSet) {
-    style = mergeTwoStyles(style, styleToAdd);
+    style = mergeTwoStyles(style, styleToAdd, "css");
   }
   return style;
 };
@@ -11241,9 +11252,8 @@ const Box = props => {
     layout = getDefaultDisplay(TagName);
   }
   const innerClassName = withPropsClassName(baseClassName, className);
-  const remainingProps = {};
-  const propsToForward = {};
-  const shouldForwardAllToChild = visualSelector && pseudoStateSelector;
+  const selfForwardedProps = {};
+  const childForwardedProps = {};
   {
     const parentLayout = useContext(BoxLayoutContext);
     const styleDeps = [
@@ -11299,66 +11309,112 @@ const Box = props => {
       pseudoElements
     };
     const boxStyles = {};
-    if (baseStyle) {
-      for (const key of baseStyle) {
-        const value = baseStyle[key];
-        styleDeps.push(value);
-        assignStyle(boxStyles, value, key, styleContext);
+    let boxPseudoNamedStyles = PSEUDO_NAMED_STYLES_DEFAULT;
+    const shouldForwardAllToChild = visualSelector && pseudoStateSelector;
+    const addStyle = (value, name, stylesTarget, context) => {
+      styleDeps.push(value); // impact box style -> add to deps
+      const cssVar = managedByCSSVars[name];
+      const mergedValue = prepareStyleValue(stylesTarget[name], value, name, context);
+      if (cssVar) {
+        stylesTarget[cssVar] = mergedValue;
+        return true;
       }
-    }
-    const stylingKeyCandidateArray = Object.keys(rest);
-    const getPropEffect = propName => {
-      if (visualSelector) {
-        if (HANDLED_BY_VISUAL_CHILD_PROP_SET.has(propName)) {
-          return "forward";
-        }
-        if (COPIED_ON_VISUAL_CHILD_PROP_SET.has(propName)) {
-          return "style_and_forward";
-        }
+      stylesTarget[name] = mergedValue;
+      return false;
+    };
+    const addStyleMaybeForwarding = (value, name, stylesTarget, context, visualChildPropStrategy) => {
+      if (!visualChildPropStrategy) {
+        addStyle(value, name, stylesTarget, context);
+        return false;
       }
-      if (isStyleProp(propName)) {
-        return "style";
+      const cssVar = managedByCSSVars[name];
+      if (cssVar) {
+        // css var wins over visual child handling
+        addStyle(value, name, stylesTarget, context);
+        return false;
       }
-      if (propName.startsWith("data-")) {
-        return "use";
+      if (visualChildPropStrategy === "copy") {
+        // we stylyze ourself + forward prop to the child
+        addStyle(value, name, stylesTarget, context);
       }
-      return "forward";
+      return true;
     };
-    const assignStyleFromProp = (propValue, propName, stylesTarget, styleContext) => {
-      const propEffect = getPropEffect(propName);
-      if (propEffect === "ignore") {
+    const assignStyle = (value, name, styleContext, boxStylesTarget, styleOrigin) => {
+      const context = styleOrigin === "base_style" ? "js" : "css";
+      const isCss = styleOrigin === "base_style" || styleOrigin === "style";
+      if (isCss) {
+        addStyle(value, name, boxStylesTarget, context);
         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");
+      const isPseudoStyle = styleOrigin === "pseudo_style";
+      const mightStyle = isStyleProp(name);
+      if (!mightStyle) {
+        // not a style prop what do we do with it?
+        if (shouldForwardAllToChild) {
+          if (isPseudoStyle) ; else {
+            childForwardedProps[name] = value;
+          }
+        } else {
+          if (isPseudoStyle) {
+            console.warn(`unsupported pseudo style key "${name}"`);
+          }
+          selfForwardedProps[name] = value;
+        }
+        return;
       }
-      if (stylesTarget === boxStyles) {
-        if (!shouldForwardAllToChild && !useToStyle) {
-          // we'll put these props on ourselves
-          remainingProps[propName] = propValue;
+      // it's a style prop, we need first to check if we have css var to handle them
+      // otherwise we decide to put it either on self or child
+      const visualChildPropStrategy = visualSelector && getVisualChildStylePropStrategy(name);
+      const getStyle = getHowToHandleStyleProp(name);
+      if (
+      // prop name === css style name
+      !getStyle) {
+        const needForwarding = addStyleMaybeForwarding(value, name, boxStylesTarget, context, visualChildPropStrategy);
+        if (needForwarding) {
+          if (isPseudoStyle) ; else {
+            childForwardedProps[name] = value;
+          }
         }
-        if (shouldForward) {
-          propsToForward[propName] = propValue;
+        return;
+      }
+      const cssValues = getStyle(value, styleContext);
+      if (!cssValues) {
+        return;
+      }
+      let needForwarding = false;
+      for (const styleName of Object.keys(cssValues)) {
+        const cssValue = cssValues[styleName];
+        needForwarding = addStyleMaybeForwarding(cssValue, styleName, boxStylesTarget, context, visualChildPropStrategy);
+      }
+      if (needForwarding) {
+        if (isPseudoStyle) ; else {
+          childForwardedProps[name] = value;
         }
       }
     };
-    for (const key of stylingKeyCandidateArray) {
-      if (key === "ref") {
+    if (baseStyle) {
+      for (const key of baseStyle) {
+        const value = baseStyle[key];
+        assignStyle(value, key, styleContext, boxStyles, "baseStyle");
+      }
+    }
+    const remainingPropKeyArray = Object.keys(rest);
+    for (const propName of remainingPropKeyArray) {
+      if (propName === "ref") {
         // some props not destructured but that are neither
         // style props, nor should be forwarded to the child
         continue;
       }
-      const value = rest[key];
-      assignStyleFromProp(value, key, boxStyles, styleContext);
+      const propValue = rest[propName];
+      assignStyle(propValue, propName, styleContext, boxStyles, "prop");
     }
-    let pseudoNamedStyles = PSEUDO_NAMED_STYLES_DEFAULT;
     if (pseudoStyle) {
+      const assignPseudoStyle = (propValue, propName, pseudoStyleContext, pseudoStylesTarget) => {
+        assignStyle(propValue, propName, pseudoStyleContext, pseudoStylesTarget, "pseudo_style");
+      };
       const pseudoStyleKeys = Object.keys(pseudoStyle);
       if (pseudoStyleKeys.length) {
-        pseudoNamedStyles = {};
+        boxPseudoNamedStyles = {};
         for (const key of pseudoStyleKeys) {
           const pseudoStyleContext = {
             ...styleContext,
@@ -11376,9 +11432,9 @@ const Box = props => {
             const pseudoClassStyle = pseudoStyle[key];
             for (const pseudoClassStyleKey of Object.keys(pseudoClassStyle)) {
               const pseudoClassStyleValue = pseudoClassStyle[pseudoClassStyleKey];
-              assignStyleFromProp(pseudoClassStyleValue, pseudoClassStyleKey, pseudoClassStyles, pseudoStyleContext);
+              assignPseudoStyle(pseudoClassStyleValue, pseudoClassStyleKey, pseudoStyleContext, pseudoClassStyles);
             }
-            pseudoNamedStyles[key] = pseudoClassStyles;
+            boxPseudoNamedStyles[key] = pseudoClassStyles;
             continue;
           }
           // pseudo element
@@ -11388,29 +11444,31 @@ const Box = props => {
             const pseudoElementStyle = pseudoStyle[key];
             for (const pseudoElementStyleKey of Object.keys(pseudoElementStyle)) {
               const pseudoElementStyleValue = pseudoElementStyle[pseudoElementStyleKey];
-              assignStyleFromProp(pseudoElementStyleValue, pseudoElementStyleKey, pseudoElementStyles, pseudoStyleContext);
+              assignPseudoStyle(pseudoElementStyleValue, pseudoElementStyleKey, pseudoStyleContext, pseudoElementStyles);
             }
-            pseudoNamedStyles[key] = pseudoElementStyles;
+            boxPseudoNamedStyles[key] = pseudoElementStyles;
             continue;
           }
           console.warn(`unsupported pseudo style key "${key}"`);
         }
       }
-      remainingProps.pseudoStyle = pseudoStyle;
+      childForwardedProps.pseudoStyle = pseudoStyle;
     }
     if (typeof style === "string") {
-      appendStyles(boxStyles, normalizeStyles(style, "css"), "css");
-      styleDeps.push(style); // impact box style -> add to deps
+      const styleObject = normalizeStyles(style, "css");
+      for (const styleName of Object.keys(styleObject)) {
+        const styleValue = styleObject[styleName];
+        assignStyle(styleValue, styleName, styleContext, boxStyles, "style");
+      }
     } else if (style && typeof style === "object") {
-      for (const key of Object.keys(style)) {
-        const stylePropValue = style[key];
-        assignStyle(boxStyles, stylePropValue, key, styleContext, "css");
-        styleDeps.push(stylePropValue); // impact box style -> add to deps
+      for (const styleName of Object.keys(style)) {
+        const styleValue = style[styleName];
+        assignStyle(styleValue, styleName, styleContext, boxStyles, "style");
       }
     }
     const updateStyle = useCallback(state => {
       const boxEl = ref.current;
-      applyStyle(boxEl, boxStyles, state, pseudoNamedStyles);
+      applyStyle(boxEl, boxStyles, state, boxPseudoNamedStyles);
     }, styleDeps);
     const finalStyleDeps = [pseudoStateSelector, innerPseudoState, updateStyle];
     // By default ":hover", ":active" are not tracked.
@@ -11441,11 +11499,13 @@ const Box = props => {
         return null;
       }
       const pseudoStateEl = pseudoStateSelector ? boxEl.querySelector(pseudoStateSelector) : boxEl;
+      const visualEl = visualSelector ? boxEl.querySelector(visualSelector) : null;
       return initPseudoStyles(pseudoStateEl, {
         pseudoClasses: innerPseudoClasses,
         pseudoState: innerPseudoState,
         effect: updateStyle,
-        elementToImpact: boxEl
+        elementToImpact: boxEl,
+        elementListeningPseudoState: visualEl
       });
     }, finalStyleDeps);
   }
@@ -11456,9 +11516,9 @@ const Box = props => {
   let innerChildren;
   if (hasChildFunction) {
     if (Array.isArray(children)) {
-      innerChildren = children.map(child => typeof child === "function" ? child(propsToForward) : child);
+      innerChildren = children.map(child => typeof child === "function" ? child(childForwardedProps) : child);
     } else if (typeof children === "function") {
-      innerChildren = children(propsToForward);
+      innerChildren = children(childForwardedProps);
     } else {
       innerChildren = children;
     }
@@ -11471,7 +11531,7 @@ const Box = props => {
     "data-layout-inline": inline ? "" : undefined,
     "data-layout-row": row ? "" : undefined,
     "data-layout-column": column ? "" : undefined,
-    ...remainingProps,
+    ...selfForwardedProps,
     children: jsx(BoxLayoutContext.Provider, {
       value: layout,
       children: innerChildren
@@ -16568,10 +16628,9 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     display: inline-flex;
     box-sizing: border-box;
     padding: 0;
-    flex-direction: inherit;
     background: none;
     border: none;
-    border-radius: inherit;
+    border-radius: var(--x-border-radius);
     outline: none;
     cursor: pointer;
   }
@@ -16747,7 +16806,7 @@ const ButtonBasic = props => {
     return jsxs(Box, {
       ...buttonProps,
       as: "span",
-      baseClassName: "navi_button_content",
+      className: "navi_button_content",
       children: [innerChildren, jsx("span", {
         className: "navi_button_shadow"
       })]
@@ -21588,6 +21647,118 @@ const Title = ({
   });
 };
 
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  @layer navi {
+    .navi_dialog_layout {
+      --margin: 30px;
+      --padding: 20px;
+      --background: white;
+      --border-width: 2px;
+      --border-color: lightgrey;
+      --border-radius: 10px;
+      --min-width: 300px;
+      --min-height: auto;
+    }
+  }
+  .navi_dialog_layout {
+    padding-top: var(--margin-top, var(--margin-y, var(--margin)));
+    padding-right: var(--margin-right, var(--margin-x, var(--margin)));
+    padding-bottom: var(--margin-bottom, var(--margin-y, var(--margin)));
+    padding-left: var(--margin-left, var(--margin-x, var(--margin)));
+  }
+
+  .navi_dialog_content {
+    min-width: var(--min-width);
+    min-height: var(--min-height);
+    padding-top: var(--padding-top, var(--padding-y, var(--padding)));
+    padding-right: var(--padding-right, var(--padding-x, var(--padding)));
+    padding-bottom: var(--padding-bottom, var(--padding-y, var(--padding)));
+    padding-left: var(--padding-left, var(--padding-x, var(--padding)));
+    background: var(--background);
+    background-color: var(--background-color, var(--background));
+    border-width: var(--border-width);
+    border-style: solid;
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+  }
+`;
+const DialogManagedByCSSVars = {
+  margin: "--margin",
+  marginTop: "--margin-top",
+  marginBottom: "--margin-bottom",
+  marginLeft: "--margin-left",
+  marginRight: "--margin-right",
+  borderRadius: "--border-radius",
+  borderWidth: "--border-width",
+  borderColor: "--border-color",
+  background: "--background",
+  backgroundColor: "--background-color",
+  padding: "--padding",
+  paddingTop: "--padding-top",
+  paddingBottom: "--padding-bottom",
+  paddingLeft: "--padding-left",
+  paddingRight: "--padding-right",
+  minWidth: "--min-width",
+  minHeight: "--min-height"
+};
+const DialogLayout = ({
+  children,
+  contentAlignX = "center",
+  contentAlignY = "center",
+  ...props
+}) => {
+  return jsx(Box, {
+    baseClassName: "navi_dialog_layout",
+    managedByCSSVars: DialogManagedByCSSVars,
+    visualSelector: ".navi_dialog_content",
+    ...props,
+    children: jsx(Box, {
+      row: true,
+      className: "navi_dialog_content",
+      contentAlignX: contentAlignX,
+      contentAlignY: contentAlignY,
+      children: children
+    })
+  });
+};
+
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  @layer navi {
+    .navi_viewport_layout {
+      --padding: 40px;
+      --background: white;
+    }
+  }
+
+  .navi_viewport_layout {
+    padding-top: var(--padding-top, var(--padding-y, var(--padding)));
+    padding-right: var(--padding-right, var(--padding-x, var(--padding)));
+    padding-bottom: var(--padding-bottom, var(--padding-y, var(--padding)));
+    padding-left: var(--padding-left, var(--padding-x, var(--padding)));
+    background: var(--background);
+  }
+`;
+const ViewportManagedByCSSVars = {
+  padding: "--padding",
+  paddingTop: "--padding-top",
+  paddingBottom: "--padding-bottom",
+  paddingLeft: "--padding-left",
+  paddingRight: "--padding-right",
+  background: "--background"
+};
+const ViewportLayout = props => {
+  return jsx(Box, {
+    row: true,
+    ...props,
+    className: "navi_viewport_layout",
+    managedByCSSVars: ViewportManagedByCSSVars,
+    minWidth: "max-content",
+    minHeight: "max-content",
+    width: "100%",
+    height: "100%"
+  });
+};
+
 const createUniqueValueConstraint = (
   // the set might be incomplete (the front usually don't have the full copy of all the items from the backend)
   // but this is already nice to help user with what we know
@@ -21665,5 +21836,5 @@ const useDependenciesDiff = (inputs) => {
   return diffRef.current;
 };
 
-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 };
+export { ActionRenderer, ActiveKeyboardShortcuts, BadgeCount, Box, Button, Checkbox, CheckboxList, Code, Col, Colgroup, Details, DialogLayout, 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, ViewportLayout, 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