@jsenv/navi 0.12.30 → 0.12.31

package/dist/jsenv_navi.js

@@ -1,8 +1,8 @@
 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, preventIntermediateScrollbar, createOpacityTransition, stringifyStyle, mergeOneStyle, mergeTwoStyles, normalizeStyles, resolveCSSSize, findBefore, findAfter, hasCSSSizeUnit, 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, preventIntermediateScrollbar, createOpacityTransition, stringifyStyle, mergeOneStyle, mergeTwoStyles, normalizeStyles, resolveCSSSize, findBefore, findAfter, hasCSSSizeUnit, pickLightOrDark, resolveColorLuminance, initFocusGroup, elementIsFocusable, 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 { useEffect, useRef, useCallback, useContext, useState, useLayoutEffect, useMemo, useImperativeHandle, useErrorBoundary, useId } from "preact/hooks";
 import { createContext, toChildArray, createRef, cloneElement } from "preact";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
 import { createPortal, forwardRef } from "preact/compat";
@@ -7690,7 +7690,9 @@ const createRoute = (urlPatternInput) => {
     // always remove the wildcard part for URL building since it's optional
     if (relativeUrl.endsWith("/*?")) {
       // Always remove the optional wildcard part for URL building
-      relativeUrl = relativeUrl.replace(/\/\*\?$/, "");
+      relativeUrl = relativeUrl.slice(0, -"/*?".length);
+    } else if (relativeUrl.endsWith("{/}?*")) {
+      relativeUrl = relativeUrl.slice(0, -"{/}?*".length);
     } else {
       // For required wildcards (/*) or other patterns, replace normally
       let wildcardIndex = 0;
@@ -13851,7 +13853,7 @@ const TextBasic = ({
     as: "span",
     baseClassName: "navi_text",
     ...rest,
-    children: rest.as === "pre" ? children : applySpacingOnTextChildren(children, spacing)
+    children: rest.as === "pre" || rest.box || rest.column || rest.row ? children : applySpacingOnTextChildren(children, spacing)
   });
 };
 
@@ -15623,559 +15625,557 @@ const RouteLink = ({
 };
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .action_error {
-    padding: 20px;
-    background: #fdd;
-    border: 1px solid red;
-    margin-top: 0;
-    margin-bottom: 20px;
-  }
-`;
-const renderIdleDefault = () => null;
-const renderLoadingDefault = () => null;
-const renderAbortedDefault = () => null;
-const renderErrorDefault = error => {
-  let routeErrorText = error && error.message ? error.message : error;
-  return jsxs("p", {
-    className: "action_error",
-    children: ["An error occured: ", routeErrorText]
-  });
-};
-const renderCompletedDefault = () => null;
-const ActionRenderer = ({
-  action,
-  children,
-  disabled
-}) => {
-  const {
-    idle: renderIdle = renderIdleDefault,
-    loading: renderLoading = renderLoadingDefault,
-    aborted: renderAborted = renderAbortedDefault,
-    error: renderError = renderErrorDefault,
-    completed: renderCompleted,
-    always: renderAlways
-  } = typeof children === "function" ? {
-    completed: children
-  } : children || {};
-  if (disabled) {
-    return null;
+  .navi_tablist {
+    display: flex;
+    justify-content: space-between;
+    overflow-x: auto;
+    overflow-y: hidden;
   }
-  if (action === undefined) {
-    throw new Error("ActionRenderer requires an action to render, but none was provided.");
+
+  .navi_tablist > ul {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    gap: 0.5rem;
+    list-style: none;
   }
-  const {
-    idle,
-    loading,
-    aborted,
-    error,
-    data
-  } = useActionStatus(action);
-  const UIRenderedPromise = useUIRenderedPromise(action);
-  const [errorBoundary, resetErrorBoundary] = useErrorBoundary();
 
-  // Mark this action as bound to UI components (has renderers)
-  // This tells the action system that errors should be caught and stored
-  // in the action's error state rather than bubbling up
-  useLayoutEffect(() => {
-    if (action) {
-      const {
-        ui
-      } = getActionPrivateProperties(action);
-      ui.hasRenderers = true;
-    }
-  }, [action]);
-  useLayoutEffect(() => {
-    resetErrorBoundary();
-  }, [action, loading, idle, resetErrorBoundary]);
-  useLayoutEffect(() => {
-    UIRenderedPromise.resolve();
-    return () => {
-      actionUIRenderedPromiseWeakMap.delete(action);
-    };
-  }, [action]);
+  .navi_tablist > ul > li {
+    position: relative;
+    display: inline-flex;
+  }
 
-  // If renderAlways is provided, it wins and handles all rendering
-  if (renderAlways) {
-    return renderAlways({
-      idle,
-      loading,
-      aborted,
-      error,
-      data
-    });
+  .navi_tab {
+    display: flex;
+    flex-direction: column;
+    white-space: nowrap;
   }
-  if (idle) {
-    return renderIdle(action);
+
+  .navi_tab_content {
+    display: flex;
+    padding: 0 0.5rem;
+    text-decoration: none;
+    line-height: 30px;
+    border-radius: 6px;
+    transition: background 0.12s ease-out;
   }
-  if (errorBoundary) {
-    return renderError(errorBoundary, "ui_error", action);
+
+  .navi_tab:hover .navi_tab_content {
+    color: #010409;
+    background: #dae0e7;
   }
-  if (error) {
-    return renderError(error, "action_error", action);
+
+  .navi_tab .active_marker {
+    z-index: 1;
+    display: flex;
+    width: 100%;
+    height: 2px;
+    margin-top: 5px;
+    background: transparent;
+    border-radius: 0.1px;
   }
-  if (aborted) {
-    return renderAborted(action);
+
+  /* Hidden bold clone to reserve space for bold width without affecting height */
+  .navi_tab_content_bold_clone {
+    display: block; /* in-flow so it contributes to width */
+    height: 0; /* zero height so it doesn't change layout height */
+    font-weight: 600; /* force bold to compute max width */
+    visibility: hidden; /* not visible */
+    pointer-events: none; /* inert */
+    overflow: hidden; /* avoid any accidental height */
   }
-  let renderCompletedSafe;
-  if (renderCompleted) {
-    renderCompletedSafe = renderCompleted;
-  } else {
-    const {
-      ui
-    } = getActionPrivateProperties(action);
-    if (ui.renderCompleted) {
-      renderCompletedSafe = ui.renderCompleted;
-    } else {
-      renderCompletedSafe = renderCompletedDefault;
-    }
+
+  .navi_tab[aria-selected="true"] .active_marker {
+    background: rgb(205, 52, 37);
   }
-  if (loading) {
-    if (action.canDisplayOldData && data !== undefined) {
-      return renderCompletedSafe(data, action);
-    }
-    return renderLoading(action);
+
+  .navi_tab[aria-selected="true"] .navi_tab_content {
+    font-weight: 600;
   }
-  return renderCompletedSafe(data, action);
+`;
+const TabList = ({
+  children,
+  ...props
+}) => {
+  return jsx(Box, {
+    as: "nav",
+    baseClassName: "navi_tablist",
+    role: "tablist",
+    ...props,
+    children: jsx("ul", {
+      role: "list",
+      children: children.map(child => {
+        return jsx("li", {
+          children: child
+        }, child.props.key);
+      })
+    })
+  });
 };
-const defaultPromise = Promise.resolve();
-defaultPromise.resolve = () => {};
-const actionUIRenderedPromiseWeakMap = new WeakMap();
-const useUIRenderedPromise = action => {
-  if (!action) {
-    return defaultPromise;
-  }
-  const actionUIRenderedPromise = actionUIRenderedPromiseWeakMap.get(action);
-  if (actionUIRenderedPromise) {
-    return actionUIRenderedPromise;
-  }
-  let resolve;
-  const promise = new Promise(res => {
-    resolve = res;
+const Tab = ({
+  children,
+  selected,
+  ...props
+}) => {
+  return jsxs(Box, {
+    baseClassName: "navi_tab",
+    role: "tab",
+    "aria-selected": selected ? "true" : "false",
+    ...props,
+    children: [jsx("div", {
+      className: "navi_tab_content",
+      children: children
+    }), jsx("div", {
+      className: "navi_tab_content_bold_clone",
+      "aria-hidden": "true",
+      children: children
+    }), jsx("span", {
+      className: "active_marker"
+    })]
   });
-  promise.resolve = resolve;
-  actionUIRenderedPromiseWeakMap.set(action, promise);
-  return promise;
 };
 
-const useFocusGroup = (
-  elementRef,
-  { enabled = true, direction, skipTab, loop, name } = {},
-) => {
-  useLayoutEffect(() => {
-    if (!enabled) {
-      return null;
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  @layer navi {
+    label {
+      cursor: pointer;
     }
-    const focusGroup = initFocusGroup(elementRef.current, {
-      direction,
-      skipTab,
-      loop,
-      name,
-    });
-    return focusGroup.cleanup;
-  }, [direction, skipTab, loop, name]);
-};
 
-installImportMetaCss(import.meta);const rightArrowPath = "M680-480L360-160l-80-80 240-240-240-240 80-80 320 320z";
-const downArrowPath = "M480-280L160-600l80-80 240 240 240-240 80 80-320 320z";
-import.meta.css = /* css */`
-  .summary_marker {
-    width: 1em;
-    height: 1em;
-    line-height: 1em;
-  }
-  .summary_marker_svg .arrow {
-    animation-duration: 0.3s;
-    animation-fill-mode: forwards;
-    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-  .summary_marker_svg .arrow[data-animation-target="down"] {
-    animation-name: morph-to-down;
-  }
-  @keyframes morph-to-down {
-    from {
-      d: path("${rightArrowPath}");
-    }
-    to {
-      d: path("${downArrowPath}");
-    }
-  }
-  .summary_marker_svg .arrow[data-animation-target="right"] {
-    animation-name: morph-to-right;
-  }
-  @keyframes morph-to-right {
-    from {
-      d: path("${downArrowPath}");
-    }
-    to {
-      d: path("${rightArrowPath}");
+    label[data-readonly],
+    label[data-disabled] {
+      color: rgba(0, 0, 0, 0.5);
+      cursor: default;
     }
   }
+`;
+const ReportReadOnlyOnLabelContext = createContext();
+const ReportDisabledOnLabelContext = createContext();
+const Label = props => {
+  const {
+    readOnly,
+    disabled,
+    children,
+    ...rest
+  } = props;
+  const [inputReadOnly, setInputReadOnly] = useState(false);
+  const innerReadOnly = readOnly || inputReadOnly;
+  const [inputDisabled, setInputDisabled] = useState(false);
+  const innerDisabled = disabled || inputDisabled;
+  return jsx(Box, {
+    ...rest,
+    as: "label",
+    basePseudoState: {
+      readOnly: innerReadOnly,
+      disabled: innerDisabled
+    },
+    children: jsx(ReportReadOnlyOnLabelContext.Provider, {
+      value: setInputReadOnly,
+      children: jsx(ReportDisabledOnLabelContext.Provider, {
+        value: setInputDisabled,
+        children: children
+      })
+    })
+  });
+};
 
-  .summary_marker_svg .foreground_circle {
-    stroke-dasharray: 503 1507; /* ~25% of circle perimeter */
-    stroke-dashoffset: 0;
-    animation: progress-around-circle 1.5s linear infinite;
-  }
-  @keyframes progress-around-circle {
-    0% {
-      stroke-dashoffset: 0;
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  @layer navi {
+    .navi_checkbox {
+      --outline-offset: 1px;
+      --outline-width: 2px;
+      --border-width: 1px;
+      --border-radius: 2px;
+      --width: 13px;
+      --height: 13px;
+
+      --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);
+      --checkmark-color-light: white;
+      --checkmark-color-dark: rgb(55, 55, 55);
+      --checkmark-color: var(--checkmark-color-light);
+
+      --color-mix-light: black;
+      --color-mix-dark: white;
+      --color-mix: var(--color-mix-light);
+
+      /* Hover */
+      --border-color-hover: color-mix(in srgb, var(--border-color) 60%, black);
+      --border-color-hover-checked: color-mix(
+        in srgb,
+        var(--color) 80%,
+        var(--color-mix)
+      );
+      --background-color-hover-checked: color-mix(
+        in srgb,
+        var(--color) 80%,
+        var(--color-mix)
+      );
+      /* Readonly */
+      --border-color-readonly: color-mix(
+        in srgb,
+        var(--border-color) 30%,
+        white
+      );
+      --border-color-readonly-checked: #d3d3d3;
+      --background-color-readonly-checked: grey;
+      --checkmark-color-readonly: #eeeeee;
+      /* Disabled */
+      --border-color-disabled: var(--border-color-readonly);
+      --background-color-disabled: rgba(248, 248, 248, 0.7);
+      --checkmark-color-disabled: #eeeeee;
+      --border-color-disabled-checked: #d3d3d3;
+      --background-color-disabled-checked: #d3d3d3;
     }
-    100% {
-      stroke-dashoffset: -2010;
+
+    .navi_checkbox[data-dark] {
+      --color-mix: var(--color-mix-dark);
+      --checkmark-color: var(--navi-checkmark-color-dark);
     }
   }
 
-  /* fading and scaling */
-  .summary_marker_svg .arrow {
-    transition: opacity 0.3s ease-in-out;
-    opacity: 1;
-  }
-  .summary_marker_svg .loading_container {
-    transition: transform 0.3s linear;
-    transform: scale(0.3);
-  }
-  .summary_marker_svg .background_circle,
-  .summary_marker_svg .foreground_circle {
-    transition: opacity 0.3s ease-in-out;
-    opacity: 0;
+  .navi_checkbox {
+    position: relative;
+    display: inline-flex;
+    box-sizing: content-box;
+    margin: 3px 3px 3px 4px;
+
+    --x-border-radius: var(--border-radius);
+    --x-outline-offset: var(--outline-offset);
+    --x-outline-width: var(--outline-width);
+    --x-border-width: var(--border-width);
+    --x-width: var(--width);
+    --x-height: var(--height);
+    --x-outline-color: var(--outline-color);
+    --x-background-color: var(--background-color);
+    --x-border-color: var(--border-color);
+    --x-color: var(--color);
+    --x-checkmark-color: var(--checkmark-color);
   }
-  .summary_marker_svg[data-loading] .arrow {
+  .navi_checkbox .navi_native_field {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    border: none;
     opacity: 0;
+    cursor: inherit;
   }
-  .summary_marker_svg[data-loading] .loading_container {
-    transform: scale(1);
+  .navi_checkbox .navi_checkbox_field {
+    display: inline-flex;
+    box-sizing: border-box;
+    width: var(--x-width);
+    height: var(--x-height);
+    background-color: var(--x-background-color);
+    border-width: var(--x-border-width);
+    border-style: solid;
+    border-color: var(--x-border-color);
+    border-radius: var(--x-border-radius);
+    outline-width: var(--x-outline-width);
+    outline-style: none;
+    outline-color: var(--x-outline-color);
+    outline-offset: var(--x-outline-offset);
   }
-  .summary_marker_svg[data-loading] .background_circle {
-    opacity: 0.2;
+  .navi_checkbox_marker {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    stroke: var(--x-checkmark-color);
+    transform: scale(0.5);
+    transition: all 0.15s ease;
+    pointer-events: none;
   }
-  .summary_marker_svg[data-loading] .foreground_circle {
+  .navi_checkbox[data-checked] .navi_checkbox_marker {
     opacity: 1;
+    transform: scale(1);
   }
-`;
-const SummaryMarker = ({
-  open,
-  loading
-}) => {
-  const showLoading = useDebounceTrue(loading, 300);
-  const mountedRef = useRef(false);
-  const prevOpenRef = useRef(open);
-  useLayoutEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-  const shouldAnimate = mountedRef.current && prevOpenRef.current !== open;
-  prevOpenRef.current = open;
-  return jsx("span", {
-    className: "summary_marker",
-    children: jsxs("svg", {
-      className: "summary_marker_svg",
-      viewBox: "0 -960 960 960",
-      xmlns: "http://www.w3.org/2000/svg",
-      "data-loading": open ? showLoading || undefined : undefined,
-      children: [jsxs("g", {
-        className: "loading_container",
-        "transform-origin": "480px -480px",
-        children: [jsx("circle", {
-          className: "background_circle",
-          cx: "480",
-          cy: "-480",
-          r: "320",
-          stroke: "currentColor",
-          fill: "none",
-          strokeWidth: "60",
-          opacity: "0.2"
-        }), jsx("circle", {
-          className: "foreground_circle",
-          cx: "480",
-          cy: "-480",
-          r: "320",
-          stroke: "currentColor",
-          fill: "none",
-          strokeWidth: "60",
-          strokeLinecap: "round",
-          strokeDasharray: "503 1507"
-        })]
-      }), jsx("g", {
-        className: "arrow_container",
-        "transform-origin": "480px -480px",
-        children: jsx("path", {
-          className: "arrow",
-          fill: "currentColor",
-          "data-animation-target": shouldAnimate ? open ? "down" : "right" : undefined,
-          d: open ? downArrowPath : rightArrowPath
-        })
-      })]
-    })
-  });
-};
 
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_details {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
+  /* Focus */
+  .navi_checkbox[data-focus-visible] .navi_checkbox_field {
+    outline-style: solid;
   }
-
-  .navi_details > summary {
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: column;
-    cursor: pointer;
-    user-select: none;
+  /* Hover */
+  .navi_checkbox[data-hover] {
+    --x-border-color: var(--border-color-hover);
   }
-  .summary_body {
-    display: flex;
-    width: 100%;
-    flex-direction: row;
-    align-items: center;
-    gap: 0.2em;
+  .navi_checkbox[data-checked][data-hover] {
+    --x-border-color: var(--border-color-hover-checked);
+    --x-background-color: var(--background-color-hover-checked);
   }
-  .summary_label {
-    display: flex;
-    padding-right: 10px;
-    flex: 1;
-    align-items: center;
-    gap: 0.2em;
+  /* Checked */
+  .navi_checkbox[data-checked] {
+    --x-background-color: var(--x-color);
+    --x-border-color: var(--x-color);
   }
-
-  .navi_details > summary:focus {
-    z-index: 1;
+  /* Readonly */
+  .navi_checkbox[data-readonly],
+  .navi_checkbox[data-readonly][data-hover] {
+    --x-border-color: var(--border-color-readonly);
+    --x-background-color: var(--background-color-readonly);
+  }
+  .navi_checkbox[data-readonly][data-checked] {
+    --x-border-color: var(--border-color-readonly-checked);
+    --x-background-color: var(--background-color-readonly-checked);
+    --x-checkmark-color: var(--checkmark-color-readonly);
+  }
+  /* Disabled */
+  .navi_checkbox[data-disabled] {
+    --x-border-color: var(--border-color-disabled);
+    --x-background-color: var(--background-color-disabled);
+  }
+  .navi_checkbox[data-disabled][data-checked] {
+    --x-border-color: var(--border-color-disabled-checked);
+    --x-background-color: var(--background-color-disabled-checked);
+    --x-checkmark-color: var(--checkmark-color-disabled);
   }
 `;
-const Details = forwardRef((props, ref) => {
-  return renderActionableComponent(props, ref);
-});
-const DetailsBasic = forwardRef((props, ref) => {
+const InputCheckbox = props => {
   const {
-    id,
-    label = "Summary",
-    open,
-    loading,
-    className,
-    focusGroup,
-    focusGroupDirection,
-    arrowKeyShortcuts = true,
-    openKeyShortcut = "ArrowRight",
-    closeKeyShortcut = "ArrowLeft",
-    onToggle,
-    children,
-    ...rest
+    value = "on"
   } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  const [navState, setNavState] = useNavState(id);
-  const [innerOpen, innerOpenSetter] = useState(open || navState);
-  useFocusGroup(innerRef, {
-    enabled: focusGroup,
-    name: typeof focusGroup === "string" ? focusGroup : undefined,
-    direction: focusGroupDirection
+  const uiStateController = useUIStateController(props, "checkbox", {
+    statePropName: "checked",
+    defaultStatePropName: "defaultChecked",
+    fallbackState: false,
+    getStateFromProp: checked => checked ? value : undefined,
+    getPropFromState: Boolean
   });
+  const uiState = useUIState(uiStateController);
+  const checkbox = renderActionableComponent(props, {
+    Basic: InputCheckboxBasic,
+    WithAction: InputCheckboxWithAction,
+    InsideForm: InputCheckboxInsideForm
+  });
+  return jsx(UIStateControllerContext.Provider, {
+    value: uiStateController,
+    children: jsx(UIStateContext.Provider, {
+      value: uiState,
+      children: checkbox
+    })
+  });
+};
+const CheckboxStyleCSSVars = {
+  "outlineWidth": "--outline-width",
+  "borderWidth": "--border-width",
+  "borderRadius": "--border-radius",
+  "backgroundColor": "--background-color",
+  "borderColor": "--border-color",
+  "color": "--color",
+  ":hover": {
+    backgroundColor: "--background-color-hover",
+    borderColor: "--border-color-hover",
+    color: "--color-hover"
+  },
+  ":active": {
+    borderColor: "--border-color-active"
+  },
+  ":read-only": {
+    backgroundColor: "--background-color-readonly",
+    borderColor: "--border-color-readonly",
+    color: "--color-readonly"
+  },
+  ":disabled": {
+    backgroundColor: "--background-color-disabled",
+    borderColor: "--border-color-disabled",
+    color: "--color-disabled"
+  }
+};
+const CheckboxPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":checked", ":-navi-loading"];
+const CheckboxPseudoElements = ["::-navi-loader", "::-navi-checkmark"];
+const InputCheckboxBasic = props => {
+  const contextFieldName = useContext(FieldNameContext);
+  const contextReadOnly = useContext(ReadOnlyContext);
+  const contextDisabled = useContext(DisabledContext);
+  const contextRequired = useContext(RequiredContext);
+  const contextLoading = useContext(LoadingContext);
+  const loadingElement = useContext(LoadingElementContext);
+  const uiStateController = useContext(UIStateControllerContext);
+  const uiState = useContext(UIStateContext);
+  const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
+  const reportDisabledOnLabel = useContext(ReportDisabledOnLabelContext);
+  const {
+    /* eslint-disable no-unused-vars */
+    type,
+    defaultChecked,
+    /* eslint-enable no-unused-vars */
 
-  /**
-   * Browser will dispatch "toggle" event even if we set open={true}
-   * When rendering the component for the first time
-   * We have to ensure the initial "toggle" event is ignored.
-   *
-   * If we don't do that code will think the details has changed and run logic accordingly
-   * For example it will try to navigate to the current url while we are already there
-   *
-   * See:
-   * - https://techblog.thescore.com/2024/10/08/why-we-decided-to-change-how-the-details-element-works/
-   * - https://github.com/whatwg/html/issues/4500
-   * - https://stackoverflow.com/questions/58942600/react-html-details-toggles-uncontrollably-when-starts-open
-   *
-   */
-
-  const summaryRef = useRef(null);
-  useKeyboardShortcuts(innerRef, [{
-    key: openKeyShortcut,
-    enabled: arrowKeyShortcuts,
-    when: e => document.activeElement === summaryRef.current &&
-    // avoid handling openKeyShortcut twice when keydown occurs inside nested details
-    !e.defaultPrevented,
-    action: e => {
-      const details = innerRef.current;
-      if (!details.open) {
-        e.preventDefault();
-        details.open = true;
-        return;
-      }
-      const summary = summaryRef.current;
-      const firstFocusableElementInDetails = findAfter(summary, elementIsFocusable, {
-        root: details
-      });
-      if (!firstFocusableElementInDetails) {
-        return;
-      }
+    name,
+    readOnly,
+    disabled,
+    required,
+    loading,
+    autoFocus,
+    constraints = [],
+    onClick,
+    onInput,
+    color,
+    ...rest
+  } = props;
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
+  const innerName = name || contextFieldName;
+  const innerDisabled = disabled || contextDisabled;
+  const innerRequired = required || contextRequired;
+  const innerLoading = loading || contextLoading && loadingElement === ref.current;
+  const innerReadOnly = readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
+  reportReadOnlyOnLabel?.(innerReadOnly);
+  reportDisabledOnLabel?.(innerDisabled);
+  useAutoFocus(ref, autoFocus);
+  useConstraints(ref, constraints);
+  const checked = Boolean(uiState);
+  const innerOnClick = useStableCallback(e => {
+    if (innerReadOnly) {
       e.preventDefault();
-      firstFocusableElementInDetails.focus();
     }
-  }, {
-    key: closeKeyShortcut,
-    enabled: arrowKeyShortcuts,
-    when: () => {
-      const details = innerRef.current;
-      return details.open;
+    onClick?.(e);
+  });
+  const innerOnInput = useStableCallback(e => {
+    const checkbox = e.target;
+    const checkboxIsChecked = checkbox.checked;
+    uiStateController.setUIState(checkboxIsChecked, e);
+    onInput?.(e);
+  });
+  const renderCheckbox = checkboxProps => jsx(Box, {
+    ...checkboxProps,
+    as: "input",
+    ref: ref,
+    type: "checkbox",
+    name: innerName,
+    checked: checked,
+    required: innerRequired,
+    baseClassName: "navi_native_field",
+    "data-callout-arrow-x": "center",
+    onClick: innerOnClick,
+    onInput: innerOnInput,
+    onresetuistate: e => {
+      uiStateController.resetUIState(e);
     },
-    action: e => {
-      const details = innerRef.current;
-      const summary = summaryRef.current;
-      if (document.activeElement === summary) {
-        e.preventDefault();
-        summary.focus();
-        details.open = false;
-      } else {
-        e.preventDefault();
-        summary.focus();
-      }
+    onsetuistate: e => {
+      uiStateController.setUIState(e.detail.value, e);
     }
-  }]);
-  const mountedRef = useRef(false);
-  useEffect(() => {
-    mountedRef.current = true;
-  }, []);
-  return jsxs("details", {
+  });
+  const renderCheckboxMemoized = useCallback(renderCheckbox, [innerName, checked, innerRequired]);
+  useLayoutEffect(() => {
+    const naviCheckbox = ref.current;
+    const lightColor = "var(--checkmark-color-light)";
+    const darkColor = "var(--checkmark-color-dark)";
+    const colorPicked = pickLightOrDark("var(--color)", lightColor, darkColor, naviCheckbox);
+    if (colorPicked === lightColor) {
+      naviCheckbox.removeAttribute("data-dark");
+    } else {
+      naviCheckbox.setAttribute("data-dark", "");
+    }
+  }, [color]);
+  return jsxs(Box, {
+    as: "span",
     ...rest,
-    ref: innerRef,
-    id: id,
-    className: ["navi_details", ...(className ? className.split(" ") : [])].join(" "),
-    onToggle: e => {
-      const isOpen = e.newState === "open";
-      if (mountedRef.current) {
-        if (isOpen) {
-          innerOpenSetter(true);
-          setNavState(true);
-        } else {
-          innerOpenSetter(false);
-          setNavState(undefined);
-        }
-      }
-      onToggle?.(e);
+    ref: ref,
+    baseClassName: "navi_checkbox",
+    pseudoStateSelector: ".navi_native_field",
+    styleCSSVars: CheckboxStyleCSSVars,
+    pseudoClasses: CheckboxPseudoClasses,
+    pseudoElements: CheckboxPseudoElements,
+    basePseudoState: {
+      ":read-only": innerReadOnly,
+      ":disabled": innerDisabled,
+      ":-navi-loading": innerLoading
     },
-    open: innerOpen,
-    children: [jsx("summary", {
-      ref: summaryRef,
-      children: jsxs("div", {
-        className: "summary_body",
-        children: [jsx(SummaryMarker, {
-          open: innerOpen,
-          loading: loading
-        }), jsx("div", {
-          className: "summary_label",
-          children: label
-        })]
+    color: color,
+    hasChildFunction: true,
+    children: [jsx(LoaderBackground, {
+      loading: innerLoading,
+      inset: -1,
+      color: "var(--loader-color)"
+    }), renderCheckboxMemoized, jsx("div", {
+      className: "navi_checkbox_field",
+      children: jsx("svg", {
+        viewBox: "0 0 12 12",
+        "aria-hidden": "true",
+        className: "navi_checkbox_marker",
+        children: jsx("path", {
+          d: "M10.5 2L4.5 9L1.5 5.5",
+          fill: "none",
+          strokeWidth: "2"
+        })
       })
-    }), children]
+    })]
   });
-});
-forwardRef((props, ref) => {
+};
+const InputCheckboxWithAction = props => {
+  const uiStateController = useContext(UIStateControllerContext);
+  const uiState = useContext(UIStateContext);
   const {
     action,
-    loading,
-    onToggle,
+    onCancel,
+    onChange,
+    actionErrorEffect,
     onActionPrevented,
     onActionStart,
+    onActionAbort,
     onActionError,
     onActionEnd,
-    children,
+    loading,
     ...rest
   } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  const effectiveAction = useAction(action);
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
+  const [actionBoundToUIState] = useActionBoundToOneParam(action, uiState);
   const {
     loading: actionLoading
-  } = useActionStatus(effectiveAction);
-  const executeAction = useExecuteAction(innerRef, {
-    // the error will be displayed by actionRenderer inside <details>
-    errorEffect: "none"
+  } = useActionStatus(actionBoundToUIState);
+  const executeAction = useExecuteAction(ref, {
+    errorEffect: actionErrorEffect
   });
-  useActionEvents(innerRef, {
-    onPrevented: onActionPrevented,
-    onAction: e => {
-      executeAction(e);
+
+  // In this situation updating the ui state === calling associated action
+  // so cance/abort/error have to revert the ui state to the one before user interaction
+  // to show back the real state of the checkbox (not the one user tried to set)
+  useActionEvents(ref, {
+    onCancel: (e, reason) => {
+      if (reason === "blur_invalid") {
+        return;
+      }
+      uiStateController.resetUIState(e);
+      onCancel?.(e, reason);
     },
+    onPrevented: onActionPrevented,
+    onAction: executeAction,
     onStart: onActionStart,
-    onError: onActionError,
-    onEnd: onActionEnd
+    onAbort: e => {
+      uiStateController.resetUIState(e);
+      onActionAbort?.(e);
+    },
+    onError: e => {
+      uiStateController.resetUIState(e);
+      onActionError?.(e);
+    },
+    onEnd: e => {
+      onActionEnd?.(e);
+    }
   });
-  return jsx(DetailsBasic, {
+  return jsx(InputCheckboxBasic, {
+    "data-action": actionBoundToUIState.name,
     ...rest,
-    ref: innerRef,
+    ref: ref,
     loading: loading || actionLoading,
-    onToggle: toggleEvent => {
-      const isOpen = toggleEvent.newState === "open";
-      if (isOpen) {
-        requestAction(toggleEvent.target, effectiveAction, {
-          event: toggleEvent,
-          method: "run"
-        });
-      } else {
-        effectiveAction.abort();
-      }
-      onToggle?.(toggleEvent);
-    },
-    children: jsx(ActionRenderer, {
-      action: effectiveAction,
-      children: children
-    })
-  });
-});
-
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  @layer navi {
-    label {
-      cursor: pointer;
-    }
-
-    label[data-readonly],
-    label[data-disabled] {
-      color: rgba(0, 0, 0, 0.5);
-      cursor: default;
+    onChange: e => {
+      requestAction(e.target, actionBoundToUIState, {
+        event: e
+      });
+      onChange?.(e);
     }
-  }
-`;
-const ReportReadOnlyOnLabelContext = createContext();
-const ReportDisabledOnLabelContext = createContext();
-const Label = props => {
-  const {
-    readOnly,
-    disabled,
-    children,
-    ...rest
-  } = props;
-  const [inputReadOnly, setInputReadOnly] = useState(false);
-  const innerReadOnly = readOnly || inputReadOnly;
-  const [inputDisabled, setInputDisabled] = useState(false);
-  const innerDisabled = disabled || inputDisabled;
-  return jsx(Box, {
-    ...rest,
-    as: "label",
-    basePseudoState: {
-      readOnly: innerReadOnly,
-      disabled: innerDisabled
-    },
-    children: jsx(ReportReadOnlyOnLabelContext.Provider, {
-      value: setInputReadOnly,
-      children: jsx(ReportDisabledOnLabelContext.Provider, {
-        value: setInputDisabled,
-        children: children
-      })
-    })
   });
 };
+const InputCheckboxInsideForm = InputCheckboxBasic;
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
-    .navi_checkbox {
+    .navi_radio {
       --outline-offset: 1px;
       --outline-width: 2px;
-      --border-width: 1px;
-      --border-radius: 2px;
       --width: 13px;
       --height: 13px;
 
@@ -16184,12 +16184,11 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       --border-color: light-dark(#767676, #8e8e93);
       --background-color: white;
       --color: light-dark(#4476ff, #3b82f6);
-      --checkmark-color-light: white;
-      --checkmark-color-dark: rgb(55, 55, 55);
-      --checkmark-color: var(--checkmark-color-light);
+      --radiomark-color: var(--color);
+      --border-color-checked: var(--color);
 
-      --color-mix-light: black;
-      --color-mix-dark: white;
+      --color-mix-light: white;
+      --color-mix-dark: black;
       --color-mix: var(--color-mix-light);
 
       /* Hover */
@@ -16199,7 +16198,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
         var(--color) 80%,
         var(--color-mix)
       );
-      --background-color-hover-checked: color-mix(
+      --radiomark-color-hover: color-mix(
         in srgb,
         var(--color) 80%,
         var(--color-mix)
@@ -16210,30 +16209,31 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
         var(--border-color) 30%,
         white
       );
+      --background-color-readonly: var(--background-color);
+      --radiomark-color-readonly: grey;
       --border-color-readonly-checked: #d3d3d3;
-      --background-color-readonly-checked: grey;
-      --checkmark-color-readonly: #eeeeee;
+      --background-color-readonly-checked: #d3d3d3;
       /* Disabled */
       --border-color-disabled: var(--border-color-readonly);
       --background-color-disabled: rgba(248, 248, 248, 0.7);
-      --checkmark-color-disabled: #eeeeee;
-      --border-color-disabled-checked: #d3d3d3;
-      --background-color-disabled-checked: #d3d3d3;
+      --radiomark-color-disabled: #d3d3d3;
+      --border-color-checked-disabled: #d3d3d3;
+      --background-color-disabled-checked: var(--background-color);
     }
 
-    .navi_checkbox[data-dark] {
+    .navi_radio[data-dark] {
       --color-mix: var(--color-mix-dark);
-      --checkmark-color: var(--navi-checkmark-color-dark);
     }
   }
 
-  .navi_checkbox {
+  .navi_radio {
     position: relative;
     display: inline-flex;
     box-sizing: content-box;
-    margin: 3px 3px 3px 4px;
+    margin-top: 3px;
+    margin-right: 3px;
+    margin-left: 5px;
 
-    --x-border-radius: var(--border-radius);
     --x-outline-offset: var(--outline-offset);
     --x-outline-width: var(--outline-width);
     --x-border-width: var(--border-width);
@@ -16243,111 +16243,128 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     --x-background-color: var(--background-color);
     --x-border-color: var(--border-color);
     --x-color: var(--color);
-    --x-checkmark-color: var(--checkmark-color);
+    --x-radiomark-color: var(--radiomark-color);
   }
-  .navi_checkbox .navi_native_field {
+  .navi_radio .navi_native_field {
     position: absolute;
     inset: 0;
     margin: 0;
     padding: 0;
-    border: none;
     opacity: 0;
     cursor: inherit;
   }
-  .navi_checkbox .navi_checkbox_field {
+  .navi_radio .navi_radio_field {
     display: inline-flex;
     box-sizing: border-box;
     width: var(--x-width);
     height: var(--x-height);
-    background-color: var(--x-background-color);
-    border-width: var(--x-border-width);
-    border-style: solid;
-    border-color: var(--x-border-color);
-    border-radius: var(--x-border-radius);
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
     outline-width: var(--x-outline-width);
     outline-style: none;
     outline-color: var(--x-outline-color);
     outline-offset: var(--x-outline-offset);
   }
-  .navi_checkbox_marker {
+  .navi_radio_field svg {
+    overflow: visible;
+  }
+  .navi_radio_border {
+    fill: var(--x-background-color);
+    stroke: var(--x-border-color);
+  }
+  .navi_radio_marker {
     width: 100%;
     height: 100%;
     opacity: 0;
-    stroke: var(--x-checkmark-color);
-    transform: scale(0.5);
-    transition: all 0.15s ease;
+    fill: var(--x-radiomark-color);
+    transform: scale(0.3);
+    transform-origin: center;
     pointer-events: none;
   }
-  .navi_checkbox[data-checked] .navi_checkbox_marker {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  /* Focus */
-  .navi_checkbox[data-focus-visible] .navi_checkbox_field {
-    outline-style: solid;
+  .navi_radio_dashed_border {
+    display: none;
+  }
+  .navi_radio[data-transition] .navi_radio_marker {
+    transition: all 0.15s ease;
+  }
+  .navi_radio[data-transition] .navi_radio_dashed_border {
+    transition: all 0.15s ease;
+  }
+  .navi_radio[data-transition] .navi_radio_border {
+    transition: all 0.15s ease;
+  }
+
+  /* Focus */
+  .navi_radio[data-focus-visible] .navi_radio_field {
+    outline-style: solid;
   }
   /* Hover */
-  .navi_checkbox[data-hover] {
+  .navi_radio[data-hover] {
     --x-border-color: var(--border-color-hover);
-  }
-  .navi_checkbox[data-checked][data-hover] {
-    --x-border-color: var(--border-color-hover-checked);
-    --x-background-color: var(--background-color-hover-checked);
+    --x-radiomark-color: var(--radiomark-color-hover);
   }
   /* Checked */
-  .navi_checkbox[data-checked] {
-    --x-background-color: var(--x-color);
-    --x-border-color: var(--x-color);
+  .navi_radio[data-checked] {
+    --x-border-color: var(--border-color-checked);
+  }
+  .navi_radio[data-checked] .navi_radio_marker {
+    opacity: 1;
+    transform: scale(1);
+  }
+  .navi_radio[data-hover][data-checked] {
+    --x-border-color: var(--border-color-hover-checked);
   }
   /* Readonly */
-  .navi_checkbox[data-readonly],
-  .navi_checkbox[data-readonly][data-hover] {
-    --x-border-color: var(--border-color-readonly);
+  .navi_radio[data-readonly] {
     --x-background-color: var(--background-color-readonly);
+    --x-border-color: var(--border-color-readonly);
+    --x-radiomark-color: var(--radiomark-color-readonly);
   }
-  .navi_checkbox[data-readonly][data-checked] {
-    --x-border-color: var(--border-color-readonly-checked);
+  .navi_radio[data-readonly] .navi_radio_dashed_border {
+    display: none;
+  }
+  .navi_radio[data-readonly][data-checked] {
     --x-background-color: var(--background-color-readonly-checked);
-    --x-checkmark-color: var(--checkmark-color-readonly);
+    --x-border-color: var(--border-color-readonly-checked);
+    --x-radiomark-color: var(--radiomark-color-readonly);
   }
   /* Disabled */
-  .navi_checkbox[data-disabled] {
-    --x-border-color: var(--border-color-disabled);
+  .navi_radio[data-disabled] {
     --x-background-color: var(--background-color-disabled);
+    --x-border-color: var(--border-color-disabled);
+    --x-radiomark-color: var(--radiomark-color-disabled);
   }
-  .navi_checkbox[data-disabled][data-checked] {
-    --x-border-color: var(--border-color-disabled-checked);
-    --x-background-color: var(--background-color-disabled-checked);
-    --x-checkmark-color: var(--checkmark-color-disabled);
+  .navi_radio[data-disabled][data-checked] {
+    --x-border-color: var(--border-color-disabled);
+    --x-radiomark-color: var(--radiomark-color-disabled);
   }
 `;
-const InputCheckbox = props => {
+const InputRadio = props => {
   const {
     value = "on"
   } = props;
-  const uiStateController = useUIStateController(props, "checkbox", {
+  const uiStateController = useUIStateController(props, "radio", {
     statePropName: "checked",
-    defaultStatePropName: "defaultChecked",
     fallbackState: false,
     getStateFromProp: checked => checked ? value : undefined,
     getPropFromState: Boolean
   });
   const uiState = useUIState(uiStateController);
-  const checkbox = renderActionableComponent(props, {
-    Basic: InputCheckboxBasic,
-    WithAction: InputCheckboxWithAction,
-    InsideForm: InputCheckboxInsideForm
+  const radio = renderActionableComponent(props, {
+    Basic: InputRadioBasic,
+    WithAction: InputRadioWithAction,
+    InsideForm: InputRadioInsideForm
   });
   return jsx(UIStateControllerContext.Provider, {
     value: uiStateController,
     children: jsx(UIStateContext.Provider, {
       value: uiState,
-      children: checkbox
+      children: radio
     })
   });
 };
-const CheckboxStyleCSSVars = {
+const RadioStyleCSSVars = {
   "outlineWidth": "--outline-width",
   "borderWidth": "--border-width",
   "borderRadius": "--border-radius",
@@ -16373,15 +16390,15 @@ const CheckboxStyleCSSVars = {
     color: "--color-disabled"
   }
 };
-const CheckboxPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":checked", ":-navi-loading"];
-const CheckboxPseudoElements = ["::-navi-loader", "::-navi-checkmark"];
-const InputCheckboxBasic = props => {
-  const contextFieldName = useContext(FieldNameContext);
+const RadioPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":checked", ":-navi-loading"];
+const RadioPseudoElements = ["::-navi-loader", "::-navi-radiomark"];
+const InputRadioBasic = props => {
+  const contextName = useContext(FieldNameContext);
   const contextReadOnly = useContext(ReadOnlyContext);
   const contextDisabled = useContext(DisabledContext);
   const contextRequired = useContext(RequiredContext);
   const contextLoading = useContext(LoadingContext);
-  const loadingElement = useContext(LoadingElementContext);
+  const contextLoadingElement = useContext(LoadingElementContext);
   const uiStateController = useContext(UIStateControllerContext);
   const uiState = useContext(UIStateContext);
   const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
@@ -16389,7 +16406,6 @@ const InputCheckboxBasic = props => {
   const {
     /* eslint-disable no-unused-vars */
     type,
-    defaultChecked,
     /* eslint-enable no-unused-vars */
 
     name,
@@ -16406,35 +16422,64 @@ const InputCheckboxBasic = props => {
   } = props;
   const defaultRef = useRef();
   const ref = props.ref || defaultRef;
-  const innerName = name || contextFieldName;
+  const innerName = name || contextName;
   const innerDisabled = disabled || contextDisabled;
   const innerRequired = required || contextRequired;
-  const innerLoading = loading || contextLoading && loadingElement === ref.current;
+  const innerLoading = loading || contextLoading && contextLoadingElement === ref.current;
   const innerReadOnly = readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
   reportReadOnlyOnLabel?.(innerReadOnly);
   reportDisabledOnLabel?.(innerDisabled);
   useAutoFocus(ref, autoFocus);
   useConstraints(ref, constraints);
   const checked = Boolean(uiState);
+  // we must first dispatch an event to inform all other radios they where unchecked
+  // this way each other radio uiStateController knows thery are unchecked
+  // we do this on "input"
+  // but also when we are becoming checked from outside (hence the useLayoutEffect)
+  const updateOtherRadiosInGroup = () => {
+    const thisRadio = ref.current;
+    const radioList = thisRadio.closest("[data-radio-list]");
+    if (!radioList) {
+      return;
+    }
+    const radioInputs = radioList.querySelectorAll(`input[type="radio"][name="${thisRadio.name}"]`);
+    for (const radioInput of radioInputs) {
+      if (radioInput === thisRadio) {
+        continue;
+      }
+      radioInput.dispatchEvent(new CustomEvent("setuistate", {
+        detail: false
+      }));
+    }
+  };
+  useLayoutEffect(() => {
+    if (checked) {
+      updateOtherRadiosInGroup();
+    }
+  }, [checked]);
+  const innerOnInput = useStableCallback(e => {
+    const radio = e.target;
+    const radioIsChecked = radio.checked;
+    if (radioIsChecked) {
+      updateOtherRadiosInGroup();
+    }
+    uiStateController.setUIState(radioIsChecked, e);
+    onInput?.(e);
+  });
   const innerOnClick = useStableCallback(e => {
     if (innerReadOnly) {
       e.preventDefault();
     }
     onClick?.(e);
   });
-  const innerOnInput = useStableCallback(e => {
-    const checkbox = e.target;
-    const checkboxIsChecked = checkbox.checked;
-    uiStateController.setUIState(checkboxIsChecked, e);
-    onInput?.(e);
-  });
-  const renderCheckbox = checkboxProps => jsx(Box, {
-    ...checkboxProps,
+  const renderRadio = radioProps => jsx(Box, {
+    ...radioProps,
     as: "input",
     ref: ref,
-    type: "checkbox",
+    type: "radio",
     name: innerName,
     checked: checked,
+    disabled: innerDisabled,
     required: innerRequired,
     baseClassName: "navi_native_field",
     "data-callout-arrow-x": "center",
@@ -16447,27 +16492,25 @@ const InputCheckboxBasic = props => {
       uiStateController.setUIState(e.detail.value, e);
     }
   });
-  const renderCheckboxMemoized = useCallback(renderCheckbox, [innerName, checked, innerRequired]);
+  const renderRadioMemoized = useCallback(renderRadio, [innerName, checked, innerRequired]);
   useLayoutEffect(() => {
-    const naviCheckbox = ref.current;
-    const lightColor = "var(--checkmark-color-light)";
-    const darkColor = "var(--checkmark-color-dark)";
-    const colorPicked = pickLightOrDark("var(--color)", lightColor, darkColor, naviCheckbox);
-    if (colorPicked === lightColor) {
-      naviCheckbox.removeAttribute("data-dark");
+    const naviRadio = ref.current;
+    const luminance = resolveColorLuminance("var(--color)", naviRadio);
+    if (luminance < 0.3) {
+      naviRadio.setAttribute("data-dark", "");
     } else {
-      naviCheckbox.setAttribute("data-dark", "");
+      naviRadio.removeAttribute("data-dark");
     }
   }, [color]);
   return jsxs(Box, {
     as: "span",
     ...rest,
     ref: ref,
-    baseClassName: "navi_checkbox",
+    baseClassName: "navi_radio",
     pseudoStateSelector: ".navi_native_field",
-    styleCSSVars: CheckboxStyleCSSVars,
-    pseudoClasses: CheckboxPseudoClasses,
-    pseudoElements: CheckboxPseudoElements,
+    styleCSSVars: RadioStyleCSSVars,
+    pseudoClasses: RadioPseudoClasses,
+    pseudoElements: RadioPseudoElements,
     basePseudoState: {
       ":read-only": innerReadOnly,
       ":disabled": innerDisabled,
@@ -16478,286 +16521,186 @@ const InputCheckboxBasic = props => {
     children: [jsx(LoaderBackground, {
       loading: innerLoading,
       inset: -1,
+      targetSelector: ".navi_radio_field",
       color: "var(--loader-color)"
-    }), renderCheckboxMemoized, jsx("div", {
-      className: "navi_checkbox_field",
-      children: jsx("svg", {
+    }), renderRadioMemoized, jsx("span", {
+      className: "navi_radio_field",
+      children: jsxs("svg", {
         viewBox: "0 0 12 12",
         "aria-hidden": "true",
-        className: "navi_checkbox_marker",
-        children: jsx("path", {
-          d: "M10.5 2L4.5 9L1.5 5.5",
-          fill: "none",
-          strokeWidth: "2"
-        })
+        preserveAspectRatio: "xMidYMid meet",
+        children: [jsx("circle", {
+          className: "navi_radio_border",
+          cx: "6",
+          cy: "6",
+          r: "5.5",
+          strokeWidth: "1"
+        }), jsx("circle", {
+          className: "navi_radio_dashed_border",
+          cx: "6",
+          cy: "6",
+          r: "5.5",
+          strokeWidth: "1",
+          strokeDasharray: "2.16 2.16",
+          strokeDashoffset: "0"
+        }), jsx("circle", {
+          className: "navi_radio_marker",
+          cx: "6",
+          cy: "6",
+          r: "3.5"
+        })]
       })
     })]
   });
 };
-const InputCheckboxWithAction = props => {
-  const uiStateController = useContext(UIStateControllerContext);
-  const uiState = useContext(UIStateContext);
-  const {
-    action,
-    onCancel,
-    onChange,
-    actionErrorEffect,
-    onActionPrevented,
-    onActionStart,
-    onActionAbort,
-    onActionError,
-    onActionEnd,
-    loading,
-    ...rest
-  } = props;
-  const defaultRef = useRef();
-  const ref = props.ref || defaultRef;
-  const [actionBoundToUIState] = useActionBoundToOneParam(action, uiState);
-  const {
-    loading: actionLoading
-  } = useActionStatus(actionBoundToUIState);
-  const executeAction = useExecuteAction(ref, {
-    errorEffect: actionErrorEffect
-  });
-
-  // In this situation updating the ui state === calling associated action
-  // so cance/abort/error have to revert the ui state to the one before user interaction
-  // to show back the real state of the checkbox (not the one user tried to set)
-  useActionEvents(ref, {
-    onCancel: (e, reason) => {
-      if (reason === "blur_invalid") {
-        return;
-      }
-      uiStateController.resetUIState(e);
-      onCancel?.(e, reason);
-    },
-    onPrevented: onActionPrevented,
-    onAction: executeAction,
-    onStart: onActionStart,
-    onAbort: e => {
-      uiStateController.resetUIState(e);
-      onActionAbort?.(e);
-    },
-    onError: e => {
-      uiStateController.resetUIState(e);
-      onActionError?.(e);
-    },
-    onEnd: e => {
-      onActionEnd?.(e);
-    }
-  });
-  return jsx(InputCheckboxBasic, {
-    "data-action": actionBoundToUIState.name,
-    ...rest,
-    ref: ref,
-    loading: loading || actionLoading,
-    onChange: e => {
-      requestAction(e.target, actionBoundToUIState, {
-        event: e
-      });
-      onChange?.(e);
-    }
-  });
-};
-const InputCheckboxInsideForm = InputCheckboxBasic;
+const InputRadioWithAction = () => {
+  throw new Error(`<Input type="radio" /> with an action make no sense. Use <RadioList action={something} /> instead`);
+};
+const InputRadioInsideForm = InputRadio;
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
-    .navi_radio {
-      --outline-offset: 1px;
-      --outline-width: 2px;
-      --width: 13px;
-      --height: 13px;
+    .navi_input {
+      --border-radius: 2px;
+      --border-width: 1px;
+      --outline-width: 1px;
+      --outer-width: calc(var(--border-width) + var(--outline-width));
 
+      /* Default */
       --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);
-      --radiomark-color: var(--color);
-      --border-color-checked: var(--color);
-
-      --color-mix-light: white;
-      --color-mix-dark: black;
-      --color-mix: var(--color-mix-light);
-
+      --color: currentColor;
+      --color-dimmed: color-mix(in srgb, currentColor 60%, transparent);
+      --placeholder-color: var(--color-dimmed);
       /* Hover */
-      --border-color-hover: color-mix(in srgb, var(--border-color) 60%, black);
-      --border-color-hover-checked: color-mix(
-        in srgb,
-        var(--color) 80%,
-        var(--color-mix)
-      );
-      --radiomark-color-hover: color-mix(
+      --border-color-hover: color-mix(in srgb, var(--border-color) 70%, black);
+      --background-color-hover: color-mix(
         in srgb,
-        var(--color) 80%,
-        var(--color-mix)
+        var(--background-color) 95%,
+        black
       );
+      --color-hover: var(--color);
+      /* Active */
+      --border-color-active: color-mix(in srgb, var(--border-color) 90%, black);
       /* Readonly */
       --border-color-readonly: color-mix(
         in srgb,
-        var(--border-color) 30%,
-        white
+        var(--border-color) 45%,
+        transparent
       );
       --background-color-readonly: var(--background-color);
-      --radiomark-color-readonly: grey;
-      --border-color-readonly-checked: #d3d3d3;
-      --background-color-readonly-checked: #d3d3d3;
+      --color-readonly: var(--color-dimmed);
       /* Disabled */
       --border-color-disabled: var(--border-color-readonly);
-      --background-color-disabled: rgba(248, 248, 248, 0.7);
-      --radiomark-color-disabled: #d3d3d3;
-      --border-color-checked-disabled: #d3d3d3;
-      --background-color-disabled-checked: var(--background-color);
-    }
-
-    .navi_radio[data-dark] {
-      --color-mix: var(--color-mix-dark);
+      --background-color-disabled: color-mix(
+        in srgb,
+        var(--background-color) 95%,
+        grey
+      );
+      --color-disabled: color-mix(in srgb, var(--color) 95%, grey);
     }
   }
 
-  .navi_radio {
+  .navi_input {
     position: relative;
-    display: inline-flex;
-    box-sizing: content-box;
-    margin-top: 3px;
-    margin-right: 3px;
-    margin-left: 5px;
+    box-sizing: border-box;
+    width: fit-content;
+    height: fit-content;
+    flex-direction: inherit;
+    border-radius: inherit;
+    cursor: inherit;
 
-    --x-outline-offset: var(--outline-offset);
     --x-outline-width: var(--outline-width);
+    --x-border-radius: var(--border-radius);
     --x-border-width: var(--border-width);
-    --x-width: var(--width);
-    --x-height: var(--height);
+    --x-outer-width: calc(var(--x-border-width) + var(--x-outline-width));
     --x-outline-color: var(--outline-color);
-    --x-background-color: var(--background-color);
     --x-border-color: var(--border-color);
+    --x-background-color: var(--background-color);
     --x-color: var(--color);
-    --x-radiomark-color: var(--radiomark-color);
-  }
-  .navi_radio .navi_native_field {
-    position: absolute;
-    inset: 0;
-    margin: 0;
-    padding: 0;
-    opacity: 0;
-    cursor: inherit;
-  }
-  .navi_radio .navi_radio_field {
-    display: inline-flex;
-    box-sizing: border-box;
-    width: var(--x-width);
-    height: var(--x-height);
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    outline-width: var(--x-outline-width);
-    outline-style: none;
-    outline-color: var(--x-outline-color);
-    outline-offset: var(--x-outline-offset);
-  }
-  .navi_radio_field svg {
-    overflow: visible;
-  }
-  .navi_radio_border {
-    fill: var(--x-background-color);
-    stroke: var(--x-border-color);
-  }
-  .navi_radio_marker {
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    fill: var(--x-radiomark-color);
-    transform: scale(0.3);
-    transform-origin: center;
-    pointer-events: none;
-  }
-  .navi_radio_dashed_border {
-    display: none;
-  }
-  .navi_radio[data-transition] .navi_radio_marker {
-    transition: all 0.15s ease;
-  }
-  .navi_radio[data-transition] .navi_radio_dashed_border {
-    transition: all 0.15s ease;
-  }
-  .navi_radio[data-transition] .navi_radio_border {
-    transition: all 0.15s ease;
+    --x-placeholder-color: var(--placeholder-color);
   }
 
-  /* Focus */
-  .navi_radio[data-focus-visible] .navi_radio_field {
+  .navi_input .navi_native_input {
+    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, 2px)));
+    padding-bottom: var(
+      --padding-bottom,
+      var(--padding-y, var(--padding, 1px))
+    );
+    padding-left: var(--padding-left, var(--padding-x, var(--padding, 2px)));
+    color: var(--x-color);
+    background-color: var(--x-background-color);
+    border-width: var(--x-outer-width);
+    border-width: var(--x-outer-width);
+    border-style: solid;
+    border-color: transparent;
+    border-radius: var(--x-border-radius);
+    outline-width: var(--x-border-width);
     outline-style: solid;
+    outline-color: var(--x-border-color);
+    outline-offset: calc(-1 * (var(--x-border-width)));
   }
-  /* Hover */
-  .navi_radio[data-hover] {
-    --x-border-color: var(--border-color-hover);
-    --x-radiomark-color: var(--radiomark-color-hover);
-  }
-  /* Checked */
-  .navi_radio[data-checked] {
-    --x-border-color: var(--border-color-checked);
-  }
-  .navi_radio[data-checked] .navi_radio_marker {
-    opacity: 1;
-    transform: scale(1);
+  .navi_input .navi_native_input::placeholder {
+    color: var(--x-placeholder-color);
   }
-  .navi_radio[data-hover][data-checked] {
-    --x-border-color: var(--border-color-hover-checked);
+  .navi_input .navi_native_input:-internal-autofill-selected {
+    /* Webkit is putting some nasty styles after automplete that look as follow */
+    /* input:-internal-autofill-selected { color: FieldText !important; } */
+    /* Fortunately we can override it as follow */
+    -webkit-text-fill-color: var(--x-color) !important;
   }
   /* Readonly */
-  .navi_radio[data-readonly] {
-    --x-background-color: var(--background-color-readonly);
+  .navi_input[data-readonly] {
     --x-border-color: var(--border-color-readonly);
-    --x-radiomark-color: var(--radiomark-color-readonly);
-  }
-  .navi_radio[data-readonly] .navi_radio_dashed_border {
-    display: none;
+    --x-background-color: var(--background-color-readonly);
+    --x-color: var(--color-readonly);
   }
-  .navi_radio[data-readonly][data-checked] {
-    --x-background-color: var(--background-color-readonly-checked);
-    --x-border-color: var(--border-color-readonly-checked);
-    --x-radiomark-color: var(--radiomark-color-readonly);
+  /* Focus */
+  .navi_input[data-focus] .navi_native_input,
+  .navi_input[data-focus-visible] .navi_native_input {
+    outline-width: var(--x-outer-width);
+    outline-offset: calc(-1 * var(--x-outer-width));
+    --x-border-color: var(--x-outline-color);
   }
   /* Disabled */
-  .navi_radio[data-disabled] {
-    --x-background-color: var(--background-color-disabled);
+  .navi_input[data-disabled] {
     --x-border-color: var(--border-color-disabled);
-    --x-radiomark-color: var(--radiomark-color-disabled);
+    --x-background-color: var(--background-color-disabled);
+    --x-color: var(--color-disabled);
   }
-  .navi_radio[data-disabled][data-checked] {
-    --x-border-color: var(--border-color-disabled);
-    --x-radiomark-color: var(--radiomark-color-disabled);
+  /* Callout (info, warning, error) */
+  .navi_input[data-callout] {
+    --x-border-color: var(--callout-color);
   }
 `;
-const InputRadio = props => {
-  const {
-    value = "on"
-  } = props;
-  const uiStateController = useUIStateController(props, "radio", {
-    statePropName: "checked",
-    fallbackState: false,
-    getStateFromProp: checked => checked ? value : undefined,
-    getPropFromState: Boolean
-  });
+const InputTextual = props => {
+  const uiStateController = useUIStateController(props, "input");
   const uiState = useUIState(uiStateController);
-  const radio = renderActionableComponent(props, {
-    Basic: InputRadioBasic,
-    WithAction: InputRadioWithAction,
-    InsideForm: InputRadioInsideForm
+  const input = renderActionableComponent(props, {
+    Basic: InputTextualBasic,
+    WithAction: InputTextualWithAction,
+    InsideForm: InputTextualInsideForm
   });
   return jsx(UIStateControllerContext.Provider, {
     value: uiStateController,
     children: jsx(UIStateContext.Provider, {
       value: uiState,
-      children: radio
+      children: input
     })
   });
 };
-const RadioStyleCSSVars = {
+const InputStyleCSSVars = {
   "outlineWidth": "--outline-width",
   "borderWidth": "--border-width",
   "borderRadius": "--border-radius",
+  "paddingTop": "--padding-top",
+  "paddingRight": "--padding-right",
+  "paddingBottom": "--padding-bottom",
+  "paddingLeft": "--padding-left",
   "backgroundColor": "--background-color",
   "borderColor": "--border-color",
   "color": "--color",
@@ -16780,814 +16723,728 @@ const RadioStyleCSSVars = {
     color: "--color-disabled"
   }
 };
-const RadioPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":checked", ":-navi-loading"];
-const RadioPseudoElements = ["::-navi-loader", "::-navi-radiomark"];
-const InputRadioBasic = props => {
-  const contextName = useContext(FieldNameContext);
+const InputPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading"];
+const InputPseudoElements = ["::-navi-loader"];
+const InputTextualBasic = props => {
   const contextReadOnly = useContext(ReadOnlyContext);
   const contextDisabled = useContext(DisabledContext);
-  const contextRequired = useContext(RequiredContext);
   const contextLoading = useContext(LoadingContext);
   const contextLoadingElement = useContext(LoadingElementContext);
+  const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
   const uiStateController = useContext(UIStateControllerContext);
   const uiState = useContext(UIStateContext);
-  const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
-  const reportDisabledOnLabel = useContext(ReportDisabledOnLabelContext);
   const {
-    /* eslint-disable no-unused-vars */
     type,
-    /* eslint-enable no-unused-vars */
-
-    name,
+    onInput,
     readOnly,
     disabled,
-    required,
+    constraints = [],
     loading,
     autoFocus,
-    constraints = [],
-    onClick,
-    onInput,
-    color,
+    autoFocusVisible,
+    autoSelect,
     ...rest
   } = props;
   const defaultRef = useRef();
   const ref = props.ref || defaultRef;
-  const innerName = name || contextName;
-  const innerDisabled = disabled || contextDisabled;
-  const innerRequired = required || contextRequired;
+  const innerValue = type === "datetime-local" ? convertToLocalTimezone(uiState) : uiState;
   const innerLoading = loading || contextLoading && contextLoadingElement === ref.current;
   const innerReadOnly = readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
+  const innerDisabled = disabled || contextDisabled;
+  // infom any <label> parent of our readOnly state
   reportReadOnlyOnLabel?.(innerReadOnly);
-  reportDisabledOnLabel?.(innerDisabled);
-  useAutoFocus(ref, autoFocus);
+  useAutoFocus(ref, autoFocus, {
+    autoFocusVisible,
+    autoSelect
+  });
   useConstraints(ref, constraints);
-  const checked = Boolean(uiState);
-  // we must first dispatch an event to inform all other radios they where unchecked
-  // this way each other radio uiStateController knows thery are unchecked
-  // we do this on "input"
-  // but also when we are becoming checked from outside (hence the useLayoutEffect)
-  const updateOtherRadiosInGroup = () => {
-    const thisRadio = ref.current;
-    const radioList = thisRadio.closest("[data-radio-list]");
-    if (!radioList) {
-      return;
-    }
-    const radioInputs = radioList.querySelectorAll(`input[type="radio"][name="${thisRadio.name}"]`);
-    for (const radioInput of radioInputs) {
-      if (radioInput === thisRadio) {
-        continue;
+  const innerOnInput = useStableCallback(onInput);
+  const renderInput = inputProps => {
+    return jsx(Box, {
+      ...inputProps,
+      as: "input",
+      ref: ref,
+      type: type,
+      "data-value": uiState,
+      value: innerValue,
+      onInput: e => {
+        let inputValue;
+        if (type === "number") {
+          inputValue = e.target.valueAsNumber;
+        } else if (type === "datetime-local") {
+          inputValue = convertToUTCTimezone(e.target.value);
+        } else {
+          inputValue = e.target.value;
+        }
+        uiStateController.setUIState(inputValue, e);
+        innerOnInput?.(e);
+      },
+      onresetuistate: e => {
+        uiStateController.resetUIState(e);
+      },
+      onsetuistate: e => {
+        uiStateController.setUIState(e.detail.value, e);
       }
-      radioInput.dispatchEvent(new CustomEvent("setuistate", {
-        detail: false
-      }));
-    }
+      // style management
+      ,
+      baseClassName: "navi_native_input"
+    });
   };
-  useLayoutEffect(() => {
-    if (checked) {
-      updateOtherRadiosInGroup();
-    }
-  }, [checked]);
-  const innerOnInput = useStableCallback(e => {
-    const radio = e.target;
-    const radioIsChecked = radio.checked;
-    if (radioIsChecked) {
-      updateOtherRadiosInGroup();
-    }
-    uiStateController.setUIState(radioIsChecked, e);
-    onInput?.(e);
-  });
-  const innerOnClick = useStableCallback(e => {
-    if (innerReadOnly) {
-      e.preventDefault();
-    }
-    onClick?.(e);
-  });
-  const renderRadio = radioProps => jsx(Box, {
-    ...radioProps,
-    as: "input",
-    ref: ref,
-    type: "radio",
-    name: innerName,
-    checked: checked,
-    disabled: innerDisabled,
-    required: innerRequired,
-    baseClassName: "navi_native_field",
-    "data-callout-arrow-x": "center",
-    onClick: innerOnClick,
-    onInput: innerOnInput,
-    onresetuistate: e => {
-      uiStateController.resetUIState(e);
-    },
-    onsetuistate: e => {
-      uiStateController.setUIState(e.detail.value, e);
-    }
-  });
-  const renderRadioMemoized = useCallback(renderRadio, [innerName, checked, innerRequired]);
-  useLayoutEffect(() => {
-    const naviRadio = ref.current;
-    const luminance = resolveColorLuminance("var(--color)", naviRadio);
-    if (luminance < 0.3) {
-      naviRadio.setAttribute("data-dark", "");
-    } else {
-      naviRadio.removeAttribute("data-dark");
-    }
-  }, [color]);
+  const renderInputMemoized = useCallback(renderInput, [type, uiState, innerValue, innerOnInput]);
   return jsxs(Box, {
     as: "span",
-    ...rest,
-    ref: ref,
-    baseClassName: "navi_radio",
-    pseudoStateSelector: ".navi_native_field",
-    styleCSSVars: RadioStyleCSSVars,
-    pseudoClasses: RadioPseudoClasses,
-    pseudoElements: RadioPseudoElements,
+    box: true,
+    baseClassName: "navi_input",
+    styleCSSVars: InputStyleCSSVars,
+    pseudoStateSelector: ".navi_native_input",
+    visualSelector: ".navi_native_input",
     basePseudoState: {
       ":read-only": innerReadOnly,
       ":disabled": innerDisabled,
       ":-navi-loading": innerLoading
     },
-    color: color,
+    pseudoClasses: InputPseudoClasses,
+    pseudoElements: InputPseudoElements,
     hasChildFunction: true,
+    ...rest,
     children: [jsx(LoaderBackground, {
       loading: innerLoading,
-      inset: -1,
-      targetSelector: ".navi_radio_field",
-      color: "var(--loader-color)"
-    }), renderRadioMemoized, jsx("span", {
-      className: "navi_radio_field",
-      children: jsxs("svg", {
-        viewBox: "0 0 12 12",
-        "aria-hidden": "true",
-        preserveAspectRatio: "xMidYMid meet",
-        children: [jsx("circle", {
-          className: "navi_radio_border",
-          cx: "6",
-          cy: "6",
-          r: "5.5",
-          strokeWidth: "1"
-        }), jsx("circle", {
-          className: "navi_radio_dashed_border",
-          cx: "6",
-          cy: "6",
-          r: "5.5",
-          strokeWidth: "1",
-          strokeDasharray: "2.16 2.16",
-          strokeDashoffset: "0"
-        }), jsx("circle", {
-          className: "navi_radio_marker",
-          cx: "6",
-          cy: "6",
-          r: "3.5"
-        })]
-      })
-    })]
+      color: "var(--loader-color)",
+      inset: -1
+    }), renderInputMemoized]
   });
 };
-const InputRadioWithAction = () => {
-  throw new Error(`<Input type="radio" /> with an action make no sense. Use <RadioList action={something} /> instead`);
+const InputTextualWithAction = props => {
+  const uiState = useContext(UIStateContext);
+  const {
+    action,
+    loading,
+    onCancel,
+    onActionPrevented,
+    onActionStart,
+    onActionError,
+    onActionEnd,
+    cancelOnBlurInvalid,
+    cancelOnEscape,
+    actionErrorEffect,
+    ...rest
+  } = props;
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
+  const [boundAction] = useActionBoundToOneParam(action, uiState);
+  const {
+    loading: actionLoading
+  } = useActionStatus(boundAction);
+  const executeAction = useExecuteAction(ref, {
+    errorEffect: actionErrorEffect
+  });
+  // here updating the input won't call the associated action
+  // (user have to blur or press enter for this to happen)
+  // so we can keep the ui state on cancel/abort/error and let user decide
+  // to update ui state or retry via blur/enter as is
+  useActionEvents(ref, {
+    onCancel: (e, reason) => {
+      if (reason.startsWith("blur_invalid")) {
+        if (!cancelOnBlurInvalid) {
+          return;
+        }
+        if (
+        // error prevent cancellation until the user closes it (or something closes it)
+        e.detail.failedConstraintInfo.level === "error" && e.detail.failedConstraintInfo.reportStatus !== "closed") {
+          return;
+        }
+      }
+      if (reason === "escape_key") {
+        if (!cancelOnEscape) {
+          return;
+        }
+      }
+      onCancel?.(e, reason);
+    },
+    onRequested: e => {
+      forwardActionRequested(e, boundAction);
+    },
+    onPrevented: onActionPrevented,
+    onAction: executeAction,
+    onStart: onActionStart,
+    onError: onActionError,
+    onEnd: onActionEnd
+  });
+  return jsx(InputTextualBasic, {
+    "data-action": boundAction.name,
+    ...rest,
+    ref: ref,
+    loading: loading || actionLoading
+  });
+};
+const InputTextualInsideForm = props => {
+  const {
+    // We destructure formContext to avoid passing it to the underlying input element
+    // eslint-disable-next-line no-unused-vars
+    formContext,
+    ...rest
+  } = props;
+  return jsx(InputTextualBasic, {
+    ...rest
+  });
 };
-const InputRadioInsideForm = InputRadio;
-
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  @layer navi {
-    .navi_input {
-      --border-radius: 2px;
-      --border-width: 1px;
-      --outline-width: 1px;
-      --outer-width: calc(var(--border-width) + var(--outline-width));
 
-      /* Default */
-      --outline-color: var(--navi-focus-outline-color);
-      --loader-color: var(--navi-loader-color);
-      --border-color: light-dark(#767676, #8e8e93);
-      --background-color: white;
-      --color: currentColor;
-      --color-dimmed: color-mix(in srgb, currentColor 60%, transparent);
-      --placeholder-color: var(--color-dimmed);
-      /* Hover */
-      --border-color-hover: color-mix(in srgb, var(--border-color) 70%, black);
-      --background-color-hover: color-mix(
-        in srgb,
-        var(--background-color) 95%,
-        black
-      );
-      --color-hover: var(--color);
-      /* Active */
-      --border-color-active: color-mix(in srgb, var(--border-color) 90%, black);
-      /* Readonly */
-      --border-color-readonly: color-mix(
-        in srgb,
-        var(--border-color) 45%,
-        transparent
-      );
-      --background-color-readonly: var(--background-color);
-      --color-readonly: var(--color-dimmed);
-      /* Disabled */
-      --border-color-disabled: var(--border-color-readonly);
-      --background-color-disabled: color-mix(
-        in srgb,
-        var(--background-color) 95%,
-        grey
-      );
-      --color-disabled: color-mix(in srgb, var(--color) 95%, grey);
-    }
+// As explained in https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local#setting_timezones
+// datetime-local does not support timezones
+const convertToLocalTimezone = dateTimeString => {
+  const date = new Date(dateTimeString);
+  // Check if the date is valid
+  if (isNaN(date.getTime())) {
+    return dateTimeString;
   }
 
-  .navi_input {
-    position: relative;
-    box-sizing: border-box;
-    width: fit-content;
-    height: fit-content;
-    flex-direction: inherit;
-    border-radius: inherit;
-    cursor: inherit;
-
-    --x-outline-width: var(--outline-width);
-    --x-border-radius: var(--border-radius);
-    --x-border-width: var(--border-width);
-    --x-outer-width: calc(var(--x-border-width) + var(--x-outline-width));
-    --x-outline-color: var(--outline-color);
-    --x-border-color: var(--border-color);
-    --x-background-color: var(--background-color);
-    --x-color: var(--color);
-    --x-placeholder-color: var(--placeholder-color);
+  // Format to YYYY-MM-DDThh:mm:ss
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+};
+/**
+ * Converts a datetime string without timezone (local time) to UTC format with 'Z' notation
+ *
+ * @param {string} localDateTimeString - Local datetime string without timezone (e.g., "2023-07-15T14:30:00")
+ * @returns {string} Datetime string in UTC with 'Z' notation (e.g., "2023-07-15T12:30:00Z")
+ */
+const convertToUTCTimezone = localDateTimeString => {
+  if (!localDateTimeString) {
+    return localDateTimeString;
   }
+  try {
+    // Create a Date object using the local time string
+    // The browser will interpret this as local timezone
+    const localDate = new Date(localDateTimeString);
 
-  .navi_input .navi_native_input {
-    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, 2px)));
-    padding-bottom: var(
-      --padding-bottom,
-      var(--padding-y, var(--padding, 1px))
-    );
-    padding-left: var(--padding-left, var(--padding-x, var(--padding, 2px)));
-    color: var(--x-color);
-    background-color: var(--x-background-color);
-    border-width: var(--x-outer-width);
-    border-width: var(--x-outer-width);
-    border-style: solid;
-    border-color: transparent;
-    border-radius: var(--x-border-radius);
-    outline-width: var(--x-border-width);
-    outline-style: solid;
-    outline-color: var(--x-border-color);
-    outline-offset: calc(-1 * (var(--x-border-width)));
-  }
-  .navi_input .navi_native_input::placeholder {
-    color: var(--x-placeholder-color);
-  }
-  .navi_input .navi_native_input:-internal-autofill-selected {
-    /* Webkit is putting some nasty styles after automplete that look as follow */
-    /* input:-internal-autofill-selected { color: FieldText !important; } */
-    /* Fortunately we can override it as follow */
-    -webkit-text-fill-color: var(--x-color) !important;
-  }
-  /* Readonly */
-  .navi_input[data-readonly] {
-    --x-border-color: var(--border-color-readonly);
-    --x-background-color: var(--background-color-readonly);
-    --x-color: var(--color-readonly);
-  }
-  /* Focus */
-  .navi_input[data-focus] .navi_native_input,
-  .navi_input[data-focus-visible] .navi_native_input {
-    outline-width: var(--x-outer-width);
-    outline-offset: calc(-1 * var(--x-outer-width));
-    --x-border-color: var(--x-outline-color);
+    // Check if the date is valid
+    if (isNaN(localDate.getTime())) {
+      return localDateTimeString;
+    }
+
+    // Convert to UTC ISO string
+    const utcString = localDate.toISOString();
+
+    // Return the UTC string (which includes the 'Z' notation)
+    return utcString;
+  } catch (error) {
+    console.error("Error converting local datetime to UTC:", error);
+    return localDateTimeString;
   }
-  /* Disabled */
-  .navi_input[data-disabled] {
-    --x-border-color: var(--border-color-disabled);
-    --x-background-color: var(--background-color-disabled);
-    --x-color: var(--color-disabled);
+};
+
+const Input = forwardRef((props, ref) => {
+  const {
+    type
+  } = props;
+  if (type === "radio") {
+    return jsx(InputRadio, {
+      ...props,
+      ref: ref
+    });
   }
-  /* Callout (info, warning, error) */
-  .navi_input[data-callout] {
-    --x-border-color: var(--callout-color);
+  if (type === "checkbox") {
+    return jsx(InputCheckbox, {
+      ...props,
+      ref: ref
+    });
   }
-`;
-const InputTextual = props => {
-  const uiStateController = useUIStateController(props, "input");
-  const uiState = useUIState(uiStateController);
-  const input = renderActionableComponent(props, {
-    Basic: InputTextualBasic,
-    WithAction: InputTextualWithAction,
-    InsideForm: InputTextualInsideForm
-  });
-  return jsx(UIStateControllerContext.Provider, {
-    value: uiStateController,
-    children: jsx(UIStateContext.Provider, {
-      value: uiState,
-      children: input
-    })
+  return jsx(InputTextual, {
+    ...props,
+    ref: ref
   });
-};
-const InputStyleCSSVars = {
-  "outlineWidth": "--outline-width",
-  "borderWidth": "--border-width",
-  "borderRadius": "--border-radius",
-  "paddingTop": "--padding-top",
-  "paddingRight": "--padding-right",
-  "paddingBottom": "--padding-bottom",
-  "paddingLeft": "--padding-left",
-  "backgroundColor": "--background-color",
-  "borderColor": "--border-color",
-  "color": "--color",
-  ":hover": {
-    backgroundColor: "--background-color-hover",
-    borderColor: "--border-color-hover",
-    color: "--color-hover"
-  },
-  ":active": {
-    borderColor: "--border-color-active"
-  },
-  ":read-only": {
-    backgroundColor: "--background-color-readonly",
-    borderColor: "--border-color-readonly",
-    color: "--color-readonly"
-  },
-  ":disabled": {
-    backgroundColor: "--background-color-disabled",
-    borderColor: "--border-color-disabled",
-    color: "--color-disabled"
+});
+
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .navi_editable_wrapper {
+    position: absolute;
+    inset: 0;
   }
+`;
+const useEditionController = () => {
+  const [editing, editingSetter] = useState(null);
+  const startEditing = useCallback(event => {
+    editingSetter(current => {
+      return current || {
+        event
+      };
+    });
+  }, []);
+  const stopEditing = useCallback(() => {
+    editingSetter(null);
+  }, []);
+  const prevEditingRef = useRef(editing);
+  const editionJustEnded = prevEditingRef.current && !editing;
+  prevEditingRef.current = editing;
+  return {
+    editing,
+    startEditing,
+    stopEditing,
+    editionJustEnded
+  };
 };
-const InputPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading"];
-const InputPseudoElements = ["::-navi-loader"];
-const InputTextualBasic = props => {
-  const contextReadOnly = useContext(ReadOnlyContext);
-  const contextDisabled = useContext(DisabledContext);
-  const contextLoading = useContext(LoadingContext);
-  const contextLoadingElement = useContext(LoadingElementContext);
-  const reportReadOnlyOnLabel = useContext(ReportReadOnlyOnLabelContext);
-  const uiStateController = useContext(UIStateControllerContext);
-  const uiState = useContext(UIStateContext);
-  const {
+const Editable = forwardRef((props, ref) => {
+  let {
+    children,
+    action,
+    editing,
+    name,
+    value,
+    valueSignal,
+    onEditEnd,
+    constraints,
     type,
-    onInput,
+    required,
+    readOnly,
+    min,
+    max,
+    step,
+    minLength,
+    maxLength,
+    pattern,
+    wrapperProps,
+    autoSelect = true,
+    width,
+    height,
+    ...rest
+  } = props;
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  if (valueSignal) {
+    value = valueSignal.value;
+  }
+  const editingPreviousRef = useRef(editing);
+  const valueWhenEditStartRef = useRef(editing ? value : undefined);
+  if (editingPreviousRef.current !== editing) {
+    if (editing) {
+      valueWhenEditStartRef.current = value; // Always store the external value
+    }
+    editingPreviousRef.current = editing;
+  }
+
+  // Simulate typing the initial value when editing starts with a custom value
+  useLayoutEffect(() => {
+    if (!editing) {
+      return;
+    }
+    const editingEvent = editing.event;
+    if (!editingEvent) {
+      return;
+    }
+    const editingEventInitialValue = editingEvent.detail?.initialValue;
+    if (editingEventInitialValue === undefined) {
+      return;
+    }
+    const input = innerRef.current;
+    input.value = editingEventInitialValue;
+    input.dispatchEvent(new CustomEvent("input", {
+      bubbles: false
+    }));
+  }, [editing]);
+  const input = jsx(Input, {
+    ref: innerRef,
+    ...rest,
+    type: type,
+    name: name,
+    value: value,
+    valueSignal: valueSignal,
+    autoFocus: true,
+    autoFocusVisible: true,
+    autoSelect: autoSelect,
+    cancelOnEscape: true,
+    cancelOnBlurInvalid: true,
+    constraints: constraints,
+    required: required,
+    readOnly: readOnly,
+    min: min,
+    max: max,
+    step: step,
+    minLength: minLength,
+    maxLength: maxLength,
+    pattern: pattern,
+    width: width,
+    height: height,
+    onCancel: e => {
+      if (valueSignal) {
+        valueSignal.value = valueWhenEditStartRef.current;
+      }
+      onEditEnd({
+        cancelled: true,
+        event: e
+      });
+    },
+    onBlur: e => {
+      const value = type === "number" ? e.target.valueAsNumber : e.target.value;
+      const valueWhenEditStart = valueWhenEditStartRef.current;
+      if (value === valueWhenEditStart) {
+        onEditEnd({
+          cancelled: true,
+          event: e
+        });
+        return;
+      }
+    },
+    action: action || (() => {}),
+    onActionEnd: e => {
+      onEditEnd({
+        success: true,
+        event: e
+      });
+    }
+  });
+  return jsxs(Fragment, {
+    children: [children || jsx("span", {
+      children: value
+    }), editing && jsx("div", {
+      ...wrapperProps,
+      className: ["navi_editable_wrapper", ...(wrapperProps?.className || "").split(" ")].join(" "),
+      children: input
+    })]
+  });
+});
+
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  @layer navi {
+    .navi_checkbox_list {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+`;
+const CheckboxList = forwardRef((props, ref) => {
+  const uiStateController = useUIGroupStateController(props, "checkbox_list", {
+    childComponentType: "checkbox",
+    aggregateChildStates: childUIStateControllers => {
+      const values = [];
+      for (const childUIStateController of childUIStateControllers) {
+        if (childUIStateController.uiState) {
+          values.push(childUIStateController.uiState);
+        }
+      }
+      return values.length === 0 ? undefined : values;
+    }
+  });
+  const uiState = useUIState(uiStateController);
+  const checkboxList = renderActionableComponent(props, ref);
+  return jsx(UIStateControllerContext.Provider, {
+    value: uiStateController,
+    children: jsx(UIStateContext.Provider, {
+      value: uiState,
+      children: checkboxList
+    })
+  });
+});
+const Checkbox = InputCheckbox;
+const CheckboxListBasic = forwardRef((props, ref) => {
+  const contextReadOnly = useContext(ReadOnlyContext);
+  const contextDisabled = useContext(DisabledContext);
+  const contextLoading = useContext(LoadingContext);
+  const uiStateController = useContext(UIStateControllerContext);
+  const {
+    name,
     readOnly,
     disabled,
-    constraints = [],
+    required,
     loading,
-    autoFocus,
-    autoFocusVisible,
-    autoSelect,
+    children,
     ...rest
   } = props;
-  const defaultRef = useRef();
-  const ref = props.ref || defaultRef;
-  const innerValue = type === "datetime-local" ? convertToLocalTimezone(uiState) : uiState;
-  const innerLoading = loading || contextLoading && contextLoadingElement === ref.current;
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  const innerLoading = loading || contextLoading;
   const innerReadOnly = readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
   const innerDisabled = disabled || contextDisabled;
-  // infom any <label> parent of our readOnly state
-  reportReadOnlyOnLabel?.(innerReadOnly);
-  useAutoFocus(ref, autoFocus, {
-    autoFocusVisible,
-    autoSelect
-  });
-  useConstraints(ref, constraints);
-  const innerOnInput = useStableCallback(onInput);
-  const renderInput = inputProps => {
-    return jsx(Box, {
-      ...inputProps,
-      as: "input",
-      ref: ref,
-      type: type,
-      "data-value": uiState,
-      value: innerValue,
-      onInput: e => {
-        let inputValue;
-        if (type === "number") {
-          inputValue = e.target.valueAsNumber;
-        } else if (type === "datetime-local") {
-          inputValue = convertToUTCTimezone(e.target.value);
-        } else {
-          inputValue = e.target.value;
-        }
-        uiStateController.setUIState(inputValue, e);
-        innerOnInput?.(e);
-      },
-      onresetuistate: e => {
-        uiStateController.resetUIState(e);
-      },
-      onsetuistate: e => {
-        uiStateController.setUIState(e.detail.value, e);
-      }
-      // style management
-      ,
-      baseClassName: "navi_native_input"
-    });
-  };
-  const renderInputMemoized = useCallback(renderInput, [type, uiState, innerValue, innerOnInput]);
-  return jsxs(Box, {
-    as: "span",
-    box: true,
-    baseClassName: "navi_input",
-    styleCSSVars: InputStyleCSSVars,
-    pseudoStateSelector: ".navi_native_input",
-    visualSelector: ".navi_native_input",
-    basePseudoState: {
-      ":read-only": innerReadOnly,
-      ":disabled": innerDisabled,
-      ":-navi-loading": innerLoading
-    },
-    pseudoClasses: InputPseudoClasses,
-    pseudoElements: InputPseudoElements,
-    hasChildFunction: true,
+  return jsx("div", {
     ...rest,
-    children: [jsx(LoaderBackground, {
-      loading: innerLoading,
-      color: "var(--loader-color)",
-      inset: -1
-    }), renderInputMemoized]
+    ref: innerRef,
+    name: name,
+    className: "navi_checkbox_list",
+    "data-checkbox-list": true
+    // eslint-disable-next-line react/no-unknown-property
+    ,
+    onresetuistate: e => {
+      uiStateController.resetUIState(e);
+    },
+    children: jsx(ParentUIStateControllerContext.Provider, {
+      value: uiStateController,
+      children: jsx(FieldNameContext.Provider, {
+        value: name,
+        children: jsx(ReadOnlyContext.Provider, {
+          value: innerReadOnly,
+          children: jsx(DisabledContext.Provider, {
+            value: innerDisabled,
+            children: jsx(RequiredContext.Provider, {
+              value: required,
+              children: jsx(LoadingContext.Provider, {
+                value: innerLoading,
+                children: children
+              })
+            })
+          })
+        })
+      })
+    })
   });
-};
-const InputTextualWithAction = props => {
+});
+forwardRef((props, ref) => {
+  const uiStateController = useContext(UIStateControllerContext);
   const uiState = useContext(UIStateContext);
   const {
     action,
-    loading,
+    actionErrorEffect,
     onCancel,
     onActionPrevented,
     onActionStart,
+    onActionAbort,
     onActionError,
     onActionEnd,
-    cancelOnBlurInvalid,
-    cancelOnEscape,
-    actionErrorEffect,
+    loading,
+    children,
     ...rest
   } = props;
-  const defaultRef = useRef();
-  const ref = props.ref || defaultRef;
-  const [boundAction] = useActionBoundToOneParam(action, uiState);
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  const [boundAction] = useActionBoundToOneArrayParam(action, uiState);
   const {
     loading: actionLoading
   } = useActionStatus(boundAction);
-  const executeAction = useExecuteAction(ref, {
+  const executeAction = useExecuteAction(innerRef, {
     errorEffect: actionErrorEffect
   });
-  // here updating the input won't call the associated action
-  // (user have to blur or press enter for this to happen)
-  // so we can keep the ui state on cancel/abort/error and let user decide
-  // to update ui state or retry via blur/enter as is
-  useActionEvents(ref, {
+  const [actionRequester, setActionRequester] = useState(null);
+  useActionEvents(innerRef, {
     onCancel: (e, reason) => {
-      if (reason.startsWith("blur_invalid")) {
-        if (!cancelOnBlurInvalid) {
-          return;
-        }
-        if (
-        // error prevent cancellation until the user closes it (or something closes it)
-        e.detail.failedConstraintInfo.level === "error" && e.detail.failedConstraintInfo.reportStatus !== "closed") {
-          return;
-        }
-      }
-      if (reason === "escape_key") {
-        if (!cancelOnEscape) {
-          return;
-        }
-      }
+      uiStateController.resetUIState(e);
       onCancel?.(e, reason);
     },
-    onRequested: e => {
-      forwardActionRequested(e, boundAction);
-    },
     onPrevented: onActionPrevented,
-    onAction: executeAction,
+    onAction: actionEvent => {
+      setActionRequester(actionEvent.detail.requester);
+      executeAction(actionEvent);
+    },
     onStart: onActionStart,
-    onError: onActionError,
-    onEnd: onActionEnd
+    onAbort: e => {
+      uiStateController.resetUIState(e);
+      onActionAbort?.(e);
+    },
+    onError: e => {
+      uiStateController.resetUIState(e);
+      onActionError?.(e);
+    },
+    onEnd: e => {
+      onActionEnd?.(e);
+    }
   });
-  return jsx(InputTextualBasic, {
+  return jsx(CheckboxListBasic, {
     "data-action": boundAction.name,
     ...rest,
-    ref: ref,
-    loading: loading || actionLoading
-  });
-};
-const InputTextualInsideForm = props => {
-  const {
-    // We destructure formContext to avoid passing it to the underlying input element
-    // eslint-disable-next-line no-unused-vars
-    formContext,
-    ...rest
-  } = props;
-  return jsx(InputTextualBasic, {
-    ...rest
+    ref: innerRef,
+    onChange: event => {
+      const checkboxList = innerRef.current;
+      const checkbox = event.target;
+      requestAction(checkboxList, boundAction, {
+        event,
+        requester: checkbox
+      });
+    },
+    loading: loading || actionLoading,
+    children: jsx(LoadingElementContext.Provider, {
+      value: actionRequester,
+      children: children
+    })
   });
-};
+});
 
-// As explained in https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local#setting_timezones
-// datetime-local does not support timezones
-const convertToLocalTimezone = dateTimeString => {
-  const date = new Date(dateTimeString);
-  // Check if the date is valid
-  if (isNaN(date.getTime())) {
-    return dateTimeString;
+const collectFormElementValues = (element) => {
+  let formElements;
+  if (element.tagName === "FORM") {
+    formElements = element.elements;
+  } else {
+    // fieldset or anything else
+    formElements = element.querySelectorAll(
+      "input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button[name]:not([disabled])",
+    );
   }
 
-  // Format to YYYY-MM-DDThh:mm:ss
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  const hours = String(date.getHours()).padStart(2, "0");
-  const minutes = String(date.getMinutes()).padStart(2, "0");
-  const seconds = String(date.getSeconds()).padStart(2, "0");
-  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
-};
-/**
- * Converts a datetime string without timezone (local time) to UTC format with 'Z' notation
- *
- * @param {string} localDateTimeString - Local datetime string without timezone (e.g., "2023-07-15T14:30:00")
- * @returns {string} Datetime string in UTC with 'Z' notation (e.g., "2023-07-15T12:30:00Z")
- */
-const convertToUTCTimezone = localDateTimeString => {
-  if (!localDateTimeString) {
-    return localDateTimeString;
+  const values = {};
+  const checkboxArrayNameSet = new Set();
+  for (const formElement of formElements) {
+    if (formElement.type === "checkbox" && formElement.name) {
+      const name = formElement.name;
+      const endsWithBrackets = name.endsWith("[]");
+      if (endsWithBrackets) {
+        checkboxArrayNameSet.add(name);
+        values[name] = [];
+        continue;
+      }
+      const closestDataCheckboxList = formElement.closest(
+        "[data-checkbox-list]",
+      );
+      if (closestDataCheckboxList) {
+        checkboxArrayNameSet.add(name);
+        values[name] = [];
+      }
+    }
   }
-  try {
-    // Create a Date object using the local time string
-    // The browser will interpret this as local timezone
-    const localDate = new Date(localDateTimeString);
 
-    // Check if the date is valid
-    if (isNaN(localDate.getTime())) {
-      return localDateTimeString;
+  for (const formElement of formElements) {
+    const name = formElement.name;
+    if (!name) {
+      continue;
+    }
+    const value = getFormElementValue(formElement);
+    if (value === undefined) {
+      continue; // Skip unchecked checkboxes/radios
+    }
+    if (formElement.type === "checkbox" && checkboxArrayNameSet.has(name)) {
+      values[name].push(value);
+    } else {
+      values[name] = value;
     }
+  }
+  return values;
+};
 
-    // Convert to UTC ISO string
-    const utcString = localDate.toISOString();
+const getFormElementValue = (formElement) => {
+  const { type, tagName } = formElement;
 
-    // Return the UTC string (which includes the 'Z' notation)
-    return utcString;
-  } catch (error) {
-    console.error("Error converting local datetime to UTC:", error);
-    return localDateTimeString;
+  if (tagName === "SELECT") {
+    if (formElement.multiple) {
+      return Array.from(formElement.selectedOptions, (option) =>
+        getValue(option),
+      );
+    }
+    return formElement.value;
   }
-};
 
-const Input = forwardRef((props, ref) => {
-  const {
-    type
-  } = props;
-  if (type === "radio") {
-    return jsx(InputRadio, {
-      ...props,
-      ref: ref
-    });
+  if (type === "checkbox" || type === "radio") {
+    return formElement.checked ? getValue(formElement) : undefined;
   }
-  if (type === "checkbox") {
-    return jsx(InputCheckbox, {
-      ...props,
-      ref: ref
-    });
+
+  if (type === "file") {
+    return formElement.files; // Return FileList for special handling
   }
-  return jsx(InputTextual, {
-    ...props,
-    ref: ref
-  });
-});
 
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_editable_wrapper {
-    position: absolute;
-    inset: 0;
+  return getValue(formElement);
+};
+
+const getValue = (formElement) => {
+  const hasDataValueAttribute = formElement.hasAttribute("data-value");
+  if (hasDataValueAttribute) {
+    // happens for "datetime-local" inputs to keep the timezone
+    // consistent when sending to the server
+    return formElement.getAttribute("data-value");
   }
-`;
-const useEditionController = () => {
-  const [editing, editingSetter] = useState(null);
-  const startEditing = useCallback(event => {
-    editingSetter(current => {
-      return current || {
-        event
-      };
-    });
-  }, []);
-  const stopEditing = useCallback(() => {
-    editingSetter(null);
-  }, []);
-  const prevEditingRef = useRef(editing);
-  const editionJustEnded = prevEditingRef.current && !editing;
-  prevEditingRef.current = editing;
-  return {
-    editing,
-    startEditing,
-    stopEditing,
-    editionJustEnded
-  };
+  return formElement.value;
 };
-const Editable = forwardRef((props, ref) => {
-  let {
-    children,
-    action,
-    editing,
-    name,
-    value,
-    valueSignal,
-    onEditEnd,
-    constraints,
-    type,
-    required,
-    readOnly,
-    min,
-    max,
-    step,
-    minLength,
-    maxLength,
-    pattern,
-    wrapperProps,
-    autoSelect = true,
-    width,
-    height,
-    ...rest
-  } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  if (valueSignal) {
-    value = valueSignal.value;
-  }
-  const editingPreviousRef = useRef(editing);
-  const valueWhenEditStartRef = useRef(editing ? value : undefined);
-  if (editingPreviousRef.current !== editing) {
-    if (editing) {
-      valueWhenEditStartRef.current = value; // Always store the external value
-    }
-    editingPreviousRef.current = editing;
-  }
 
-  // Simulate typing the initial value when editing starts with a custom value
-  useLayoutEffect(() => {
-    if (!editing) {
-      return;
-    }
-    const editingEvent = editing.event;
-    if (!editingEvent) {
-      return;
-    }
-    const editingEventInitialValue = editingEvent.detail?.initialValue;
-    if (editingEventInitialValue === undefined) {
-      return;
-    }
-    const input = innerRef.current;
-    input.value = editingEventInitialValue;
-    input.dispatchEvent(new CustomEvent("input", {
-      bubbles: false
-    }));
-  }, [editing]);
-  const input = jsx(Input, {
-    ref: innerRef,
-    ...rest,
-    type: type,
-    name: name,
-    value: value,
-    valueSignal: valueSignal,
-    autoFocus: true,
-    autoFocusVisible: true,
-    autoSelect: autoSelect,
-    cancelOnEscape: true,
-    cancelOnBlurInvalid: true,
-    constraints: constraints,
-    required: required,
-    readOnly: readOnly,
-    min: min,
-    max: max,
-    step: step,
-    minLength: minLength,
-    maxLength: maxLength,
-    pattern: pattern,
-    width: width,
-    height: height,
-    onCancel: e => {
-      if (valueSignal) {
-        valueSignal.value = valueWhenEditStartRef.current;
-      }
-      onEditEnd({
-        cancelled: true,
-        event: e
-      });
-    },
-    onBlur: e => {
-      const value = type === "number" ? e.target.valueAsNumber : e.target.value;
-      const valueWhenEditStart = valueWhenEditStartRef.current;
-      if (value === valueWhenEditStart) {
-        onEditEnd({
-          cancelled: true,
-          event: e
-        });
-        return;
-      }
-    },
-    action: action || (() => {}),
-    onActionEnd: e => {
-      onEditEnd({
-        success: true,
-        event: e
-      });
-    }
-  });
-  return jsxs(Fragment, {
-    children: [children || jsx("span", {
-      children: value
-    }), editing && jsx("div", {
-      ...wrapperProps,
-      className: ["navi_editable_wrapper", ...(wrapperProps?.className || "").split(" ")].join(" "),
-      children: input
-    })]
-  });
-});
+/**
+ *
+ * Here we want the same behaviour as web standards:
+ *
+ * 1. When submitting the form URL does not change
+ * 2. When form submission id done user is redirected (by default the current one)
+ *    (we can configure this using target)
+ *    So for example user might be reidrect to a page with the resource he just created
+ *    I could create an example where we would put a link on the page to let user see what he created
+ *    but by default user stays on the form allowing to create multiple resources at once
+ *    And an other where he is redirected to the resource he created
+ * 3. If form submission fails ideally we should display this somewhere on the UI
+ *    right now it's just logged to the console I need to see how we can achieve this
+ */
 
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  @layer navi {
-    .navi_checkbox_list {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-`;
-const CheckboxList = forwardRef((props, ref) => {
-  const uiStateController = useUIGroupStateController(props, "checkbox_list", {
-    childComponentType: "checkbox",
+const Form = props => {
+  const uiStateController = useUIGroupStateController(props, "form", {
+    childComponentType: "*",
     aggregateChildStates: childUIStateControllers => {
-      const values = [];
+      const formValues = {};
       for (const childUIStateController of childUIStateControllers) {
-        if (childUIStateController.uiState) {
-          values.push(childUIStateController.uiState);
+        const {
+          name,
+          uiState
+        } = childUIStateController;
+        if (!name) {
+          console.warn("A form child component is missing a name property, its state won't be included in the form state", childUIStateController);
+          continue;
         }
+        formValues[name] = uiState;
       }
-      return values.length === 0 ? undefined : values;
+      return formValues;
     }
   });
   const uiState = useUIState(uiStateController);
-  const checkboxList = renderActionableComponent(props, ref);
+  const form = renderActionableComponent(props, {
+    Basic: FormBasic,
+    WithAction: FormWithAction
+  });
   return jsx(UIStateControllerContext.Provider, {
     value: uiStateController,
     children: jsx(UIStateContext.Provider, {
       value: uiState,
-      children: checkboxList
+      children: form
     })
   });
-});
-const Checkbox = InputCheckbox;
-const CheckboxListBasic = forwardRef((props, ref) => {
-  const contextReadOnly = useContext(ReadOnlyContext);
-  const contextDisabled = useContext(DisabledContext);
-  const contextLoading = useContext(LoadingContext);
+};
+const FormBasic = props => {
   const uiStateController = useContext(UIStateControllerContext);
   const {
-    name,
     readOnly,
-    disabled,
-    required,
     loading,
     children,
     ...rest
   } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  const innerLoading = loading || contextLoading;
-  const innerReadOnly = readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
-  const innerDisabled = disabled || contextDisabled;
-  return jsx("div", {
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
+
+  // instantiation validation to:
+  // - receive "requestsubmit" custom event ensure submit is prevented
+  // (and also execute action without validation if form.submit() is ever called)
+  useConstraints(ref, []);
+  const innerReadOnly = readOnly || loading;
+  const formContextValue = useMemo(() => {
+    return {
+      loading
+    };
+  }, [loading]);
+  return jsx(Box, {
     ...rest,
-    ref: innerRef,
-    name: name,
-    className: "navi_checkbox_list",
-    "data-checkbox-list": true
-    // eslint-disable-next-line react/no-unknown-property
-    ,
-    onresetuistate: e => {
+    as: "form",
+    ref: ref,
+    onReset: e => {
+      // browser would empty all fields to their default values (likely empty/unchecked)
+      // we want to reset to the last known external state instead
+      e.preventDefault();
       uiStateController.resetUIState(e);
     },
     children: jsx(ParentUIStateControllerContext.Provider, {
       value: uiStateController,
-      children: jsx(FieldNameContext.Provider, {
-        value: name,
-        children: jsx(ReadOnlyContext.Provider, {
-          value: innerReadOnly,
-          children: jsx(DisabledContext.Provider, {
-            value: innerDisabled,
-            children: jsx(RequiredContext.Provider, {
-              value: required,
-              children: jsx(LoadingContext.Provider, {
-                value: innerLoading,
-                children: children
-              })
-            })
+      children: jsx(ReadOnlyContext.Provider, {
+        value: innerReadOnly,
+        children: jsx(LoadingContext.Provider, {
+          value: loading,
+          children: jsx(FormContext.Provider, {
+            value: formContextValue,
+            children: children
           })
         })
       })
     })
   });
-});
-forwardRef((props, ref) => {
+};
+const FormWithAction = props => {
   const uiStateController = useContext(UIStateControllerContext);
   const uiState = useContext(UIStateContext);
   const {
     action,
-    actionErrorEffect,
-    onCancel,
+    method,
+    actionErrorEffect = "show_validation_message",
+    // "show_validation_message" or "throw"
+    errorMapping,
     onActionPrevented,
     onActionStart,
     onActionAbort,
@@ -17597,265 +17454,18 @@ forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  const [boundAction] = useActionBoundToOneArrayParam(action, uiState);
-  const {
-    loading: actionLoading
-  } = useActionStatus(boundAction);
-  const executeAction = useExecuteAction(innerRef, {
-    errorEffect: actionErrorEffect
+  const defaultRef = useRef();
+  const ref = props.ref || defaultRef;
+  const [actionBoundToUIState] = useActionBoundToOneParam(action, uiState);
+  const executeAction = useExecuteAction(ref, {
+    errorEffect: actionErrorEffect,
+    errorMapping
   });
-  const [actionRequester, setActionRequester] = useState(null);
-  useActionEvents(innerRef, {
-    onCancel: (e, reason) => {
-      uiStateController.resetUIState(e);
-      onCancel?.(e, reason);
-    },
-    onPrevented: onActionPrevented,
-    onAction: actionEvent => {
-      setActionRequester(actionEvent.detail.requester);
-      executeAction(actionEvent);
-    },
-    onStart: onActionStart,
-    onAbort: e => {
-      uiStateController.resetUIState(e);
-      onActionAbort?.(e);
-    },
-    onError: e => {
-      uiStateController.resetUIState(e);
-      onActionError?.(e);
-    },
-    onEnd: e => {
-      onActionEnd?.(e);
-    }
-  });
-  return jsx(CheckboxListBasic, {
-    "data-action": boundAction.name,
-    ...rest,
-    ref: innerRef,
-    onChange: event => {
-      const checkboxList = innerRef.current;
-      const checkbox = event.target;
-      requestAction(checkboxList, boundAction, {
-        event,
-        requester: checkbox
-      });
-    },
-    loading: loading || actionLoading,
-    children: jsx(LoadingElementContext.Provider, {
-      value: actionRequester,
-      children: children
-    })
-  });
-});
-
-const collectFormElementValues = (element) => {
-  let formElements;
-  if (element.tagName === "FORM") {
-    formElements = element.elements;
-  } else {
-    // fieldset or anything else
-    formElements = element.querySelectorAll(
-      "input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button[name]:not([disabled])",
-    );
-  }
-
-  const values = {};
-  const checkboxArrayNameSet = new Set();
-  for (const formElement of formElements) {
-    if (formElement.type === "checkbox" && formElement.name) {
-      const name = formElement.name;
-      const endsWithBrackets = name.endsWith("[]");
-      if (endsWithBrackets) {
-        checkboxArrayNameSet.add(name);
-        values[name] = [];
-        continue;
-      }
-      const closestDataCheckboxList = formElement.closest(
-        "[data-checkbox-list]",
-      );
-      if (closestDataCheckboxList) {
-        checkboxArrayNameSet.add(name);
-        values[name] = [];
-      }
-    }
-  }
-
-  for (const formElement of formElements) {
-    const name = formElement.name;
-    if (!name) {
-      continue;
-    }
-    const value = getFormElementValue(formElement);
-    if (value === undefined) {
-      continue; // Skip unchecked checkboxes/radios
-    }
-    if (formElement.type === "checkbox" && checkboxArrayNameSet.has(name)) {
-      values[name].push(value);
-    } else {
-      values[name] = value;
-    }
-  }
-  return values;
-};
-
-const getFormElementValue = (formElement) => {
-  const { type, tagName } = formElement;
-
-  if (tagName === "SELECT") {
-    if (formElement.multiple) {
-      return Array.from(formElement.selectedOptions, (option) =>
-        getValue(option),
-      );
-    }
-    return formElement.value;
-  }
-
-  if (type === "checkbox" || type === "radio") {
-    return formElement.checked ? getValue(formElement) : undefined;
-  }
-
-  if (type === "file") {
-    return formElement.files; // Return FileList for special handling
-  }
-
-  return getValue(formElement);
-};
-
-const getValue = (formElement) => {
-  const hasDataValueAttribute = formElement.hasAttribute("data-value");
-  if (hasDataValueAttribute) {
-    // happens for "datetime-local" inputs to keep the timezone
-    // consistent when sending to the server
-    return formElement.getAttribute("data-value");
-  }
-  return formElement.value;
-};
-
-/**
- *
- * Here we want the same behaviour as web standards:
- *
- * 1. When submitting the form URL does not change
- * 2. When form submission id done user is redirected (by default the current one)
- *    (we can configure this using target)
- *    So for example user might be reidrect to a page with the resource he just created
- *    I could create an example where we would put a link on the page to let user see what he created
- *    but by default user stays on the form allowing to create multiple resources at once
- *    And an other where he is redirected to the resource he created
- * 3. If form submission fails ideally we should display this somewhere on the UI
- *    right now it's just logged to the console I need to see how we can achieve this
- */
-
-const Form = props => {
-  const uiStateController = useUIGroupStateController(props, "form", {
-    childComponentType: "*",
-    aggregateChildStates: childUIStateControllers => {
-      const formValues = {};
-      for (const childUIStateController of childUIStateControllers) {
-        const {
-          name,
-          uiState
-        } = childUIStateController;
-        if (!name) {
-          console.warn("A form child component is missing a name property, its state won't be included in the form state", childUIStateController);
-          continue;
-        }
-        formValues[name] = uiState;
-      }
-      return formValues;
-    }
-  });
-  const uiState = useUIState(uiStateController);
-  const form = renderActionableComponent(props, {
-    Basic: FormBasic,
-    WithAction: FormWithAction
-  });
-  return jsx(UIStateControllerContext.Provider, {
-    value: uiStateController,
-    children: jsx(UIStateContext.Provider, {
-      value: uiState,
-      children: form
-    })
-  });
-};
-const FormBasic = props => {
-  const uiStateController = useContext(UIStateControllerContext);
-  const {
-    readOnly,
-    loading,
-    children,
-    ...rest
-  } = props;
-  const defaultRef = useRef();
-  const ref = props.ref || defaultRef;
-
-  // instantiation validation to:
-  // - receive "requestsubmit" custom event ensure submit is prevented
-  // (and also execute action without validation if form.submit() is ever called)
-  useConstraints(ref, []);
-  const innerReadOnly = readOnly || loading;
-  const formContextValue = useMemo(() => {
-    return {
-      loading
-    };
-  }, [loading]);
-  return jsx(Box, {
-    ...rest,
-    as: "form",
-    ref: ref,
-    onReset: e => {
-      // browser would empty all fields to their default values (likely empty/unchecked)
-      // we want to reset to the last known external state instead
-      e.preventDefault();
-      uiStateController.resetUIState(e);
-    },
-    children: jsx(ParentUIStateControllerContext.Provider, {
-      value: uiStateController,
-      children: jsx(ReadOnlyContext.Provider, {
-        value: innerReadOnly,
-        children: jsx(LoadingContext.Provider, {
-          value: loading,
-          children: jsx(FormContext.Provider, {
-            value: formContextValue,
-            children: children
-          })
-        })
-      })
-    })
-  });
-};
-const FormWithAction = props => {
-  const uiStateController = useContext(UIStateControllerContext);
-  const uiState = useContext(UIStateContext);
-  const {
-    action,
-    method,
-    actionErrorEffect = "show_validation_message",
-    // "show_validation_message" or "throw"
-    errorMapping,
-    onActionPrevented,
-    onActionStart,
-    onActionAbort,
-    onActionError,
-    onActionEnd,
-    loading,
-    children,
-    ...rest
-  } = props;
-  const defaultRef = useRef();
-  const ref = props.ref || defaultRef;
-  const [actionBoundToUIState] = useActionBoundToOneParam(action, uiState);
-  const executeAction = useExecuteAction(ref, {
-    errorEffect: actionErrorEffect,
-    errorMapping
-  });
-  const {
-    actionPending,
-    actionRequester: formActionRequester
-  } = useRequestedActionStatus(ref);
-  useActionEvents(ref, {
+  const {
+    actionPending,
+    actionRequester: formActionRequester
+  } = useRequestedActionStatus(ref);
+  useActionEvents(ref, {
     onPrevented: onActionPrevented,
     onRequested: e => {
       forwardActionRequested(e, actionBoundToUIState);
@@ -18104,213 +17714,759 @@ const useRefArray = (items, keyFromItem) => {
 };
 
 installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_select[data-readonly] {
-    pointer-events: none;
+  .navi_select[data-readonly] {
+    pointer-events: none;
+  }
+`;
+const Select = forwardRef((props, ref) => {
+  const select = renderActionableComponent(props, ref);
+  return select;
+});
+const SelectControlled = forwardRef((props, ref) => {
+  const {
+    name,
+    value,
+    loading,
+    disabled,
+    readOnly,
+    children,
+    ...rest
+  } = props;
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  const selectElement = jsx("select", {
+    className: "navi_select",
+    ref: innerRef,
+    "data-readonly": readOnly && !disabled ? "" : undefined,
+    onKeyDown: e => {
+      if (readOnly) {
+        e.preventDefault();
+      }
+    },
+    ...rest,
+    children: children.map(child => {
+      const {
+        label,
+        readOnly: childReadOnly,
+        disabled: childDisabled,
+        loading: childLoading,
+        value: childValue,
+        ...childRest
+      } = child;
+      return jsx("option", {
+        name: name,
+        value: childValue,
+        selected: childValue === value,
+        readOnly: readOnly || childReadOnly,
+        disabled: disabled || childDisabled,
+        loading: loading || childLoading,
+        ...childRest,
+        children: label
+      }, childValue);
+    })
+  });
+  return jsx(LoaderBackground, {
+    loading: loading,
+    color: "light-dark(#355fcc, #3b82f6)",
+    inset: -1,
+    children: selectElement
+  });
+});
+forwardRef((props, ref) => {
+  const {
+    value: initialValue,
+    id,
+    children,
+    ...rest
+  } = props;
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  const [navState, setNavState] = useNavState(id);
+  const valueAtStart = navState === undefined ? initialValue : navState;
+  const [value, setValue] = useState(valueAtStart);
+  useEffect(() => {
+    setNavState(value);
+  }, [value]);
+  return jsx(SelectControlled, {
+    ref: innerRef,
+    value: value,
+    onChange: event => {
+      const select = event.target;
+      const selectedValue = select.value;
+      setValue(selectedValue);
+    },
+    ...rest,
+    children: children
+  });
+});
+forwardRef((props, ref) => {
+  const {
+    id,
+    name,
+    value: externalValue,
+    valueSignal,
+    action,
+    children,
+    onCancel,
+    onActionPrevented,
+    onActionStart,
+    onActionAbort,
+    onActionError,
+    onActionEnd,
+    actionErrorEffect,
+    ...rest
+  } = props;
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  const [navState, setNavState, resetNavState] = useNavState(id);
+  const [boundAction, value, setValue, initialValue] = useActionBoundToOneParam(action, name);
+  const {
+    loading: actionLoading
+  } = useActionStatus(boundAction);
+  const executeAction = useExecuteAction(innerRef, {
+    errorEffect: actionErrorEffect
+  });
+  useEffect(() => {
+    setNavState(value);
+  }, [value]);
+  const actionRequesterRef = useRef(null);
+  useActionEvents(innerRef, {
+    onCancel: (e, reason) => {
+      resetNavState();
+      setValue(initialValue);
+      onCancel?.(e, reason);
+    },
+    onPrevented: onActionPrevented,
+    onAction: actionEvent => {
+      actionRequesterRef.current = actionEvent.detail.requester;
+      executeAction(actionEvent);
+    },
+    onStart: onActionStart,
+    onAbort: e => {
+      setValue(initialValue);
+      onActionAbort?.(e);
+    },
+    onError: error => {
+      setValue(initialValue);
+      onActionError?.(error);
+    },
+    onEnd: () => {
+      resetNavState();
+      onActionEnd?.();
+    }
+  });
+  const childRefArray = useRefArray(children, child => child.value);
+  return jsx(SelectControlled, {
+    ref: innerRef,
+    name: name,
+    value: value,
+    "data-action": boundAction,
+    onChange: event => {
+      const select = event.target;
+      const selectedValue = select.value;
+      setValue(selectedValue);
+      const radioListContainer = innerRef.current;
+      const optionSelected = select.querySelector(`option[value="${selectedValue}"]`);
+      requestAction(radioListContainer, boundAction, {
+        event,
+        requester: optionSelected
+      });
+    },
+    ...rest,
+    children: children.map((child, i) => {
+      const childRef = childRefArray[i];
+      return {
+        ...child,
+        ref: childRef,
+        loading: child.loading || actionLoading && actionRequesterRef.current === childRef.current,
+        readOnly: child.readOnly || actionLoading
+      };
+    })
+  });
+});
+forwardRef((props, ref) => {
+  const {
+    id,
+    name,
+    value: externalValue,
+    children,
+    ...rest
+  } = props;
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  const [navState, setNavState] = useNavState(id);
+  const [value, setValue, initialValue] = [name, externalValue, navState];
+  useEffect(() => {
+    setNavState(value);
+  }, [value]);
+  useFormEvents(innerRef, {
+    onFormReset: () => {
+      setValue(undefined);
+    },
+    onFormActionAbort: () => {
+      setValue(initialValue);
+    },
+    onFormActionError: () => {
+      setValue(initialValue);
+    }
+  });
+  return jsx(SelectControlled, {
+    ref: innerRef,
+    name: name,
+    value: value,
+    onChange: event => {
+      const select = event.target;
+      const selectedValue = select.checked;
+      setValue(selectedValue);
+    },
+    ...rest,
+    children: children
+  });
+});
+
+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
+  // it's also possible that front is unsync with backend, preventing user to choose a value
+  // that is actually free.
+  // But this is unlikely to happen and user could reload the page to be able to choose that name
+  // that suddenly became available
+  existingValueSet,
+  message = `"{value}" already exists. Please choose another value.`,
+) => {
+  return {
+    name: "unique_value",
+    check: (input) => {
+      const inputValue = input.value;
+      const hasConflict = existingValueSet.has(inputValue);
+      // console.log({
+      //   inputValue,
+      //   names: Array.from(otherNameSet.values()),
+      //   hasConflict,
+      // });
+      if (hasConflict) {
+        return message.replace("{value}", inputValue);
+      }
+      return "";
+    },
+  };
+};
+
+const SINGLE_SPACE_CONSTRAINT = {
+  name: "single_space",
+  check: (input) => {
+    const inputValue = input.value;
+    const hasLeadingSpace = inputValue.startsWith(" ");
+    const hasTrailingSpace = inputValue.endsWith(" ");
+    const hasDoubleSpace = inputValue.includes("  ");
+    if (hasLeadingSpace || hasDoubleSpace || hasTrailingSpace) {
+      return "Spaces at the beginning, end, or consecutive spaces are not allowed";
+    }
+    return "";
+  },
+};
+
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .action_error {
+    padding: 20px;
+    background: #fdd;
+    border: 1px solid red;
+    margin-top: 0;
+    margin-bottom: 20px;
+  }
+`;
+const renderIdleDefault = () => null;
+const renderLoadingDefault = () => null;
+const renderAbortedDefault = () => null;
+const renderErrorDefault = error => {
+  let routeErrorText = error && error.message ? error.message : error;
+  return jsxs("p", {
+    className: "action_error",
+    children: ["An error occured: ", routeErrorText]
+  });
+};
+const renderCompletedDefault = () => null;
+const ActionRenderer = ({
+  action,
+  children,
+  disabled
+}) => {
+  const {
+    idle: renderIdle = renderIdleDefault,
+    loading: renderLoading = renderLoadingDefault,
+    aborted: renderAborted = renderAbortedDefault,
+    error: renderError = renderErrorDefault,
+    completed: renderCompleted,
+    always: renderAlways
+  } = typeof children === "function" ? {
+    completed: children
+  } : children || {};
+  if (disabled) {
+    return null;
+  }
+  if (action === undefined) {
+    throw new Error("ActionRenderer requires an action to render, but none was provided.");
+  }
+  const {
+    idle,
+    loading,
+    aborted,
+    error,
+    data
+  } = useActionStatus(action);
+  const UIRenderedPromise = useUIRenderedPromise(action);
+  const [errorBoundary, resetErrorBoundary] = useErrorBoundary();
+
+  // Mark this action as bound to UI components (has renderers)
+  // This tells the action system that errors should be caught and stored
+  // in the action's error state rather than bubbling up
+  useLayoutEffect(() => {
+    if (action) {
+      const {
+        ui
+      } = getActionPrivateProperties(action);
+      ui.hasRenderers = true;
+    }
+  }, [action]);
+  useLayoutEffect(() => {
+    resetErrorBoundary();
+  }, [action, loading, idle, resetErrorBoundary]);
+  useLayoutEffect(() => {
+    UIRenderedPromise.resolve();
+    return () => {
+      actionUIRenderedPromiseWeakMap.delete(action);
+    };
+  }, [action]);
+
+  // If renderAlways is provided, it wins and handles all rendering
+  if (renderAlways) {
+    return renderAlways({
+      idle,
+      loading,
+      aborted,
+      error,
+      data
+    });
+  }
+  if (idle) {
+    return renderIdle(action);
+  }
+  if (errorBoundary) {
+    return renderError(errorBoundary, "ui_error", action);
+  }
+  if (error) {
+    return renderError(error, "action_error", action);
+  }
+  if (aborted) {
+    return renderAborted(action);
+  }
+  let renderCompletedSafe;
+  if (renderCompleted) {
+    renderCompletedSafe = renderCompleted;
+  } else {
+    const {
+      ui
+    } = getActionPrivateProperties(action);
+    if (ui.renderCompleted) {
+      renderCompletedSafe = ui.renderCompleted;
+    } else {
+      renderCompletedSafe = renderCompletedDefault;
+    }
+  }
+  if (loading) {
+    if (action.canDisplayOldData && data !== undefined) {
+      return renderCompletedSafe(data, action);
+    }
+    return renderLoading(action);
+  }
+  return renderCompletedSafe(data, action);
+};
+const defaultPromise = Promise.resolve();
+defaultPromise.resolve = () => {};
+const actionUIRenderedPromiseWeakMap = new WeakMap();
+const useUIRenderedPromise = action => {
+  if (!action) {
+    return defaultPromise;
+  }
+  const actionUIRenderedPromise = actionUIRenderedPromiseWeakMap.get(action);
+  if (actionUIRenderedPromise) {
+    return actionUIRenderedPromise;
+  }
+  let resolve;
+  const promise = new Promise(res => {
+    resolve = res;
+  });
+  promise.resolve = resolve;
+  actionUIRenderedPromiseWeakMap.set(action, promise);
+  return promise;
+};
+
+const useFocusGroup = (
+  elementRef,
+  { enabled = true, direction, skipTab, loop, name } = {},
+) => {
+  useLayoutEffect(() => {
+    if (!enabled) {
+      return null;
+    }
+    const focusGroup = initFocusGroup(elementRef.current, {
+      direction,
+      skipTab,
+      loop,
+      name,
+    });
+    return focusGroup.cleanup;
+  }, [direction, skipTab, loop, name]);
+};
+
+installImportMetaCss(import.meta);const rightArrowPath = "M680-480L360-160l-80-80 240-240-240-240 80-80 320 320z";
+const downArrowPath = "M480-280L160-600l80-80 240 240 240-240 80 80-320 320z";
+import.meta.css = /* css */`
+  .summary_marker {
+    width: 1em;
+    height: 1em;
+    line-height: 1em;
+  }
+  .summary_marker_svg .arrow {
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+  .summary_marker_svg .arrow[data-animation-target="down"] {
+    animation-name: morph-to-down;
+  }
+  @keyframes morph-to-down {
+    from {
+      d: path("${rightArrowPath}");
+    }
+    to {
+      d: path("${downArrowPath}");
+    }
+  }
+  .summary_marker_svg .arrow[data-animation-target="right"] {
+    animation-name: morph-to-right;
+  }
+  @keyframes morph-to-right {
+    from {
+      d: path("${downArrowPath}");
+    }
+    to {
+      d: path("${rightArrowPath}");
+    }
+  }
+
+  .summary_marker_svg .foreground_circle {
+    stroke-dasharray: 503 1507; /* ~25% of circle perimeter */
+    stroke-dashoffset: 0;
+    animation: progress-around-circle 1.5s linear infinite;
+  }
+  @keyframes progress-around-circle {
+    0% {
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dashoffset: -2010;
+    }
+  }
+
+  /* fading and scaling */
+  .summary_marker_svg .arrow {
+    transition: opacity 0.3s ease-in-out;
+    opacity: 1;
+  }
+  .summary_marker_svg .loading_container {
+    transition: transform 0.3s linear;
+    transform: scale(0.3);
+  }
+  .summary_marker_svg .background_circle,
+  .summary_marker_svg .foreground_circle {
+    transition: opacity 0.3s ease-in-out;
+    opacity: 0;
+  }
+  .summary_marker_svg[data-loading] .arrow {
+    opacity: 0;
+  }
+  .summary_marker_svg[data-loading] .loading_container {
+    transform: scale(1);
+  }
+  .summary_marker_svg[data-loading] .background_circle {
+    opacity: 0.2;
+  }
+  .summary_marker_svg[data-loading] .foreground_circle {
+    opacity: 1;
+  }
+`;
+const SummaryMarker = ({
+  open,
+  loading
+}) => {
+  const showLoading = useDebounceTrue(loading, 300);
+  const mountedRef = useRef(false);
+  const prevOpenRef = useRef(open);
+  useLayoutEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const shouldAnimate = mountedRef.current && prevOpenRef.current !== open;
+  prevOpenRef.current = open;
+  return jsx("span", {
+    className: "summary_marker",
+    children: jsxs("svg", {
+      className: "summary_marker_svg",
+      viewBox: "0 -960 960 960",
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-loading": open ? showLoading || undefined : undefined,
+      children: [jsxs("g", {
+        className: "loading_container",
+        "transform-origin": "480px -480px",
+        children: [jsx("circle", {
+          className: "background_circle",
+          cx: "480",
+          cy: "-480",
+          r: "320",
+          stroke: "currentColor",
+          fill: "none",
+          strokeWidth: "60",
+          opacity: "0.2"
+        }), jsx("circle", {
+          className: "foreground_circle",
+          cx: "480",
+          cy: "-480",
+          r: "320",
+          stroke: "currentColor",
+          fill: "none",
+          strokeWidth: "60",
+          strokeLinecap: "round",
+          strokeDasharray: "503 1507"
+        })]
+      }), jsx("g", {
+        className: "arrow_container",
+        "transform-origin": "480px -480px",
+        children: jsx("path", {
+          className: "arrow",
+          fill: "currentColor",
+          "data-animation-target": shouldAnimate ? open ? "down" : "right" : undefined,
+          d: open ? downArrowPath : rightArrowPath
+        })
+      })]
+    })
+  });
+};
+
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  .navi_details {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+  }
+
+  .navi_details > summary {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    cursor: pointer;
+    user-select: none;
+  }
+  .summary_body {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.2em;
+  }
+  .summary_label {
+    display: flex;
+    padding-right: 10px;
+    flex: 1;
+    align-items: center;
+    gap: 0.2em;
+  }
+
+  .navi_details > summary:focus {
+    z-index: 1;
   }
 `;
-const Select = forwardRef((props, ref) => {
-  const select = renderActionableComponent(props, ref);
-  return select;
-});
-const SelectControlled = forwardRef((props, ref) => {
-  const {
-    name,
-    value,
-    loading,
-    disabled,
-    readOnly,
-    children,
-    ...rest
-  } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  const selectElement = jsx("select", {
-    className: "navi_select",
-    ref: innerRef,
-    "data-readonly": readOnly && !disabled ? "" : undefined,
-    onKeyDown: e => {
-      if (readOnly) {
-        e.preventDefault();
-      }
-    },
-    ...rest,
-    children: children.map(child => {
-      const {
-        label,
-        readOnly: childReadOnly,
-        disabled: childDisabled,
-        loading: childLoading,
-        value: childValue,
-        ...childRest
-      } = child;
-      return jsx("option", {
-        name: name,
-        value: childValue,
-        selected: childValue === value,
-        readOnly: readOnly || childReadOnly,
-        disabled: disabled || childDisabled,
-        loading: loading || childLoading,
-        ...childRest,
-        children: label
-      }, childValue);
-    })
-  });
-  return jsx(LoaderBackground, {
-    loading: loading,
-    color: "light-dark(#355fcc, #3b82f6)",
-    inset: -1,
-    children: selectElement
-  });
+const Details = forwardRef((props, ref) => {
+  return renderActionableComponent(props, ref);
 });
-forwardRef((props, ref) => {
+const DetailsBasic = forwardRef((props, ref) => {
   const {
-    value: initialValue,
     id,
+    label = "Summary",
+    open,
+    loading,
+    className,
+    focusGroup,
+    focusGroupDirection,
+    arrowKeyShortcuts = true,
+    openKeyShortcut = "ArrowRight",
+    closeKeyShortcut = "ArrowLeft",
+    onToggle,
     children,
     ...rest
   } = props;
   const innerRef = useRef();
   useImperativeHandle(ref, () => innerRef.current);
   const [navState, setNavState] = useNavState(id);
-  const valueAtStart = navState === undefined ? initialValue : navState;
-  const [value, setValue] = useState(valueAtStart);
-  useEffect(() => {
-    setNavState(value);
-  }, [value]);
-  return jsx(SelectControlled, {
-    ref: innerRef,
-    value: value,
-    onChange: event => {
-      const select = event.target;
-      const selectedValue = select.value;
-      setValue(selectedValue);
-    },
-    ...rest,
-    children: children
-  });
-});
-forwardRef((props, ref) => {
-  const {
-    id,
-    name,
-    value: externalValue,
-    valueSignal,
-    action,
-    children,
-    onCancel,
-    onActionPrevented,
-    onActionStart,
-    onActionAbort,
-    onActionError,
-    onActionEnd,
-    actionErrorEffect,
-    ...rest
-  } = props;
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-  const [navState, setNavState, resetNavState] = useNavState(id);
-  const [boundAction, value, setValue, initialValue] = useActionBoundToOneParam(action, name);
-  const {
-    loading: actionLoading
-  } = useActionStatus(boundAction);
-  const executeAction = useExecuteAction(innerRef, {
-    errorEffect: actionErrorEffect
-  });
-  useEffect(() => {
-    setNavState(value);
-  }, [value]);
-  const actionRequesterRef = useRef(null);
-  useActionEvents(innerRef, {
-    onCancel: (e, reason) => {
-      resetNavState();
-      setValue(initialValue);
-      onCancel?.(e, reason);
-    },
-    onPrevented: onActionPrevented,
-    onAction: actionEvent => {
-      actionRequesterRef.current = actionEvent.detail.requester;
-      executeAction(actionEvent);
-    },
-    onStart: onActionStart,
-    onAbort: e => {
-      setValue(initialValue);
-      onActionAbort?.(e);
-    },
-    onError: error => {
-      setValue(initialValue);
-      onActionError?.(error);
-    },
-    onEnd: () => {
-      resetNavState();
-      onActionEnd?.();
-    }
+  const [innerOpen, innerOpenSetter] = useState(open || navState);
+  useFocusGroup(innerRef, {
+    enabled: focusGroup,
+    name: typeof focusGroup === "string" ? focusGroup : undefined,
+    direction: focusGroupDirection
   });
-  const childRefArray = useRefArray(children, child => child.value);
-  return jsx(SelectControlled, {
-    ref: innerRef,
-    name: name,
-    value: value,
-    "data-action": boundAction,
-    onChange: event => {
-      const select = event.target;
-      const selectedValue = select.value;
-      setValue(selectedValue);
-      const radioListContainer = innerRef.current;
-      const optionSelected = select.querySelector(`option[value="${selectedValue}"]`);
-      requestAction(radioListContainer, boundAction, {
-        event,
-        requester: optionSelected
+
+  /**
+   * Browser will dispatch "toggle" event even if we set open={true}
+   * When rendering the component for the first time
+   * We have to ensure the initial "toggle" event is ignored.
+   *
+   * If we don't do that code will think the details has changed and run logic accordingly
+   * For example it will try to navigate to the current url while we are already there
+   *
+   * See:
+   * - https://techblog.thescore.com/2024/10/08/why-we-decided-to-change-how-the-details-element-works/
+   * - https://github.com/whatwg/html/issues/4500
+   * - https://stackoverflow.com/questions/58942600/react-html-details-toggles-uncontrollably-when-starts-open
+   *
+   */
+
+  const summaryRef = useRef(null);
+  useKeyboardShortcuts(innerRef, [{
+    key: openKeyShortcut,
+    enabled: arrowKeyShortcuts,
+    when: e => document.activeElement === summaryRef.current &&
+    // avoid handling openKeyShortcut twice when keydown occurs inside nested details
+    !e.defaultPrevented,
+    action: e => {
+      const details = innerRef.current;
+      if (!details.open) {
+        e.preventDefault();
+        details.open = true;
+        return;
+      }
+      const summary = summaryRef.current;
+      const firstFocusableElementInDetails = findAfter(summary, elementIsFocusable, {
+        root: details
       });
+      if (!firstFocusableElementInDetails) {
+        return;
+      }
+      e.preventDefault();
+      firstFocusableElementInDetails.focus();
+    }
+  }, {
+    key: closeKeyShortcut,
+    enabled: arrowKeyShortcuts,
+    when: () => {
+      const details = innerRef.current;
+      return details.open;
     },
+    action: e => {
+      const details = innerRef.current;
+      const summary = summaryRef.current;
+      if (document.activeElement === summary) {
+        e.preventDefault();
+        summary.focus();
+        details.open = false;
+      } else {
+        e.preventDefault();
+        summary.focus();
+      }
+    }
+  }]);
+  const mountedRef = useRef(false);
+  useEffect(() => {
+    mountedRef.current = true;
+  }, []);
+  return jsxs("details", {
     ...rest,
-    children: children.map((child, i) => {
-      const childRef = childRefArray[i];
-      return {
-        ...child,
-        ref: childRef,
-        loading: child.loading || actionLoading && actionRequesterRef.current === childRef.current,
-        readOnly: child.readOnly || actionLoading
-      };
-    })
+    ref: innerRef,
+    id: id,
+    className: ["navi_details", ...(className ? className.split(" ") : [])].join(" "),
+    onToggle: e => {
+      const isOpen = e.newState === "open";
+      if (mountedRef.current) {
+        if (isOpen) {
+          innerOpenSetter(true);
+          setNavState(true);
+        } else {
+          innerOpenSetter(false);
+          setNavState(undefined);
+        }
+      }
+      onToggle?.(e);
+    },
+    open: innerOpen,
+    children: [jsx("summary", {
+      ref: summaryRef,
+      children: jsxs("div", {
+        className: "summary_body",
+        children: [jsx(SummaryMarker, {
+          open: innerOpen,
+          loading: loading
+        }), jsx("div", {
+          className: "summary_label",
+          children: label
+        })]
+      })
+    }), children]
   });
 });
 forwardRef((props, ref) => {
   const {
-    id,
-    name,
-    value: externalValue,
+    action,
+    loading,
+    onToggle,
+    onActionPrevented,
+    onActionStart,
+    onActionError,
+    onActionEnd,
     children,
     ...rest
   } = props;
   const innerRef = useRef();
   useImperativeHandle(ref, () => innerRef.current);
-  const [navState, setNavState] = useNavState(id);
-  const [value, setValue, initialValue] = [name, externalValue, navState];
-  useEffect(() => {
-    setNavState(value);
-  }, [value]);
-  useFormEvents(innerRef, {
-    onFormReset: () => {
-      setValue(undefined);
-    },
-    onFormActionAbort: () => {
-      setValue(initialValue);
+  const effectiveAction = useAction(action);
+  const {
+    loading: actionLoading
+  } = useActionStatus(effectiveAction);
+  const executeAction = useExecuteAction(innerRef, {
+    // the error will be displayed by actionRenderer inside <details>
+    errorEffect: "none"
+  });
+  useActionEvents(innerRef, {
+    onPrevented: onActionPrevented,
+    onAction: e => {
+      executeAction(e);
     },
-    onFormActionError: () => {
-      setValue(initialValue);
-    }
+    onStart: onActionStart,
+    onError: onActionError,
+    onEnd: onActionEnd
   });
-  return jsx(SelectControlled, {
+  return jsx(DetailsBasic, {
+    ...rest,
     ref: innerRef,
-    name: name,
-    value: value,
-    onChange: event => {
-      const select = event.target;
-      const selectedValue = select.checked;
-      setValue(selectedValue);
+    loading: loading || actionLoading,
+    onToggle: toggleEvent => {
+      const isOpen = toggleEvent.newState === "open";
+      if (isOpen) {
+        requestAction(toggleEvent.target, effectiveAction, {
+          event: toggleEvent,
+          method: "run"
+        });
+      } else {
+        effectiveAction.abort();
+      }
+      onToggle?.(toggleEvent);
     },
-    ...rest,
-    children: children
+    children: jsx(ActionRenderer, {
+      action: effectiveAction,
+      children: children
+    })
   });
 });
 
@@ -21678,116 +21834,6 @@ const useCellsAndColumns = (cells, columns) => {
   };
 };
 
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  .navi_tablist {
-    display: flex;
-    overflow-x: auto;
-    overflow-y: hidden;
-    justify-content: space-between;
-  }
-
-  .navi_tablist > ul {
-    align-items: center;
-    display: flex;
-    gap: 0.5rem;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .navi_tablist > ul > li {
-    display: inline-flex;
-    position: relative;
-  }
-
-  .navi_tab {
-    white-space: nowrap;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .navi_tab_content {
-    transition: background 0.12s ease-out;
-    border-radius: 6px;
-    text-decoration: none;
-    line-height: 30px;
-    display: flex;
-    padding: 0 0.5rem;
-  }
-
-  .navi_tab:hover .navi_tab_content {
-    background: #dae0e7;
-    color: #010409;
-  }
-
-  .navi_tab .active_marker {
-    display: flex;
-    background: transparent;
-    border-radius: 0.1px;
-    width: 100%;
-    z-index: 1;
-    height: 2px;
-    margin-top: 5px;
-  }
-
-  /* Hidden bold clone to reserve space for bold width without affecting height */
-  .navi_tab_content_bold_clone {
-    font-weight: 600; /* force bold to compute max width */
-    visibility: hidden; /* not visible */
-    display: block; /* in-flow so it contributes to width */
-    height: 0; /* zero height so it doesn't change layout height */
-    overflow: hidden; /* avoid any accidental height */
-    pointer-events: none; /* inert */
-  }
-
-  .navi_tab[aria-selected="true"] .active_marker {
-    background: rgb(205, 52, 37);
-  }
-
-  .navi_tab[aria-selected="true"] .navi_tab_content {
-    font-weight: 600;
-  }
-`;
-const TabList = ({
-  children,
-  ...props
-}) => {
-  return jsx("nav", {
-    className: "navi_tablist",
-    role: "tablist",
-    ...props,
-    children: jsx("ul", {
-      children: children.map(child => {
-        return jsx("li", {
-          children: child
-        }, child.props.key);
-      })
-    })
-  });
-};
-const Tab = ({
-  children,
-  selected,
-  ...props
-}) => {
-  return jsxs("div", {
-    className: "navi_tab",
-    role: "tab",
-    "aria-selected": selected ? "true" : "false",
-    ...props,
-    children: [jsx("div", {
-      className: "navi_tab_content",
-      children: children
-    }), jsx("div", {
-      className: "navi_tab_content_bold_clone",
-      "aria-hidden": "true",
-      children: children
-    }), jsx("span", {
-      className: "active_marker"
-    })]
-  });
-};
-
 /**
  * Creates a signal that stays synchronized with an external value,
  * only updating the signal when the value actually changes.
@@ -22357,48 +22403,6 @@ const ViewportLayout = props => {
   });
 };
 
-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
-  // it's also possible that front is unsync with backend, preventing user to choose a value
-  // that is actually free.
-  // But this is unlikely to happen and user could reload the page to be able to choose that name
-  // that suddenly became available
-  existingValueSet,
-  message = `"{value}" already exists. Please choose another value.`,
-) => {
-  return {
-    name: "unique_value",
-    check: (input) => {
-      const inputValue = input.value;
-      const hasConflict = existingValueSet.has(inputValue);
-      // console.log({
-      //   inputValue,
-      //   names: Array.from(otherNameSet.values()),
-      //   hasConflict,
-      // });
-      if (hasConflict) {
-        return message.replace("{value}", inputValue);
-      }
-      return "";
-    },
-  };
-};
-
-const SINGLE_SPACE_CONSTRAINT = {
-  name: "single_space",
-  check: (input) => {
-    const inputValue = input.value;
-    const hasLeadingSpace = inputValue.startsWith(" ");
-    const hasTrailingSpace = inputValue.endsWith(" ");
-    const hasDoubleSpace = inputValue.includes("  ");
-    if (hasLeadingSpace || hasDoubleSpace || hasTrailingSpace) {
-      return "Spaces at the beginning, end, or consecutive spaces are not allowed";
-    }
-    return "";
-  },
-};
-
 /*
  * - Usage
  * useEffect(() => {